dtable-ui-component 6.0.25 → 6.0.26-beta1

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/lg/index.js

@@ -0,0 +1,247 @@
+"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 _dtableUtils = require("dtable-utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+var _MultipleSelectEditor = _interopRequireDefault(require("../../../MultipleSelectEditor"));
+var _lang = require("../../../lang");
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
+require("./index.css");
+class Large extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.getOptions = props => {
+      const {
+        column
+      } = props;
+      return (0, _dtableUtils.getColumnOptions)(column);
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showSelectPopover) {
+        this.setState({
+          showSelectPopover: true
+        });
+      }
+    };
+    this.toggleSingleSelect = value => {
+      this.setState({
+        showSelectPopover: value
+      }, () => {
+        var _this$selectRef;
+        if (value) return;
+        // eslint-disable-next-line no-unused-expressions
+        (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.focus();
+      });
+    };
+    this.hideDropDownMenu = event => {
+      if (!event.target) return;
+      if (!this.ref.contains(event.target) && this.state.showSelectPopover) {
+        const singleSelectEditor = document.getElementsByClassName('dtable-ui-select-editor-container')[0];
+        if (singleSelectEditor && singleSelectEditor.contains(event.target)) return;
+        this.toggleSingleSelect(false);
+      }
+    };
+    this.onToggleSelect = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const {
+        updateTabIndex,
+        columnIndex
+      } = this.props;
+      updateTabIndex && updateTabIndex(columnIndex);
+      this.toggleSingleSelect(true);
+    };
+    this.closeEditor = () => {
+      this.toggleSingleSelect(false);
+    };
+    this.onFocus = () => {
+      const {
+        updateTabIndex,
+        columnIndex
+      } = this.props;
+      updateTabIndex && updateTabIndex(columnIndex);
+    };
+    this.onChange = option => {
+      const optionKey = option[this.key];
+      let newValue = this.state.value.slice(0);
+      const optionKeyIndex = newValue.findIndex(o => o === optionKey);
+      if (optionKeyIndex === -1) {
+        newValue.push(optionKey);
+      } else {
+        newValue.splice(optionKeyIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.removeOption = (option, event) => {
+      event.stopPropagation();
+      this.onChange(option);
+    };
+    this.getMultipleSelectList = () => {
+      const {
+        value
+      } = this.state;
+      if (!Array.isArray(value)) return [];
+      const selectedOptions = this.options.filter(option => value.includes(option[this.key]));
+      const selectedOptionIds = selectedOptions.map(option => option[this.key]);
+      const invalidOptionIds = value.filter(optionId => !selectedOptionIds.includes(optionId));
+      return selectedOptions.map((option, optionIdx) => {
+        let textColor = option.textColor || null;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-select-option dtable-ui-multiple-select-option",
+          style: {
+            backgroundColor: option.color,
+            color: textColor
+          },
+          title: option.name,
+          key: optionIdx
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-ui-select-option-name"
+        }, option.name), /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-select-option-remove"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "remove-icon",
+          onClick: this.removeOption.bind(this, option),
+          "aria-label": (0, _lang.getLocale)('Delete')
+        }, /*#__PURE__*/_react.default.createElement("i", {
+          className: "dtable-font dtable-icon-fork-number",
+          style: {
+            color: textColor === '#FFFFFF' ? textColor : null
+          },
+          "aria-hidden": "true"
+        }))));
+      }).concat(invalidOptionIds.map((optionId, index) => {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-select-option dtable-ui-multiple-select-option",
+          style: {
+            backgroundColor: _constants.DELETED_OPTION_BACKGROUND_COLOR
+          },
+          title: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS),
+          key: "deleted-multiple-select-".concat(index)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "dtable-ui-select-option-name"
+        }, (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS)), /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-select-option-remove"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "remove-icon",
+          onClick: this.removeOption.bind(this, {
+            id: optionId
+          }),
+          "aria-label": (0, _lang.getLocale)('Delete')
+        }, /*#__PURE__*/_react.default.createElement("i", {
+          className: "dtable-font dtable-icon-fork-number",
+          "aria-hidden": "true"
+        }))));
+      }));
+    };
+    this.renderOptions = () => {
+      const {
+        isEditorFocus,
+        classNamePrefix,
+        placeholder
+      } = this.props;
+      const options = this.getMultipleSelectList();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        tabIndex: 0,
+        onFocus: this.onFocus,
+        onClick: this.onToggleSelect,
+        ref: ref => this.multipleSelectOptionsRef = ref,
+        className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
+          'focus': isEditorFocus,
+          ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
+        })
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
+          ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
+        })
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('', {
+          ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
+        })
+      }, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
+          ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
+        })
+      }, options), options.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
+        "aria-hidden": "true",
+        className: "dtable-font dtable-icon-down3"
+      })));
+    };
+    this.state = {
+      value: _props.value || [],
+      showSelectPopover: false
+    };
+    this.key = _props.valueKey === 'name' ? 'name' : 'id';
+    this.options = this.getOptions(_props);
+    this.selectRef = null;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideDropDownMenu);
+    document.addEventListener('keydown', this.onKeyDown);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      value,
+      column
+    } = nextProps;
+    if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
+      this.options = this.getOptions(nextProps);
+      this.setState({
+        value
+      });
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.showSelectPopover !== prevState.showSelectPopover) {
+      if (this.state.showSelectPopover === true && this.props.onEditorOpen) {
+        this.props.onEditorOpen();
+      }
+      if (this.state.showSelectPopover === false && this.props.onEditorClose) {
+        this.props.onEditorClose();
+      }
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideDropDownMenu);
+    document.removeEventListener('keydown', this.onKeyDown);
+  }
+  render() {
+    const {
+      column,
+      isSupportNewOption,
+      onAddNewOption,
+      classNamePrefix
+    } = this.props;
+    const {
+      showSelectPopover,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "position-relative w-100",
+      ref: ref => this.ref = ref
+    }, this.renderOptions(), /*#__PURE__*/_react.default.createElement("span", {
+      ref: ref => this.targetRef = ref
+    }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_MultipleSelectEditor.default, {
+      isInModal: true,
+      options: this.options,
+      column: column,
+      value: value,
+      valueKey: this.key,
+      target: this.targetRef,
+      classNamePrefix: classNamePrefix,
+      onCommit: this.onChange,
+      isSupportNewOption: isSupportNewOption,
+      onAddNewOption: onAddNewOption,
+      onClose: this.closeEditor
+    }));
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandMultipleSelectEditor/sm/index.js

