dtable-ui-component 5.3.0 → 5.3.1-beta1

package/lib/RowExpandEditor/RowExpandCollaboratorEditor/index.js

@@ -0,0 +1,232 @@
+"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

@@ -0,0 +1,130 @@
+"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

@@ -0,0 +1,129 @@
+"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

@@ -0,0 +1,13 @@
+@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;
+}