dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/DTableSelect/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
@@ -12,172 +12,123 @@ var _reactSelect = require("react-select");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 4px',
-  border: '1px solid var(--bs-border-color) !important',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-popover-bg)',
-  borderRadius: '4px',
-  outline: '0'
-};
-const DISABLED_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 4px',
-  border: '1px solid rgba(0, 40, 100, 0.12)',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-bg-color)',
-  borderRadius: '4px',
-  outline: '0',
-  cursor: 'default',
-  opacity: 0.65
+  border: '1px solid rgba(0, 40, 100, 0.12) !important'
 };
 const FOCUS_CONTROL_STYLE = {
   fontSize: '14px',
-  padding: '0 4px',
-  border: '1px solid #3E84F7',
-  boxShadow: 'none',
-  backgroundColor: 'var(--bs-popover-bg)',
-  borderRadius: '4px',
-  outline: '0'
+  backgroundColor: '#ffffff',
+  borderColor: '#1991eb',
+  outline: '0',
+  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
 };
+const noneCallback = () => ({
+  display: 'none'
+});
 const controlCallback = (provided, state) => {
-  const {
-    isDisabled,
-    isFocused
-  } = state;
-  if (isDisabled) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DISABLED_CONTROL_STYLE), {}, {
-      ':active': {
-        border: '1px solid #3E84F7'
-      },
-      '.header-icon': {
-        color: 'var(--bs-icon-secondary-color)',
-        padding: '0 0.5rem !important'
-      }
+  const isDisabled = state.isDisabled,
+    isFocused = state.isFocused;
+  if (isFocused && !isDisabled) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
+      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
     });
   }
-  if (isFocused) {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE);
-  }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
     fontSize: '14px',
     lineHeight: '1.5',
     cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE);
+  }, DEFAULT_CONTROL_STYLE), {}, {
+    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
+  });
 };
-const MenuSelectStyle = exports.MenuSelectStyle = {
-  menu: base => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-      padding: '8px',
-      backgroundColor: 'var(--bs-popover-bg)',
-      border: '1px solid var(--bs-border-secondary-color)',
-      borderRadius: '4px',
-      boxShadow: '0px 6px 14px rgba(0, 0, 0, 0.1)',
-      marginTop: '4px',
-      marginBottom: 0
-    });
-  },
-  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: 0
-  }),
+const UserSelectStyle = exports.UserSelectStyle = {
   option: (provided, state) => {
-    const {
-      isDisabled,
-      isFocused
-    } = state;
+    const isDisabled = state.isDisabled,
+      isFocused = state.isFocused;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)',
-      borderRadius: '4px',
-      minHeight: '32px',
-      padding: '8px',
       cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? 'var(--bs-hover-bg)' : 'var(--bs-popover-bg)',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      ':hover': {
-        backgroundColor: 'rgba(0, 0, 0, 0.04)'
-      },
-      '.header-icon': {
-        color: 'var(--bs-icon-secondary-color)',
-        padding: '0 0.5rem !important'
-      }
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
     });
   },
   control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-    zIndex: 9999,
-    backgroundColor: 'var(--bs-popover-bg)',
-    color: 'var(--bs-body-color)',
-    borderColor: 'var(--bs-border-secondary-color)'
-  }),
-  singleValue: provided => {
+  indicatorSeparator: noneCallback,
+  dropdownIndicator: noneCallback,
+  clearIndicator: noneCallback,
+  multiValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)'
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0 10px 0 0',
+      padding: '0 0 0 2px'
     });
   },
-  multiValue: provided => {
+  multiValueLabel: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)'
+      padding: '0px'
     });
   },
-  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    '.dtable-font': {
-      color: 'var(--bs-icon-color)'
-    },
-    '.dtable-font:hover': {
-      backgroundColor: 'transparent',
-      color: 'var(--bs-icon-color)'
-    }
-  }),
-  input: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
-    color: 'var(--bs-body-color)'
-  }),
-  placeholder: (provided, state) => {
-    const {
-      isDisabled
-    } = state;
+  multiValueRemove: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#868E96',
-      opacity: isDisabled ? 0.65 : 1
+      color: '#666',
+      ':hover': {
+        backgroundColor: 'transparent',
+        color: '#555555'
+      }
     });
   },
-  indicatorSeparator: (styles, state) => {
-    return {
-      'display': 'none'
-    };
-  },
-  dropdownIndicator: (provided, state) => {
-    const {
-      isDisabled
-    } = state;
+  singleValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      paddingRight: '12px',
-      '.dtable-font': {
-        color: 'var(--bs-icon-color) !important',
-        opacity: isDisabled ? 0.65 : 1
-      }
+      display: 'inline-flex',
+      alignItems: 'center',
+      background: '#eaeaea',
+      borderRadius: '10px',
+      margin: '0',
+      padding: '0 2px',
+      width: 'fit-content'
     });
   }
 };
