dtable-ui-component 6.0.126-beta.s1 → 6.0.126

package/lib/DTableCustomizeSelect/index.css

@@ -1,124 +1,100 @@
-.seatable-customize-select {
+.dtable-select {
   position: relative;
+}
+
+.dtable-select.custom-select {
   display: flex;
-  padding: 0 16px;
-  border-radius: 4px;
+  padding: 0 10px;
+  border-radius: 3px;
   align-items: center;
   justify-content: space-between;
   max-width: 900px;
   user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
   text-align: left;
-  line-height: 1.5;
-  background-image: none;
-  font-size: 14px;
-  color: var(--bs-body-color);
-  border: 1px solid rgba(0, 40, 100, 0.12);
 }
 
-.seatable-customize-select:focus,
-.seatable-customize-select.focus {
-  border-color: #3E84F7 !important;
+.dtable-select.custom-select:focus,
+.dtable-select.custom-select.focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 
-.seatable-customize-select.disabled:focus,
-.seatable-customize-select.focus.disabled,
-.seatable-customize-select.disabled:hover {
+.dtable-select.custom-select.disabled:focus,
+.dtable-select.custom-select.focus.disabled,
+.dtable-select.custom-select.disabled:hover {
   border-color: rgba(0, 40, 100, 0.12) !important;
   box-shadow: unset;
   cursor: default;
 }
 
-.seatable-customize-select:hover {
+.dtable-select.custom-select:hover {
   cursor: pointer;
-  border-color: var(--bs-border-color);
+  border-color: rgb(179, 179, 179);
+}
+
+.dtable-select .dtable-icon-down3 {
+  display: inline-block;
+  font-size: 12px;
+  color: #999;
+  transition: all 0.1s;
 }
 
-.seatable-customize-select .seatable-multicolor-icon-down {
-  width: 12px;
-  height: 12px;
-  color: var(--bs-icon-color);
+.dtable-select .dtable-icon-down3:hover {
+  color: #555;
 }
 
-.seatable-customize-select .selected-option {
+.dtable-select .selected-option {
   display: flex;
   flex: 1;
   overflow: hidden;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  background: inherit;
+  background: #fff;
 }
 
-.seatable-check-color {
-  color: var(--bs-icon-color);
-}
-
-.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content,
-.seatable-customize-select.selector-group .seatable-option-group .seatable-option-group-content {
+.dtable-select.dtable-ui-collaborator-selector .option-group .option-group-content,
+.dtable-select.selector-group .option-group .option-group-content {
   padding: 10px;
 }
 
-.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content {
+.dtable-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
   padding: 10px 0;
 }
 
-.seatable-customize-select.dtable-ui-collaborator-selector .option {
+.dtable-select.custom-select.dtable-ui-collaborator-selector .option {
   padding: 5px 0 5px 10px !important;
   line-height: 20px;
 }
 
-.seatable-customize-select.selector-group .option {
+.dtable-select.selector-group .option {
   height: 30px;
   display: flex;
   align-items: center;
 }
 
-.seatable-customize-select.selector-group .select-group-option {
+.dtable-select.selector-group .select-group-option {
   justify-content: space-between;
 }
 
-.seatable-customize-select.selector-group .selected-option .selected-group {
+.dtable-select.selector-group .selected-option .selected-group {
   padding: 0 2px;
   background: #eceff4;
   border-radius: 3px;
 }
 
-.seatable-customize-select .select-placeholder {
-  line-height: 1;
-  font-size: 14px;
-  white-space: nowrap;
-  color: #868E96;
-  margin-right: 8px;
-}
-
-.seatable-customize-select .disabled .select-placeholder {
-  opacity: 0.65;
-}
-
-.seatable-customize-select .selected-option-show {
-  height: 20px;
-  line-height: 20px;
-  margin-right: 8px;
-  width: calc(100% - 20px);
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.dtable-select .selected-option-show {
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.seatable-customize-select .selected-option .multicolor-icon {
-  font-size: 12px;
-}
-
-.seatable-customize-select .multiple-check-icon,
-.seatable-customize-select .header-icon .dtable-font,
-.seatable-option-group .select-label .header-icon .dtable-font {
-  color: var(--bs-icon-secondary-color) !important;
-  cursor: default;
+.dtable-select .select-placeholder {
+  line-height: 1;
   font-size: 14px;
-}
-
-.seatable-customize-select .header-icon {
-  display: inline-block;
-  padding: 0 .5rem 0 0!important;
-  margin-left: 0 !important;
+  white-space: nowrap;
 }

package/lib/DTableCustomizeSelect/index.js

@@ -7,11 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
-var _util = require("./util");
-var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableCustomizeSelect extends _react.Component {
@@ -25,8 +23,8 @@ class DTableCustomizeSelect extends _react.Component {
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
       let eventClassName = event.target.className;
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-option-group-search') return;
-      // Prevent closing by pressing the space bar in the search input
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
+      // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
         isShowSelectOptions: !this.state.isShowSelectOptions
@@ -47,24 +45,20 @@ class DTableCustomizeSelect extends _react.Component {
     };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
-      const {
-        height
-      } = this.selector.getBoundingClientRect();
+      const _this$selector$getBou = this.selector.getBoundingClientRect(),
+        height = _this$selector$getBou.height;
       return height;
     };
     this.getFilterOptions = searchValue => {
-      const {
-        options,
-        searchable
-      } = this.props;
+      const _this$props = this.props,
+        options = _this$props.options,
+        searchable = _this$props.searchable;
       if (!searchable) return options || [];
       const validSearchVal = searchValue.trim().toLowerCase();
       if (!validSearchVal) return options || [];
       return options.filter(option => {
-        const {
-          value,
-          name
-        } = option;
+        const value = option.value,
+          name = option.name;
         if (typeof name === 'string') {
           return name.toLowerCase().indexOf(validSearchVal) > -1;
         }
@@ -85,29 +79,26 @@ class DTableCustomizeSelect extends _react.Component {
     };
   }
   render() {
-    const {
-      className,
-      value,
-      options,
-      placeholder,
-      searchable,
-      searchPlaceholder,
-      noOptionsPlaceholder,
-      isLocked,
-      isInModal,
-      component
-    } = this.props;
+    let _this$props2 = this.props,
+      className = _this$props2.className,
+      value = _this$props2.value,
+      options = _this$props2.options,
+      placeholder = _this$props2.placeholder,
+      searchable = _this$props2.searchable,
+      searchPlaceholder = _this$props2.searchPlaceholder,
+      noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
+      isLocked = _this$props2.isLocked,
+      isInModal = _this$props2.isInModal,
+      addOptionAble = _this$props2.addOptionAble,
+      component = _this$props2.component;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      tabIndex: "0",
-      role: "button",
       ref: node => this.selector = node,
-      className: (0, _classnames.default)('seatable-customize-select custom-select', {
+      className: (0, _classnames.default)('dtable-select custom-select', {
         'focus': this.state.isShowSelectOptions
       }, {
         'disabled': isLocked
       }, className),
       onClick: this.onSelectToggle,
-      onKeyDown: _util.onKeyDown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "selected-option",
         children: [value && value.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -116,15 +107,12 @@ class DTableCustomizeSelect extends _react.Component {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "select-placeholder",
           children: placeholder
-        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "d-inline-flex align-items-center",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-            symbol: "down",
-            color: "var(--bs-icon-color)"
-          })
+        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-down3"
         })]
-      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
+      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
         value: value,
+        addOptionAble: addOptionAble,
         component: component,
         isShowSelected: this.props.isShowSelected,
         top: this.getSelectedOptionTop(),
@@ -138,9 +126,10 @@ class DTableCustomizeSelect extends _react.Component {
         getFilterOptions: this.getFilterOptions,
         supportMultipleSelect: this.props.supportMultipleSelect
       }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
           className: className,
           value: value,
+          addOptionAble: addOptionAble,
           component: component,
           isShowSelected: this.props.isShowSelected,
           position: this.selector.getBoundingClientRect(),

package/lib/DTableDropdownItem/index.js

@@ -13,24 +13,22 @@ var _DTableToolTip = _interopRequireDefault(require("../DTableToolTip"));
 var _svgIcon = _interopRequireDefault(require("../DTableIcon/svg-icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownItem = _ref => {
-  let {
-    className,
-    divider,
-    id,
-    toggle,
-    disabled,
-    tooltip,
-    itemProps,
-    showChecked,
-    checked,
-    leftSlotContent,
-    rightSlotContent,
-    icon,
-    content,
-    onClick,
-    style,
-    tabIndex
-  } = _ref;
+  let className = _ref.className,
+    divider = _ref.divider,
+    id = _ref.id,
+    toggle = _ref.toggle,
+    disabled = _ref.disabled,
+    tooltip = _ref.tooltip,
+    itemProps = _ref.itemProps,
+    showChecked = _ref.showChecked,
+    checked = _ref.checked,
+    leftSlotContent = _ref.leftSlotContent,
+    rightSlotContent = _ref.rightSlotContent,
+    icon = _ref.icon,
+    content = _ref.content,
+    onClick = _ref.onClick,
+    style = _ref.style,
+    tabIndex = _ref.tabIndex;
   if (divider) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.DropdownItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
       divider: true,

package/lib/DTableDropdownMenu/index.js

@@ -10,16 +10,14 @@ var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DTableDropdownMenu = _ref => {
-  let {
-    id,
-    className,
-    container,
-    modifiers,
-    flip,
-    style,
-    menuProps,
-    children
-  } = _ref;
+  let id = _ref.id,
+    className = _ref.className,
+    container = _ref.container,
+    modifiers = _ref.modifiers,
+    flip = _ref.flip,
+    style = _ref.style,
+    menuProps = _ref.menuProps,
+    children = _ref.children;
   let customMenuProps = (0, _objectSpread2.default)({}, menuProps);
   customMenuProps.modifiers = [{
     name: 'preventOverflow',

package/lib/DTableEmptyTip/index.js

@@ -10,11 +10,10 @@ require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableEmptyTip extends _react.default.Component {
   render() {
-    const {
-      text,
-      title,
-      type
-    } = this.props;
+    const _this$props = this.props,
+      text = _this$props.text,
+      title = _this$props.title,
+      type = _this$props.type;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "empty-tip",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

package/lib/DTableFiltersPopover/index.css

@@ -29,8 +29,6 @@
   font-weight: 500;
   background: #fff;
   color: #666;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
   position: relative;
 }
 

package/lib/DTableFiltersPopover/index.js

@@ -29,10 +29,8 @@ var _jsxRuntime = require("react/jsx-runtime");
   constructor(props) {
     super(props);
     this.updateFilters = _ref => {
-      let {
-        filter_conjunction,
-        filters
-      } = _ref;
+      let filter_conjunction = _ref.filter_conjunction,
+        filters = _ref.filters;
       const filterConjunction = filter_conjunction || this.state.filterConjunction;
       if (this.isNeedSubmit) {
         const isSubmitDisabled = false;
@@ -54,12 +52,8 @@ var _jsxRuntime = require("react/jsx-runtime");
       });
     };
     this.addFilter = () => {
-      const {
-        columns
-      } = this.props;
-      const {
-        filters
-      } = this.state;
+      const columns = this.props.columns;
+      const filters = this.state.filters;
       const newFilter = (0, _utils.getDefaultFilter)(columns);
       if (!newFilter) {
         return;
@@ -69,12 +63,8 @@ var _jsxRuntime = require("react/jsx-runtime");
       });
     };
     this.addFilterGroup = () => {
-      const {
-        columns
-      } = this.props;
-      const {
-        filters
-      } = this.state;
+      const columns = this.props.columns;
+      const filters = this.state.filters;
       const newFilterGroup = (0, _utils.getDefaultFilterGroup)(columns);
       if (!newFilterGroup) {
         return;
@@ -87,10 +77,9 @@ var _jsxRuntime = require("react/jsx-runtime");
       this.props.hidePopover();
     };
     this.onSubmitFilters = () => {
-      const {
-        filters,
-        filterConjunction
-      } = this.state;
+      const _this$state = this.state,
+        filters = _this$state.filters,
+        filterConjunction = _this$state.filterConjunction;
       const update = {
         filters,
         filter_conjunction: filterConjunction
@@ -101,12 +90,10 @@ var _jsxRuntime = require("react/jsx-runtime");
     this.onPopoverInsideClick = e => {
       e.stopPropagation();
     };
-    const {
-      filterConjunction: _filterConjunction,
-      filters: _filters,
-      columns: _columns,
-      isNeedSubmit
-    } = props;
+    const _filterConjunction = props.filterConjunction,
+      _filters = props.filters,
+      _columns = props.columns,
+      isNeedSubmit = props.isNeedSubmit;
     this.state = {
       filters: (0, _dtableUtils.getValidFilters)(_filters, _columns),
       filterConjunction: _constants.SUPPORT_CONJUNCTIONS.includes(_filterConjunction) ? _filterConjunction : _dtableUtils.FILTER_CONJUNCTION_TYPE.AND,
@@ -115,21 +102,19 @@ var _jsxRuntime = require("react/jsx-runtime");
     this.isNeedSubmit = isNeedSubmit;
   }
   render() {
-    const {
-      target,
-      columns,
-      placement,
-      isSupportAdvanced,
-      departments,
-      lang,
-      readOnly,
-      userDepartmentIdsMap,
-      firstDayOfWeek
-    } = this.props;
-    const {
-      filters,
-      filterConjunction
-    } = this.state;
+    const _this$props = this.props,
+      target = _this$props.target,
+      columns = _this$props.columns,
+      placement = _this$props.placement,
+      isSupportAdvanced = _this$props.isSupportAdvanced,
+      departments = _this$props.departments,
+      lang = _this$props.lang,
+      readOnly = _this$props.readOnly,
+      userDepartmentIdsMap = _this$props.userDepartmentIdsMap,
+      firstDayOfWeek = _this$props.firstDayOfWeek;
+    const _this$state2 = this.state,
+      filters = _this$state2.filters,
+      filterConjunction = _this$state2.filterConjunction;
     const canAddFilter = columns.length > 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTablePopover.default, {
       target: target,

package/lib/DTableFiltersPopover/utils/filter-item-utils.js

@@ -13,9 +13,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 class FilterItemUtils {
   static generatorColumnOption(column) {
     if (!column) return null;
-    const {
-      name
-    } = column;
+    const name = column.name;
     return {
       value: {
         column
@@ -107,7 +105,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-check-icon",
           children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check"
+            className: "option-edit dtable-font dtable-icon-check-mark"
           })
         })]
       })
@@ -132,7 +130,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-check-icon",
           children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check"
+            className: "option-edit dtable-font dtable-icon-check-mark"
           })
         })]
       })