dtable-ui-component 5.2.8 → 5.2.9-alpha2

package/lib/DTableModalHeader/index.css

@@ -0,0 +1,23 @@
+.modal-header .dtable-modal-close.close {
+  padding: 14px 16px;
+  opacity: 1;
+}
+
+.modal-header .dtable-modal-close.close:not(:disabled):not(.disabled):hover {
+  opacity: 1;
+}
+
+.modal-header .dtable-modal-close .dtable-modal-close-inner {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  border-radius: 3px;
+}
+
+.modal-header .dtable-modal-close .dtable-modal-close-inner:hover {
+  background-color: #efefef;
+}
+
+.modal-header .dtable-modal-close .dtable-modal-close-inner .dtable-font {
+  color: #666;
+}

package/lib/DTableModalHeader/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+require("./index.css");
+const DTableModalHeader = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  const customCloseBtn = /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "close dtable-modal-close",
+    "data-dismiss": "modal",
+    "aria-label": "Close",
+    onClick: props.toggle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-modal-close-inner"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "dtable-font dtable-icon-x",
+    "aria-hidden": "true"
+  })));
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, Object.assign({}, props, {
+    close: customCloseBtn
+  }), children);
+};
+var _default = exports.default = DTableModalHeader;

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,17 +120,12 @@ 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", {

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

@@ -106,6 +106,12 @@ Object.defineProperty(exports, "DTableFiltersPopover", {
     return _DTableFiltersPopover.default;
   }
 });
+Object.defineProperty(exports, "DTableModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _DTableModalHeader.default;
+  }
+});
 Object.defineProperty(exports, "DTablePopover", {
   enumerable: true,
   get: function () {
@@ -480,6 +486,7 @@ var _DTableSearchInput = _interopRequireDefault(require("./DTableSearchInput"));
 var _DTableColorPicker = _interopRequireDefault(require("./DTableColorPicker"));
 var _ModalPortal = _interopRequireDefault(require("./ModalPortal"));
 var _RoleStatusEditor = _interopRequireDefault(require("./RoleStatusEditor"));
+var _DTableModalHeader = _interopRequireDefault(require("./DTableModalHeader"));
 var _DepartmentSelectFilter = _interopRequireDefault(require("./DepartmentSelectFilter"));
 var _FieldDisplaySetting = _interopRequireDefault(require("./FieldDisplaySetting"));
 var _DTableFiltersPopover = _interopRequireDefault(require("./DTableFiltersPopover"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.8",
+  "version": "5.2.9-alpha2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",
@@ -9,7 +9,7 @@
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
-    "dtable-utils": "5.0.12",
+    "dtable-utils": "5.0.11",
     "is-hotkey": "0.2.0",
     "prop-types": "^15.8.1",
     "react": "17.0.2",