dtable-ui-component 7.0.1 → 7.0.2

package/lib/DTableSelect/utils.js

@@ -4,116 +4,158 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = 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");
+require("./dtable-select-label.css");
 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'
+  fontSize: '14px',
+  padding: '0 4px 0 8px',
+  border: '1px solid var(--bs-border-color) !important',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
 };
-const FOCUS_CONTROL_STYLE = {
+const DISABLED_CONTROL_STYLE = {
   fontSize: '14px',
-  backgroundColor: '#ffffff',
-  borderColor: '#1991eb',
+  padding: '0 4px 0 8px',
+  border: '1px solid rgba(0, 40, 100, 0.12)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-bg-color)',
+  borderRadius: '4px',
   outline: '0',
-  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
+  cursor: 'default',
+  opacity: 0.65
+};
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 4px 0 8px',
+  border: '1px solid var(--bs-bg-border-color)',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
+};
+const HEADER_ICON_STYLE = {
+  margin: '0 0.5rem 0 0 !important',
+  padding: 0
 };
-const noneCallback = () => ({
-  display: 'none'
-});
 const controlCallback = (provided, state) => {
   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)
-    });
+  const headerIconStyle = {
+    '.header-icon': HEADER_ICON_STYLE,
+    '.header-icon .dtable-font': {
+      color: 'var(--bs-icon-secondary-color) !important'
+    }
+  };
+  if (isDisabled) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DISABLED_CONTROL_STYLE), {}, {
+      ':active': {
+        border: '1px solid var(--bs-bg-border-color)'
+      }
+    }, headerIconStyle);
+  }
+  if (isFocused) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), headerIconStyle);
   }
   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)
-  });
+  }, DEFAULT_CONTROL_STYLE), headerIconStyle);
 };
-const UserSelectStyle = exports.UserSelectStyle = {
+const MenuSelectStyle = exports.MenuSelectStyle = {
+  menu: base => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+      backgroundColor: 'var(--bs-popover-bg)',
+      border: '1px solid var(--bs-border-secondary-color)',
+      borderRadius: '4px',
+      boxShadow: 'var(--bs-border-secondary-shadow)',
+      marginTop: '4px',
+      marginBottom: 0
+    });
+  },
+  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: '8px'
+  }),
   option: (provided, state) => {
-    const isDisabled = state.isDisabled,
-      isFocused = state.isFocused;
+    const isDisabled = state.isDisabled;
     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 ? '#f5f5f5' : '#fff'
+      backgroundColor: 'var(--bs-popover-bg)',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      ':hover': {
+        backgroundColor: 'var(--bs-btn-background-hover)'
+      },
+      '.header-icon': HEADER_ICON_STYLE
     });
   },
   control: controlCallback,
-  indicatorSeparator: noneCallback,
-  dropdownIndicator: noneCallback,
-  clearIndicator: noneCallback,
-  multiValue: provided => {
+  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), {}, {
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: '#eaeaea',
-      borderRadius: '10px',
-      margin: '0 10px 0 0',
-      padding: '0 0 0 2px'
+      color: 'var(--bs-body-color)',
+      margin: 0
     });
   },
-  multiValueLabel: provided => {
+  multiValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      padding: '0px'
+      color: 'var(--bs-body-color)',
+      margin: 0
     });
   },
-  multiValueRemove: provided => {
+  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.isDisabled;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: '#666',
-      ':hover': {
-        backgroundColor: 'transparent',
-        color: '#555555'
-      }
+      color: 'var(--bs-bg-placeholder-color)',
+      opacity: isDisabled ? 0.65 : 1,
+      margin: 0
     });
   },
-  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 = state.isDisabled,
-      isFocused = state.isFocused;
+  indicatorSeparator: (styles, state) => {
+    return {
+      'display': 'none'
+    };
+  },
+  dropdownIndicator: (provided, state) => {
+    const isDisabled = state.isDisabled;
     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'
+      paddingRight: '12px',
+      '.dtable-font': {
+        color: 'var(--bs-icon-color) !important',
+        opacity: isDisabled ? 0.65 : 1
       }
     });
-  },
-  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), {}, {
@@ -121,7 +163,9 @@ const DropdownIndicator = props => {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px'
+        marginLeft: '-2px',
+        color: 'var(--bs-icon-color)',
+        paddingRight: 0
       }
     })
   }));
@@ -142,7 +186,8 @@ const ClearIndicator = _ref => {
       className: "dtable-font dtable-icon-fork-number",
       style: {
         fontSize: '12px',
-        marginRight: '-2px'
+        marginRight: '-2px',
+        color: 'var(--bs-icon-color)'
       }
     })
   }));
@@ -157,9 +202,55 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 });
 exports.MenuList = MenuList;
 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 isSelected = props.isSelected,
+    label = props.label;
+  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)("div", {
+        className: "seatable-option",
+        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);
+  };
 };
-exports.Option = Option;
+exports.createHandleChange = createHandleChange;

package/lib/SelectOptionGroup/KeyCodes.js

@@ -5,13 +5,105 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 const KeyCodes = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+  Shift: 16,
+  Ctrl: 17,
+  Alt: 18,
+  PauseBreak: 19,
+  CapsLock: 20,
+  Escape: 27,
+  Esc: 27,
+  Space: 32,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
   LeftArrow: 37,
   UpArrow: 38,
   RightArrow: 39,
   DownArrow: 40,