@@ -0,0 +1,155 @@
+"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 _dtableUtils = require("dtable-utils");
+var _MultipleSelectEditor = _interopRequireDefault(require("../../../MultipleSelectEditor"));
+var _SelectItem = _interopRequireDefault(require("../../../SelectItem"));
+var _lang = require("../../../lang");
+var _RightAngle = _interopRequireDefault(require("../../RightAngle"));
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
+var _constants = require("../../../constants");
+require("./index.css");
+var _RowExpandAddBtn = _interopRequireDefault(require("../../RowExpandAddBtn"));
+class Small extends _react.default.Component {
+  constructor(_props) {
+    super(_props);
+    this.getOptions = props => {
+      const {
+        column
+      } = props;
+      return (0, _dtableUtils.getColumnOptions)(column);
+    };
+    this.toggleEditor = value => {
+      this.setState({
+        showEditor: value
+      });
+    };
+    this.openEditor = event => {
+      event.stopPropagation();
+      this.toggleEditor(true);
+    };
+    this.closeEditor = () => {
+      this.toggleEditor(false);
+    };
+    this.onChange = option => {
+      const optionKey = option[this.key];
+      let newValue = this.state.value.slice(0);
+      const optionKeyIndex = newValue.findIndex(o => o === optionKey);
+      if (optionKeyIndex === -1) {
+        newValue.push(optionKey);
+      } else {
+        newValue.splice(optionKeyIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.removeOption = (option, event) => {
+      event.stopPropagation();
+      event && event.nativeEvent.stopImmediatePropagation();
+      const optionKey = option[this.key];
+      let newValue = this.state.value.slice(0);
+      const optionKeyIndex = newValue.findIndex(o => o === optionKey);
+      if (optionKeyIndex !== -1) {
+        newValue.splice(optionKeyIndex, 1);
+      }
+      this.setState({
+        value: newValue
+      });
+      this.props.onCommit(newValue);
+    };
+    this.renderOptions = () => {
+      const {
+        value
+      } = this.state;
+      let displayOptions = [];
+      if (Array.isArray(value)) {
+        const selectedOptions = this.options.filter(option => value.includes(option[this.key]));
+        const selectedOptionIds = selectedOptions.map(option => option[this.key]);
+        const invalidOptionIds = value.filter(optionId => !selectedOptionIds.includes(optionId));
+        displayOptions = selectedOptions.map((option, optionIdx) => {
+          return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+            option: option,
+            key: optionIdx,
+            isShowRemove: true,
+            onRemove: this.removeOption.bind(this, option)
+          });
+        }).concat(invalidOptionIds.map((optionId, index) => {
+          const option = {
+            name: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS),
+            color: _constants.DELETED_OPTION_BACKGROUND_COLOR
+          };
+          return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+            option: option,
+            key: "deleted-".concat(index),
+            isShowRemove: true,
+            onRemove: this.removeOption.bind(this, {
+              [this.key]: optionId
+            })
+          });
+        }));
+      }
+      if (displayOptions.length === 0) return /*#__PURE__*/_react.default.createElement(_RowExpandAddBtn.default, {
+        text: (0, _lang.getLocale)('Select_options')
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          minHeight: 50,
+          padding: '10px 0',
+          display: 'flex',
+          flexWrap: 'wrap'
+        }
+      }, displayOptions);
+    };
+    this.state = {
+      value: _props.value || [],
+      isShowEditor: false
+    };
+    this.key = _props.valueKey === 'name' ? 'name' : 'id';
+    this.options = this.getOptions(_props);
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      value,
+      column
+    } = nextProps;
+    if (value !== this.props.value || !_objectUtils.default.isSameObject(column, this.props.column)) {
+      this.options = this.getOptions(nextProps);
+      this.setState({
+        value,
+        isShowEditor: false
+      });
+    }
+  }
+  render() {
+    const {
+      column,
+      isSupportNewOption,
+      onAddNewOption
+    } = this.props;
+    const {
+      showEditor,
+      value
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui mobile-dtable-ui-row-expand-options-editor position-relative",
+      onClick: this.openEditor
+    }, this.renderOptions(), /*#__PURE__*/_react.default.createElement(_RightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_MultipleSelectEditor.default, {
+      value: value,
+      column: column,
+      valueKey: this.key,
+      options: this.options,
+      onCommit: this.onChange,
+      onClose: this.closeEditor,
+      isSupportNewOption: isSupportNewOption,
+      onAddNewOption: onAddNewOption
+    }));
+  }
+}
+var _default = exports.default = Small;

