dtable-ui-component 6.0.110-mxj.1 → 6.0.110-mxj.2

package/lib/DTableSelect/index.js

@@ -10,8 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _selectStyle = require("./select-style");
 var _selectDropdownIndicator = _interopRequireDefault(require("./select-dropdown-indicator"));
-var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["innerProps"],
   _excluded2 = ["children"];
@@ -39,8 +39,8 @@ const ClearIndicator = _ref => {
         marginLeft: '-2px'
       },
       "aria-hidden": "true",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-        symbol: "close",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-fork-number",
         style: {
           width: '12px',
           height: '12px'
@@ -79,25 +79,44 @@ const ValueContainer = _ref2 => {
   }));
 };
 class DTableSelect extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.getMenuPortalTarget = () => {
+      const {
+        menuPortalTarget = '.modal'
+      } = this.props;
+      return document.querySelector(menuPortalTarget);
+    };
+    this.handleSelectChange = val => {
+      const {
+        onChange
+      } = this.props;
+      if (!val.value) {
+        onChange('');
+        return;
+      }
+      onChange(val);
+    };
+  }
   render() {
     const {
-      options,
-      onChange,
-      value,
-      isSearchable,
-      placeholder,
-      isMulti,
+      options = [],
+      value = {},
+      isSearchable = false,
+      placeholder = '',
+      isMulti = false,
       menuPosition,
-      isClearable,
-      noOptionsMessage,
+      isClearable = true,
+      noOptionsMessage = () => {
+        return null;
+      },
       classNamePrefix,
-      style,
       innerRef,
-      isDisabled,
+      isDisabled = false,
       form,
+      className = '',
       customFilterOption,
-      autoFocus,
-      className
+      autoFocus
     } = this.props;
     if (isClearable) {
       if (value && value.label !== '--' && options[0].label !== '--') {
@@ -115,8 +134,11 @@ class DTableSelect extends _react.default.Component {
       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",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "select-option-label",
+            children: option.label
+          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-font dtable-icon-check",
             style: {
               width: '12px',
               height: '12px'
@@ -129,12 +151,12 @@ class DTableSelect extends _react.default.Component {
       value: value,
       isDisabled: isDisabled,
       ref: innerRef,
-      onChange: onChange,
+      onChange: this.handleSelectChange,
       options: optionsWithCheck,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
-      styles: style,
+      styles: _selectStyle.MenuSelectStyle,
       components: {
         Option,
         DropdownIndicator,
@@ -148,7 +170,7 @@ class DTableSelect extends _react.default.Component {
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,
-      menuPortalTarget: document.querySelector(this.props.menuPortalTarget),
+      menuPortalTarget: this.getMenuPortalTarget(),
       captureMenuScroll: false,
       hideSelectedOptions: false,
       noOptionsMessage: noOptionsMessage,
@@ -158,18 +180,4 @@ class DTableSelect extends _react.default.Component {
     });
   }
 }
-exports.default = DTableSelect;
-DTableSelect.defaultProps = {
-  options: [],
-  value: {},
-  isDisabled: false,
-  isSearchable: false,
-  isClearable: false,
-  placeholder: '',
-  isMulti: false,
-  autoFocus: false,
-  menuPortalTarget: '.modal',
-  noOptionsMessage: () => {
-    return null;
-  }
-};
+exports.default = DTableSelect;

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

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "dtable-font dtable-icon-down3"
     })
   });
 };

package/lib/DTableSelect/select-style.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSelectStyle = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+// Seahub select is based on seafile-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 FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 4px',
+  border: '1px solid #3e84f7',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
+};
+const controlCallback = (provided, state) => {
+  const {
+    isDisabled,
+    isFocused
+  } = state;
+  if (isDisabled) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DEFAULT_CONTROL_STYLE), {}, {
+      cursor: 'default',
+      backgroundColor: '#f5f5f5',
+      opacity: 0.65
+    });
+  }
+  if (isFocused) {
+    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 MenuSelectStyle = exports.MenuSelectStyle = {
+  // .react-select__menu / react-select-2-listbox
+  menu: base => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+      padding: '4px 0 4px 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'
+    });
+  },
+  // .react-select__menu-list）
+  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    paddingRight: '8px'
+  }),
+  option: (provided, state) => {
+    const {
+      isDisabled,
+      isFocused,
+      isActive,
+      isVisited
+    } = state;
+    let bgColor;
+    if (isActive || isVisited) {
+      bgColor = 'rgba(0, 0, 0, 0.06)';
+    } else if (isFocused) {
+      bgColor = 'var(--bs-bg-color)';
+    } else {
+      bgColor = 'var(--bs-popover-bg)';
+    }
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)',
+      borderRadius: '4px',
+      minHeight: '32px',
+      padding: '6px 12px 6px 8px',
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: "".concat(bgColor, " !important")
+    });
+  },
+  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 => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)'
+    });
+  },
+  multiValue: provided => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)'
+    });
+  },
+  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    color: '#909090',
+    ':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;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: '#868e96',
+      opacity: isDisabled ? 0.65 : 1
+    });
+  },
+  indicatorSeparator: (styles, state) => {
+    return {
+      'display': 'none'
+    };
+  }
+};

package/package.json

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