Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

antd Paragraph展开可收起组件封装

antd Paragraph可以提供展开的功能,以下在其基础封装一个展开后可以收起的组件

import React, { ReactNode, useState, useEffect } from 'react';
import { Typography, Tooltip } from 'antd';
import { ParagraphProps } from 'antd/lib/typography/Paragraph';

export interface ILabelValueProps {
  label?: ReactNode;
  value: ReactNode;
  valueConfig?: ParagraphProps;
  colon?: boolean;
  tooltip?: boolean;
}
type Props = ILabelValueProps;

const { Paragraph } = Typography;

export function LabelValue(props: Readonly<Props>) {
  const { label, value, colon, tooltip, valueConfig } = props;
  const rows = tooltip ? 1 : 3;
  const [key, setKey] = useState(0);
  const [fold, setFold] = useState(true);
  const onExpand = () => {
    setFold(false);
  };
  const onCollapse = () => {
    setFold(true);
    setKey(key + 1);
  };
  return (
    <>
      <div key={key}>
        <Paragraph
          ellipsis={{
            rows,
            expandable: !tooltip,
            onExpand: onExpand
          }}
          {...valueConfig}
        >
          {value}
          {!fold && (
            <span className="value-collapse" onClick={onCollapse}>
              收起
            </span>
          )}
        </Paragraph>
      </div>
    </>
  );
}

export default LabelValue;
posted @ 2021-08-03 18:55  365/24/60  阅读(482)  评论(0编辑  收藏  举报