package/lib/RowExpandEditor/RowExpandNumberEditor/index.js

@@ -6,100 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _NumberEditor = _interopRequireDefault(require("../../NumberEditor"));
-class RowExpandNumberEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.toggleEditor = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-      if (this.props.readOnly) return;
-      this.setState({
-        isShowEditor: !this.state.isShowEditor
-      });
-    };
-    this.onCommit = value => {
-      this.props.onCommit(value);
-      this.setState({
-        value
-      }, () => {
-        this.setState({
-          isShowEditor: false
-        });
-      });
-    };
-    this.onBlur = () => {
-      this.setState({
-        isShowEditor: false
-      });
-    };
-    const {
-      column,
-      row,
-      isEditorFocus
-    } = props;
-    this.state = {
-      isShowEditor: isEditorFocus || false,
-      value: row[column.key]
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        value: row[column.key],
-        isShowEditor: false
-      });
-    }
-    if (nextProps.isEditorFocus !== this.props.isEditorFocus) {
-      let activeInput = document.activeElement;
-      if (nextProps.isEditorFocus === false && activeInput) {
-        activeInput.blur();
-      }
-      this.setState({
-        isShowEditor: nextProps.isEditorFocus
-      });
-    }
-  }
-  render() {
-    let {
-      column,
-      isInModal
-    } = this.props;
-    let {
-      value,
-      isShowEditor
-    } = this.state;
-    if (isShowEditor) {
-      return /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
-        isInModal: isInModal,
-        column: column,
-        value: value,
-        onBlur: this.onBlur,
-        onCommit: this.onCommit
-      });
-    }
-    let formatValue = '';
-    if ((0, _dtableUtils.isNumber)(value)) {
-      let {
-        data = {}
-      } = column;
-      formatValue = (0, _dtableUtils.getNumberDisplayString)(value, data);
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      tabIndex: 0,
-      onClick: this.toggleEditor,
-      onFocus: this.toggleEditor,
-      className: "form-control",
-      style: {
-        width: 320,
-        lineHeight: '1.625rem'
-      },
-      "aria-label": formatValue
-    }, formatValue);
-  }
-}
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _lg = _interopRequireDefault(require("./lg"));
+var _sm = _interopRequireDefault(require("./sm"));
+const RowExpandNumberEditor = props => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_lg.default, props)), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_sm.default, props)));
+};
 var _default = exports.default = RowExpandNumberEditor;

