dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/RowExpandEditor/RowExpandSingleSelectorEditor/index.css

@@ -1,58 +0,0 @@
-.dtable-ui-row-expand-select-editor {
-  display: flex;
-  padding: 0 10px;
-  border-radius: 3px;
-  align-items: center;
-  justify-content: space-between;
-  user-select: none;
-  text-align: left;
-  position: relative;
-  cursor: pointer;
-  height: fit-content;
-  min-height: 2.375rem;
-}
-
-.dtable-ui-row-expand-select-editor.focus {
-  border-color: #1991eb !important;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-}
-
-.dtable-ui-row-expand-select-editor .dtable-ui-row-expand-select-editor-inner {
-  display: flex;
-  flex: 1 1;
-  overflow: hidden;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.dtable-ui-row-expand-select-editor .dtable-ui-row-expand-select-editor-inner .dtable-icon-down3 {
-  display: inline-block;
-  font-size: 12px;
-  color: #999;
-  transform: scale(0.8) translateY(2px);
-  transition: all 0.1s;
-}
-
-.dtable-ui-row-expand-select-editor .dtable-ui-row-expand-select-editor-inner .dtable-ui-select-option {
-  border-radius: 10px;
-  font-size: 13px;
-  line-height: 20px;
-  margin: 6px 0;
-  max-width: 250px;
-  overflow: hidden;
-  padding: 0 10px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: -webkit-min-content;
-  width: min-content;
-}
-
-.dtable-ui-row-expand-select-editor-popover .dtable-ui-editor-container {
-  height: fit-content;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1000;
-  width: 320px;
-}

package/lib/RowExpandEditor/RowExpandSingleSelectorEditor/index.js

@@ -1,192 +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"));
-var _dtableUtils = require("dtable-utils");
-var _constants = require("../../constants");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _SingleSelectEditor = _interopRequireDefault(require("../../SingleSelectEditor"));
-var _lang = require("../../lang");
-require("./index.css");
-class RowExpandSingleSelectEditor extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.getOptions = props => {
-      const {
-        column,
-        row,
-        columns
-      } = props;
-      const options = (0, _dtableUtils.getColumnOptions)(column);
-      const {
-        data
-      } = column;
-      const {
-        cascade_column_key,
-        cascade_settings
-      } = data || {};
-      if (cascade_column_key && Array.isArray(columns)) {
-        const cascadeColumn = columns.find(c => c.key === cascade_column_key);
-        if (cascadeColumn) {
-          const cascadeColumnValue = row[cascade_column_key];
-          if (!cascadeColumnValue) return [];
-          const cascadeSetting = cascade_settings[cascadeColumnValue];
-          if (!cascadeSetting || !Array.isArray(cascadeSetting) || cascadeSetting.length === 0) return [];
-          return options.filter(option => cascadeSetting.includes(option.id));
-        }
-      }
-      return options;
-    };
-    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.closeEditor = () => {
-      this.toggleSingleSelect(false);
-    };
-    this.hideDropDownMenu = event => {
-      if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
-      if (!this.singleSelectContainer.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();
-      this.props.updateTabIndex(this.props.columnIndex);
-      if (this.props.readOnly) return;
-      this.toggleSingleSelect(true);
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.onChange = option => {
-      let newValue = option[this.key];
-      if (this.state.value === newValue) newValue = null;
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.renderOption = () => {
-      const {
-        isEditorFocus
-      } = this.props;
-      const {
-        value
-      } = this.state;
-      const option = this.options.find(o => o[this.key] === value);
-      const optionStyle = option ? {
-        backgroundColor: option.color,
-        color: option.textColor || null
-      } : {
-        backgroundColor: _constants.DELETED_OPTION_BACKGROUND_COLOR
-      };
-      const optionName = option ? option.name : (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        tabIndex: 0,
-        onFocus: this.onFocus,
-        onClick: this.onToggleSelect,
-        ref: ref => this.selectRef = ref,
-        className: (0, _classnames.default)('dtable-ui-row-expand-select-editor custom-select', {
-          'focus': isEditorFocus
-        })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-editor-inner"
-      }, /*#__PURE__*/_react.default.createElement("div", null, value && /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-select-option",
-        style: optionStyle,
-        title: optionName
-      }, optionName)), /*#__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;
-    this.outerRef = null;
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.hideDropDownMenu);
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      value
-    } = nextProps;
-    if (value !== this.props.value) {
-      this.options = this.getOptions(nextProps);
-      this.setState({
-        value,
-        showSelectPopover: false
-      });
-    }
-  }
-  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 {
-      isSupportNewOption,
-      onAddNewOption,
-      column
-    } = this.props;
-    const {
-      showSelectPopover,
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative w-100",
-      ref: ref => this.singleSelectContainer = ref
-    }, this.renderOption(), /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.targetRef = ref
-    }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
-      isInModal: true,
-      options: this.options,
-      column: column,
-      value: value,
-      valueKey: this.key,
-      target: this.targetRef,
-      onCommit: this.onChange,
-      isSupportNewOption: isSupportNewOption,
-      onAddNewOption: onAddNewOption,
-      onClose: this.closeEditor
-    }));
-  }
-}
-var _default = exports.default = RowExpandSingleSelectEditor;

package/lib/RowExpandEditor/RowExpandTextEditor/index.css

@@ -1,4 +0,0 @@
-.dtable-ui-row-expand-simple-text-editor-container {
-  width: 100%;
-}
-

package/lib/RowExpandEditor/RowExpandTextEditor/index.js

@@ -1,127 +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"));
-var _reactstrap = require("reactstrap");
-var _TextEditor = _interopRequireDefault(require("../../TextEditor"));
-var _columnUtils = require("../../utils/column-utils");
-var _cell = require("../../utils/cell");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
-require("./index.css");
-class RowExpandSimpleText extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.setEditorRef = ref => {
-      // 'checkingField' is required if want to check current field
-      if (this.props.isRequired && (0, _columnUtils.isEnableCheckFormat)(this.props.column)) {
-        this.checkingField = ref;
-      }
-    };
-    this.focusInput = () => {
-      // use setTimeout to make sure real DOM is rendered, avoiding flush updates when React is already rendering
-      setTimeout(() => {
-        this.editor && this.editor.focusInput();
-      }, 1);
-    };
-    this.blurInput = () => {
-      setTimeout(() => {
-        this.editor && this.editor.blurInput();
-      }, 1);
-    };
-    this.onCommit = () => {
-      const {
-        isRequired,
-        column
-      } = this.props;
-      const value = this.editor.getValue();
-      if (isRequired && (0, _columnUtils.isEnableCheckFormat)(column)) {
-        this.checked = true;
-        this.checkField();
-      }
-      this.props.onCommit(value);
-    };
-    this.checkField = () => {
-      const {
-        column
-      } = this.props;
-      const text = this.editor.getValue();
-      this.validValue = (0, _cell.checkValueConformityFormat)(column.data, text);
-      this.setState({
-        inconformityFormat: !this.validValue
-      });
-      return this.validValue;
-    };
-    this.onKeyDown = event => {
-      if (event.keyCode === _constants.keyCodes.Esc) {
-        event.preventDefault();
-        this.blurInput();
-      }
-    };
-    this.isChecked = () => {
-      return this.checked;
-    };
-    this.isValidValue = () => {
-      return this.validValue;
-    };
-    this.onInputClick = () => {
-      if (this.props.updateTabIndex) {
-        this.props.updateTabIndex(this.props.columnIndex);
-      }
-    };
-    this.state = {
-      inconformityFormat: false
-    };
-
-    // for format check
-    this.checked = false;
-    this.validValue = true;
-    this.checkingField = null;
-  }
-  componentDidMount() {
-    const {
-      isEditorFocus
-    } = this.props;
-    if (isEditorFocus) {
-      this.focusInput();
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      isEditorFocus
-    } = nextProps;
-    if (isEditorFocus && !this.props.isEditorFocus) {
-      this.focusInput();
-    } else if (!isEditorFocus && this.props.isEditorFocus) {
-      this.blurInput();
-    }
-  }
-  render() {
-    const {
-      readOnly,
-      column,
-      value
-    } = this.props;
-    const {
-      inconformityFormat
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-simple-text-editor-container",
-      ref: this.setEditorRef
-    }, /*#__PURE__*/_react.default.createElement(_TextEditor.default, {
-      ref: ref => this.editor = ref,
-      className: inconformityFormat ? 'is-invalid' : '',
-      readOnly: readOnly,
-      column: column,
-      value: value,
-      onKeyDown: this.onKeyDown,
-      onInputClick: this.onInputClick,
-      onCommit: this.onCommit
-    }), inconformityFormat && /*#__PURE__*/_react.default.createElement(_reactstrap.FormFeedback, null, _lang.getLocale.get('Input_does_not_meet_specifications')));
-  }
-}
-var _default = exports.default = RowExpandSimpleText;

package/lib/RowExpandEditor/RowExpandUrlEditor/index.css

@@ -1,31 +0,0 @@
-.dtable-ui-row-expand-url-editor {
-  position: relative;
-  width: inherit;
-}
-
-.dtable-ui-row-expand-url-editor .dtable-ui-row-expand-url-input {
-  text-decoration: underline;
-  text-decoration-color: #999;
-  padding-right: 40px;
-}
-
-.dtable-ui-row-expand-jump-link {
-  display: inline-block;
-  font-size: 14px;
-  height: 22px;
-  position: absolute;
-  top: 8px;
-  right: 9px;
-  border: 1px solid #eee;
-  padding: 0 4px;
-  color: #999;
-  border-radius: 2px;
-  background: #fff;
-  cursor: pointer;
-  box-shadow: 0 0 1px;
-}
-
-.dtable-ui-row-expand-jump-link:hover {
-  background: #f5f5f5;
-  border: 1px solid #c9c9c9;
-}

package/lib/RowExpandEditor/RowExpandUrlEditor/index.js

@@ -1,130 +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"));
-var _toaster = _interopRequireDefault(require("../../toaster"));
-var _utils = require("../../utils/utils");
-var _constants = require("../../constants");
-var _lang = require("../../lang");
-require("./index.css");
-class RowExpandUrlEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.focusInput = () => {
-      // use setTimeout to make sure real DOM is rendered
-      setTimeout(() => {
-        this.urlInputRef && this.urlInputRef.focus();
-      }, 1);
-    };
-    this.blurInput = () => {
-      setTimeout(() => {
-        this.urlInputRef && this.urlInputRef.blur();
-      }, 1);
-    };
-    this.onBlur = () => {
-      const {
-        onCommit
-      } = this.props;
-      onCommit(this.state.value.trim());
-    };
-    this.onFocus = e => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.onChange = e => {
-      let value = e.target.value;
-      if (value === this.state.value) return;
-      this.setState({
-        value
-      });
-    };
-    this.onCut = e => {
-      e.stopPropagation();
-    };
-    this.onPaste = e => {
-      e.stopPropagation();
-    };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Esc) {
-        e.stopPropagation();
-        this.blurInput();
-        return;
-      }
-      let {
-        selectionStart,
-        selectionEnd,
-        value
-      } = e.currentTarget;
-      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.LeftArrow && selectionStart === 0 || e.keyCode === _constants.KeyCodes.RightArrow && selectionEnd === value.length) {
-        e.stopPropagation();
-      }
-    };
-    this.onOpenUrlLink = () => {
-      const {
-        value
-      } = this.state;
-      let newValue = value.trim();
-      if (!(0, _utils.isValidUrl)(newValue)) {
-        newValue = "http://".concat(newValue);
-      }
-      try {
-        (0, _utils.openUrlLink)(newValue);
-      } catch {
-        _toaster.default.danger((0, _lang.getLocale)('URL_is_invalid'));
-      }
-    };
-    this.state = {
-      value: props.value
-    };
-    this.inputRef = /*#__PURE__*/_react.default.createRef();
-  }
-  componentDidMount() {
-    if (this.props.isEditorFocus) {
-      this.focusInput();
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        value: row[column[this.props.valueKey]] || ''
-      });
-    }
-    if (nextProps.isEditorFocus === true && this.props.isEditorFocus === false) {
-      this.focusInput();
-    }
-    if (nextProps.isEditorFocus === false && this.props.isEditorFocus === true) {
-      this.blurInput();
-    }
-  }
-  render() {
-    let {
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-row-expand-url-editor"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      ref: ref => this.urlInputRef = ref,
-      type: "text",
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onCut: this.onCut,
-      onPaste: this.onPaste,
-      onChange: this.onChange,
-      className: "form-control dtable-ui-row-expand-url-input",
-      value: value || '',
-      onKeyDown: this.onKeyDown
-    }), value && value.trim() && /*#__PURE__*/_react.default.createElement("span", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-url dtable-ui-row-expand-jump-link",
-      onClick: this.onOpenUrlLink
-    }));
-  }
-}
-var _default = exports.default = RowExpandUrlEditor;

