dtable-ui-component 5.3.1-beta1 → 6.0.0

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.js

@@ -1,232 +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");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _CollaboratorEditor = _interopRequireDefault(require("../../CollaboratorEditor"));
-var _lang = require("../../lang");
-var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
-require("./index.css");
-class RowExpandCollaboratorEditor extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.initCollaborators = props => {
-      const {
-        row,
-        column,
-        valueKey
-      } = props;
-      const emails = row[column[valueKey]] || [];
-      props.queryCollaborators && props.queryCollaborators(emails);
-    };
-    this.getCollaborators = () => {
-      const {
-        getCollaborators,
-        collaborators
-      } = this.props;
-      if (getCollaborators) return getCollaborators();
-      return collaborators || [];
-    };
-    this.updateCollaborators = () => {
-      const collaborators = this.getCollaborators();
-      let emailCollaboratorMap = {};
-      collaborators.forEach(c => {
-        emailCollaboratorMap[c.email] = c;
-      });
-      this.setState({
-        emailCollaboratorMap
-      });
-    };
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.showCollaboratorSelect) {
-        this.toggleCollaboratorSelect(true);
-      }
-    };
-    this.hideSelect = event => {
-      if (!this.state.showCollaboratorSelect || !event.target || event.target.tagName.toUpperCase() === 'INPUT') {
-        return;
-      }
-      const editor = document.querySelector('.dtable-ui-collaborator-editor-container');
-      if (editor && editor.contains(event.target) || this.collaboratorSelectRef.contains(event.target)) {
-        return;
-      }
-      this.toggleCollaboratorSelect(false);
-    };
-    this.toggleCollaboratorSelect = value => {
-      this.setState({
-        showCollaboratorSelect: value
-      }, () => {
-        if (!value) this.collaboratorContentRef.focus();
-      });
-    };
-    this.onToggleSelect = event => {
-      event.stopPropagation();
-      this.props.updateTabIndex(this.props.columnIndex);
-      this.toggleCollaboratorSelect(true);
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.closeSelect = () => {
-      this.toggleCollaboratorSelect(false);
-    };
-    this.onChange = collaborator => {
-      let newValue = this.state.value.slice(0);
-      const collaboratorIndex = newValue.findIndex(email => collaborator.email === email);
-      if (collaboratorIndex === -1) {
-        newValue.push(collaborator.email);
-      } else {
-        newValue.splice(collaboratorIndex, 1);
-      }
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.removeCollaborator = index => {
-      let {
-        value
-      } = this.state;
-      let newValue = value.slice(0);
-      newValue.splice(index, 1);
-      this.setState({
-        value: newValue
-      });
-      this.props.onCommit(newValue);
-    };
-    this.renderSelectedCollaborators = () => {
-      const {
-        isEditorFocus
-      } = this.props;
-      const {
-        value,
-        emailCollaboratorMap
-      } = this.state;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        tabIndex: 0,
-        onFocus: this.onFocus,
-        onClick: this.onToggleSelect,
-        ref: ref => this.collaboratorContentRef = 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.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        className: "dtable-ui-row-expand-select-options"
-      }, value.map((email, index) => {
-        let collaborator = emailCollaboratorMap[email];
-        if (collaborator) {
-          const {
-            email
-          } = collaborator;
-          return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-            key: email,
-            collaborator: collaborator,
-            enableDeleteCollaborator: true,
-            onDeleteCollaborator: this.removeCollaborator.bind(this, index)
-          });
-        }
-        collaborator = {
-          name: (0, _lang.getLocale)('Unknown'),
-          avatar_url: '',
-          email: index + ''
-        };
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
-          className: "dtable-ui-unknown-collaborator",
-          collaborator: collaborator,
-          enableDeleteCollaborator: true,
-          onDeleteCollaborator: this.removeCollaborator.bind(this, index)
-        });
-      }))), /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-down3"
-      })));
-    };
-    const {
-      row: _row,
-      column: _column,
-      valueKey: _valueKey
-    } = this.props;
-    this.state = {
-      menuPosition: null,
-      value: _row[_column[_valueKey]] || [],
-      showCollaboratorSelect: false,
-      isDataLoaded: false,
-      emailCollaboratorMap: {}
-    };
-  }
-  componentDidMount() {
-    this.initCollaborators(this.props);
-    document.addEventListener('mousedown', this.hideSelect);
-    document.addEventListener('keydown', this.onKeyDown);
-    const eventBus = this.props.eventBus;
-    if (eventBus) {
-      this.unsubscribeCollaboratorsUpdated = eventBus.subscribe('collaborators-updated', this.updateCollaborators);
-    } else {
-      this.updateCollaborators();
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.initCollaborators(nextProps);
-      this.setState({
-        value: row[column[valueKey]] || [],
-        showCollaboratorSelect: false
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.showCollaboratorSelect !== prevState.showCollaboratorSelect) {
-      if (this.state.showCollaboratorSelect === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.showCollaboratorSelect === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    if (this.props.eventBus && this.unsubscribeCollaboratorsUpdated) {
-      this.unsubscribeCollaboratorsUpdated();
-    }
-    document.removeEventListener('mousedown', this.hideSelect);
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    const {
-      collaborators,
-      column
-    } = this.props;
-    const {
-      showCollaboratorSelect,
-      value
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "position-relative mt-1 w-100",
-      ref: ref => this.collaboratorSelectRef = ref
-    }, this.renderSelectedCollaborators(), /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.targetRef = ref
-    }), showCollaboratorSelect && /*#__PURE__*/_react.default.createElement(_CollaboratorEditor.default, {
-      target: this.targetRef,
-      isInModal: true,
-      value: value,
-      column: column,
-      collaborators: collaborators,
-      onCommit: this.onChange,
-      onClose: this.closeSelect
-    }));
-  }
-}
-var _default = exports.default = RowExpandCollaboratorEditor;