package/lib/RowExpandEditor/RowExpandNumberEditor/lg.js

@@ -0,0 +1,105 @@
+"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 _dtableUtils = require("dtable-utils");
+var _NumberEditor = _interopRequireDefault(require("../../NumberEditor"));
+class Large extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      this.props.updateTabIndex(this.props.columnIndex);
+      if (this.props.readOnly) return;
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      this.props.onCommit(value);
+      this.setState({
+        value
+      }, () => {
+        this.setState({
+          isShowEditor: false
+        });
+      });
+    };
+    this.onBlur = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    const {
+      column,
+      row,
+      isEditorFocus
+    } = props;
+    this.state = {
+      isShowEditor: isEditorFocus || false,
+      value: row[column.key]
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      column,
+      row
+    } = nextProps;
+    if (row._id !== this.props.row._id) {
+      this.setState({
+        value: row[column.key],
+        isShowEditor: false
+      });
+    }
+    if (nextProps.isEditorFocus !== this.props.isEditorFocus) {
+      let activeInput = document.activeElement;
+      if (nextProps.isEditorFocus === false && activeInput) {
+        activeInput.blur();
+      }
+      this.setState({
+        isShowEditor: nextProps.isEditorFocus
+      });
+    }
+  }
+  render() {
+    let {
+      column,
+      isInModal
+    } = this.props;
+    let {
+      value,
+      isShowEditor
+    } = this.state;
+    if (isShowEditor) {
+      return /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+        isInModal: isInModal,
+        column: column,
+        value: value,
+        onBlur: this.onBlur,
+        onCommit: this.onCommit
+      });
+    }
+    let formatValue = '';
+    if ((0, _dtableUtils.isNumber)(value)) {
+      let {
+        data = {}
+      } = column;
+      formatValue = (0, _dtableUtils.getNumberDisplayString)(value, data);
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      tabIndex: 0,
+      onClick: this.toggleEditor,
+      onFocus: this.toggleEditor,
+      className: "form-control",
+      style: {
+        width: 320,
+        lineHeight: '1.625rem'
+      },
+      "aria-label": formatValue
+    }, formatValue);
+  }
+}
+var _default = exports.default = Large;

package/lib/RowExpandEditor/RowExpandNumberEditor/sm/index.css

@@ -0,0 +1,3 @@
+.mobile-dtable-ui-row-expand-number-editor-container .form-control {
+  width: 100% !important;
+}

package/lib/RowExpandEditor/RowExpandNumberEditor/sm/index.js

@@ -0,0 +1,76 @@
+"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 _dtableUtils = require("dtable-utils");
+var _NumberEditor = _interopRequireDefault(require("../../../NumberEditor"));
+require("./index.css");
+class Small extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.toggleEditor = () => {
+      if (this.props.readOnly) return;
+      this.setState({
+        isShowEditor: !this.state.isShowEditor
+      });
+    };
+    this.onCommit = value => {
+      console.log(value);
+      this.props.onCommit(value);
+      this.setState({
+        value
+      }, () => {
+        this.setState({
+          isShowEditor: false
+        });
+      });
+    };
+    this.onBlur = () => {
+      this.setState({
+        isShowEditor: false
+      });
+    };
+    const {
+      column,
+      row
+    } = props;
+    this.state = {
+      isShowEditor: false,
+      value: row[column.key]
+    };
+  }
+  render() {
+    const {
+      column
+    } = this.props;
+    const {
+      value,
+      isShowEditor
+    } = this.state;
+    let formatValue = '';
+    if (!isShowEditor && (0, _dtableUtils.isNumber)(value)) {
+      const {
+        data = {}
+      } = column;
+      formatValue = (0, _dtableUtils.getNumberDisplayString)(value, data);
+    }
+    const dom = isShowEditor ? /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+      isInModal: true,
+      column: column,
+      value: value,
+      onBlur: this.onBlur,
+      onCommit: this.onCommit
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100 h-100",
+      onClick: this.toggleEditor
+    }, formatValue);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "mobile-dtable-ui-row-expand-input-editor-container mobile-dtable-ui-row-expand-number-editor-container"
+    }, dom);
+  }
+}
+var _default = exports.default = Small;