dtable-ui-component 6.0.29-beta9 → 6.0.29

package/lib/DateEditor/{pc-editor.js → pc-date-editor-popover.js}

@@ -12,10 +12,10 @@ var _Picker = _interopRequireDefault(require("@seafile/seafile-calendar/lib/Pick
 var _seafileCalendar = _interopRequireDefault(require("@seafile/seafile-calendar"));
 var _editorUtils = require("../utils/editor-utils");
 var _constants = require("../constants");
-var _lang = require("../lang");
 require("@seafile/seafile-calendar/assets/index.css");
+var _lang = require("../lang");
 let now = (0, _dayjs.default)();
-class PCDateEditor extends _react.default.Component {
+class PCDateEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
     // event trigger sequence: onOpenChange --> onChange
@@ -28,10 +28,10 @@ class PCDateEditor extends _react.default.Component {
         value: value,
         open: true // if value changed, don't close datePicker
       });
-      this.props.onCommit(value.format(dateFormat));
+      this.props.onValueChanged(value.format(dateFormat));
     };
     this.onBlur = () => {
-      this.props.onCommit(this.getValue());
+      this.props.onValueChanged(this.getValue());
     };
     this.getValue = () => {
       let {
@@ -55,7 +55,7 @@ class PCDateEditor extends _react.default.Component {
         this.toggleCalendar(open);
       }
       if (isInModal && !open) {
-        this.props.onClose && this.props.onClose();
+        this.props.hideCalendar && this.props.hideCalendar();
       }
     };
     this.toggleCalendar = open => {
@@ -67,7 +67,7 @@ class PCDateEditor extends _react.default.Component {
       this.setState({
         value: null
       });
-      this.props.onCommit(null);
+      this.props.onValueChanged(null);
     };
     this.onFocusDatePicker = () => {
       this.setState({
@@ -112,7 +112,7 @@ class PCDateEditor extends _react.default.Component {
       const {
         isInModal
       } = this.props;
-      let onClickRightPanelTime = isInModal ? this.props.onClose : this.closeEditor;
+      let onClickRightPanelTime = isInModal ? this.props.hideCalendar : this.closeEditor;
       // we should change value and save it(async function), then close Editor.
       setTimeout(() => {
         onClickRightPanelTime && onClickRightPanelTime();
@@ -122,7 +122,7 @@ class PCDateEditor extends _react.default.Component {
       if (e.keyCode === _constants.KeyCodes.Escape) {
         if (this.props.isInModal) {
           e.stopPropagation();
-          this.props.onClose && this.props.onClose();
+          this.props.hideCalendar && this.props.hideCalendar();
         }
       }
     };
@@ -261,4 +261,4 @@ class PCDateEditor extends _react.default.Component {
     }));
   }
 }
-var _default = exports.default = PCDateEditor;
+var _default = exports.default = PCDateEditorPopover;

package/lib/DatePicker/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/DatePicker/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/DatePicker/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/DatePicker/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/DatePicker/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/DatePicker/style/index.css

@@ -0,0 +1,298 @@
+@import url('../../css/am.css');
+
+.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/DatePicker/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/{DepartmentMultipleSelectEditor → Department-editor/department-multiple-select}/index.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _departments = require("../utils/departments");
-var _SelectedDepartments = _interopRequireDefault(require("../SelectedDepartments"));
-var _lang = require("../lang");
+var _utils = require("../utils");
+var _selectedDepartments = _interopRequireDefault(require("../selected-departments"));
+var _lang = require("../../lang");
 require("./index.css");
 function DepartmentMultipleSelect(props) {
   const {
@@ -21,7 +21,7 @@ function DepartmentMultipleSelect(props) {
     departments: initialDepartments
   } = props;
   const [searchVal, setSearchVal] = (0, _react.useState)('');
-  const [departments, setDepartments] = (0, _react.useState)((0, _departments.getNormalizedDepartments)(initialDepartments));
+  const [departments, setDepartments] = (0, _react.useState)((0, _utils.getNormalizedDepartments)(initialDepartments));
   const departmentContainerRef = (0, _react.useRef)(null);
   const validDepartmentsRef = (0, _react.useRef)([]);
   (0, _react.useEffect)(() => {
@@ -51,7 +51,7 @@ function DepartmentMultipleSelect(props) {
   function onChangeSearch(event) {
     const newSearchValue = event.target.value;
     if (searchVal === newSearchValue) return;
-    validDepartmentsRef.current = (0, _departments.searchDepartments)(departments, newSearchValue);
+    validDepartmentsRef.current = (0, _utils.searchDepartments)(departments, newSearchValue);
     setSearchVal(newSearchValue);
   }
   function onClick(e) {
@@ -130,7 +130,7 @@ function DepartmentMultipleSelect(props) {
     }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement(_SelectedDepartments.default, {
+    }, /*#__PURE__*/_react.default.createElement(_selectedDepartments.default, {
       value: value,
       removeDepartment: onCommit,
       isShowRemoveIcon: true,

package/lib/{DepartmentSingleSelectEditor/pc-editor → Department-editor}/department-single-select.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
-var _Loading = _interopRequireDefault(require("../../Loading"));
-var _departments = require("../../utils/departments");
-var _lang = require("../../lang");
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _utils = require("./utils");
+var _lang = require("../lang");
 require("./index.css");
 class DepartmentSingleSelect extends _react.Component {
   constructor(props) {
@@ -28,7 +28,7 @@ class DepartmentSingleSelect extends _react.Component {
       }
     };
     this.initDepartments = departments => {
-      const normalizedDepartments = (0, _departments.getNormalizedDepartments)(departments || []);
+      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(departments || []);
       this.validDepartments = normalizedDepartments;
       this.setState({
         departments: normalizedDepartments
@@ -56,7 +56,7 @@ class DepartmentSingleSelect extends _react.Component {
       } else {
         targetDepartments = departments.filter(department => specificDepartments.includes(department.id));
       }
-      const normalizedDepartments = (0, _departments.getNormalizedDepartments)(targetDepartments);
+      const normalizedDepartments = (0, _utils.getNormalizedDepartments)(targetDepartments);
       _this.validDepartments = normalizedDepartments;
       _this.setState({
         departments: normalizedDepartments,
@@ -94,7 +94,7 @@ class DepartmentSingleSelect extends _react.Component {
       const {
         departments
       } = this.state;
-      this.validDepartments = (0, _departments.searchDepartments)(departments, newSearchValue);
+      this.validDepartments = (0, _utils.searchDepartments)(departments, newSearchValue);
       this.setState({
         searchVal: newSearchValue
       });
@@ -202,7 +202,7 @@ class DepartmentSingleSelect extends _react.Component {
     };
     this.renderEmptyTip = () => {
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "none-search-result pl-4 pr-4"
+        className: "dtable-ui-editor-no-search-result"
       }, (0, _lang.getLocale)('No_departments_available'));
     };
     this.renderMenuContent = () => {