+const MenuSelectStyle = exports.MenuSelectStyle = {
+  option: (provided, state) => {
+    const isDisabled = state.isDisabled,
+      isFocused = state.isFocused;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      fontSize: '13px',
+      color: '#212529',
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+      ':active': {
+        backgroundColor: '#f5f5f5'
+      },
+      '.header-icon .dtable-font': {
+        color: '#aaa'
+      },
+      '.header-icon .multicolor-icon': {
+        color: '#aaa'
+      }
+    });
+  },
+  control: controlCallback,
+  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+    zIndex: 9999
+  }),
+  indicatorSeparator: noneCallback
+};
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px',
-        color: 'var(--bs-icon-color)',
-        paddingRight: 0
+        marginLeft: '-2px'
       }
     })
   }));
 };
 exports.DropdownIndicator = DropdownIndicator;
 const ClearIndicator = _ref => {
-  let {
-      innerProps
-    } = _ref,
+  let innerProps = _ref.innerProps,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   const onMouseDown = e => {
     e.nativeEvent.stopImmediatePropagation();
@@ -191,8 +142,7 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px',
-        color: 'var(--bs-icon-color)'
+        marginRight: '-2px'
       }
     })
   }));
@@ -207,56 +157,9 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 });
 exports.MenuList = MenuList;
 const Option = props => {
-  const {
-    isSelected,
-    label
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        width: '100%',
-        whiteSpace: 'pre-line'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: label
-      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-check",
-        style: {
-          fontSize: '14px',
-          color: 'var(--bs-icon-color)',
-          paddingLeft: '16px'
-        }
-      })]
-    })
-  }));
-};
-exports.Option = Option;
-const processOptionsWithClear = (options, isClearable) => {
-  if (isClearable && options && options.length > 0) {
-    return [{
-      label: '--',
-      value: '__clear__'
-    }, ...options];
-  }
-  return options;
-};
-exports.processOptionsWithClear = processOptionsWithClear;
-const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
-  if (selectedOption && selectedOption.value === '__clear__') {
-    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
-      action: 'clear'
-    }));
-  } else {
-    onChangeCallback(selectedOption, actionMeta);
-  }
-};
-exports.handleSelectChange = handleSelectChange;
-const createHandleChange = onChange => {
-  return (selectedOption, actionMeta) => {
-    handleSelectChange(selectedOption, actionMeta, onChange);
-  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: props.data.style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
+  });
 };
-exports.createHandleChange = createHandleChange;
+exports.Option = Option;

package/lib/DTableSubDropdownMenu/index.js

