antd#Typography TypeScript Examples

Header: React.FC = () => {
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const sysRoutes = FilterRoutes(routes);
  const history = createBrowserHistory();

  // 路由监听
  useEffect(() => {
    const pathname = history.location.pathname;
    const match = matchRoutes(sysRoutes, pathname);

    if (match?.length) {
      setOpenKeys(match.map((n) => n.route.path));
      setSelectedKeys([match[0].route.path]);
    }
  }, [history.location.pathname]);

  return (
    <Sider>
      <div className={cls.menu_logo}>
        <Typography.Title className={cls.logo_title} level={5}>
          Logo
        </Typography.Title>
      </div>
      <Menu theme="dark" mode="inline" openKeys={openKeys} selectedKeys={selectedKeys}>
        {sysRoutes.map((item) => (
          <Menu.Item key={item.path}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        ))}
      </Menu>
    </Sider>
  );
}

MainHeader = () => {
  const { Title, Text } = Typography;
  const location = useLocation();

  const isCartedPage: boolean = location.pathname === CART_PATH;

  return (
    <>
      <Row>
        <Col xs={20} sm={12}>
          <NavLink to={PRODUCTS_LIST_PATH}>
            <Title style={titleStyle}>KYU SHOP</Title>
          </NavLink>
        </Col>
        <Col xs={4} sm={12} style={{ textAlign: 'right' }}>
          {isCartedPage ? (
            <NavLinkIconButton
              to={PRODUCTS_LIST_PATH}
              icon="appstore"
              text="상품목록"
            />
          ) : (
            <NavLinkIconButton
              to={CART_PATH}
              icon="shopping-cart"
              text="장바구니"
            />
          )}
        </Col>
      </Row>
    </>
  );
}

QuickPresets: React.FC<BaseProps> = React.memo(({ onChange }) => {
  const { t } = useTranslation(I18nKey);

  const selectPreset = useCallback(
    (e: React.MouseEvent<HTMLElement>) => {
      const { preset = DateParts.NOW } = e.currentTarget.dataset;
      onChange && onChange(`${preset}`);
    },
    [onChange]
  );

  return (
    <>
      <Typography.Text strong>{t("label.preset")}</Typography.Text>
      {Presets.map((p, i) => (
        <div className="ant-ext-sd__presetRow" key={i}>
          {p.map((key) => (
            <Button key={key} data-preset={key} size="small" type="link" onClick={selectPreset}>
              {t(parseDateLabel(key))}
            </Button>
          ))}
        </div>
      ))}
    </>
  );
})

function MenuItemTitle(props: Partial<NoteData> & { menu: DataNode }) {
  const { getNoteUrl } = useDendronRouter();

  return (
    <Typography.Text ellipsis={{ tooltip: props.menu.title }}>
      <Link
        href={getNoteUrl(props.menu.key as string, {
          noteIndex: props.noteIndex!,
        })}
      >
        {props.menu.title}
      </Link>
    </Typography.Text>
  );
}

export function TextCollapse(props: TextCollapseProps): React.ReactElement {
  const [ellipsis, setEllipsis] = useState(true);

  const { Paragraph } = Typography;

  const handleClick = () => {
    setEllipsis(!ellipsis);
  };

  return (
    <div className={styles.main}>
      <Paragraph
        data-testid="main-text"
        ellipsis={ellipsis ? { rows: props.line, expandable: false } : false}
      >
        {props.text}
      </Paragraph>
      <div className={styles.icons} onClick={handleClick} data-testid="icons">
        {ellipsis ? <DownOutlined /> : <UpOutlined />}
      </div>
    </div>
  );
}

