From 86d249749af9362c77ff0b9d9807effad86b69fd Mon Sep 17 00:00:00 2001 From: Jandiasnow <88074479@qq.com> Date: Mon, 15 Apr 2024 17:30:47 +0800 Subject: [PATCH] feat: add Typography component --- package.json | 1 + pnpm-lock.yaml | 15 ++-- src/Typography/demos/Playground.tsx | 20 ++++++ src/Typography/demos/index.tsx | 43 ++++++++++++ src/Typography/index.md | 44 ++++++++++++ src/Typography/index.tsx | 103 ++++++++++++++++++++++++++++ src/index.ts | 3 +- 7 files changed, 221 insertions(+), 8 deletions(-) create mode 100644 src/Typography/demos/Playground.tsx create mode 100644 src/Typography/demos/index.tsx create mode 100644 src/Typography/index.md create mode 100644 src/Typography/index.tsx diff --git a/package.json b/package.json index 23d95af..a774c64 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "@ant-design/icons": "^5", "@babel/runtime": "^7", "@lobehub/ui": "^1", + "dayjs": "^1.11.10", "leva": "^0", "lodash-es": "^4", "lucide-react": "latest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d9202a3..545742b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: '@lobehub/ui': specifier: ^1 version: 1.132.2(@types/react-dom@18.2.18)(@types/react@18.2.40)(antd-style@3.6.1)(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0) + dayjs: + specifier: ^1.11.10 + version: 1.11.10 leva: specifier: ^0 version: 0.9.35(@types/react-dom@18.2.18)(@types/react@18.2.40)(react-dom@18.2.0)(react@18.2.0) @@ -2543,8 +2546,8 @@ packages: - supports-color dev: false - /@lobehub/ui@1.138.1(@types/react-dom@18.2.18)(@types/react@18.2.40)(antd-style@3.6.1)(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-xnmdeZe0jir/onbWBTTlxheOYocyouCYatgI71E7PbLITMnV30KooQoZJiHFgTDVS0A6bI4TVi9Ud4bRhOe8Kg==} + /@lobehub/ui@1.138.2(@types/react-dom@18.2.18)(@types/react@18.2.40)(antd-style@3.6.1)(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-7iLcar5iq9fun54VphQOgZ/knDfl9teIjRcFwiMgsCNl3IYYezFY9T72SqjssMCs9szB7V9zoFgQ9n1KQY8WCg==} peerDependencies: antd: '>=5.13.0' antd-style: '>=3' @@ -2578,7 +2581,7 @@ packages: immer: 10.0.4 leva: 0.9.35(@types/react-dom@18.2.18)(@types/react@18.2.40)(react-dom@18.2.0)(react@18.2.0) lodash-es: 4.17.21 - lucide-react: 0.367.0(react@18.2.0) + lucide-react: 0.368.0(react@18.2.0) polished: 4.3.1 prism-react-renderer: 2.3.1(react@18.2.0) query-string: 9.0.0 @@ -8075,7 +8078,7 @@ packages: dependencies: '@floating-ui/react': 0.26.4(react-dom@18.2.0)(react@18.2.0) '@giscus/react': 2.4.0(react-dom@18.2.0)(react@18.2.0) - '@lobehub/ui': 1.138.1(@types/react-dom@18.2.18)(@types/react@18.2.40)(antd-style@3.6.1)(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0) + '@lobehub/ui': 1.138.2(@types/react-dom@18.2.18)(@types/react@18.2.40)(antd-style@3.6.1)(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0) ahooks: 3.7.8(react@18.2.0) antd: 5.16.1(react-dom@18.2.0)(react@18.2.0) antd-style: 3.6.1(@types/react@18.2.40)(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0) @@ -12683,8 +12686,8 @@ packages: react: 18.2.0 dev: false - /lucide-react@0.367.0(react@18.2.0): - resolution: {integrity: sha512-3FWiBaJiqMrx5a1sjH3CVdPqWnw/Z/PTVeeTDmOeILSs+8Ah+VhCd4FQMeHo6Z0WxHcm9piIOtilQwvceiCCKQ==} + /lucide-react@0.368.0(react@18.2.0): + resolution: {integrity: sha512-soryVrCjheZs8rbXKdINw9B8iPi5OajBJZMJ1HORig89ljcOcEokKKAgGbg3QWxSXel7JwHOfDFUdDHAKyUAMw==} peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 dependencies: diff --git a/src/Typography/demos/Playground.tsx b/src/Typography/demos/Playground.tsx new file mode 100644 index 0000000..a14d9a8 --- /dev/null +++ b/src/Typography/demos/Playground.tsx @@ -0,0 +1,20 @@ +import { StoryBook, useControls, useCreateStore } from '@lobehub/ui'; +import type { TypographyProps } from '@yuntijs/ui'; +import { Typography } from '@yuntijs/ui'; + +export default () => { + const store = useCreateStore(); + const control: TypographyProps | any = useControls( + { + time: '2024-04-15', + format: 'YYYY-MM-DD hh:mm:ss', + relativeTime: true, + }, + { store } + ); + return ( + + + + ); +}; diff --git a/src/Typography/demos/index.tsx b/src/Typography/demos/index.tsx new file mode 100644 index 0000000..a7aebb6 --- /dev/null +++ b/src/Typography/demos/index.tsx @@ -0,0 +1,43 @@ +import { Space, Typography } from '@yuntijs/ui'; + +export default () => { + return ( + + Link + Text + Title + + Paragraph:The YuntiUI components are inspired by LobeUI and developed based on Antd + components, fully compatible with Antd components, and it is recommended to use antd-style + as the default css-in-js styling solution. + + + + + + + + + ); +}; diff --git a/src/Typography/index.md b/src/Typography/index.md new file mode 100644 index 0000000..63693bc --- /dev/null +++ b/src/Typography/index.md @@ -0,0 +1,44 @@ +--- +nav: Components +group: General +title: Typography +description: Basic text writing, including headings, body text, lists, and more. +--- + +## Usage + +based on antd [Typography](https://ant.design/components/typography-cn/) component. + +### Simple usage + +```jsx | pure +import { Space, Typography } from '@yuntijs/ui'; + +export default () => { + return ( + + Link + Text + Title + + Paragraph:The YuntiUI components are inspired by LobeUI and developed based on Antd + components, fully compatible with Antd components, and it is recommended to use antd-style + as the default css-in-js styling solution. + + + + + + ); +}; +``` + + + +## Playground + + + +## APIs + + diff --git a/src/Typography/index.tsx b/src/Typography/index.tsx new file mode 100644 index 0000000..a883c4f --- /dev/null +++ b/src/Typography/index.tsx @@ -0,0 +1,103 @@ +import { Typography as AntdTypography, Tooltip } from 'antd'; +import { TextProps } from 'antd/es/typography/Text'; +import { TooltipPropsWithTitle } from 'antd/lib/tooltip'; +import dayjs from 'dayjs'; +import dayjsRelativeTime from 'dayjs/plugin/relativeTime'; +import { set } from 'lodash-es'; +import React, { useEffect, useState } from 'react'; + +dayjs.extend(dayjsRelativeTime); + +export const Typography = AntdTypography as TypographyProps; + +interface TimeProps extends TextProps { + /** + * @description Set display time + * @default '-' + */ + time: string; + /** + * @description Formatted display time + * @default 'YYYY-MM-DD HH:mm:ss' + */ + format?: string; + /** + * @description Display relative time + * @default 'true' + */ + relativeTime?: boolean; + /** + * @description Mouse above to show time + * @default '{title: "YYYY-MM-DD HH:mm:ss"}' + */ + tooltip?: TooltipPropsWithTitle; +} +const getFromNow = (t: any) => dayjs(t ? new Date(t) : new Date()).fromNow(); +const Time: React.FC = props => { + const { time, format, relativeTime = true, tooltip, ...textProps } = props; + const [showTime, setShowTime] = useState(getFromNow(time)); + const [timer, setTimer] = useState(); + + const clearTimer = () => { + if (timer) { + clearInterval(timer); + } + }; + + // The relative time within the last hour is updated automatically + const setTimeInterval = (currentTime: dayjs.ConfigType) => { + clearTimer(); + const now = dayjs(); + const timeMoment = dayjs(currentTime); + const diff = now.diff(timeMoment); + if (diff > 0 && diff < 60 * 60 * 1000) { + const t = setInterval(() => { + setShowTime(getFromNow(currentTime)); + }, 60 * 1000); + setTimer(t); + } + }; + + useEffect(() => { + if (relativeTime) { + setTimeInterval(new Date(time)); + } + return () => { + clearTimer(); + }; + }, []); + + useEffect(() => { + if (!relativeTime) return; + const nextFromNow = getFromNow(time); + if (nextFromNow !== showTime) { + setShowTime(nextFromNow); + setTimeInterval(new Date(time)); + } + }, [time, relativeTime]); + + const fmtTime = dayjs(time).format(format || 'YYYY-MM-DD HH:mm:ss'); + + const currentTime = relativeTime ? showTime : fmtTime; + + const tooltipTitle = tooltip?.title ?? (relativeTime ? fmtTime : undefined); + + // Avoid duplicate tooltips + if (tooltipTitle) { + set(textProps, 'ellipsis.tooltip.title', undefined); + } + + return ( + + {currentTime} + + ); +}; + +export type TypographyProps = typeof AntdTypography & { + Time: typeof Time; +}; + +Typography.Time = Time; + +export default Typography; diff --git a/src/index.ts b/src/index.ts index 2108405..7a0eb7e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -16,6 +16,7 @@ export * from './Modal'; export * from './notification'; export * from './Radio'; export * from './Table'; +export * from './Typography'; // ~ antd export { @@ -153,8 +154,6 @@ export { type TreeProps, TreeSelect, type TreeSelectProps, - Typography, - type TypographyProps, Upload, type UploadFile, type UploadProps,