dtable-ui-component 0.1.82 → 0.1.84-beta1

package/lib/CTimeFormatter/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import './index.css';
 
 var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
@@ -24,7 +24,7 @@ var CTimeFormatter = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.formatDate = function (date) {
-      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+      return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
     };
 
     return _this;

package/lib/DateEditor/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { getDateDisplayString } from '../utils/value-format-utils';
 import PCDateEditorPopover from './pc-date-editor-popover';
 import MBDateEditorPopover from './mb-date-editor-popover';
@@ -81,7 +81,7 @@ var DateEditor = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           value = _this$props.value,
           lang = _this$props.lang;
-      moment.locale(lang);
+      dayjs.locale(lang);
       var dateFormat = this.getDateFormat();
       this.setState({
         isDateInit: true,

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

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { DatePicker } from 'antd-mobile';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import Calendar from '@seafile/seafile-calendar';
 import * as SeaDatePicker from '@seafile/seafile-calendar/lib/Picker';
 import { getLocale } from '../../lang';
@@ -35,19 +35,19 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props = _this.props,
           dateFormat = _this$props.dateFormat,
           showHourAndMinute = _this$props.showHourAndMinute;
-      var newValue = moment(date);
+      var newValue = dayjs(date);
 
       if (showHourAndMinute) {
         var datePickerValue = _this.state.datePickerValue;
         var HM = datePickerValue.format('HH:mm');
         var format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
 
-        var newDate = moment(date).format(format) + ' ' + HM;
-        newValue = moment(newDate);
+        var newDate = dayjs(date).format(format) + ' ' + HM;
+        newValue = dayjs(newDate);
       }
 
       _this.setState({
-        datePickerValue: moment(date)
+        datePickerValue: dayjs(date)
       });
 
       _this.props.onValueChanged(newValue.format(dateFormat));
@@ -59,8 +59,8 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       var format = dateFormat.split(' ')[0]; // 'YYYY-MM-DD HH:mm'
 
       var YMD = datePickerValue.format(format);
-      var newDate = YMD + ' ' + moment(time).format('HH:mm');
-      var newValue = moment(newDate);
+      var newDate = YMD + ' ' + dayjs(time).format('HH:mm');
+      var newValue = dayjs(newDate);
 
       _this.setState({
         datePickerValue: newValue
@@ -110,7 +110,7 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = _this.props,
           dateFormat = _this$props2.dateFormat,
           lang = _this$props2.lang;
-      var defaultValue = moment().clone();
+      var defaultValue = dayjs().clone();
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
         format: dateFormat,
@@ -165,7 +165,7 @@ var DateEditorPopover = /*#__PURE__*/function (_React$PureComponent) {
 
     _this.state = {
       open: true,
-      datePickerValue: props.value ? moment(props.value) : moment().clone()
+      datePickerValue: props.value ? dayjs(props.value) : dayjs().clone()
     };
     _this.calendarContainerRef = React.createRef();
     return _this;

package/lib/DateEditor/pc-date-editor-popover.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import DatePicker from '@seafile/seafile-calendar/lib/Picker';
 import Calendar from '@seafile/seafile-calendar';
 import { initDateEditorLanguage } from '../utils/editor-utils';
@@ -69,7 +69,7 @@ var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
           dateFormat = _this$props.dateFormat,
           showHourAndMinute = _this$props.showHourAndMinute,
           lang = _this$props.lang;
-      var defaultValue = moment().clone();
+      var defaultValue = dayjs().clone();
       return /*#__PURE__*/React.createElement(Calendar, {
         locale: initDateEditorLanguage(lang),
         style: {
@@ -87,7 +87,7 @@ var PCDateEditorPopover = /*#__PURE__*/function (_React$Component) {
 
     _this.state = {
       open: true,
-      datePickerValue: props.value ? moment(props.value) : null
+      datePickerValue: props.value ? dayjs(props.value) : null
     };
     _this.calendarContainerRef = React.createRef();
     return _this;

package/lib/DtablePopover/index.js

@@ -0,0 +1,115 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { Popover } from 'reactstrap';
+import { getEventClassName } from './utils';
+
+var DTablePopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(DTablePopover, _React$Component);
+
+  var _super = _createSuper(DTablePopover);
+
+  function DTablePopover() {
+    var _this;
+
+    _classCallCheck(this, DTablePopover);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.dtablePopoverRef = null;
+
+    _this.onHistoryState = function (e) {
+      e.preventDefault();
+
+      _this.props.hideDTablePopover(e);
+    };
+
+    _this.onKeyDown = function (e) {
+      var _this$props = _this.props,
+          canHideDTablePopover = _this$props.canHideDTablePopover,
+          hideDTablePopoverWithEsc = _this$props.hideDTablePopoverWithEsc;
+
+      if (e.keyCode === 27 && typeof hideDTablePopoverWithEsc === 'function') {
+        e.preventDefault();
+        hideDTablePopoverWithEsc();
+      } else if (e.keyCode === 13) {
+        // Resolve the default behavior of the enter key when entering formulas is blocked
+        if (canHideDTablePopover) return;
+        e.stopImmediatePropagation();
+      }
+    };
+
+    _this.onMouseDown = function (e) {
+      var canHideDTablePopover = _this.props.canHideDTablePopover;
+      if (!canHideDTablePopover) return;
+
+      if (_this.dtablePopoverRef && e && getEventClassName(e).indexOf('popover') === -1 && !_this.dtablePopoverRef.contains(e.target)) {
+        _this.props.hideDTablePopover(e);
+      }
+    };
+
+    _this.onPopoverInsideClick = function (e) {
+      e.stopPropagation();
+    };
+
+    return _this;
+  }
+
+  _createClass(DTablePopover, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('mousedown', this.onMouseDown);
+      document.addEventListener('keydown', this.onKeyDown);
+      window.addEventListener('popstate', this.onHistoryState);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('mousedown', this.onMouseDown);
+      document.removeEventListener('keydown', this.onKeyDown);
+      window.removeEventListener('popstate', this.onHistoryState);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          target = _this$props2.target,
+          innerClassName = _this$props2.innerClassName,
+          popoverClassName = _this$props2.popoverClassName,
+          hideArrow = _this$props2.hideArrow,
+          modifiers = _this$props2.modifiers,
+          placement = _this$props2.placement;
+      return /*#__PURE__*/React.createElement(Popover, {
+        placement: placement,
+        isOpen: true,
+        target: target,
+        fade: false,
+        hideArrow: hideArrow,
+        innerClassName: innerClassName,
+        className: popoverClassName,
+        modifiers: modifiers
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.dtablePopoverRef = _ref;
+        },
+        onClick: this.onPopoverInsideClick
+      }, this.props.children));
+    }
+  }]);
+
+  return DTablePopover;
+}(React.Component);
+
+DTablePopover.defaultProps = {
+  placement: 'bottom-start',
+  hideArrow: true,
+  canHideDTablePopover: true
+};
+export default DTablePopover;

package/lib/DtablePopover/utils.js

@@ -0,0 +1,5 @@
+export var getEventClassName = function getEventClassName(e) {
+  // svg mouseEvent event.target.className is an object
+  if (!e || !e.target) return '';
+  return e.target.getAttribute('class') || '';
+};

package/lib/DtableSelect/index.js

@@ -0,0 +1,140 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import Select, { components } from 'react-select';
+var MenuSelectStyle = {
+  option: function option(provided, state) {
+    var isDisabled = state.isDisabled,
+        isSelected = state.isSelected,
+        isFocused = state.isFocused;
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isSelected ? '#20a0ff' : isFocused ? '#f5f5f5' : '#fff',
+      '.header-icon .dtable-font': {
+        color: isSelected ? '#fff' : '#aaa'
+      }
+    });
+  },
+  control: function control(provided) {
+    return _objectSpread(_objectSpread({}, provided), {}, {
+      fontSize: '14px',
+      cursor: 'pointer',
+      lineHeight: '1.5'
+    });
+  },
+  menuPortal: function menuPortal(base) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      zIndex: 9999
+    });
+  },
+  indicatorSeparator: function indicatorSeparator() {}
+};
+
+var DropdownIndicator = function DropdownIndicator(props) {
+  return components.DropdownIndicator && /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down",
+    style: {
+      fontSize: '12px'
+    }
+  }));
+};
+
+var MenuList = function MenuList(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.nativeEvent.stopImmediatePropagation();
+    }
+  }, /*#__PURE__*/React.createElement(components.MenuList, props, props.children));
+};
+
+var Option = function Option(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: props.data.style
+  }, /*#__PURE__*/React.createElement(components.Option, props));
+};
+
+var DtableSelect = /*#__PURE__*/function (_React$Component) {
+  _inherits(DtableSelect, _React$Component);
+
+  var _super = _createSuper(DtableSelect);
+
+  function DtableSelect() {
+    var _this;
+
+    _classCallCheck(this, DtableSelect);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.getMenuPortalTarget = function () {
+      var menuPortalTarget = _this.props.menuPortalTarget;
+      return document.querySelector(menuPortalTarget);
+    };
+
+    return _this;
+  }
+
+  _createClass(DtableSelect, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          options = _this$props.options,
+          onChange = _this$props.onChange,
+          value = _this$props.value,
+          isSearchable = _this$props.isSearchable,
+          placeholder = _this$props.placeholder,
+          isMulti = _this$props.isMulti,
+          menuPosition = _this$props.menuPosition,
+          isClearable = _this$props.isClearable,
+          noOptionsMessage = _this$props.noOptionsMessage,
+          classNamePrefix = _this$props.classNamePrefix;
+      return /*#__PURE__*/React.createElement(Select, {
+        value: value,
+        onChange: onChange,
+        options: options,
+        isMulti: isMulti,
+        classNamePrefix: classNamePrefix,
+        styles: MenuSelectStyle,
+        components: {
+          Option: Option,
+          DropdownIndicator: DropdownIndicator,
+          MenuList: MenuList
+        },
+        placeholder: placeholder,
+        isSearchable: isSearchable,
+        isClearable: isClearable,
+        menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary. 
+        ,
+        menuShouldScrollIntoView: true,
+        menuPortalTarget: this.getMenuPortalTarget(),
+        captureMenuScroll: false,
+        noOptionsMessage: noOptionsMessage
+      });
+    }
+  }]);
+
+  return DtableSelect;
+}(React.Component);
+
+DtableSelect.defaultProps = {
+  options: [],
+  value: {},
+  isSearchable: false,
+  isClearable: false,
+  placeholder: '',
+  isMulti: false,
+  menuPortalTarget: '.modal',
+  noOptionsMessage: function noOptionsMessage() {
+    return null;
+  }
+};
+export default DtableSelect;

