dtable-ui-component 7.0.1-beta.btn2 → 7.0.1-beta.select1

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/FieldDisplaySetting/index.js

@@ -63,7 +63,7 @@ function FieldDisplaySetting(_ref) {
         className: "mb-0",
         children: textProperties.titleValue
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "seatable-icon-btn sm dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+        className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
       nodeRef: nodeRef,

package/lib/ImageEditor/images-previewer/image-preview/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
 var _DTableToolTip = _interopRequireDefault(require("../../../DTableToolTip"));
 var _DeleteTip = _interopRequireDefault(require("../../../DeleteTip"));
 var _url = require("../../../utils/url");
@@ -100,7 +99,7 @@ class ImagePreviewer extends _react.default.Component {
       });
       return;
     }
-    let imageThumbnailUrl = (0, _dtableUtils.getImageThumbnailUrl)(imageItemUrl, config);
+    let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imageItemUrl, config);
     (0, _url.checkImgExists)(imageThumbnailUrl).then(() => {
       this.setState({
         imageThumbnailUrl: imageThumbnailUrl

package/lib/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
 var _UploadProgress = _interopRequireDefault(require("../../../../UploadProgress"));
+var _url = require("../../../../utils/url");
 var _FileUploader = _interopRequireDefault(require("../../../../FileUploader"));
 var _lang = require("../../../../lang");
 require("./index.css");
@@ -163,7 +163,7 @@ class LocalImageAddition extends _react.default.Component {
       const uploadLocalImageValue = this.props.uploadLocalImageValue;
       let uploadedFileList = [];
       uploadedFileList = uploadLocalImageValue.length > 0 && uploadLocalImageValue.map((imgSrc, index) => {
-        let imageThumbnailUrl = (0, _dtableUtils.getImageThumbnailUrl)(imgSrc);
+        let imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(imgSrc);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-image-wrapper",
           onMouseEnter: event => this.showDeleteIcon(event, index),

package/lib/ImageFormatter/images-lazy-load.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
 var _Loading = _interopRequireDefault(require("../Loading"));
+var _url = require("../utils/url");
 var _jsxRuntime = require("react/jsx-runtime");
 const ImagesLazyLoad = _ref => {
   let images = _ref.images,
@@ -52,7 +52,7 @@ const ImagesLazyLoad = _ref => {
     setLoadedImages([]);
     setLoadedCount(0);
     currentImages.forEach((item, index) => {
-      const url = (0, _dtableUtils.getImageThumbnailUrl)(item, {
+      const url = (0, _url.getImageThumbnailUrl)(item, {
         server,
         dtableUuid
       });

package/lib/ImageFormatter/index.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
 var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
+var _url = require("../utils/url");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class ImageFormatter extends _react.default.Component {
@@ -80,10 +80,7 @@ class ImageFormatter extends _react.default.Component {
     }
     if (isSample) {
       let item = value[0];
-      let url = (0, _dtableUtils.getImageThumbnailUrl)(item, {
-        server,
-        dtableUuid
-      });
+      let url = (0, _url.getImageThumbnailUrl)(item, server);
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: className,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

package/lib/ImagePreviewerLightbox/index.js

@@ -9,7 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
-var _dtableUtils = require("dtable-utils");
 var _url = require("../utils/url");
 var _lang = require("../lang");
 require("@seafile/react-image-lightbox/style.css");
@@ -71,7 +70,7 @@ function ImagePreviewerLightbox(props) {
   const canRotateImage = onRotateImage && !readOnly && !['gif', 'heic', 'heif'].includes((0, _url.getFileSuffix)(URL)) && (0, _url.isInternalImg)(URL, server);
   let mainSrc = URL;
   if ((0, _url.needUseThumbnailImage)(URL)) {
-    mainSrc = (0, _dtableUtils.getImageThumbnailUrl)(URL, {
+    mainSrc = (0, _url.getImageThumbnailUrl)(URL, {
       server,
       dtableUuid,
       workspaceID,

package/lib/ImageThumbnail/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _dtableUtils = require("dtable-utils");
 var _DeleteTip = _interopRequireDefault(require("../DeleteTip"));
 var _url = require("../utils/url");
 var _lang = require("../lang");
@@ -25,7 +24,7 @@ class ImageThumbnail extends _react.default.Component {
         });
         return;
       }
-      const imageThumbnailUrl = (0, _dtableUtils.getImageThumbnailUrl)(src);
+      const imageThumbnailUrl = (0, _url.getImageThumbnailUrl)(src);
       (0, _url.checkImgExists)(imageThumbnailUrl).then(() => {
         this.setState({
           imageThumbnailUrl

package/lib/SelectItem/index.js

@@ -37,7 +37,7 @@ const SelectItem = _ref => {
       title: option.name,
       children: option.name
     }), isShowRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "dtable-ui-select-item-remove-btn seatable-icon-btn",
+      className: "dtable-ui-select-item-remove-btn",
       style: removeBtnStyle,
       onClick: onRemove,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {

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;