@yuntijs/ui 1.0.0-beta.17 → 1.0.0-beta.18

package/es/Typography/index.d.ts

@@ -0,0 +1,32 @@
+import { Typography as AntdTypography } from 'antd';
+import { TextProps } from 'antd/es/typography/Text';
+import { TooltipPropsWithTitle } from 'antd/lib/tooltip';
+import React from 'react';
+export declare const Typography: 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;
+}
+declare const Time: React.FC<TimeProps>;
+export type TypographyProps = typeof AntdTypography & {
+    Time: typeof Time;
+};
+export default Typography;

package/es/Typography/index.js

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["time", "format", "relativeTime", "tooltip"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Typography as AntdTypography, Tooltip } from 'antd';
+import dayjs from 'dayjs';
+import dayjsRelativeTime from 'dayjs/plugin/relativeTime';
+import { set } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+dayjs.extend(dayjsRelativeTime);
+export var Typography = AntdTypography;
+var getFromNow = function getFromNow(t) {
+  return dayjs(t ? new Date(t) : new Date()).fromNow();
+};
+var Time = function Time(props) {
+  var _tooltip$title;
+  var time = props.time,
+    format = props.format,
+    _props$relativeTime = props.relativeTime,
+    relativeTime = _props$relativeTime === void 0 ? true : _props$relativeTime,
+    tooltip = props.tooltip,
+    textProps = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(getFromNow(time)),
+    _useState2 = _slicedToArray(_useState, 2),
+    showTime = _useState2[0],
+    setShowTime = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    timer = _useState4[0],
+    setTimer = _useState4[1];
+  var clearTimer = function clearTimer() {
+    if (timer) {
+      clearInterval(timer);
+    }
+  };
+
+  // The relative time within the last hour is updated automatically
+  var setTimeInterval = function setTimeInterval(currentTime) {
+    clearTimer();
+    var now = dayjs();
+    var timeMoment = dayjs(currentTime);
+    var diff = now.diff(timeMoment);
+    if (diff > 0 && diff < 60 * 60 * 1000) {
+      var t = setInterval(function () {
+        setShowTime(getFromNow(currentTime));
+      }, 60 * 1000);
+      setTimer(t);
+    }
+  };
+  useEffect(function () {
+    if (relativeTime) {
+      setTimeInterval(new Date(time));
+    }
+    return function () {
+      clearTimer();
+    };
+  }, []);
+  useEffect(function () {
+    if (!relativeTime) return;
+    var nextFromNow = getFromNow(time);
+    if (nextFromNow !== showTime) {
+      setShowTime(nextFromNow);
+      setTimeInterval(new Date(time));
+    }
+  }, [time, relativeTime]);
+  var fmtTime = dayjs(time).format(format || 'YYYY-MM-DD HH:mm:ss');
+  var currentTime = relativeTime ? showTime : fmtTime;
+  var tooltipTitle = (_tooltip$title = tooltip === null || tooltip === void 0 ? void 0 : tooltip.title) !== null && _tooltip$title !== void 0 ? _tooltip$title : relativeTime ? fmtTime : undefined;
+
+  // Avoid duplicate tooltips
+  if (tooltipTitle) {
+    set(textProps, 'ellipsis.tooltip.title', undefined);
+  }
+  return /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltip || {}), {}, {
+    title: tooltipTitle,
+    children: /*#__PURE__*/_jsx(Typography.Text, _objectSpread(_objectSpread({}, textProps), {}, {
+      children: currentTime
+    }))
+  }));
+};
+Typography.Time = Time;
+export default Typography;

package/es/index.d.ts

@@ -15,9 +15,10 @@ export * from './Modal';
 export * from './notification';
 export * from './Radio';
 export * from './Table';