package/lib/DtableSwitch/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function DtableSwitch(props) {
+  var onChange = props.onChange,
+      checked = props.checked,
+      placeholder = props.placeholder,
+      disabled = props.disabled,
+      switchClassName = props.switchClassName;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dtable-switch ".concat(switchClassName || '')
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "custom-switch"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "custom-switch-input",
+    type: "checkbox",
+    checked: checked,
+    onChange: onChange,
+    name: "custom-switch-checkbox",
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "custom-switch-description text-truncate"
+  }, placeholder), /*#__PURE__*/React.createElement("span", {
+    className: "custom-switch-indicator"
+  })));
+}
+
+export default DtableSwitch;

package/lib/FormulaFormatter/index.js

@@ -59,19 +59,19 @@ var FormulaFormatter = /*#__PURE__*/function (_React$Component) {
 
       var formatterProps = _this.getFormatterProps(array_type, array_data, collaborators);
 
-      if (isArrayFormalColumn(array_type)) {
-        formatterProps.value = value;
-        return _this.createColumnFormatter(Formatter, formatterProps);
-      }
-
-      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
-
       var cellValue = value;
 
       if (!Array.isArray(value)) {
         cellValue = cellValueValidator(value, array_type) ? [value] : [];
       }
 
+      if (isArrayFormalColumn(array_type)) {
+        formatterProps.value = cellValue.filter(Boolean);
+        return _this.createColumnFormatter(Formatter, formatterProps);
+      }
+
+      var _isSimpleCellFormatterColumn = isSimpleCellFormatter(array_type);
+
       var contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
       return /*#__PURE__*/React.createElement("div", {
         className: "dtable-ui formula-formatter multiple"

package/lib/MTimeFormatter/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import cn from 'astro-classname';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import './index.css';
 
 var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
@@ -24,7 +24,7 @@ var MTimeFormatter = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.formatDate = function (date) {
-      return moment(date).format('YYYY-MM-DD HH:mm:ss');
+      return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
     };
 
     return _this;

package/lib/index.js

@@ -41,4 +41,8 @@ export { default as SingleSelectEditor } from './SingleSelectEditor';
 export { default as MultipleSelectEditor } from './MultipleSelectEditor';
 export { default as CollaboratorEditor } from './CollaboratorEditor';
 export { default as DateEditor } from './DateEditor';
-export { default as LinkEditor } from './LinkEditor';
+export { default as LinkEditor } from './LinkEditor'; // dtable custom
+
+export { default as DTablePopover } from './DtablePopover';
+export { default as DTableSelect } from './DtableSelect';
+export { default as DtableSwitch } from './DtableSwitch';

package/lib/utils/value-format-utils.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import moment from 'moment';
+import dayjs from 'dayjs';
 import NP from './number-precision';
 import { CellType, NUMBER_TYPES, DEFAULT_NUMBER_FORMAT, DURATION_FORMATS_MAP, DURATION_FORMATS, DURATION_ZERO_DISPLAY, DURATION_DECIMAL_DIGITS, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES, ARRAY_FORMAL_COLUMNS_TYPES, DEFAULT_DATE_FORMAT } from '../constants';
 NP.enableBoundaryChecking(false);
@@ -161,7 +161,7 @@ export var getDateDisplayString = function getDateDisplayString(value, format) {
     return formattedValue;
   }
 
-  var date = moment(value);
+  var date = dayjs(value);
   if (!date.isValid()) return value;
 
   switch (format) {

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "dtable-ui-component",
-  "version": "0.1.82",
+  "version": "0.1.84beta1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "0.0.9",
-    "@seafile/seafile-calendar": "0.0.15",
+    "@seafile/seafile-calendar": "^0.0.19",
     "antd-mobile": "^2.3.3",
     "astro-classname": "^2.1.0",
     "bail": "1.0.5",
+    "dayjs": "^1.10.7",
     "deepmerge": "^2.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
@@ -15,7 +16,6 @@
     "hast-util-sanitize": "^1.1.2",
     "hast-util-to-html": "3.1.0",
     "is-hotkey": "^0.1.6",
-    "moment": "^2.26.0",
     "react": "16.14.0",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "16.14.0",
@@ -31,9 +31,9 @@
     "remark-rehype": "^3.0.0",
     "remark-slug": "^5.0.0",
     "trough": "1.0.5",
-    "xtend": "^4.0.1",
+    "vfile": "2.3.0",
     "x-is-string": "0.1.0",
-    "vfile": "2.3.0"
+    "xtend": "^4.0.1"
   },
   "scripts": {
     "clean:esm": "rm -rf es && mkdir es",