dtable-ui-component 6.0.23 → 6.0.24-beta.0

package/es/AutoNumberFormatter/index.css

@@ -0,0 +1 @@
+@import url('../css/cell-formatter.css');

package/lib/DateEditor/mb-date-editor-popover/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _datePicker = _interopRequireDefault(require("antd-mobile/lib/date-picker"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var SeaDatePicker = _interopRequireWildcard(require("@seafile/seafile-calendar/lib/Picker"));
+var _datePicker = _interopRequireDefault(require("../../date-picker"));
 var _lang = require("../../lang");
 var _editorUtils = require("../../utils/editor-utils");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));

package/lib/date-picker/_util/getLocale.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getComponentLocale = getComponentLocale;
+exports.getLocaleCode = getLocaleCode;
+function getComponentLocale(props, context, componentName, getDefaultLocale) {
+  let locale = {};
+  if (context && context.antLocale && context.antLocale[componentName]) {
+    locale = context.antLocale[componentName];
+  } else {
+    const defaultLocale = getDefaultLocale();
+    // TODO: make default lang of antd be English
+    // https://github.com/ant-design/ant-design/issues/6334
+    locale = defaultLocale.default || defaultLocale;
+  }
+  let result = Object.assign({}, locale);
+  if (props.locale) {
+    result = Object.assign(Object.assign({}, result), props.locale);
+    if (props.locale.lang) {
+      result.lang = Object.assign(Object.assign({}, locale.lang), props.locale.lang);
+    }
+  }
+  return result;
+}
+function getLocaleCode(context) {
+  const localeCode = context.antLocale && context.antLocale.locale;
+  // Had use LocaleProvide but didn't set locale
+  if (context.antLocale && context.antLocale.exist && !localeCode) {
+    return 'zh-cn';
+  }
+  return localeCode;
+}

package/lib/date-picker/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _DatePicker2 = _interopRequireDefault(require("rmc-date-picker/lib/DatePicker"));
+var _Popup = _interopRequireDefault(require("rmc-date-picker/lib/Popup"));
+var _getLocale = require("./_util/getLocale");
+var _utils = require("./utils");
+require("./style/index.css");
+/* tslint:disable:jsx-no-multiline-js */
+
+class DatePicker extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.setScrollValue = v => {
+      this.scrollValue = v;
+    };
+    this.onOk = v => {
+      if (this.scrollValue !== undefined) {
+        v = this.scrollValue;
+      }
+      if (this.props.onChange) {
+        this.props.onChange(v);
+      }
+      if (this.props.onOk) {
+        this.props.onOk(v);
+      }
+    };
+    this.onVisibleChange = visible => {
+      this.scrollValue = undefined;
+      if (this.props.onVisibleChange) {
+        this.props.onVisibleChange(visible);
+      }
+    };
+    this.fixOnOk = picker => {
+      if (picker) {
+        picker.onOk = this.onOk;
+      }
+    };
+  }
+  render() {
+    // tslint:disable-next-line:no-this-assignment
+    const {
+      props,
+      context
+    } = this;
+    const {
+      children,
+      value,
+      popupPrefixCls
+    } = props;
+    const locale = (0, _getLocale.getComponentLocale)(props, context, 'DatePicker', () => require('./locale/zh_CN'));
+    const {
+      okText,
+      dismissText,
+      extra,
+      DatePickerLocale
+    } = locale;
+    /**
+     * 注意:
+     * 受控 表示 通过设置 value 属性、组件的最终状态跟 value 设置值一致。
+     * 默认不设置 value 或 只设置 defaultValue 表示非受控。
+     *
+     * DatePickerView 对外通过 value “只支持 受控” 模式（可以使用 defaultDate 支持 非受控 模式，但不对外）
+     * PickerView 对外通过 value “只支持 受控” 模式
+     *
+     * DatePicker / Picker 对外只有 value 属性 (没有 defaultValue)，
+     * 其中 List 展示部分 “只支持 受控” 模式，
+     * 弹出的 选择器部分 会随外部 value 改变而变、同时能自由滚动
+     * （即不会因为传入的 value 不变而不能滚动 (不像原生 input 的受控行为)）
+     *
+     */
+    const datePicker = /*#__PURE__*/React.createElement(_DatePicker2.default, {
+      minuteStep: props.minuteStep,
+      locale: DatePickerLocale,
+      minDate: props.minDate,
+      maxDate: props.maxDate,
+      mode: props.mode,
+      pickerPrefixCls: props.pickerPrefixCls,
+      prefixCls: props.prefixCls,
+      defaultDate: value || new Date(),
+      use12Hours: props.use12Hours,
+      onValueChange: props.onValueChange,
+      onScrollChange: this.setScrollValue
+    });
+    return /*#__PURE__*/React.createElement(_Popup.default, Object.assign({
+      datePicker: datePicker,
+      WrapComponent: 'div',
+      transitionName: 'am-slide-up',
+      maskTransitionName: 'am-fade'
+    }, props, {
+      prefixCls: popupPrefixCls,
+      date: value || new Date(),
+      dismissText: this.props.dismissText || dismissText,
+      okText: this.props.okText || okText,
+      ref: this.fixOnOk,
+      onVisibleChange: this.onVisibleChange
+    }), children && /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, {
+      extra: value ? (0, _utils.formatFn)(this, value) : this.props.extra || extra
+    }));
+  }
+}
+DatePicker.defaultProps = {
+  mode: 'datetime',
+  prefixCls: 'am-picker',
+  pickerPrefixCls: 'am-picker-col',
+  popupPrefixCls: 'am-picker-popup',
+  minuteStep: 1,
+  use12Hours: false
+};
+DatePicker.contextTypes = {
+  antLocale: PropTypes.object
+};
+var _default = exports.default = DatePicker;

