@arcblock/ux 2.0.2 → 2.0.5

package/lib/RelativeTime/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RelativeTime;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+require("dayjs/locale/zh-cn");
+
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+
+var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
+
+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", "withoutSuffix", "from", "to"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+_dayjs.default.extend(_localizedFormat.default);
+
+_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,
+    withoutSuffix,
+    from,
+    to
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (!value) {
+    return '-';
+  }
+
+  const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
+  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
+    }),
+    placement: "top-end",
+    enterTouchDelay: 0
+  }, /*#__PURE__*/_react.default.createElement("span", rest, innerContent));
+}
+
+RelativeTime.propTypes = {
+  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 = {
+  locale: 'en',
+  withoutSuffix: false,
+  from: '',
+  to: ''
+};

package/lib/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "Logo", {
     return _Logo.default;
   }
 });
+Object.defineProperty(exports, "RelativeTime", {
+  enumerable: true,
+  get: function get() {
+    return _RelativeTime.default;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
@@ -222,6 +228,8 @@ var _selector = _interopRequireDefault(require("./Locale/selector"));
 
 var _Logo = _interopRequireDefault(require("./Logo"));
 
+var _RelativeTime = _interopRequireDefault(require("./RelativeTime"));
+
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 
 var _Tag = _interopRequireDefault(require("./Tag"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "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.10.6",
     "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": "319d3e6d884b5f79311edca8aab7a9ed17a17b74",
+  "gitHead": "639eab0c9b2030d317a671f2aea6ec47972b6050",
   "dependencies": {
-    "@arcblock/icons": "^2.0.2",
-    "@arcblock/react-hooks": "^2.0.2",
+    "@arcblock/icons": "^2.0.5",
+    "@arcblock/react-hooks": "^2.0.5",
     "@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

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+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, withoutSuffix, from, to, ...rest }) {
+  if (!value) {
+    return '-';
+  }
+
+  const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
+
+  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
+      title={formatToDatetime(value, { locale: localeOption })}
+      placement="top-end"
+      enterTouchDelay={0}>
+      <span {...rest}>{innerContent}</span>
+    </Tooltip>
+  );
+}
+
+RelativeTime.propTypes = {
+  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 = {
+  locale: 'en',
+  withoutSuffix: false,
+  from: '',
+  to: '',
+};

package/src/index.js

@@ -14,6 +14,7 @@ import Footer from './Footer';
 import Icon from './Icon';
 import LocaleSelector from './Locale/selector';
 import Logo from './Logo';
+import RelativeTime from './RelativeTime';
 import Tabs from './Tabs';
 import Tag from './Tag';
 import Terminal from './Terminal';
@@ -48,6 +49,7 @@ export {
   LocaleSelector,
   Logo,
   Tabs,
+  RelativeTime,
   Tag,
   Terminal,
   TerminalPlayer,