dtable-ui-component 6.0.29-beta9 → 6.0.29

package/lib/select-editor/mb-select-editor/index.js

@@ -0,0 +1,197 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _lang = require("../../lang");
+var _selectEditorOption = _interopRequireDefault(require("../select-editor-option"));
+var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
+require("./index.css");
+class MBSelectEditorPopover extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.handleHistoryBack = e => {
+      e.preventDefault();
+      this.props.onClosePopover();
+    };
+    this.onContainerClick = event => {
+      if (this.editorPopover && this.editorPopover.contains(event.target)) {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        return false;
+      }
+    };
+    this.onChangeSearch = event => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === event.target.value) {
+        return;
+      }
+      searchVal = event.target.value;
+      this.setState({
+        searchVal
+      });
+    };
+    this.getSelectedOptions = () => {
+      let {
+        value,
+        options
+      } = this.props;
+      if (!Array.isArray(value)) {
+        return [];
+      }
+      return options.filter(option => {
+        return value.indexOf(option.id) > -1;
+      });
+    };
+    this.getFilteredOptions = () => {
+      let {
+        options
+      } = this.props;
+      let {
+        searchVal
+      } = this.state;
+      return searchVal ? options.filter(item => item.name.indexOf(searchVal) > -1) : options;
+    };
+    this.onSelectOption = option => {
+      this.props.onOptionItemToggle(option);
+    };
+    this.onAddNewOption = event => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      let newOption = this.state.searchVal.trim();
+      if (newOption) {
+        this.props.onAddNewOption(newOption);
+        this.props.onClosePopover();
+      }
+    };
+    this.onRemoveOption = option => {
+      this.props.onOptionItemToggle(option);
+    };
+    this.renderSelectOptions = options => {
+      let {
+        value
+      } = this.props;
+      return options.map((option, index) => {
+        let isSelect = value.some(item => item === option.id);
+        let style = {
+          backgroundColor: option.color,
+          color: option.textColor || null
+        };
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "mb-select-option-item",
+          key: index,
+          onMouseDown: this.onSelectOption.bind(this, option)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "mb-select-item"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "item-name",
+          style: style,
+          title: option.name
+        }, option.name)), /*#__PURE__*/_react.default.createElement("span", {
+          className: "mb-item-checked"
+        }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
+          className: "dtable-font dtable-icon-check-mark"
+        })));
+      });
+    };
+    this.setEditorPopover = editorPopover => {
+      this.editorPopover = editorPopover;
+    };
+    this.state = {
+      searchVal: ''
+    };
+  }
+  componentDidMount() {
+    history.pushState(null, null, '#'); // eslint-disable-line
+    window.addEventListener('popstate', this.handleHistoryBack, false);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('popstate', this.handleHistoryBack, false);
+  }
+  render() {
+    const {
+      isReadOnly,
+      column,
+      isSupportNewOption,
+      isShowRemoveIcon
+    } = this.props;
+    const {
+      searchVal
+    } = this.state;
+    const selectedOptions = this.getSelectedOptions();
+    const filteredOptions = this.getFilteredOptions();
+    let isShowRemoveBtn = !isReadOnly && isShowRemoveIcon;
+    let isShowCreateBtn = !isReadOnly && isSupportNewOption && !!searchVal;
+    if (isShowCreateBtn) {
+      isShowCreateBtn = filteredOptions.length === 0;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setEditorPopover,
+      className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
+      style: {
+        zIndex: 99
+      },
+      onClick: this.onContainerClick
+    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
+      title: column.name,
+      leftContent: /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-return"
+      }),
+      onLeftClick: this.props.onClosePopover
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-selected-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "title"
+    }, (0, _lang.getLocale)('Current_option')), /*#__PURE__*/_react.default.createElement("div", {
+      className: "content"
+    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
+      className: "empty-placeholder"
+    }, (0, _lang.getLocale)('No_option')), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
+      return /*#__PURE__*/_react.default.createElement(_selectEditorOption.default, {
+        key: selectedOption.id,
+        option: selectedOption,
+        isShowRemoveIcon: isShowRemoveBtn,
+        onDeleteSelectOption: this.onRemoveOption
+      });
+    }))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-search-select-items"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: (0, _lang.getLocale)('Search_option'),
+      value: searchVal,
+      onChange: this.onChangeSearch,
+      onClick: this.onInputClick
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-select-options-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "title"
+    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Choose_an_option'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "content"
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, filteredOptions.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-result-none"
+    }, (0, _lang.getLocale)('No_options_available')), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)))), isShowCreateBtn && /*#__PURE__*/_react.default.createElement("div", {
+      className: "mb-create-select-item",
+      onClick: this.onAddNewOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-add-table"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-ui-add-new-option"
+    }, "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)))));
+  }
+}
+MBSelectEditorPopover.defaultProps = {
+  isReadOnly: false,
+  isShowRemoveIcon: false,
+  isSupportNewOption: false,
+  value: []
+};
+var _default = exports.default = MBSelectEditorPopover;