RouteNotFound: React.FC = () => {
  useEffect(() => {
    currentPageHeaderStore.setBreadcrumbs("Not found")
  })
  return (
    <div className="flex justify-center pt-12">
      <Card bordered={false}>
        <Card.Meta
          description={
            <>
              This page does not exist. If you got here by clicking a link within Jitsu interface, try to contact us:{" "}
              <Typography.Paragraph copyable={{ tooltips: false }} className="inline">
                {"[email protected]"}
              </Typography.Paragraph>
            </>
          }
          avatar={
            <span className="text-error">
              <ExclamationCircleOutlined />
            </span>
          }
          title={"Page Not Found"}
        />
      </Card>
    </div>
  )
}

EtherscanLink = (props: {
  address: string;
  type: string;
  code?: boolean;
  style?: React.CSSProperties;
  length?: number;
}) => {
  const { type, code } = props;

  const address = props.address;

  if (!address) {
    return null;
  }

  const length = props.length ?? 9;

  return (
    <a
      href={`https://etherscan.io/${type}/${address}`}
      // eslint-disable-next-line react/jsx-no-target-blank
      target="_blank"
      title={address}
      style={props.style}
      rel="noreferrer"
    >
      {code ? (
        <Typography.Text style={props.style} code>
          {shortenAddress(address, length)}
        </Typography.Text>
      ) : (
        shortenAddress(address, length)
      )}
    </a>
  );
}

GroupPanelItem: React.FC<{
  name: string;
  icon: React.ReactNode;
  to: string;
  badge?: boolean;
}> = React.memo((props) => {
  const { icon, name, to, badge } = props;
  const location = useLocation();
  const isActive = location.pathname.startsWith(to);

  return (
    <Link className="block" to={to}>
      <div
        className={clsx(
          'w-full hover:bg-black hover:bg-opacity-20 dark:hover:bg-white dark:hover:bg-opacity-20 cursor-pointer text-gray-900 dark:text-white rounded px-1 h-8 flex items-center text-base group',
          {
            'bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-20': isActive,
          }
        )}
      >
        <div className="flex items-center justify-center px-1 mr-1">{icon}</div>

        <Typography.Text
          className="flex-1 text-gray-900 dark:text-white"
          ellipsis={true}
        >
          {name}
        </Typography.Text>

        {badge === true ? (
          <Badge status="error" />
        ) : (
          <Badge count={Number(badge) || 0} />
        )}
      </div>
    </Link>
  );
})

InfoRow: React.FC<IInfoRowProps> = ({
    row,
}) => {
    return (
        <>
            <Col span={12}>
                <Typography.Text>
                    {row.key}
                </Typography.Text>
            </Col>
            <Col span={12} style={{ textAlign: 'right' }}>
                <Typography.Paragraph style={{ marginBottom: 0 }}>
                    {row.value}
                </Typography.Paragraph>
            </Col>
        </>
    )
}

{ Text } = Typography

{ Text, Title } = Typography

{Paragraph} = Typography

function TextWrapper(props: TextProps): JSX.Element {
    return (
        <Typography.Text style={{ maxWidth: 400 }} {...props}>
            {props.children}
        </Typography.Text>
    )
}

{ Text } = Typography

