dtable-ui-component 6.0.24-beta.4 → 6.0.24-beta1

package/lib/BodyPortal/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _utils = require("../utils/utils");
+class BodyPortal extends _react.default.Component {
+  componentWillUnmount() {
+    if (this.defaultNode) {
+      document.body.removeChild(this.defaultNode);
+    }
+    this.defaultNode = null;
+  }
+  render() {
+    if (!_utils.canUseDOM) {
+      return null;
+    }
+    if (!this.props.node && !this.defaultNode) {
+      this.defaultNode = document.createElement('div');
+      document.body.appendChild(this.defaultNode);
+    }
+    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.props.node || this.defaultNode);
+  }
+}
+var _default = exports.default = BodyPortal;

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("../../DatePicker"));
 var _lang = require("../../lang");
 var _editorUtils = require("../../utils/editor-utils");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
@@ -197,7 +197,7 @@ class DateEditorPopover extends _react.default.PureComponent {
       className: "mb-date-editor-input"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input"
-    }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
       mode: "date",
       locale: (0, _editorUtils.initDateEditorLanguage)(lang),
       value: this.state.value,
@@ -206,7 +206,7 @@ class DateEditorPopover extends _react.default.PureComponent {
       className: "date-input-day"
     }, datePickerValue && datePickerValue.format(leftFormat)))), showHourAndMinute && /*#__PURE__*/_react.default.createElement("div", {
       className: "date-input"
-    }, /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+    }, /*#__PURE__*/_react.default.createElement(_datePicker.default, {
       mode: "time",
       locale: (0, _editorUtils.initDateEditorLanguage)(lang),
       value: this.state.value,

package/lib/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "AutoNumberFormatter", {
     return _AutoNumberFormatter.default;
   }
 });
+Object.defineProperty(exports, "BodyPortal", {
+  enumerable: true,
+  get: function () {
+    return _BodyPortal.default;
+  }
+});
 Object.defineProperty(exports, "ButtonFormatter", {
   enumerable: true,
   get: function () {
@@ -178,12 +184,6 @@ 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 () {
@@ -322,12 +322,6 @@ Object.defineProperty(exports, "LinkFormatter", {
     return _LinkFormatter.default;
   }
 });
-Object.defineProperty(exports, "List", {
-  enumerable: true,
-  get: function () {
-    return _List.default;
-  }
-});
 Object.defineProperty(exports, "Loading", {
   enumerable: true,
   get: function () {
@@ -454,12 +448,6 @@ Object.defineProperty(exports, "TextFormatter", {
     return _TextFormatter.default;
   }
 });
-Object.defineProperty(exports, "TextareaItem", {
-  enumerable: true,
-  get: function () {
-    return _TextareaItem.default;
-  }
-});
 Object.defineProperty(exports, "UploadProgress", {
   enumerable: true,
   get: function () {
@@ -568,6 +556,4 @@ var _DTableEmptyTip = _interopRequireDefault(require("./DTableEmptyTip"));
 var _IconButton = _interopRequireDefault(require("./IconButton"));
 var _UploadProgress = _interopRequireDefault(require("./UploadProgress"));
 var _SvgIcon = _interopRequireDefault(require("./SvgIcon"));
-var _DatePicker = _interopRequireDefault(require("./DatePicker"));
-var _List = _interopRequireDefault(require("./List"));
-var _TextareaItem = _interopRequireDefault(require("./TextareaItem"));
+var _BodyPortal = _interopRequireDefault(require("./BodyPortal"));

package/lib/utils/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = void 0;
+exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = exports.canUseDOM = void 0;
 exports.isArrayFormatColumn = isArrayFormatColumn;
 exports.throttle = exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = exports.isMobile = exports.isMac = exports.isFunction = void 0;
 var _constants = require("../constants");
@@ -170,4 +170,5 @@ const getFormulaArrayValue = value => {
     });
   }).filter(item => isValidCellValue(item));
 };
-exports.getFormulaArrayValue = getFormulaArrayValue;
+exports.getFormulaArrayValue = getFormulaArrayValue;
+const canUseDOM = exports.canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.24-beta.4",
+  "version": "6.0.24-beta1",
   "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",
@@ -15,9 +16,7 @@
     "react-select": "5.10.0",
     "react-sweet-progress": "^1.1.2",
     "react-transition-group": "4.4.5",
-    "reactstrap": "9.2.3",
-    "rmc-date-picker": "6.0.10",
-    "rmc-feedback": "2.0.0"
+    "reactstrap": "9.2.3"
   },
   "scripts": {
     "lint": "./node_modules/.bin/eslint ./src/ --fix",

package/lib/DatePicker/_util/getLocale.js

@@ -1,34 +0,0 @@
-"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/DatePicker/index.js

@@ -1,120 +0,0 @@
-"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/DatePicker/locale/en_US.js

@@ -1,14 +0,0 @@
-"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/DatePicker/locale/ru_RU.js

@@ -1,14 +0,0 @@
-"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/DatePicker/locale/sv_SE.js

@@ -1,14 +0,0 @@
-"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/DatePicker/locale/zh_CN.js

@@ -1,14 +0,0 @@
-"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/DatePicker/style/index.css

@@ -1,290 +0,0 @@
-.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;
-}