package/lib/select-editor/{pc-editor → pc-select-editor}/index.css

@@ -8,7 +8,7 @@
   height: 28px;
 }
 
-.dtable-ui-select-editor-container .select-dtable-ui-mobile-selector-options-container {
+.dtable-ui-select-editor-container .select-options-container {
   min-height: 160px;
   max-height: 200px;
   padding: 10px 0;

package/lib/select-editor/{pc-editor → pc-select-editor}/index.js

@@ -45,7 +45,7 @@ class PCSelectEditor extends _react.default.Component {
         option = this.filteredOptions[this.state.highlightIndex];
       }
       if (option) {
-        this.onChange(option);
+        this.onOptionItemToggle(option);
       } else {
         const {
           searchValue
@@ -103,18 +103,18 @@ class PCSelectEditor extends _react.default.Component {
       this.setState({
         searchValue
       });
-      const val = searchValue.toLowerCase();
+      let val = searchValue.toLowerCase();
       this.filteredOptions = val ? options.filter(item => item.name && item.name.toLowerCase().indexOf(val) > -1) : options;
       this.setState({
         highlightIndex: this.filteredOptions.length > 0 ? 0 : -1
       });
     };
     this.onAddNewOption = () => {
-      const name = this.state.searchValue.trim();
+      let name = this.state.searchValue.trim();
       this.props.onAddNewOption(name);
     };
-    this.onChange = option => {
-      this.props.onCommit(option);
+    this.onOptionItemToggle = item => {
+      this.props.onCommit(item);
     };
     this.onMenuMouseEnter = index => {
       this.setState({
@@ -231,7 +231,7 @@ class PCSelectEditor extends _react.default.Component {
       onChange: this.onValueChanged,
       autoFocus: true
     })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "select-dtable-ui-mobile-selector-options-container",
+      className: "select-options-container",
       ref: ref => this.container = ref
     }, this.filteredOptions.length > 0 && this.filteredOptions.map((option, index) => {
       let optionStyle = this.getOptionStyle(option);
@@ -248,7 +248,7 @@ class PCSelectEditor extends _react.default.Component {
         className: (0, _classnames.default)('select-option-item-container', {
           'select-option-item-container-highlight': index === highlightIndex
         }),
-        onMouseDown: this.onChange.bind(this, option),
+        onMouseDown: this.onOptionItemToggle.bind(this, option),
         onMouseEnter: this.onMenuMouseEnter.bind(this, index),
         onMouseLeave: this.onMenuMouseLeave.bind(this, index)
       }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/select-editor/select-editor-option.js

@@ -0,0 +1,84 @@
+"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"));
+class SelectEditorOption extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.onDeleteOption = event => {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+      this.props.onDeleteSelectOption(this.props.option);
+    };
+    this.getContainerStyle = () => {
+      let option = this.props.option;
+      return {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        marginRight: '10px',
+        padding: '0px 10px',
+        height: '20px',
+        borderRadius: '10px',
+        fontSize: '13px',
+        backgroundColor: option.color
+      };
+    };
+    this.getOptionStyle = option => {
+      const textColor = option.textColor || null;
+      return {
+        flex: 1,
+        display: 'flex',
+        alignContent: 'center',
+        margin: '0 4px 0 2px',
+        color: textColor
+      };
+    };
+    this.getOperationStyle = option => {
+      const textColor = option.textColor || null;
+      return {
+        height: '20px',
+        width: '16px',
+        cursor: 'pointer',
+        color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
+        transform: 'scale(.8)'
+      };
+    };
+  }
+  render() {
+    let {
+      option,
+      isShowRemoveIcon
+    } = this.props;
+    let containerStyle = this.getContainerStyle();
+    let optionStyle = this.getOptionStyle(option);
+    let operationStyle = this.getOperationStyle(option);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui select-option-item",
+      style: containerStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-info",
+      style: optionStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-name",
+      title: option.name
+    }, option.name)), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-remove",
+      style: operationStyle,
+      onClick: this.onDeleteOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number",
+      style: {
+        fontSize: '12px',
+        lineHeight: '20px'
+      }
+    })));
+  }
+}
+SelectEditorOption.defaultProps = {
+  isShowRemoveIcon: false
+};
+var _default = exports.default = SelectEditorOption;