package/lib/date-picker/locale/en_US.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _en_US = _interopRequireDefault(require("rmc-date-picker/lib/locale/en_US"));
+var _default = exports.default = {
+  okText: 'OK',
+  dismissText: 'Cancel',
+  extra: 'please select',
+  DatePickerLocale: _en_US.default
+};

package/lib/date-picker/locale/ru_RU.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _en_US = _interopRequireDefault(require("rmc-date-picker/lib/locale/en_US"));
+var _default = exports.default = {
+  okText: 'Ок',
+  dismissText: 'Отмена',
+  extra: '',
+  DatePickerLocale: _en_US.default
+};

package/lib/date-picker/locale/sv_SE.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _en_US = _interopRequireDefault(require("rmc-date-picker/lib/locale/en_US"));
+var _default = exports.default = {
+  okText: 'Ok',
+  dismissText: 'Avbryt',
+  extra: 'vänligen välj',
+  DatePickerLocale: _en_US.default
+};

package/lib/date-picker/locale/zh_CN.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _zh_CN = _interopRequireDefault(require("rmc-date-picker/lib/locale/zh_CN"));
+var _default = exports.default = {
+  okText: '确定',
+  dismissText: '取消',
+  extra: '请选择',
+  DatePickerLocale: _zh_CN.default
+};

package/lib/date-picker/style/index.css

