dtable-ui-component 6.0.110-ast.1 → 6.0.110-ast.3

package/lib/DTableCustomizeSelect/index.css

@@ -106,3 +106,9 @@
   cursor: default;
   font-size: 14px;
 }
+
+.seatable-customize-select .header-icon {
+  display: inline-block;
+  padding: 0 0.5rem !important;
+  margin-left: 0 !important;
+}

package/lib/DTableCustomizeSelect/select-option-group/index.css

@@ -120,3 +120,9 @@
 .seatable-option-group-selector-multiple-select .seatable-select-option.seatable-select-option-active {
   background-color: #f5f5f5;
 }
+
+.seatable-option-group-selector-multiple-select .select-label .select-label .header-icon {
+  display: inline-block;
+  padding: 0 0.5rem !important;
+  margin-left: 0 !important;
+}

package/lib/DTableSelect/index.js

@@ -181,10 +181,10 @@ class DTableSelect extends _react.default.Component {
               className: "select-option-label",
               children: option.label
             }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "dtable-font dtable-icon-check seatable-check-color",
+              className: "dtable-font dtable-icon-check seatable-check-color d-flex align-items-center justify-content-center",
               style: {
-                width: '12px',
-                height: '12px'
+                width: '14px',
+                height: '14px'
               }
             })]
           });

package/lib/DTableSelect/select-style.js

@@ -64,9 +64,10 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     });
   },
   // .react-select__menu-list）
-  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    paddingRight: '8px'
-  }),
+  // menuList: (provided) => ({
+  //   ...provided,
+  //   paddingRight: '8px',
+  // }),
   option: (provided, state) => {
     const {
       isDisabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110ast.1",
+  "version": "6.0.110ast.3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",

package/lib/DTableSelect/utils.js

@@ -1,244 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = 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"));
-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 = {
-  border: '1px solid rgba(0, 40, 100, 0.12) !important'
-};
-const FOCUS_CONTROL_STYLE = {
-  fontSize: '14px',
-  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 (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)
-    });
-  }
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    fontSize: '14px',
-    lineHeight: '1.5',
-    cursor: 'pointer'
-  }, DEFAULT_CONTROL_STYLE), {}, {
-    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
-  });
-};
-const UserSelectStyle = exports.UserSelectStyle = {
-  option: (provided, state) => {
-    const {
-      isDisabled,
-      isFocused
-    } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff'
-    });
-  },
-  control: controlCallback,
-  indicatorSeparator: noneCallback,
-  dropdownIndicator: noneCallback,
-  clearIndicator: noneCallback,
-  multiValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0 10px 0 0',
-      padding: '0 0 0 2px'
-    });
-  },
-  multiValueLabel: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '0px'
-    });
-  },
-  multiValueRemove: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#666',
-      ':hover': {
-        backgroundColor: 'transparent',
-        color: '#555555'
-      }
-    });
-  },
-  singleValue: provided => {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      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,
-      isFocused
-    } = state;
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '8px',
-      fontSize: '14px',
-      color: '#212529',
-      cursor: isDisabled ? 'default' : 'pointer',
-      backgroundColor: isFocused ? '#f5f5f5' : '#fff',
-      borderRadius: '4px',
-      ':active': {
-        backgroundColor: '#f5f5f5'
-      },
-      '.header-icon .dtable-font': {
-        color: '#999'
-      },
-      '.header-icon .multicolor-icon': {
-        color: '#999'
-      },
-      '.seatable-ui-select-tip': {
-        fontSize: '12px',
-        color: '#666666'
-      }
-    });
-  },
-  control: controlCallback,
-  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
-    zIndex: 9999
-  }),
-  indicatorSeparator: noneCallback,
-  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: '8px'
-  }),
-  valueContainer: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: '2px 8px 2px 16px'
-  }),
-  dropdownIndicator: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: 0
-  })
-};
-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: '#666666',
-        paddingRight: '16px'
-      }
-    })
-  }));
-};
-exports.DropdownIndicator = DropdownIndicator;
-const ClearIndicator = _ref => {
-  let {
-      innerProps
-    } = _ref,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  const onMouseDown = e => {
-    e.nativeEvent.stopImmediatePropagation();
-    innerProps.onMouseDown(e);
-  };
-  props.innerProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, innerProps), {}, {
-    onMouseDown
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ClearIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "dtable-font dtable-icon-fork-number",
-      style: {
-        fontSize: '12px',
-        marginRight: '-2px'
-      }
-    })
-  }));
-};
-exports.ClearIndicator = ClearIndicator;
-const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  onClick: e => e.nativeEvent.stopImmediatePropagation(),
-  onMouseDown: e => e.nativeEvent.stopImmediatePropagation(),
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.MenuList, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-    children: props.children
-  }))
-});
-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%'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: label
-      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-check",
-        style: {
-          fontSize: '14px',
-          color: '#666666',
-          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, isMulti) => {
-  if (isMulti && Array.isArray(selectedOption)) {
-    const hasClear = selectedOption && selectedOption.some(opt => opt && opt.value === '__clear__');
-    if (hasClear) {
-      onChangeCallback([], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
-        action: 'clear'
-      }));
-      return;
-    }
-  } else if (selectedOption && selectedOption.value === '__clear__') {
-    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
-      action: 'clear'
-    }));
-    return;
-  }
-  onChangeCallback(selectedOption, actionMeta);
-};
-exports.handleSelectChange = handleSelectChange;
-const createHandleChange = (onChange, isMulti) => {
-  return (selectedOption, actionMeta) => {
-    handleSelectChange(selectedOption, actionMeta, onChange, isMulti);
-  };
-};
-exports.createHandleChange = createHandleChange;