dtable-ui-component 6.0.110-tru.2 → 6.0.110-tru.3

package/lib/DTableCustomizeSelect/index.css

@@ -43,6 +43,10 @@
   transition: all 0.1s;
 }
 
+.dtable-select .select-option-name {
+  color: #868e96 !important;
+}
+
 .dtable-select .selected-option {
   display: flex;
   flex: 1;

package/lib/DTableSelect/index.js

@@ -1,14 +1,83 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
-var _reactSelect = _interopRequireDefault(require("react-select"));
-var _utils = require("./utils");
+var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _selectDropdownIndicator = _interopRequireDefault(require("./select-dropdown-indicator"));
+var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["innerProps"],
+  _excluded2 = ["children"];
+const DropdownIndicator = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectDropdownIndicator.default, {})
+  }));
+};
+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: "d-flex align-items-center",
+      style: {
+        marginLeft: '-2px'
+      },
+      "aria-hidden": "true",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+        symbol: "close",
+        style: {
+          width: '12px',
+          height: '12px'
+        }
+      })
+    })
+  }));
+};
+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
+  }))
+});
+const Option = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: props.data.style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
+  });
+};
+const ValueContainer = _ref2 => {
+  var _props$selectProps$va;
+  let {
+      children
+    } = _ref2,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  // Do not show '--'
+  const isClearOption = ((_props$selectProps$va = props.selectProps.value) === null || _props$selectProps$va === void 0 ? void 0 : _props$selectProps$va.value) === null;
+  if (isClearOption) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ValueContainer, (0, _objectSpread2.default)({}, props));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.ValueContainer, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    className: "seatable-select-value-container",
+    children: children
+  }));
+};
 class DTableSelect extends _react.default.Component {
   render() {
     const {
@@ -30,23 +99,52 @@ class DTableSelect extends _react.default.Component {
       autoFocus,
       className
     } = this.props;
-    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
+    if (isClearable) {
+      if (value && value.label !== '--' && options[0].label !== '--') {
+        options.unshift({
+          value: null,
+          label: '--'
+        });
+      }
+      if (value && value.label === '--' && options[0].label === '--') {
+        options.shift();
+      }
+    }
+    const optionsWithCheck = options.map(option => {
+      const isSelected = value && value.value === option.value;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
+        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: "d-flex align-items-center justify-content-between",
+          children: [option.label, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+            symbol: "check",
+            style: {
+              width: '12px',
+              height: '12px'
+            }
+          })]
+        })
+      });
+    });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: (0, _utils.createHandleChange)(onChange, isMulti),
-      options: processedOptions,
+      isDisabled: isDisabled,
+      ref: innerRef,
+      onChange: onChange,
+      options: optionsWithCheck,
       isMulti: isMulti,
-      isClearable: false,
       className: className,
       classNamePrefix: classNamePrefix,
-      styles: style || _utils.MenuSelectStyle,
+      styles: style,
       components: {
-        Option: _utils.Option,
-        DropdownIndicator: _utils.DropdownIndicator,
-        MenuList: _utils.MenuList
+        Option,
+        DropdownIndicator,
+        MenuList,
+        ClearIndicator,
+        ValueContainer
       },
       placeholder: placeholder,
       isSearchable: isSearchable,
+      isClearable: false,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,
@@ -54,11 +152,9 @@ class DTableSelect extends _react.default.Component {
       captureMenuScroll: false,
       hideSelectedOptions: false,
       noOptionsMessage: noOptionsMessage,
-      isDisabled: isDisabled,
-      ref: innerRef,
       filterOption: customFilterOption,
-      form: form,
-      autoFocus: autoFocus
+      autoFocus: autoFocus,
+      form: form
     });
   }
 }

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -0,0 +1,12 @@
+.select-dropdown-indicator {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+  margin-left: -2px;
+}
+
+.select-dropdown-indicator svg {
+  width: 12px;
+  height: 12px;
+}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -0,0 +1,21 @@
+"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 _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const SelectDropdownIndicator = () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "select-dropdown-indicator d-flex align-items-center",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      symbol: "down"
+    })
+  });
+};
+var _default = exports.default = SelectDropdownIndicator;

package/lib/DTableSelect/user-select.css

@@ -1,51 +1,4 @@
-.user-select .select-module-container {
-  display: flex;
-  align-items: center;
-}
-
-.user-select .select-module.select-module-avatar {
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-}
-
-.user-select .select-module.select-module-name {
-  color: #212529;
-  font-size: 14px;
-}
-
-.user-select .true__value-container .select-module-container {
-  display: block;
-}
-
-.user-select .true__value-container .select-module.select-module-avatar {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-}
-
-.user-select .true__value-container .true__multi-value__label {
-  padding: 0px;
-}
-
-.user-select .true__value-container .true__multi-value__label .select-module.select-module-avatar {
-  transform: translateY(-2px);
-}
-
-.user-select .true__value-container .select-module.select-module-name {
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1;
-  line-height: 20px;
-  margin-left: 5px;
-}
-
-.user-select .true__control.true__control--is-focused,
-.user-select .true__control.true__control--is-focused:hover {
-  background-color: #ffffff;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+/* hide checkbox in select value container */
+.seatable-select-value-container .seatable-multicolor-icon-check {
+  display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110tru.2",
+  "version": "6.0.110tru.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;