feat: [Time] export Time

demo/src/components/LangSwitcher.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import locales from '../../../src/components/LocaleProvider/locales';
+
+interface LangSwitcherProps {
+  value: string;
+  onChange: (lang: string) => void;
+}
+
+export const LangSwitcher = ({ value, onChange }: LangSwitcherProps) => (
+  <select
+    value={value}
+    onChange={(e) => {
+      onChange(e.target.value);
+    }}
+  >
+    {Object.keys(locales).map((t) => (
+      <option value={t} key={t}>
+        {t}
+      </option>
+    ))}
+  </select>
+);

demo/src/components/index.ts

@@ -1,2 +1,3 @@
 export { DemoPage } from './DemoPage';
 export { DemoSection } from './DemoSection';
+export { LangSwitcher } from './LangSwitcher';

demo/src/demo/Time.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { DemoPage, DemoSection, LangSwitcher } from '../components';
+import { Time, LocaleProvider } from '../../../src';
+import '../../../src/styles/index.less';
+
+const now = Date.now();
+const MS_A_DAY = 24 * 60 * 60 * 1000;
+const MS_A_WEEK = MS_A_DAY * 7;
+
+export default () => {
+  const [lang, setLang] = useState('zh-CN');
+
+  return (
+    <DemoPage>
+      <DemoSection title="基础用法">
+        <LangSwitcher value={lang} onChange={setLang} />
+        <LocaleProvider locale={lang}>
+          <p>
+            <span>现在：</span>
+            <Time date={now} />
+          </p>
+          <p>
+            <span>刚才：</span>
+            <Time date={now - 120000} />
+          </p>
+          <p>
+            <span>昨天：</span>
+            <Time date={now - MS_A_DAY} />
+          </p>
+          <p>
+            <span>前天：</span>
+            <Time date={now - MS_A_DAY * 2} />
+          </p>
+          <p>
+            <span>上上周：</span>
+            <Time date={now - MS_A_WEEK * 2} />
+          </p>
+        </LocaleProvider>
+      </DemoSection>
+    </DemoPage>
+  );
+};

demo/src/demo/index.ts

@@ -35,6 +35,7 @@ export { default as Stepper } from './Stepper';
 export { default as Tabs } from './Tabs';
 export { default as Tag } from './Tag';
 export { default as Text } from './Text';
+export { default as Time } from './Time';
 export { default as Toast } from './Toast';
 export { default as Video } from './Video';
 export { default as VisuallyHidden } from './VisuallyHidden';

demo/src/navConfig.ts

@@ -44,6 +44,7 @@ export const navConfig = [
       { name: '标签页', code: 'tabs' },
       { name: '标签', code: 'tag' },
       { name: '文本', code: 'text' },
+      { name: '时间', code: 'time' },
       { name: '视频', code: 'video' },
       { name: '媒体对象（废弃）', code: 'media-object' },
     ],

src/components/Time/Time.tsx

@@ -14,4 +14,4 @@ export const Time: React.FC<TimeProps> = ({ date }) => {
       {formatDate(date, trans())}
     </time>
   );
-  }
+};

src/components/Time/index.ts

@@ -1 +1,2 @@
 export { Time } from './Time';
+export type { TimeProps } from './Time';

src/components/Time/parser.ts

@@ -35,9 +35,11 @@ const getFormat = (date: Date) => {
 
   if (diff < 0) {
     return 'LT'; // 今天
-  } else if (diff < MS_A_DAY) {
+  }
+  if (diff < MS_A_DAY) {
     return 'YT'; // 昨天
-  } else if (diff < MS_A_WEEK) {
+  }
+  if (diff < MS_A_WEEK) {
     return 'WT'; // 这周
   }
   return 'lll';

src/index.ts

@@ -108,6 +108,8 @@ export { Tag } from './components/Tag';
 export type { TagProps } from './components/Tag';
 export { Text } from './components/Text';
 export type { TextProps } from './components/Text';
+export { Time } from './components/Time';
+export type { TimeProps } from './components/Time';
 export { toast } from './components/Toast';
 export { Toolbar } from './components/Toolbar';
 export type { ToolbarProps, ToolbarItemProps } from './components/Toolbar';