package/lib/RowExpandEditor/constants.js

@@ -1,44 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CELL_EDITOR_MAP = void 0;
-var _dtableUtils = require("dtable-utils");
-var _RowExpandTextEditor = _interopRequireDefault(require("./RowExpandTextEditor"));
-var _RowExpandSingleSelectorEditor = _interopRequireDefault(require("./RowExpandSingleSelectorEditor"));
-var _RowExpandMultipleSelectEditor = _interopRequireDefault(require("./RowExpandMultipleSelectEditor"));
-var _RowExpandUrlEditor = _interopRequireDefault(require("./RowExpandUrlEditor"));
-var _RowExpandNumberEditor = _interopRequireDefault(require("./RowExpandNumberEditor"));
-var _RowExpandDateEditor = _interopRequireDefault(require("./RowExpandDateEditor"));
-var _RowExpandLongTextEditor = _interopRequireDefault(require("./RowExpandLongTextEditor"));
-var _RowExpandCheckboxEditor = _interopRequireDefault(require("./RowExpandCheckboxEditor"));
-var _RowExpandEmailEditor = _interopRequireDefault(require("./RowExpandEmailEditor"));
-var _RowExpandDurationEditor = _interopRequireDefault(require("./RowExpandDurationEditor"));
-var _RowExpandRateEditor = _interopRequireDefault(require("./RowExpandRateEditor"));
-var _RowExpandCollaboratorEditor = _interopRequireDefault(require("./RowExpandCollaboratorEditor"));
-var _RowExpandDepartmentEditor = _interopRequireDefault(require("./RowExpandDepartmentEditor"));
-var _RowExpandImageEditor = _interopRequireDefault(require("./RowExpandImageEditor"));
-var _RowExpandFileEditor = _interopRequireDefault(require("./RowExpandFileEditor"));
-var _RowExpandDigitalSignEditor = _interopRequireDefault(require("./RowExpandDigitalSignEditor"));
-var _RowExpandGeolocationEditor = _interopRequireDefault(require("./RowExpandGeolocationEditor"));
-const CELL_EDITOR_MAP = exports.CELL_EDITOR_MAP = {
-  [_dtableUtils.CellType.TEXT]: _RowExpandTextEditor.default,
-  [_dtableUtils.CellType.SINGLE_SELECT]: _RowExpandSingleSelectorEditor.default,
-  [_dtableUtils.CellType.MULTIPLE_SELECT]: _RowExpandMultipleSelectEditor.default,
-  [_dtableUtils.CellType.NUMBER]: _RowExpandNumberEditor.default,
-  [_dtableUtils.CellType.DATE]: _RowExpandDateEditor.default,
-  [_dtableUtils.CellType.URL]: _RowExpandUrlEditor.default,
-  [_dtableUtils.CellType.LONG_TEXT]: _RowExpandLongTextEditor.default,
-  [_dtableUtils.CellType.CHECKBOX]: _RowExpandCheckboxEditor.default,
-  [_dtableUtils.CellType.EMAIL]: _RowExpandEmailEditor.default,
-  [_dtableUtils.CellType.DURATION]: _RowExpandDurationEditor.default,
-  [_dtableUtils.CellType.RATE]: _RowExpandRateEditor.default,
-  [_dtableUtils.CellType.COLLABORATOR]: _RowExpandCollaboratorEditor.default,
-  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _RowExpandDepartmentEditor.default,
-  [_dtableUtils.CellType.IMAGE]: _RowExpandImageEditor.default,
-  [_dtableUtils.CellType.FILE]: _RowExpandFileEditor.default,
-  [_dtableUtils.CellType.DIGITAL_SIGN]: _RowExpandDigitalSignEditor.default,
-  [_dtableUtils.CellType.GEOLOCATION]: _RowExpandGeolocationEditor.default
-};