Border = ({ activePath, label, attribute_name }: BorderProps) => {
  let attributeName = attribute_name || ATTRIBUTE;
  const [isAdvanced, setIsAdvanced] = useState<boolean>(false);

  // CHANGES FOR ADVANCED OPTION UI CHANGE
  // possibility of 'border' be not present, but one-of 'border-left' 'right' 'bottom' 'right' be present
  // change this to 'onMount' nd check.
  const [visible, _path] = useVisibility({ attribute: attributeName, customPath: activePath });

  return visible ? (
    <Form.Item>
      <Row justify="space-between">
        <Col flex="none">
          <Typography.Text>{label ? label : 'Border Control :'}</Typography.Text>
        </Col>
        <Col flex="none">
          <Typography.Text style={{ paddingRight: '8px', fontSize: '12px' }}>Advanced</Typography.Text>
          <Switch size="small" checked={isAdvanced} onChange={() => setIsAdvanced(!isAdvanced)} />
        </Col>
      </Row>

      <Row style={{ paddingTop: '8px' }} gutter={[24, 16]}>
        <Col span={24} style={{ display: !isAdvanced ? 'block' : 'none' }}>
          <Typography.Text style={{ fontSize: '12px' }}>All Directions </Typography.Text>
          <BorderCollection direction={BorderDirection.All} activePath={activePath} />
        </Col>
        <Col span={12} style={{ display: isAdvanced ? 'block' : 'none' }}>
          <Typography.Text style={{ fontSize: '12px' }}>Top</Typography.Text>
          <BorderCollection direction={BorderDirection.Top} activePath={activePath} />
        </Col>

        <Col span={12} style={{ display: isAdvanced ? 'block' : 'none' }}>
          <Typography.Text style={{ fontSize: '12px' }}>Right</Typography.Text>
          <BorderCollection direction={BorderDirection.Right} activePath={activePath} />
        </Col>

        <Col span={12} style={{ display: isAdvanced ? 'block' : 'none' }}>
          <Typography.Text style={{ fontSize: '12px' }}>Left</Typography.Text>
          <BorderCollection direction={BorderDirection.Left} activePath={activePath} />
        </Col>

        <Col span={12} style={{ display: isAdvanced ? 'block' : 'none' }}>
          <Typography.Text style={{ fontSize: '12px' }}>Bottom</Typography.Text>
          <BorderCollection direction={BorderDirection.Bottom} activePath={activePath} />
        </Col>
      </Row>
    </Form.Item>
  ) : null;
}

operation = ({
  optConfig,
  isEditing,
  isAddEdit,
  save,
  isOptDelete,
  cancel,
  onDelete,
  edit,
  newAdd,
  editingKey,
  rowKey,
  multiple,
}: OperationProps): ColumnsProps[] => [
    {
      title: '操作',
      align: 'center',
      width: 120,
      ...optConfig,
      render: (item: any, record: any, index: number) => {
        const editable = isEditing(record);
        const isNewAdd = isAddEdit(record);
        if (optConfig && optConfig.render) {
          return optConfig.render(item, record, index, {
            editable,
            isNewAdd,
            save,
            cancel,
            onDelete,
            edit,
            newAdd,
            editingKey,
          });
        }
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record[rowKey], record, index)}
              style={{ marginRight: 8 }}
            >
              保存
            </Typography.Link>
            <Popconfirm
              title="是否取消当前行编辑?"
              okText="是"
              cancelText="否"
              onConfirm={
                // 如果是新增操作的数据，进行判断 取消时使用删除方法
                isNewAdd
                  ? onDelete.bind(this, record[rowKey], record, index)
                  : cancel.bind(this, record[rowKey])
              }
            >
              <Typography.Link>取消</Typography.Link>
            </Popconfirm>
          </span>
        ) : (
          <Space>
            <Typography.Link
              disabled={!!editingKey.length && !multiple}
              onClick={() => edit(record)}
            >
              编辑
            </Typography.Link>
            {isOptDelete && (
              <Popconfirm
                title="是否删除当前行数据?"
                okText="是"
                cancelText="否"
                onConfirm={() => onDelete(record[rowKey], record, index)}
              >
                <Typography.Link>删除</Typography.Link>
              </Popconfirm>
            )}
          </Space>
        );
      },
    },
  ]

{ Title } = Typography

export default function Config({
  engine,
}: {
  engine: engineSlice.EngineState;
}) {
  const logger = createLogger("Config");
  if (!engine.config) {
    return <></>;
  }

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  return (
    <Formik initialValues={engine.config} onSubmit={() => {}}>
      {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
        <Form {...formItemLayout}>
          <Typography>
            <Title>Publishing </Title>
          </Typography>

          <Form.Item name="siteHierarchies" label="Site Hierarchies">
            <FieldArray
              name="siteHierarchies"
              render={(arrayHelpers) => {
                const publishingConfig = ConfigUtils.getPublishingConfig(
                  values as IntermediateDendronConfig
                );
                return renderArray(
                  publishingConfig.siteHierarchies,
                  arrayHelpers
                );
              }}
            />
          </Form.Item>
          {createFormItem({ name: "site.siteRootDir", label: "Site Root Dir" })}
        </Form>
      )}
    </Formik>
  );
}