@@ -10,16 +10,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DTableDropdownMenu = _interopRequireDefault(require("../DTableDropdownMenu"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableSubDropdownMenu = _ref => {
-  let {
-    id,
-    className,
-    container,
-    modifiers,
-    flip,
-    style,
-    menuProps,
-    children
-  } = _ref;
+  let id = _ref.id,
+    className = _ref.className,
+    container = _ref.container,
+    modifiers = _ref.modifiers,
+    flip = _ref.flip,
+    style = _ref.style,
+    menuProps = _ref.menuProps,
+    children = _ref.children;
   let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
   if (container) {
     customMenuProps.container = container;

package/lib/DTableSubDropdownToggle/index.js

@@ -12,18 +12,18 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _lang = require("../lang");
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableSubDropdownToggle = _ref => {
-  let {
-    className,
-    id,
-    text,
-    icon,
-    disabled,
-    hideArrow = false,
-    title,
-    ariaLabel,
-    ariaExpanded = false,
-    toggleProps
-  } = _ref;
+  let className = _ref.className,
+    id = _ref.id,
+    text = _ref.text,
+    icon = _ref.icon,
+    disabled = _ref.disabled,
+    _ref$hideArrow = _ref.hideArrow,
+    hideArrow = _ref$hideArrow === void 0 ? false : _ref$hideArrow,
+    title = _ref.title,
+    ariaLabel = _ref.ariaLabel,
+    _ref$ariaExpanded = _ref.ariaExpanded,
+    ariaExpanded = _ref$ariaExpanded === void 0 ? false : _ref$ariaExpanded,
+    toggleProps = _ref.toggleProps;
   const renderedIcon = () => {
     if (!icon || ! /*#__PURE__*/_react.default.isValidElement(icon)) return null;
     return /*#__PURE__*/_react.default.cloneElement(icon, {

package/lib/DTableSwitch/index.css

@@ -32,7 +32,6 @@
   transform: scale(.8);
   display: inline-block;
   line-height: 24px;
-  margin-right: 8px;
 }
 
 .dtable-switch.sm .custom-switch .dtable-font.dtable-icon-use-help {

package/lib/DTableSwitch/index.js

@@ -11,17 +11,18 @@ var _dtableUtils = require("dtable-utils");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 function DTableSwitch(_ref) {
-  let {
-    onChange,
-    checked = false,
-    placeholder,
-    disabled,
-    size = 'sm',
-    switchPosition = 'right',
-    switchClassName,
-    innerClassName,
-    inputId
-  } = _ref;
+  let onChange = _ref.onChange,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    _ref$switchPosition = _ref.switchPosition,
+    switchPosition = _ref$switchPosition === void 0 ? 'right' : _ref$switchPosition,
+    switchClassName = _ref.switchClassName,
+    innerClassName = _ref.innerClassName,
+    inputId = _ref.inputId;
   const switchNode = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: "custom-switch-indicator"
   });

package/lib/DTableToolTip/index.js

@@ -11,14 +11,13 @@ var _reactstrap = require("reactstrap");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableToolTip = _ref => {
-  let {
-    target,
-    placement = 'bottom',
-    className,
-    children,
-    shortcut,
-    modifiers
-  } = _ref;
+  let target = _ref.target,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+    className = _ref.className,
+    children = _ref.children,
+    shortcut = _ref.shortcut,
+    modifiers = _ref.modifiers;
   const hasShortcut = Boolean(shortcut);
   const renderContent = () => {
     if (hasShortcut) {

package/lib/DateEditor/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _dtableUtils = require("dtable-utils");
@@ -18,21 +19,25 @@ require("dayjs/locale/en-gb");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const DateEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    isMobile,
-    lang,
-    isReadOnly,
-    column,
-    className,
-    isInModal,
-    firstDayOfWeek,
-    size,
-    value: oldValue,
-    hideCalendar,
-    onCommit
-  } = _ref;
-  const [isDateInit, setDateInit] = (0, _react.useState)(false);
-  const [value, setValue] = (0, _react.useState)(oldValue || '');
+  let isMobile = _ref.isMobile,
+    lang = _ref.lang,
+    isReadOnly = _ref.isReadOnly,
+    column = _ref.column,
+    className = _ref.className,
+    isInModal = _ref.isInModal,
+    firstDayOfWeek = _ref.firstDayOfWeek,
+    size = _ref.size,
+    oldValue = _ref.value,
+    hideCalendar = _ref.hideCalendar,
+    onCommit = _ref.onCommit;
+  const _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDateInit = _useState2[0],
+    setDateInit = _useState2[1];
+  const _useState3 = (0, _react.useState)(oldValue || ''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
   const format = (0, _react.useMemo)(() => {
     var _column$data;
     return (column === null || column === void 0 ? void 0 : column.data) && (column === null || column === void 0 ? void 0 : (_column$data = column.data) === null || _column$data === void 0 ? void 0 : _column$data.format) || _dtableUtils.DEFAULT_DATE_FORMAT;

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

@@ -20,10 +20,8 @@ require("@seafile/seafile-calendar/assets/index.css");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 let now = (0, _dayjs.default)();
-const {
-  Header,
-  Body
-} = _MobileFullScreenPage.default;
+const Header = _MobileFullScreenPage.default.Header,
+  Body = _MobileFullScreenPage.default.Body;
 class MBDateEditor extends _react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -69,14 +67,11 @@ class MBDateEditor extends _react.default.PureComponent {
       });
     };
     this.renderCalender = () => {
-      const {
-        lang,
-        className,
-        firstDayOfWeek
-      } = this.props;
-      const {
-        time
-      } = this.state;
+      const _this$props = this.props,
+        lang = _this$props.lang,
+        className = _this$props.className,
+        firstDayOfWeek = _this$props.firstDayOfWeek;
+      const time = this.state.time;
       const calendar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileCalendar.default, {
         className: (0, _classnames.default)('dtable-rc-calendar', className),
         locale: (0, _editorUtils.initDateEditorLanguage)(lang),
@@ -102,9 +97,7 @@ class MBDateEditor extends _react.default.PureComponent {
           width: '100%'
         },
         children: _ref => {
-          let {
-            time
-          } = _ref;
+          let time = _ref.time;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             tabIndex: "0",
             onFocus: this.onReadOnlyFocus,
@@ -124,10 +117,8 @@ class MBDateEditor extends _react.default.PureComponent {
         }
       });
     };
-    const {
-      dateFormat,
-      showHourAndMinute
-    } = props;
+    const dateFormat = props.dateFormat,
+      showHourAndMinute = props.showHourAndMinute;
     this.state = {
       time: null
     };
@@ -137,10 +128,9 @@ class MBDateEditor extends _react.default.PureComponent {
     this.format = showHourAndMinute ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
   }
   componentDidMount() {
-    let {
-      value,
-      lang
-    } = this.props;
+    let _this$props2 = this.props,
+      value = _this$props2.value,
+      lang = _this$props2.lang;
     const iszhcn = lang === 'zh-cn';
     if (iszhcn) {
       now = now.locale('zh-cn');
@@ -156,14 +146,11 @@ class MBDateEditor extends _react.default.PureComponent {
     });
   }
   render() {
-    const {
-      lang,
-      column,
-      showHourAndMinute
-    } = this.props;
-    const {
-      time
-    } = this.state;
+    const _this$props3 = this.props,
+      lang = _this$props3.lang,
+      column = _this$props3.column,
+      showHourAndMinute = _this$props3.showHourAndMinute;
+    const time = this.state.time;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileFullScreenPage.default, {
       className: "dtable-ui-mobile-date-editor",
       onClose: this.props.onClose,