@@ -0,0 +1,290 @@
+.am-picker-popup {
+  left: 0;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+  background-color: #fff;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.am-picker-popup-wrap {
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+  -webkit-transform: translateZ(1px);
+  transform: translateZ(1px);
+}
+
+.am-picker-popup-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 100%;
+  z-index: 1000;
+  -webkit-transform: translateZ(1px);
+  transform: translateZ(1px);
+}
+
+.am-picker-popup-mask-hidden {
+  display: none;
+}
+
+.am-picker-popup-header {
+  background-image: -webkit-linear-gradient(top, #e7e7e7, #e7e7e7, transparent, transparent);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), color-stop(#e7e7e7), color-stop(transparent), to(transparent));
+  background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent);
+  background-position: bottom;
+  background-size: 100% 1PX;
+  background-repeat: no-repeat;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  border-bottom: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  html:not([data-scale]) .am-picker-popup-header {
+    border-bottom: none;
+  }
+
+  html:not([data-scale]) .am-picker-popup-header::after {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 100%;
+    -ms-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-picker-popup-header::after {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-picker-popup-header .am-picker-popup-header-right {
+  text-align: right;
+}
+
+.am-picker-popup-item {
+  color: #108ee9;
+  font-size: 17px;
+  padding: 9px 15px;
+  height: 42px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.am-picker-popup-item-active {
+  background-color: #ddd;
+}
+
+.am-picker-popup-title {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: center;
+  color: #000;
+}
+
+.am-picker-popup .am-picker-popup-close {
+  display: none;
+}
+
+.am-picker-col {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.am-picker-col {
+  display: block;
+  position: relative;
+  height: 238px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.am-picker-col-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+  padding: 102px 0;
+}
+
+.am-picker-col-item {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  text-align: center;
+  font-size: 16px;
+  height: 34px;
+  line-height: 34px;
+  color: #000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.am-picker-col-item-selected {
+  font-size: 17px;
+}
+
+.am-picker-col-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  margin: 0 auto;
+  width: 100%;
+  z-index: 3;
+  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6))), -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6)));
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+  background-position: top, bottom;
+  background-size: 100% 102px;
+  background-repeat: no-repeat;
+}
+
+.am-picker-col-indicator {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 100%;
+  height: 34px;
+  position: absolute;
+  left: 0;
+  top: 102px;
+  z-index: 3;
+  border-top: 1PX solid #ddd;
+  border-bottom: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  html:not([data-scale]) .am-picker-col-indicator {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-picker-col-indicator::before {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-picker-col-indicator::before {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  html:not([data-scale]) .am-picker-col-indicator {
+    border-bottom: none;
+  }
+
+  html:not([data-scale]) .am-picker-col-indicator::after {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 100%;
+    -ms-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-picker-col-indicator::after {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-picker {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.am-picker-item {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: center;
+}

package/lib/date-picker/utils.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatFn = formatFn;
+function formatIt(date, form) {
+  const pad = n => n < 10 ? "0".concat(n) : n;
+  const dateStr = "".concat(date.getFullYear(), "-").concat(pad(date.getMonth() + 1), "-").concat(pad(date.getDate()));
+  const timeStr = "".concat(pad(date.getHours()), ":").concat(pad(date.getMinutes()));
+  if (form === 'YYYY-MM-DD') {
+    return dateStr;
+  }
+  if (form === 'HH:mm') {
+    return timeStr;
+  }
+  return "".concat(dateStr, " ").concat(timeStr);
+}
+function formatFn(instance, value) {
+  const formatsEnum = {
+    date: 'YYYY-MM-DD',
+    time: 'HH:mm',
+    datetime: 'YYYY-MM-DD HH:mm'
+  };
+  const {
+    format
+  } = instance.props;
+  const type = typeof format;
+  if (type === 'string') {
+    return formatIt(value, format);
+  }
+  if (type === 'function') {
+    return format(value);
+  }
+  return formatIt(value, formatsEnum[instance.props.mode]);
+}

package/lib/index.js

@@ -178,6 +178,12 @@ Object.defineProperty(exports, "DateFormatter", {
     return _DateFormatter.default;
   }
 });
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _datePicker.default;
+  }
+});
 Object.defineProperty(exports, "DepartmentEditor", {
   enumerable: true,
   get: function () {
@@ -549,4 +555,5 @@ var _DTableRadioGroup = _interopRequireDefault(require("./DTableRadioGroup"));
 var _DTableEmptyTip = _interopRequireDefault(require("./DTableEmptyTip"));
 var _IconButton = _interopRequireDefault(require("./IconButton"));
 var _UploadProgress = _interopRequireDefault(require("./UploadProgress"));
-var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
+var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
+var _datePicker = _interopRequireDefault(require("./date-picker"));

package/lib/utils/url.js

@@ -133,7 +133,7 @@ const getFileName = url => {
     validUrl = validUrl.slice(0, qIndex);
   }
   const lastIndex = validUrl.lastIndexOf('/');
-  const name = url.slice(lastIndex + 1, qIndex);
+  const name = validUrl.slice(lastIndex + 1);
   return decodeURI(name);
 };
 exports.getFileName = getFileName;

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.23",
+  "version": "6.0.24-beta.0",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/seafile-calendar": "0.0.24",
     "@seafile/seafile-editor": "~2.0.6",
-    "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
     "dtable-utils": "~5.0.19",
@@ -16,7 +15,8 @@
     "react-select": "5.10.0",
     "react-sweet-progress": "^1.1.2",
     "react-transition-group": "4.4.5",
-    "reactstrap": "9.2.3"
+    "reactstrap": "9.2.3",
+    "rmc-date-picker": "6.0.10"
   },
   "scripts": {
     "lint": "./node_modules/.bin/eslint ./src/ --fix",