-  Enter: 13,
-  Tab: 9,
-  Escape: 27,
-  Esc: 27
+  Insert: 45,
+  Delete: 46,
+  0: 48,
+  1: 49,
+  2: 50,
+  3: 51,
+  4: 52,
+  5: 53,
+  6: 54,
+  7: 55,
+  8: 56,
+  9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  LeftWindowKey: 91,
+  RightWindowKey: 92,
+  SelectKey: 93,
+  NumPad0: 96,
+  NumPad1: 97,
+  NumPad2: 98,
+  NumPad3: 99,
+  NumPad4: 100,
+  NumPad5: 101,
+  NumPad6: 102,
+  NumPad7: 103,
+  NumPad8: 104,
+  NumPad9: 105,
+  Multiply: 106,
+  Add: 107,
+  Subtract: 109,
+  DecimalPoint: 110,
+  Divide: 111,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F12: 123,
+  NumLock: 144,
+  ScrollLock: 145,
+  SemiColon: 186,
+  EqualSign: 187,
+  Comma: 188,
+  Dash: 189,
+  Period: 190,
+  ForwardSlash: 191,
+  GraveAccent: 192,
+  OpenBracket: 219,
+  BackSlash: 220,
+  CloseBracket: 221,
+  SingleQuote: 222,
+  ChineseInputMethod: 229
 };
 var _default = exports.default = KeyCodes;

package/lib/SelectOptionGroup/index.css

@@ -1,12 +1,10 @@
-.option-group {
-  display: flex;
-  flex-direction: column;
+.seatable-option-group {
   position: absolute;
   left: 0;
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding: 0.5rem 0;
+  padding-top: 0;
   box-shadow: var(--bs-border-secondary-shadow);
   background: #fff;
   border: 1px solid var(--bs-border-secondary-color);
@@ -14,34 +12,33 @@
   z-index: 10001;
 }
 
-.option-group .option-group-search {
+.seatable-option-group .seatable-select-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 10px 6px;
-}
-
-.option-group-search .form-control {
-  height: 31px;
+  position: relative;
 }
 
-.option-group .none-search-result {
+.seatable-option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 10px;
-  color: #666666;
+  padding: 8px;
+  color: var(--bs-icon-color);
 }
 
-.option-group .option-group-content {
-  flex: 1;
+.seatable-option-group .seatable-option-group-content {
   max-height: 252px;
   overflow-y: auto;
+  padding: 8px;
 }
 
-.option {
-  display: block;
+.seatable-select-option {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -50,64 +47,57 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 4px;
+  height: 32px;
 }
 
-.option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+.seatable-select-option.seatable-select-option-active {
   cursor: pointer;
+  background-color: var(--bs-btn-background-hover);
 }
 
-.option:hover .header-icon .dtable-font,
-.option:hover .header-icon .multicolor-icon,
-.option.option-active .select-option-name {
-  color: #fff;
-}
-
-.option.option-active .header-icon .dtable-font,
-.option.option-active .header-icon .multicolor-icon {
-  color: #fff;
-}
-
-.option:not(.option-active):hover .header-icon .dtable-font,
-.option:not(.option-active):hover .header-icon .multicolor-icon {
-  color: #aaa;
+.seatable-select-option .select-option-name .multiple-select-option {
+  margin: 0;
 }
 
-.option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
+.seatable-option-group .dtable-icon-check {
+  color: var(--bs-icon-color);
 }
 
-.option .select-option-name .multiple-select-option {
-  margin: 0;
+.select-label {
+  width: 100%;
 }
 
-.option-group-dtable-ui-single-select-selector .select-option-name,
-.option-group-dtable-ui-multiple-select-selector .multiple-option-name {
+.seatable-option-group-selector-multiple-select .select-label,
+.seatable-option-group-selector-single-select .select-option-name,
+.seatable-option-group-selector-multiple-select .multiple-option-name,
+.selector-group-select .group-option-name {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
-.option-group-dtable-ui-multiple-select-selector .multiple-check-icon {
+.seatable-option-group-selector-multiple-select .multiple-check-icon,
+.selector-group-select .group-check-icon {
   display: inline-flex;
-  width: 20px;
   text-align: center;
+  color: var(--bs-icon-color);
 }
 
-.option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
+.selector-group-select .multiple-check-icon .dtable-icon-check,
+.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check,
+.selector-group-select .group-check-icon .dtable-icon-check {
+  font-size: 14px;
 }
 
-.option-group-dtable-ui-single-select-selector .option:hover,
-.option-group-dtable-ui-single-select-selector .option.option-active,
-.option-group-dtable-ui-multiple-select-selector .option:hover,
-.option-group-dtable-ui-multiple-select-selector .option.option-active {
-  background-color: #f5f5f5;
+.selector-group-select .seatable-select-option:hover,
+.selector-group-select .seatable-select-option.seatable-select-option-active {
+  background-color: var(--bs-btn-background-hover);
 }
 
-.option-group-selector-single-select .option.option-active .select-option-name,
-.option-group-selector-multiple-select .option.option-active .select-option-name {
-  color: #212529;
+.select-label .header-icon {
+  display: inline-block;
+  padding: 0 .5rem 0 0 !important;
+  margin-left: 0 !important;
 }