{ Text } = Typography

describe("EditableCell", () => {
  it("should work", () => {
    const props = {
      name: "name",
      dataIndex: "name",
      editing: false,
      record: {
        name: "name",
        type: "string",
        description: "名称",
        value: "hello",
      },
      children: <div id="name">hello</div>,
    };
    const wrapper = shallow(<EditableCell {...props} />);
    expect(wrapper.find("div").text()).toEqual("hello");

    wrapper.setProps({
      dataIndex: "value",
      record: {
        name: "name",
        type: "bool",
        value: true,
      },
    });
    wrapper.update();
    expect(wrapper.find(".cellWrapper").text()).toEqual("true");

    wrapper.setProps({
      dataIndex: "value",
      record: {
        name: "sort",
        type: "object",
        value: {
          order: 4,
        },
      },
    });
    wrapper.update();
    expect(wrapper.find(Typography.Link).text()).toEqual("查看");

    wrapper.setProps({
      editing: true,
    });
    wrapper.update();
    expect(wrapper.find("CodeEditorFormItem").length).toEqual(1);
  });
});

{ Title } = Typography

CodePreview: React.FC = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
)

CodePreview: React.FC<{}> = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
)

ErrorCard: FC<ErrorCardProps> = ({
  title,
  icon,
  error,
  description,
  descriptionWithContacts,
  stackTrace,
  className,
  onReload,
}) => {
  if (description === undefined && error !== undefined) {
    description = error.message
  }
  if (stackTrace === undefined && error !== undefined) {
    stackTrace = error.stack
  }
  return (
    <Card bordered={false} className={cn(className, "max-h-full")}>
      <Card.Meta
        avatar={icon || <ExclamationCircleOutlined className={styles.icon} />}
        title={title || "An Error Occured"}
        description={
          <>
            <Fragment key="description">
              {description !== undefined ? (
                description
              ) : (
                <span>
                  {descriptionWithContacts !== undefined ? (
                    <>
                      {descriptionWithContacts}
                      {descriptionWithContacts && <br />}
                    </>
                  ) : (
                    <>
                      {"The application component crashed because of an internal error."}
                      <br />
                    </>
                  )}
                  {"Please, try to reload the page first and if the problem is still present contact us at"}{" "}
                  <Typography.Paragraph copyable={{ tooltips: false }} className="inline">
                    {"[email protected]"}
                  </Typography.Paragraph>{" "}
                  {"and our engineers will fix the problem asap."}
                </span>
              )}
            </Fragment>
            {stackTrace && (
              <Collapse key="stack-trace" bordered={false} className={`mt-2 ${styles.stackTraceCard}`}>
                <Collapse.Panel key={1} header="Error Stack Trace">
                  <div className="overflow-y-auto">
                    <Typography.Paragraph
                      copyable={{
                        text: stackTrace,
                        icon: [<CopyOutlined />, <CheckOutlined />],
                      }}
                      className={`flex flex-row ${styles.errorStackContainer}`}
                    >
                      <pre className="text-xs">{stackTrace}</pre>
                    </Typography.Paragraph>
                  </div>
                </Collapse.Panel>
              </Collapse>
            )}
            {onReload && (
              <div key="reload-button" className="flex justify-center items-center mt-2">
                <Button type="default" onClick={onReload} icon={<ReloadOutlined />}>{`Reload`}</Button>
              </div>
            )}
          </>
        }
      />
    </Card>
  )
}

Text = Typography.Text