package/lib/RowExpandEditor/index.js

@@ -1,32 +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"));
-var _constants = require("./constants");
-const RowExpandEditor = _ref => {
-  let {
-    column,
-    component,
-    ...props
-  } = _ref;
-  const components = {
-    ..._constants.CELL_EDITOR_MAP,
-    ...component
-  };
-  const Editor = components[column.type];
-  if (!Editor) return null;
-  const {
-    row,
-    valueKey
-  } = props;
-  const value = row[column[valueKey]];
-  return /*#__PURE__*/_react.default.createElement(Editor, Object.assign({}, props, {
-    value: value,
-    column: column
-  }));
-};
-var _default = exports.default = RowExpandEditor;

package/lib/RowExpandFormatter/RowExpandDepartmentFormatter/index.js

@@ -1,27 +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"));
-var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
-function RowExpandDepartmentFormatter(_ref) {
-  let {
-    value,
-    departments
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative w-100"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    tabIndex: 0,
-    className: "dtable-ui-row-expand-select-formatter custom-select"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dtable-ui-row-expand-select-formatter-inner"
-  }, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
-    value: value,
-    departments: departments
-  }))));
-}
-var _default = exports.default = RowExpandDepartmentFormatter;

package/lib/RowExpandFormatter/RowExpandUrlFormatter/index.css

@@ -1 +0,0 @@
-@import url('../../css/cell-formatter.css');