@arcblock/ux 2.0.4 → 2.0.7

package/lib/RelativeTime/index.js

@@ -23,9 +23,11 @@ var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
 
 var _timezone = _interopRequireDefault(require("dayjs/plugin/timezone"));
 
+var _updateLocale = _interopRequireDefault(require("dayjs/plugin/updateLocale"));
+
 var _Util = require("../Util");
 
-const _excluded = ["value", "locale"];
+const _excluded = ["value", "locale", "withoutSuffix", "from", "to"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,14 +41,38 @@ _dayjs.default.extend(_utc.default);
 
 _dayjs.default.extend(_timezone.default);
 
+_dayjs.default.extend(_updateLocale.default);
+
 _dayjs.default.extend(_relativeTime.default);
 
+_dayjs.default.updateLocale('zh-cn', {
+  // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
+  relativeTime: {
+    future: '%s后',
+    past: '%s前',
+    s: '几秒',
+    m: '1 分钟',
+    mm: '%d 分钟',
+    h: '1 小时',
+    hh: '%d 小时',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 个月',
+    MM: '%d 个月',
+    y: '1 年',
+    yy: '%d 年'
+  }
+});
+
 (0, _Util.setDateTool)(_dayjs.default);
 
 function RelativeTime(_ref) {
   let {
     value,
-    locale
+    locale,
+    withoutSuffix,
+    from,
+    to
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -55,7 +81,16 @@ function RelativeTime(_ref) {
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
-  const innerContent = (0, _dayjs.default)().locale(localeOption).to(value);
+  let innerContent;
+
+  if (from) {
+    innerContent = (0, _dayjs.default)(value).locale(localeOption).from(from, withoutSuffix);
+  } else if (to) {
+    innerContent = (0, _dayjs.default)(value).locale(localeOption).to(to, withoutSuffix);
+  } else {
+    innerContent = (0, _dayjs.default)(value).locale(localeOption).fromNow(withoutSuffix);
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: (0, _Util.formatToDatetime)(value, {
       locale: localeOption
@@ -66,10 +101,15 @@ function RelativeTime(_ref) {
 }
 
 RelativeTime.propTypes = {
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  locale: _propTypes.default.string
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  locale: _propTypes.default.string,
+  withoutSuffix: _propTypes.default.bool,
+  from: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
 };
 RelativeTime.defaultProps = {
-  value: '',
-  locale: 'en'
+  locale: 'en',
+  withoutSuffix: false,
+  from: '',
+  to: ''
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.0.4",
+  "version": "2.0.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -43,7 +43,6 @@
     "@babel/preset-react": "^7.8.3",
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-styled-components": "^1.10.7",
-    "dayjs": "^1.11.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0",
     "moment-timezone": "^0.5.33"
@@ -53,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "1e32c65bb4114f310ebbabd65632caa0c5f24c76",
+  "gitHead": "f5be0b3d27f13a1ffe3938a2b21344af6fff7712",
   "dependencies": {
-    "@arcblock/icons": "^2.0.4",
-    "@arcblock/react-hooks": "^2.0.4",
+    "@arcblock/icons": "^2.0.7",
+    "@arcblock/react-hooks": "^2.0.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -69,6 +68,7 @@
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.6.4",
     "d3-geo": "^1.11.6",
+    "dayjs": "^1.11.2",
     "devices.css": "^0.1.15",
     "highlight.js": "^9.15.8",
     "is-svg": "^4.3.1",

package/src/RelativeTime/index.js

@@ -7,22 +7,50 @@ import Tooltip from '@mui/material/Tooltip';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import updateLocale from 'dayjs/plugin/updateLocale';
 import { formatToDatetime, setDateTool } from '../Util';
 
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
+dayjs.updateLocale('zh-cn', {
+  // copy with https://github.com/iamkun/dayjs/blob/dev/src/locale/zh-cn.js
+  relativeTime: {
+    future: '%s后',
+    past: '%s前',
+    s: '几秒',
+    m: '1 分钟',
+    mm: '%d 分钟',
+    h: '1 小时',
+    hh: '%d 小时',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 个月',
+    MM: '%d 个月',
+    y: '1 年',
+    yy: '%d 年',
+  },
+});
 setDateTool(dayjs);
 
-export default function RelativeTime({ value, locale, ...rest }) {
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, ...rest }) {
   if (!value) {
     return '-';
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
 
-  const innerContent = dayjs().locale(localeOption).to(value);
+  let innerContent;
+
+  if (from) {
+    innerContent = dayjs(value).locale(localeOption).from(from, withoutSuffix);
+  } else if (to) {
+    innerContent = dayjs(value).locale(localeOption).to(to, withoutSuffix);
+  } else {
+    innerContent = dayjs(value).locale(localeOption).fromNow(withoutSuffix);
+  }
 
   return (
     <Tooltip
@@ -35,11 +63,16 @@ export default function RelativeTime({ value, locale, ...rest }) {
 }
 
 RelativeTime.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   locale: PropTypes.string,
+  withoutSuffix: PropTypes.bool,
+  from: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 RelativeTime.defaultProps = {
-  value: '',
   locale: 'en',
+  withoutSuffix: false,
+  from: '',
+  to: '',
 };