dtable-ui-component 6.0.25 → 6.0.26-beta

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

@@ -1,197 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _lang = require("../../lang");
-var _selectEditorOption = _interopRequireDefault(require("../select-editor-option"));
-var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
-require("./index.css");
-class MBSelectEditorPopover extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.handleHistoryBack = e => {
-      e.preventDefault();
-      this.props.onClosePopover();
-    };
-    this.onContainerClick = event => {
-      if (this.editorPopover && this.editorPopover.contains(event.target)) {
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-        return false;
-      }
-    };
-    this.onChangeSearch = event => {
-      let {
-        searchVal
-      } = this.state;
-      if (searchVal === event.target.value) {
-        return;
-      }
-      searchVal = event.target.value;
-      this.setState({
-        searchVal
-      });
-    };
-    this.getSelectedOptions = () => {
-      let {
-        value,
-        options
-      } = this.props;
-      if (!Array.isArray(value)) {
-        return [];
-      }
-      return options.filter(option => {
-        return value.indexOf(option.id) > -1;
-      });
-    };
-    this.getFilteredOptions = () => {
-      let {
-        options
-      } = this.props;
-      let {
-        searchVal
-      } = this.state;
-      return searchVal ? options.filter(item => item.name.indexOf(searchVal) > -1) : options;
-    };
-    this.onSelectOption = option => {
-      this.props.onOptionItemToggle(option);
-    };
-    this.onAddNewOption = event => {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      let newOption = this.state.searchVal.trim();
-      if (newOption) {
-        this.props.onAddNewOption(newOption);
-        this.props.onClosePopover();
-      }
-    };
-    this.onRemoveOption = option => {
-      this.props.onOptionItemToggle(option);
-    };
-    this.renderSelectOptions = options => {
-      let {
-        value
-      } = this.props;
-      return options.map((option, index) => {
-        let isSelect = value.some(item => item === option.id);
-        let style = {
-          backgroundColor: option.color,
-          color: option.textColor || null
-        };
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "mb-select-option-item",
-          key: index,
-          onMouseDown: this.onSelectOption.bind(this, option)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "mb-select-item"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "item-name",
-          style: style,
-          title: option.name
-        }, option.name)), /*#__PURE__*/_react.default.createElement("span", {
-          className: "mb-item-checked"
-        }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
-          className: "dtable-font dtable-icon-check-mark"
-        })));
-      });
-    };
-    this.setEditorPopover = editorPopover => {
-      this.editorPopover = editorPopover;
-    };
-    this.state = {
-      searchVal: ''
-    };
-  }
-  componentDidMount() {
-    history.pushState(null, null, '#'); // eslint-disable-line
-    window.addEventListener('popstate', this.handleHistoryBack, false);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('popstate', this.handleHistoryBack, false);
-  }
-  render() {
-    const {
-      isReadOnly,
-      column,
-      isSupportNewOption,
-      isShowRemoveIcon
-    } = this.props;
-    const {
-      searchVal
-    } = this.state;
-    const selectedOptions = this.getSelectedOptions();
-    const filteredOptions = this.getFilteredOptions();
-    let isShowRemoveBtn = !isReadOnly && isShowRemoveIcon;
-    let isShowCreateBtn = !isReadOnly && isSupportNewOption && !!searchVal;
-    if (isShowCreateBtn) {
-      isShowCreateBtn = filteredOptions.length === 0;
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorPopover,
-      className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
-      style: {
-        zIndex: 99
-      },
-      onClick: this.onContainerClick
-    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
-      title: column.name,
-      leftContent: /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-return"
-      }),
-      onLeftClick: this.props.onClosePopover
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-selected-item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "title"
-    }, (0, _lang.getLocale)('Current_option')), /*#__PURE__*/_react.default.createElement("div", {
-      className: "content"
-    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
-      className: "empty-placeholder"
-    }, (0, _lang.getLocale)('No_option')), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
-      return /*#__PURE__*/_react.default.createElement(_selectEditorOption.default, {
-        key: selectedOption.id,
-        option: selectedOption,
-        isShowRemoveIcon: isShowRemoveBtn,
-        onDeleteSelectOption: this.onRemoveOption
-      });
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-search-select-items"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_option'),
-      value: searchVal,
-      onChange: this.onChangeSearch,
-      onClick: this.onInputClick
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-select-options-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "title"
-    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Choose_an_option'))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "content"
-    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, filteredOptions.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-result-none"
-    }, (0, _lang.getLocale)('No_options_available')), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)))), isShowCreateBtn && /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-create-select-item",
-      onClick: this.onAddNewOption
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-add-table"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-add-new-option"
-    }, "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)))));
-  }
-}
-MBSelectEditorPopover.defaultProps = {
-  isReadOnly: false,
-  isShowRemoveIcon: false,
-  isSupportNewOption: false,
-  value: []
-};
-var _default = exports.default = MBSelectEditorPopover;

package/lib/select-editor/select-editor-option.js

@@ -1,84 +0,0 @@
-"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"));
-class SelectEditorOption extends _react.default.Component {
-  constructor() {
-    super(...arguments);
-    this.onDeleteOption = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-      this.props.onDeleteSelectOption(this.props.option);
-    };
-    this.getContainerStyle = () => {
-      let option = this.props.option;
-      return {
-        display: 'inline-flex',
-        justifyContent: 'center',
-        marginRight: '10px',
-        padding: '0px 10px',
-        height: '20px',
-        borderRadius: '10px',
-        fontSize: '13px',
-        backgroundColor: option.color
-      };
-    };
-    this.getOptionStyle = option => {
-      const textColor = option.textColor || null;
-      return {
-        flex: 1,
-        display: 'flex',
-        alignContent: 'center',
-        margin: '0 4px 0 2px',
-        color: textColor
-      };
-    };
-    this.getOperationStyle = option => {
-      const textColor = option.textColor || null;
-      return {
-        height: '20px',
-        width: '16px',
-        cursor: 'pointer',
-        color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
-        transform: 'scale(.8)'
-      };
-    };
-  }
-  render() {
-    let {
-      option,
-      isShowRemoveIcon
-    } = this.props;
-    let containerStyle = this.getContainerStyle();
-    let optionStyle = this.getOptionStyle(option);
-    let operationStyle = this.getOperationStyle(option);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui select-option-item",
-      style: containerStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-info",
-      style: optionStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-name",
-      title: option.name
-    }, option.name)), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-remove",
-      style: operationStyle,
-      onClick: this.onDeleteOption
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number",
-      style: {
-        fontSize: '12px',
-        lineHeight: '20px'
-      }
-    })));
-  }
-}
-SelectEditorOption.defaultProps = {
-  isShowRemoveIcon: false
-};
-var _default = exports.default = SelectEditorOption;