dtable-ui-component 6.0.39 → 6.0.41

package/lib/CheckboxFormatter/index.css

@@ -1,6 +1,6 @@
 @import url('../css/cell-formatter.css');
 
-.dtable-ui.checkbox-formatter .checkbox-checked-mark {
+.dtable-ui.checkbox-formatter .dtable-ui-checkbox-check-mark {
   color: #20c933;
   display: flex;
   align-items: center;

package/lib/CheckboxFormatter/index.js

@@ -11,6 +11,29 @@ var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
 require("./index.css");
 class CheckboxFormatter extends _react.default.PureComponent {
+  constructor() {
+    super(...arguments);
+    this.renderIcon = (symbol, color) => {
+      let className = 'dtable-ui-checkbox-check-mark';
+      if (symbol.startsWith('dtable-icon')) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-font ".concat(symbol, " ").concat(className || ''),
+          style: {
+            color
+          }
+        });
+      }
+      className = (0, _classnames.default)(className, {
+        'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon')),
+        'scale-icon': _constants.isMobile
+      });
+      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+        className: className,
+        symbol: symbol,
+        color: color
+      });
+    };
+  }
   render() {
     let {
       value,
@@ -25,16 +48,7 @@ class CheckboxFormatter extends _react.default.PureComponent {
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: classname
-    }, checkboxStyle.type.startsWith('dtable-icon') ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-font ".concat(checkboxStyle.type, " checkbox-checked-mark"),
-      style: {
-        color: checkboxStyle.color
-      }
-    }) : /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
-      className: "dtable-ui-checkbox-check-svg",
-      symbol: checkboxStyle.type,
-      color: checkboxStyle.color
-    }));
+    }, this.renderIcon(checkboxStyle.type, checkboxStyle.color));
   }
 }
 CheckboxFormatter.defaultProps = {

package/lib/InputItem/custom-input.js

@@ -262,7 +262,9 @@ class NumberInput extends React.Component {
         getContainer: () => this.getContainer()
       }, this.getComponent());
     } else {
-      customNumberKeyboard = ReactDOM.unstable_renderSubtreeIntoContainer(this, this.getComponent(), this.getContainer());
+      const container = this.getContainer();
+      const root = ReactDOM.createRoot(container);
+      root.render(this.getComponent());
     }
   }
   renderPortal() {

package/lib/RowExpandEditor/single-select-editor/mb-editor/index.js

@@ -58,7 +58,9 @@ class RowExpandMBSingleSelectEditor extends _react.default.Component {
     };
     this.onChange = option => {
       let newValue = option[this.key];
-      if (this.state.value === newValue) newValue = null;
+      if (this.state.value === newValue) {
+        newValue = null;
+      }
       this.setState({
         value: newValue
       });

package/lib/SelectItem/index.css

@@ -0,0 +1,24 @@
+.dtable-ui.dtable-ui-select-item {
+  display: flex;
+  align-items: center;
+  padding: 0px 10px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 10px;
+  width: min-content;
+  max-width: 300px;
+  margin: 5px 10px 5px 0;
+}
+
+.dtable-ui.dtable-ui-select-item .dtable-ui-select-item-remove-btn {
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+.dtable-ui.dtable-ui-select-item .dtable-ui-select-item-remove-btn .dtable-icon-fork-number {
+  font-size: 12px;
+  transform: scale(0.8);
+  display: inline-block;
+  line-height: 12px;
+}

package/lib/SelectItem/index.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
 const SelectItem = _ref => {
   let {
     option,
@@ -16,50 +17,31 @@ const SelectItem = _ref => {
     isShowRemove,
     onRemove
   } = _ref;
-  const style = (0, _react.useMemo)(() => {
+  const selectItemStyle = (0, _react.useMemo)(() => {
     return {
-      display: 'flex',
-      alignItems: 'center',
-      padding: '0px 10px',
-      marginRight: 8,
-      height: 20,
-      lineHeight: '20px',
-      textAlign: 'center',
-      borderRadius: 10,
-      width: 'min-content',
-      maxWidth: 300,
-      margin: '5px 10px 5px 0',
       fontSize: fontSize || 13,
       backgroundColor: option.color,
       color: option.textColor || null
     };
   }, [option, fontSize]);
-  const opBtnStyle = (0, _react.useMemo)(() => {
+  const removeBtnStyle = (0, _react.useMemo)(() => {
     const textColor = option.textColor || null;
     return {
-      cursor: 'pointer',
-      color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
-      marginLeft: 5
+      color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090'
     };
   }, [option]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('dtable-ui dtable-ui-select-item', className),
-    style: style
+    style: selectItemStyle
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "dtable-ui-select-item-name text-truncate",
     title: option.name
   }, option.name), isShowRemove && /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-select-item-operation-btn",
-    style: opBtnStyle,
+    className: "dtable-ui-select-item-remove-btn",
+    style: removeBtnStyle,
     onClick: onRemove
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "dtable-font dtable-icon-fork-number",
-    style: {
-      fontSize: '12px',
-      transform: 'scale(0.8)',
-      display: 'inline-block',
-      lineHeight: '12px'
-    }
+    className: "dtable-font dtable-icon-fork-number"
   })));
 };
 var _default = exports.default = SelectItem;

package/lib/SingleSelectFormatter/index.js

@@ -15,7 +15,7 @@ class SingleSelectFormatter extends _react.default.PureComponent {
     this.getOption = () => {
       let {
         value,
-        options,
+        options = [],
         fontSize
       } = this.props;
       let option = options.find(item => item.id === value || item.name === value);
@@ -38,7 +38,4 @@ class SingleSelectFormatter extends _react.default.PureComponent {
     }, value ? this.getOption() : '');
   }
 }
-SingleSelectFormatter.defaultProps = {
-  options: []
-};
 var _default = exports.default = SingleSelectFormatter;

package/lib/SvgIcon/index.js

@@ -6,25 +6,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _constants = require("../constants");
 require("./index.css");
-const needScaleIcons = ['check', 'dot', 'cross'];
-const SvgIcon = props => {
-  const {
+const iconComponents = {};
+const requireContext = require.context('../assets/icons', false, /\.svg$/);
+requireContext.keys().forEach(path => {
+  const iconName = path.replace(/^\.\/(.*?)\.svg$/, '$1').toLowerCase();
+  iconComponents[iconName] = requireContext(path).default;
+});
+const SvgIcon = _ref => {
+  let {
     className,
     symbol,
     color
-  } = props;
-  let iconClass = "dtable-ui-multicolor-icon multicolor-icon-".concat(symbol, " ").concat(className || '');
-  if (needScaleIcons.includes(symbol) && _constants.isMobile) {
-    iconClass += ' scale-icon';
-  }
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  } = _ref;
+  if (!symbol) return null;
+  const iconClass = "dtable-ui-multicolor-icon multicolor-icon-".concat(symbol, " ").concat(className || '');
+  const props = {
     className: iconClass,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("use", {
-    fill: color,
-    xlinkHref: "#".concat(symbol)
-  }));
+    style: {
+      fill: color
+    },
+    ariaHidden: 'true'
+  };
+  const IconComponent = iconComponents[symbol];
+  if (!IconComponent) return null;
+  return /*#__PURE__*/_react.default.createElement(IconComponent, props);
 };
 var _default = exports.default = SvgIcon;

package/lib/assets/icons/check.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<title>check</title>
+<g id="check">
+	<g id="路径" transform="translate(0.020249, 4.178564)">
+		<path d="M27.9,0.7L12,18.1L4.1,8.9C3.2,7.9,1.8,7.6,0.7,8.6c-1,0.8-0.9,2.5,0,3.6c6.5,7.3,9.8,11,9.8,11
+			c1,0.9,1.9,1,2.8,0l17.9-19c1-1,1-2.5,0.2-3.4C30.4-0.4,28.8-0.2,27.9,0.7z"/>
+	</g>
+</g>
+</svg>

package/lib/assets/icons/cross.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<title>x-check-box</title>
+<g id="x-check-box">
+	<g id="fork-number">
+		<path id="路径" d="M18.8,16l8.5-8.5c0.8-0.8,0.8-2.1,0-2.8s-2.1-0.8-2.8,0L16,13.2L7.5,4.6c-0.8-0.8-2.1-0.8-2.8,0
+			s-0.8,2.1,0,2.8l8.5,8.5l-8.5,8.5c-0.8,0.8-0.8,2.1,0,2.8c0.8,0.7,2.1,0.8,2.8,0l8.5-8.5l8.5,8.5c0.8,0.8,2.1,0.8,2.8,0
+			c0.8-0.8,0.8-2.1,0-2.8l0,0L18.8,16z"/>
+	</g>
+</g>
+</svg>

package/lib/assets/icons/dot.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<title>dot</title>
+<g id="dot">
+	<circle id="椭圆形" cx="16" cy="16" r="9"/>
+</g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.39",
+  "version": "6.0.41",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",