+export * from './Typography';
 export { Affix, type AffixProps, Anchor, type AnchorProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, // @todo composed type
 type BadgeProps, Button, // @todo dependence unifiedLink. link type, hover primary color, back button
 type ButtonProps, Calendar, type CalendarProps, Carousel, type CarouselProps, Cascader, type CascaderProps, Checkbox, type CheckboxProps, Col, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColProps, // @todo center style
-type CountdownProps, DatePicker, type DatePickerProps, Dropdown, type DropDownProps, Empty, type EmptyProps, Flex, type FlexProps, FloatButton, type FloatButtonProps, Form, type FormInstance, type FormItemProps, type FormListFieldData, type FormListOperation, type FormProps, type FormRule, type GlobalToken, Grid, Image, type ImageProps, Input, InputNumber, type InputNumberProps, type InputProps, type InputRef, Layout, type LayoutProps, List, type ListProps, type MappingAlgorithm, type MentionProps, Mentions, Menu, type MenuItemProps, type MenuProps, type MenuRef, type MenuTheme, message, type MessageArgsProps, Pagination, type PaginationProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, type QRPropsCanvas, type QRPropsSvg, Rate, type RateProps, type RefSelectProps, Result, type ResultProps, Row, type RowProps, Segmented, type SegmentedProps, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderSingleProps, Space, type SpaceProps, Spin, type SpinProps, Statistic, type StatisticProps, type StepProps, Steps, type StepsProps, type SubMenuProps, Switch, type SwitchProps, type TabPaneProps, Tabs, type TabsProps, Tag, type TagProps, type TagType, theme, Timeline, type TimelineItemProps, type TimelineProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, Tooltip, type TooltipProps, Tour, type TourProps, type TourStepProps, Transfer, type TransferProps, Tree, type TreeDataNode, type TreeNodeProps, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyProps, Upload, type UploadFile, type UploadProps, version, Watermark, type WatermarkProps, } from 'antd';
+type CountdownProps, DatePicker, type DatePickerProps, Dropdown, type DropDownProps, Empty, type EmptyProps, Flex, type FlexProps, FloatButton, type FloatButtonProps, Form, type FormInstance, type FormItemProps, type FormListFieldData, type FormListOperation, type FormProps, type FormRule, type GlobalToken, Grid, Image, type ImageProps, Input, InputNumber, type InputNumberProps, type InputProps, type InputRef, Layout, type LayoutProps, List, type ListProps, type MappingAlgorithm, type MentionProps, Mentions, Menu, type MenuItemProps, type MenuProps, type MenuRef, type MenuTheme, message, type MessageArgsProps, Pagination, type PaginationProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, type QRPropsCanvas, type QRPropsSvg, Rate, type RateProps, type RefSelectProps, Result, type ResultProps, Row, type RowProps, Segmented, type SegmentedProps, Select, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderSingleProps, Space, type SpaceProps, Spin, type SpinProps, Statistic, type StatisticProps, type StepProps, Steps, type StepsProps, type SubMenuProps, Switch, type SwitchProps, type TabPaneProps, Tabs, type TabsProps, Tag, type TagProps, type TagType, theme, Timeline, type TimelineItemProps, type TimelineProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, Tooltip, type TooltipProps, Tour, type TourProps, type TourStepProps, Transfer, type TransferProps, Tree, type TreeDataNode, type TreeNodeProps, type TreeProps, TreeSelect, type TreeSelectProps, Upload, type UploadFile, type UploadProps, version, Watermark, type WatermarkProps, } from 'antd';
 export { Highlighter, type HighlighterProps, Markdown, type MarkdownProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from '@lobehub/ui';
 export { useResponsive, useTheme, useThemeMode } from 'antd-style';

package/es/index.js

@@ -17,6 +17,7 @@ export * from "./Modal";
 export * from "./notification";
 export * from "./Radio";
 export * from "./Table";
+export * from "./Typography";
 
 // ~ antd
 export { Affix, Anchor, AutoComplete, Avatar, BackTop, Badge // @todo composed type
@@ -24,7 +25,7 @@ export { Affix, Anchor, AutoComplete, Avatar, BackTop, Badge // @todo composed t
 , Calendar, Carousel, Cascader, Checkbox, Col, Collapse, ColorPicker
 
 // @todo center style
-, DatePicker, Dropdown, Empty, Flex, FloatButton, Form, Grid, Image, Input, InputNumber, Layout, List, Mentions, Menu, message, Pagination, Popconfirm, Popover, Progress, QRCode, Rate, Result, Row, Segmented, Select, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Tabs, Tag, theme, Timeline, TimePicker, Tooltip, Tour, Transfer, Tree, TreeSelect, Typography, Upload, version, Watermark } from 'antd';
+, DatePicker, Dropdown, Empty, Flex, FloatButton, Form, Grid, Image, Input, InputNumber, Layout, List, Mentions, Menu, message, Pagination, Popconfirm, Popover, Progress, QRCode, Rate, Result, Row, Segmented, Select, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Tabs, Tag, theme, Timeline, TimePicker, Tooltip, Tour, Transfer, Tree, TreeSelect, Upload, version, Watermark } from 'antd';
 
 // ~ @lobehub/ui
 export { Highlighter, Markdown, SyntaxHighlighter } from '@lobehub/ui';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",
@@ -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",