package/lib/utils/editor-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.minDate = exports.maxDate = exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
+exports.initDateEditorLanguage = exports.getTrimmedString = exports.getSelectOptionItem = void 0;
 const zhCN = require('@seafile/seafile-calendar/lib/locale/zh_CN');
 const zhTW = require('@seafile/seafile-calendar/lib/locale/zh_TW');
 const enUS = require('@seafile/seafile-calendar/lib/locale/en_US');
@@ -66,8 +66,4 @@ exports.getSelectOptionItem = getSelectOptionItem;
 const getTrimmedString = value => {
   return typeof value === 'string' ? value.trim() : '';
 };
-
-// min date and max date for mobile date picker
-exports.getTrimmedString = getTrimmedString;
-const minDate = exports.minDate = new Date('1900/01/01');
-const maxDate = exports.maxDate = new Date('2100/12/31');
+exports.getTrimmedString = getTrimmedString;

package/lib/utils/get-event-transfer.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _constants = require("../constants");
 const HTML = 'text/html';
 const TEXT = 'text/plain';
 // const FILES = 'files';
@@ -37,7 +36,7 @@ function getEventTransfer(event) {
   let html;
   let text;
   let files;
-  if (_constants.isMobile) {
+  if (window.isMobile) {
     if (window.dtableTransfer) {
       text = window.dtableTransfer['TEXT'];
     }

package/lib/utils/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTrimmedString = exports.getFormulaArrayValue = exports.getEventClassName = exports.getErrorMsg = exports.downloadFiles = exports.downloadFile = exports.debounce = void 0;
 exports.isArrayFormatColumn = isArrayFormatColumn;
-exports.throttle = exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = exports.isQQBuiltInBrowser = exports.isMac = exports.isIPhone = exports.isFunction = void 0;
+exports.throttle = exports.openUrlLink = exports.isValidUrl = exports.isValidCellValue = exports.isMobile = exports.isMac = exports.isFunction = void 0;
 var _constants = require("../constants");
 var _url = require("./url");
 const debounce = (fn, wait) => {
@@ -34,22 +34,13 @@ const throttle = (func, delay) => {
   };
 };
 exports.throttle = throttle;
+const isMobile = exports.isMobile = typeof window !== 'undefined' && (window.innerWidth < 768 || navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null);
 const isMac = () => {
   const platform = navigator.platform;
   // eslint-disable-next-line eqeqeq
   return platform == 'Mac68K' || platform == 'MacPPC' || platform == 'Macintosh' || platform == 'MacIntel';
 };
 exports.isMac = isMac;
-const isQQBuiltInBrowser = () => {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return userAgent.indexOf(' qq') > -1 && userAgent.indexOf('mqqbrowser') < 0;
-};
-exports.isQQBuiltInBrowser = isQQBuiltInBrowser;
-const isIPhone = () => {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return /iphone/gi.test(userAgent);
-};
-exports.isIPhone = isIPhone;
 const downloadFile = downloadUrl => {
   const downloadFrame = document.getElementById('dtableUiComponentDownloadFrame');
   if (downloadFrame != null) {

package/package.json

@@ -1,22 +1,31 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.29-beta9",
+  "version": "6.0.29",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",
-    "@seafile/seafile-calendar": "0.0.29",
+    "@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",
     "is-hotkey": "0.2.0",
+    "rc-checkbox": "3.5.0",
     "react-color": "2.19.3",
     "react-responsive": "10.0.0",
     "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-cascader": "5.0.3",
+    "rmc-date-picker": "6.0.10",
+    "rmc-dialog": "1.1.1",
+    "rmc-drawer": "0.4.11",
+    "rmc-feedback": "2.0.0",
+    "rmc-notification": "1.0.0",
+    "rmc-picker": "5.0.10",
+    "rmc-tabs": "1.2.29",
+    "rmc-tooltip": "1.0.1"
   },
   "scripts": {
     "lint": "./node_modules/.bin/eslint ./src/ --fix",
@@ -66,18 +75,18 @@
     "@babel/runtime": "7.22.11",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-actions": "7.6.17",
-    "@storybook/addon-docs": "7.6.17",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-interactions": "7.6.17",
-    "@storybook/addon-knobs": "7.0.2",
+    "@storybook/addon-actions": "8.6.12",
+    "@storybook/addon-controls": "^8.6.12",
+    "@storybook/addon-docs": "8.6.12",
+    "@storybook/addon-essentials": "8.6.12",
+    "@storybook/addon-interactions": "8.6.12",
     "@storybook/addon-links": "7.6.17",
-    "@storybook/addon-onboarding": "1.0.11",
-    "@storybook/blocks": "7.6.17",
-    "@storybook/preset-create-react-app": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
-    "@storybook/test": "7.6.17",
+    "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/blocks": "8.6.12",
+    "@storybook/preset-create-react-app": "8.6.12",
+    "@storybook/react": "8.6.12",
+    "@storybook/react-webpack5": "8.6.12",
+    "@storybook/test": "^8.6.12",
     "@svgr/webpack": "8.1.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "^11.1.0",
@@ -137,7 +146,7 @@
     "sass-loader": "^12.3.0",
     "semver": "^7.3.5",
     "source-map-loader": "^3.0.0",
-    "storybook": "7.6.17",
+    "storybook": "8.6.12",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.2",
     "terser-webpack-plugin": "^5.2.5",

package/lib/BodyPortal/index.js

@@ -1,29 +0,0 @@
-"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"));
-const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-class BodyPortal extends _react.default.Component {
-  componentWillUnmount() {
-    if (this.defaultNode) {
-      document.body.removeChild(this.defaultNode);
-    }
-    this.defaultNode = null;
-  }
-  render() {
-    if (!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/CheckboxEditor/mb-editor.js

@@ -1,99 +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 _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
-var _constants = require("../constants");
-class MBCheckboxEditor extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.getValue = () => {
-      const {
-        value
-      } = this.state;
-      return value;
-    };
-    this.updateValue = value => {
-      if (value === this.state.value) {
-        return;
-      }
-      this.setState({
-        value
-      });
-    };
-    this.onChangeCheckboxValue = event => {
-      if (event) {
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-        event.persist();
-      }
-      const {
-        value
-      } = this.state;
-      const newValue = !value;
-      this.setState({
-        value: newValue
-      }, () => {
-        this.props.onCommit && this.props.onCommit(newValue);
-      });
-    };
-    this.renderIcon = (symbol, color) => {
-      const className = (0, _classnames.default)('dtable-ui-checkbox-check-mark', {
-        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
-      });
-      if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
-          style: {
-            color
-          }
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
-        className: className,
-        symbol: symbol,
-        color: color
-      });
-    };
-    this.state = {
-      value: props.value || false
-    };
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      value
-    } = this.props;
-    if (value !== prevProps.value) {
-      this.setState({
-        value
-      });
-    }
-  }
-  render() {
-    var _column$data;
-    const {
-      className,
-      style,
-      column
-    } = this.props;
-    const {
-      value
-    } = this.state;
-    let checkboxStyle = column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.checkbox_style;
-    if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
-      checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
-      style: style || {},
-      onTouchStart: this.onChangeCheckboxValue
-    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
-  }
-}
-var _default = exports.default = MBCheckboxEditor;