package/lib/RowExpandEditor/RowExpandDateEditor/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 _dtableUtils = require("dtable-utils");
-var _utils = require("../../utils/utils");
-var _columnUtils = require("../../utils/column-utils");
-var _constants = require("../../constants");
-var _DateEditor = _interopRequireDefault(require("../../DateEditor"));
-class RowExpandDateEditor extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.onKeyDown = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && this.props.isEditorFocus && !this.state.isShowEditor) {
-        if ((0, _utils.getEventClassName)(e).includes('rc-calendar')) return;
-        this.setState({
-          isShowEditor: true
-        });
-      }
-    };
-    this.hideCalendar = () => {
-      this.setState({
-        isShowEditor: false
-      }, () => {
-        this.dateContainerRef && this.dateContainerRef.focus();
-      });
-    };
-    this.onFocus = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-    };
-    this.toggleEditor = () => {
-      this.props.updateTabIndex(this.props.columnIndex);
-      this.setState({
-        isShowEditor: !this.state.isShowEditor
-      });
-    };
-    this.onCommit = value => {
-      this.props.onCommit(value);
-      this.setState({
-        value
-      });
-    };
-    this.onClear = () => {
-      this.setState({
-        value: null
-      });
-      this.props.onCommit(null);
-    };
-    this.state = {
-      isShowEditor: false,
-      value: null
-    };
-  }
-  componentDidMount() {
-    const {
-      column,
-      row,
-      valueKey
-    } = this.props;
-    this.setState({
-      value: row[column[valueKey]]
-    });
-    document.addEventListener('keydown', this.onKeyDown);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      column,
-      row,
-      valueKey
-    } = nextProps;
-    if (row._id !== this.props.row._id) {
-      this.setState({
-        value: row[column[valueKey]],
-        isShowEditor: false
-      });
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.isShowEditor !== prevState.isShowEditor) {
-      if (this.state.isShowEditor === true && this.props.onEditorOpen) {
-        this.props.onEditorOpen();
-      }
-      if (this.state.isShowEditor === false && this.props.onEditorClose) {
-        this.props.onEditorClose();
-      }
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onKeyDown);
-  }
-  render() {
-    let {
-      column,
-      isInModal,
-      isEditorFocus,
-      lang
-    } = this.props;
-    let {
-      value,
-      isShowEditor
-    } = this.state;
-    const format = (0, _columnUtils.getDateColumnFormat)(column);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.dateSelectRef = ref
-    }, isShowEditor ? /*#__PURE__*/_react.default.createElement(_DateEditor.default, {
-      isInModal: isInModal,
-      value: value,
-      lang: lang,
-      column: column,
-      onCommit: this.onCommit,
-      hideCalendar: this.hideCalendar
-    }) : /*#__PURE__*/_react.default.createElement("div", {
-      tabIndex: 0,
-      onFocus: this.onFocus,
-      onClick: this.toggleEditor,
-      ref: ref => this.dateContainerRef = ref,
-      className: "form-control",
-      style: isEditorFocus ? Object.assign({
-        width: 320
-      }, _constants.ROW_EXPAND_FOCUS_STYLE) : {
-        width: 320
-      }
-    }, value ? (0, _dtableUtils.getDateDisplayString)(value, format) : ''));
-  }
-}
-var _default = exports.default = RowExpandDateEditor;

package/lib/RowExpandEditor/RowExpandDepartmentEditor/index.js

