dtable-ui-component 5.2.6 → 5.2.7-alpha1

package/lib/DTableSelect/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _utils = require("./utils");
-require("./index.css");
 class DTableSelect extends _react.default.Component {
   render() {
     const {
@@ -34,7 +33,7 @@ class DTableSelect extends _react.default.Component {
       onChange: onChange,
       options: options,
       isMulti: isMulti,
-      classNamePrefix: 'dtable-select' + classNamePrefix,
+      classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,
       components: {
         Option: _utils.Option,
@@ -71,7 +70,6 @@ DTableSelect.defaultProps = {
   isMulti: false,
   autoFocus: false,
   menuPortalTarget: '.modal',
-  classNamePrefix: '',
   noOptionsMessage: () => {
     return null;
   }

package/lib/DTableSelect/utils.js

@@ -7,6 +7,46 @@ Object.defineProperty(exports, "__esModule", {
 exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
+// 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 {
+      ...provided,
+      ...FOCUS_CONTROL_STYLE,
+      '&:hover': {
+        ...provided,
+        ...FOCUS_CONTROL_STYLE
+      }
+    };
+  }
+  return {
+    ...provided,
+    fontSize: '14px',
+    lineHeight: '1.5',
+    cursor: 'pointer',
+    ...DEFAULT_CONTROL_STYLE,
+    '&:hover': {
+      ...DEFAULT_CONTROL_STYLE
+    }
+  };
+};
 const UserSelectStyle = exports.UserSelectStyle = {
   option: (provided, state) => {
     const {
@@ -19,21 +59,10 @@ const UserSelectStyle = exports.UserSelectStyle = {
       backgroundColor: isFocused ? '#f5f5f5' : '#fff'
     };
   },
-  control: provided => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5'
-  }),
-  indicatorSeparator: () => ({
-    display: 'none'
-  }),
-  dropdownIndicator: () => ({
-    display: 'none'
-  }),
-  clearIndicator: () => ({
-    display: 'none'
-  }),
+  control: controlCallback,
+  indicatorSeparator: noneCallback,
+  dropdownIndicator: noneCallback,
+  clearIndicator: noneCallback,
   multiValue: provided => {
     return {
       ...provided,
@@ -91,23 +120,19 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       }
     };
   },
-  control: provided => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5'
-  }),
+  control: controlCallback,
   menuPortal: base => ({
     ...base,
     zIndex: 9999
   }),
-  indicatorSeparator: () => {}
+  indicatorSeparator: noneCallback
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-drop-down",
     style: {
-      fontSize: '12px'
+      fontSize: '12px',
+      marginLeft: '-2px'
     }
   }));
 };
@@ -128,7 +153,8 @@ const ClearIndicator = _ref => {
   return /*#__PURE__*/_react.default.createElement(_reactSelect.components.ClearIndicator, props, /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-fork-number",
     style: {
-      fontSize: '12px'
+      fontSize: '12px',
+      marginRight: '-2px'
     }
   }));
 };

package/lib/RowExpandLinkFormatter/index.js

@@ -37,10 +37,13 @@ class RowExpandLinkFormatter extends _react.Component {
     if (!displayColumn) {
       return props.renderEmpty();
     }
-    const {
+    let {
       type: displayColumnType,
       data: displayColumnData
     } = displayColumn;
+    if (displayColumnType === 'string') {
+      displayColumnType = _constants.CellType.TEXT;
+    }
     const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(displayColumnType));
     if (!Array.isArray(cellValue) || cellValue.length === 0) {
       return props.renderEmpty();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.6",
+  "version": "5.2.7-alpha1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",

package/lib/DTableSelect/index.css

@@ -1,4 +0,0 @@
-.dtable-select__indicator.dtable-select__dropdown-indicator,
-.dtable-select__indicator.dtable-select__clear-indicator {
-  padding: 8px 6px;
-}