@@ -1,129 +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 _classnames = _interopRequireDefault(require("classnames"));
-var _hooks = require("../../hooks");
-var _DepartmentSingleSelectFormatter = _interopRequireDefault(require("../../DepartmentSingleSelectFormatter"));
-var _constants = require("../../constants");
-var _lang = require("../../lang");
-var _departmentSingleSelect = _interopRequireDefault(require("../../Department-editor/department-single-select"));
-var _constants2 = require("../../Department-editor/constants");
-function RowExpandDepartmentEditor(props) {
-  const {
-    row,
-    column,
-    valueKey,
-    departments,
-    userDepartmentIdsMap,
-    isEditorFocus,
-    columnIndex
-  } = props;
-  const [value, setValue] = (0, _react.useState)(row[column[valueKey]] || '');
-  const [showEditor, setShowEditor] = (0, _react.useState)(false);
-  const departmentSelectContainer = (0, _react.useRef)(null);
-  const departmentSelectContent = (0, _react.useRef)(null);
-  (0, _hooks.useClickOutside)({
-    currDOM: departmentSelectContainer.current,
-    onClickOutside: hideDropDownMenu
-  }, [isEditorFocus, value]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener('keydown', onKeyDown);
-    return () => {
-      document.removeEventListener('keydown', onKeyDown);
-    };
-    // eslint-disable-next-line
-  }, [isEditorFocus]);
-  (0, _react.useEffect)(() => {
-    setValue(row[column[valueKey]] || '');
-    setShowEditor(false);
-    // eslint-disable-next-line
-  }, [row]);
-  function hideDropDownMenu(event) {
-    if (!event.target || event.target.tagName.toUpperCase() === 'INPUT') return;
-    toggleDepartmentSelect(false);
-  }
-  function onKeyDown(e) {
-    if (e.keyCode === _constants.KeyCodes.Enter && props.isEditorFocus && !showEditor) {
-      setShowEditor(true);
-    } else if (e.keyCode === _constants.KeyCodes.Escape) {
-      e.stopPropagation();
-      setShowEditor(false);
-      departmentSelectContent.current.focus();
-    }
-  }
-  function toggleDepartmentSelect(value) {
-    setShowEditor(value);
-  }
-  function onToggleSelect(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    props.updateTabIndex(columnIndex);
-    toggleDepartmentSelect(true);
-  }
-  function onFocus() {
-    props.updateTabIndex(columnIndex);
-  }
-  function onCommit(newValue) {
-    toggleDepartmentSelect(false);
-    if (newValue === value) return;
-    setValue(newValue);
-    props.onCommit(newValue);
-  }
-  function renderUserDepartmentOptions(onSelect) {
-    if (Array.isArray(departments) && departments.length > 0) return [];
-    return _constants2.DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
-      const {
-        type,
-        name
-      } = option;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "department-item",
-        key: index,
-        onClick: event => onSelect(event, type)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "department-item-left-content d-flex align-items-center"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "text-truncate department-name"
-      }, (0, _lang.getLocale)(name)), value === type && /*#__PURE__*/_react.default.createElement("span", {
-        className: "department-check-icon"
-      }, /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-check-mark"
-      }))));
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "position-relative w-100",
-    ref: departmentSelectContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    tabIndex: 0,
-    onFocus: onFocus,
-    onClick: onToggleSelect,
-    ref: departmentSelectContent,
-    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, /*#__PURE__*/_react.default.createElement(_DepartmentSingleSelectFormatter.default, {
-    value: value,
-    departments: departments
-  })), /*#__PURE__*/_react.default.createElement("i", {
-    "aria-hidden": "true",
-    className: "dtable-font dtable-icon-down3"
-  }))), showEditor && /*#__PURE__*/_react.default.createElement(_departmentSingleSelect.default, {
-    enableSelectRange: false,
-    column: column,
-    value: value,
-    onCommit: onCommit,
-    userDepartmentIdsMap: userDepartmentIdsMap,
-    departments: departments,
-    renderUserDepartmentOptions: renderUserDepartmentOptions
-  }));
-}
-var _default = exports.default = RowExpandDepartmentEditor;

package/lib/RowExpandEditor/RowExpandDigitalSignEditor/index.css

@@ -1,13 +0,0 @@
-@import url('../RowExpandImageEditor/index.css');
-
-.dtable-ui-row-expand-digital-sign-container .dtable-ui-image-thumbnail {
-  max-width: 200px;
-  width: 200px;
-}
-
-.dtable-ui-row-expand-digital-sign-container .dtable-ui-image-thumbnail img {
-  max-width: 192px;
-  width: 192px;
-  height: 96px;
-  max-height: 96px;
-}