dtable-ui-component 4.4.0 → 4.4.2

package/lib/Department-editor/department-multiple-select/index.js

@@ -0,0 +1,143 @@
+import React, { Fragment, useState, useEffect, useRef } from 'react';
+import { searchDepartments, getNormalizedDepartments } from '../utils';
+import SelectedDepartments from '../selected-departments';
+import { getLocale } from '../../lang';
+import './index.css';
+function DepartmentMultipleSelect(props) {
+  const {
+    value,
+    onCommit,
+    classNamePrefix,
+    isShowSelectedDepartments,
+    renderUserDepartmentOptions,
+    departments: initialDepartments
+  } = props;
+  const [searchVal, setSearchVal] = useState('');
+  const [departments, setDepartments] = useState(getNormalizedDepartments(initialDepartments));
+  const departmentContainerRef = useRef(null);
+  const validDepartmentsRef = useRef([]);
+  useEffect(() => {
+    if (departmentContainerRef.current) {
+      resetContainerPosition();
+    }
+    // eslint-disable-next-line
+  }, []);
+  function resetContainerPosition() {
+    const {
+      top,
+      height
+    } = departmentContainerRef.current.getBoundingClientRect();
+    if (height + top > window.innerHeight) {
+      const borderWidth = 1;
+      departmentContainerRef.current.style.top = -1 * (height + borderWidth - 38) + 'px';
+    }
+  }
+  function onExpand(event, id, isExpanded) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    let newDepartments = departments.slice(0);
+    const index = newDepartments.findIndex(item => item.id === id);
+    newDepartments[index].isExpanded = !isExpanded;
+    setDepartments(newDepartments);
+  }
+  function onChangeSearch(event) {
+    const newSearchValue = event.target.value;
+    if (searchVal === newSearchValue) return;
+    validDepartmentsRef.current = searchDepartments(departments, newSearchValue);
+    setSearchVal(newSearchValue);
+  }
+  function onClick(e) {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+  }
+  function renderSubDepartments(parentId, subDepartments, level) {
+    const topDepartments = subDepartments.filter(department => department.parent_id === parentId);
+    const newSubDepartments = subDepartments.filter(department => department.parent_id !== parentId);
+    if (topDepartments.length === 0) return null;
+    return topDepartments.map(department => {
+      return renderDepartment(department, newSubDepartments, level);
+    });
+  }
+  function onSelectDepartment(event, value) {
+    event.stopPropagation();
+    onCommit(event, value);
+  }
+  function onStopPropagation(e) {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+  }
+  function renderDepartment(department, subDepartments, level) {
+    const {
+      hasChild,
+      isExpanded,
+      name,
+      id
+    } = department;
+    const newLevel = level + 1;
+    const inputStyle = {
+      marginRight: "".concat(newLevel * 15 + 5, "px")
+    };
+    const nameStyle = {
+      paddingLeft: hasChild ? '' : '16px'
+    };
+    const inputChecked = value.includes(id);
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "dropdown-item d-flex align-items-center",
+      onClick: event => onSelectDepartment(event, id)
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      className: "vam department-select-input",
+      checked: inputChecked,
+      style: inputStyle,
+      onChange: () => {}
+    }), hasChild && !searchVal && /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
+      onClick: event => onExpand(event, id, isExpanded)
+    }), /*#__PURE__*/React.createElement("span", {
+      style: searchVal ? {} : nameStyle,
+      title: name,
+      className: "text-truncate"
+    }, name)), isExpanded && hasChild && renderSubDepartments(id, subDepartments, newLevel));
+  }
+  function renderSearchedDepartments() {
+    return validDepartmentsRef.current.map(department => {
+      return renderDepartment(department, [], -1);
+    });
+  }
+  function renderDepartments() {
+    const level = -1;
+    const subDepartments = departments.filter(department => department.parent_id !== -1);
+    const topDepartment = departments.find(department => department.parent_id === -1);
+    if (!topDepartment) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: departmentContainerRef,
+      onClick: onStopPropagation,
+      onMouseDown: onStopPropagation,
+      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
+    }, isShowSelectedDepartments && /*#__PURE__*/React.createElement("div", {
+      className: "selected-departments dtable-ui",
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(SelectedDepartments, {
+      value: value,
+      removeDepartment: onCommit,
+      isShowRemoveIcon: true,
+      departments: departments
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "search-departments"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      type: "text",
+      autoFocus: true,
+      placeholder: getLocale('Find_a_department'),
+      value: searchVal,
+      onChange: onChangeSearch,
+      onClick: onClick
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "department-item-container"
+    }, !searchVal && renderUserDepartmentOptions && renderUserDepartmentOptions(), validDepartmentsRef.current.length > 0 && searchVal && renderSearchedDepartments(), !searchVal && renderDepartment(topDepartment, subDepartments, level)));
+  }
+  return renderDepartments();
+}
+export default DepartmentMultipleSelect;

package/lib/Department-editor/department-single-select.js

@@ -0,0 +1,263 @@
+import React, { Component, Fragment } from 'react';
+import { DEPARTMENT_SELECT_RANGE_MAP } from 'dtable-utils';
+import Loading from '../Loading';
+import { getNormalizedDepartments, searchDepartments } from './utils';
+import { getLocale } from '../lang';
+class DepartmentSingleSelect extends Component {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    this.resetMenuStyle = () => {
+      if (!this.departmentsRef) return;
+      const {
+        bottom
+      } = this.departmentsRef.getBoundingClientRect();
+      if (bottom > window.innerHeight) {
+        this.departmentsRef.style.top = parseInt(this.departmentsRef.style.top) - bottom + window.innerHeight + 'px';
+      }
+    };
+    this.initDepartments = departments => {
+      const normalizedDepartments = getNormalizedDepartments(departments || []);
+      this.validDepartments = normalizedDepartments;
+      this.setState({
+        departments: normalizedDepartments
+      });
+    };
+    this.initRangeDepartments = function (userDepartmentIdsMap) {
+      let departments = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      const {
+        selectedRange,
+        specificDepartments
+      } = _this.getSelectedRange();
+      const {
+        current_user_department_ids = [],
+        current_user_department_and_sub_ids = []
+      } = userDepartmentIdsMap || {};
+      let targetDepartments = [];
+      let topParentIds = [];
+      if (selectedRange === DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT) {
+        topParentIds = current_user_department_ids;
+        targetDepartments = departments.filter(department => current_user_department_ids.includes(department.id));
+      } else if (selectedRange === DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
+        const currentUserDepartments = departments.filter(department => current_user_department_ids.includes(department.id));
+        topParentIds = currentUserDepartments.filter(department => !current_user_department_ids.includes(department.parent_id)).map(department => department.id);
+        targetDepartments = departments.filter(department => current_user_department_and_sub_ids.includes(department.id));
+      } else {
+        targetDepartments = departments.filter(department => specificDepartments.includes(department.id));
+      }
+      const normalizedDepartments = getNormalizedDepartments(targetDepartments);
+      _this.validDepartments = normalizedDepartments;
+      _this.setState({
+        departments: normalizedDepartments,
+        topParentIds
+      });
+    };
+    this.getSelectedRange = () => {
+      const {
+        column
+      } = this.props;
+      const data = column.data || {};
+      const selectedRange = data.selected_range || '';
+      const specificDepartments = data.specific_departments || [];
+      return {
+        selectedRange,
+        specificDepartments
+      };
+    };
+    this.onExpand = (event, id, isExpanded) => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      let newDepartments = this.state.departments.slice(0);
+      const index = newDepartments.findIndex(item => item.id === id);
+      newDepartments[index].isExpanded = !isExpanded;
+      this.setState({
+        departments: newDepartments
+      });
+    };
+    this.onChangeSearch = event => {
+      const newSearchValue = event.target.value;
+      const {
+        searchVal
+      } = this.state;
+      if (searchVal === newSearchValue) return;
+      const {
+        departments
+      } = this.state;
+      this.validDepartments = searchDepartments(departments, newSearchValue);
+      this.setState({
+        searchVal: newSearchValue
+      });
+    };
+    this.onSelectDepartment = (event, selectedValue) => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      const {
+        onCommit,
+        value
+      } = this.props;
+      const newValue = selectedValue === value ? '' : selectedValue;
+      onCommit(newValue);
+    };
+    this.onStopPropagation = e => {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    };
+    this.renderSubDepartments = (id, subDepartments, level) => {
+      const topDepartments = subDepartments.filter(department => department.parent_id === id);
+      const newSubDepartments = subDepartments.filter(department => department.parent_id !== id);
+      if (topDepartments.length === 0) return null;
+      const topDepartmentsId = topDepartments.map(department => department.id);
+      const nextLevelDepartment = subDepartments.find(department => topDepartmentsId.includes(department.parent_id));
+      const hasNextLevel = !!nextLevelDepartment;
+      return topDepartments.map(department => {
+        return this.renderDepartment(department, newSubDepartments, level, hasNextLevel);
+      });
+    };
+    this.renderDepartment = (department, subDepartments, level, hasNextLevel) => {
+      const {
+        value
+      } = this.props;
+      const newLevel = level + 1;
+      const {
+        hasChild,
+        isExpanded,
+        name,
+        id
+      } = department;
+      const noChildStyle = hasNextLevel ? '16px' : '12px';
+      const nameStyle = {
+        paddingLeft: hasChild ? '' : noChildStyle
+      };
+      const itemStyle = {
+        paddingLeft: "".concat(newLevel * 15 + 10, "px")
+      };
+      const isChecked = value === id;
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: id
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "dropdown-item department-item d-flex align-items-center",
+        onClick: event => this.onSelectDepartment(event, id),
+        style: itemStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "department-item-left-content d-flex align-items-center"
+      }, hasChild && /*#__PURE__*/React.createElement("span", {
+        className: "dtable-font expand dtable-icon-".concat(isExpanded ? 'drop-down' : 'right-slide', " pr-1"),
+        onClick: event => this.onExpand(event, id, isExpanded)
+      }), /*#__PURE__*/React.createElement("span", {
+        style: nameStyle,
+        title: name,
+        className: "text-truncate department-name"
+      }, name), isChecked && /*#__PURE__*/React.createElement("span", {
+        className: "department-check-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-check-mark"
+      })))), isExpanded && hasChild && this.renderSubDepartments(id, subDepartments, newLevel));
+    };
+    this.renderAllDepartments = () => {
+      const {
+        departments
+      } = this.state;
+      const topDepartment = departments.find(department => department.parent_id === -1);
+      const subDepartments = departments.filter(department => department.parent_id !== -1);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, topDepartment ? this.renderDepartment(topDepartment, subDepartments, -1, true) : this.renderEmptyTip());
+    };
+    this.renderSpecificDepartments = () => {
+      const {
+        departments
+      } = this.state;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.validDepartments.length === 0 && this.renderEmptyTip(), this.validDepartments.length > 0 && this.validDepartments.map(department => {
+        const value = {
+          ...department,
+          hasChild: false
+        };
+        return this.renderDepartment(value, departments, -1, false);
+      }));
+    };
+    this.renderCurrentDepartmentsAndSub = () => {
+      const {
+        departments,
+        topParentIds
+      } = this.state;
+      const nextLevelDepartment = this.validDepartments.find(department => topParentIds.includes(department.parent_id));
+      const hasNextLevel = !!nextLevelDepartment;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.validDepartments.length === 0 && this.renderEmptyTip(), this.validDepartments.length > 0 && this.validDepartments.map(department => {
+        let value = department;
+        if (!topParentIds.includes(department.id)) return null;
+        return this.renderDepartment(value, departments, -1, hasNextLevel);
+      }));
+    };
+    this.renderEmptyTip = () => {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "none-search-result d-flex justify-content-center"
+      }, getLocale('No_departments_available'));
+    };
+    this.renderMenuContent = () => {
+      const {
+        searchVal
+      } = this.state;
+      const {
+        enableSelectRange,
+        renderUserDepartmentOptions
+      } = this.props;
+      const {
+        selectedRange
+      } = this.getSelectedRange();
+      let menuContent = this.renderAllDepartments();
+      if (enableSelectRange && [DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT, DEPARTMENT_SELECT_RANGE_MAP.SPECIFIC_DEPARTMENTS].includes(selectedRange) || searchVal) {
+        menuContent = this.renderSpecificDepartments();
+      } else if (enableSelectRange && selectedRange === DEPARTMENT_SELECT_RANGE_MAP.CURRENT_USER_DEPARTMENT_AND_SUB) {
+        menuContent = this.renderCurrentDepartmentsAndSub();
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "editor-department-container",
+        ref: ref => this.departmentContainerRef = ref
+      }, !searchVal && renderUserDepartmentOptions && renderUserDepartmentOptions(this.onSelectDepartment), menuContent);
+    };
+    this.state = {
+      searchVal: '',
+      departments: [],
+      topParentIds: [],
+      isLoading: false
+    };
+    this.validDepartments = [];
+  }
+  componentDidMount() {
+    // Make sure child component is rendered, so current component can be stretched out, then get the correct size
+    setTimeout(() => {
+      this.resetMenuStyle();
+    }, 1);
+    const {
+      enableSelectRange,
+      userDepartmentIdsMap,
+      departments
+    } = this.props;
+    if (enableSelectRange) {
+      this.initRangeDepartments(userDepartmentIdsMap, departments);
+    } else {
+      this.initDepartments(departments);
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dropdown-menu department-editor-list dtable-ui show m-0 p-0",
+      style: this.props.menuStyle,
+      ref: ref => this.departmentsRef = ref,
+      onClick: this.onStopPropagation,
+      onMouseDown: this.onStopPropagation
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "search-departments"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      type: "text",
+      autoFocus: true,
+      placeholder: getLocale('Find_a_department'),
+      value: this.state.searchVal,
+      onChange: this.onChangeSearch,
+      onClick: this.onStopPropagation
+    })), this.state.isLoading ? /*#__PURE__*/React.createElement("div", {
+      className: "mt-4"
+    }, /*#__PURE__*/React.createElement(Loading, null)) : this.renderMenuContent());
+  }
+}
+export default DepartmentSingleSelect;

package/lib/Department-editor/index.css

@@ -0,0 +1,117 @@
+.dtable-ui.department-editor-list {
+  width: 300px;
+  height: 285px;
+}
+
+.dtable-ui.department-editor-list .editor-department-container {
+  height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 0;
+}
+
+.dtable-ui.department-editor-list .none-search-result {
+  font-size: 14px;
+  opacity: 0.5;
+  display: inline-block;
+}
+
+.dtable-ui.department-editor-list .department-item-left-content {
+  flex: 1 1;
+  width: 100%;
+}
+
+.dtable-ui.department-editor-list .department-item-left-content .department-name {
+  display: inline-block;
+  flex: 1;
+}
+
+.dtable-ui.department-editor-list .department-item-left-content .department-check-icon {
+  margin-left: 4px;
+}
+
+.dtable-ui.department-editor-list .department-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.dtable-ui.department-editor-list .search-departments {
+  padding: 10px 10px 0px;
+}
+
+.dtable-ui.department-editor-list .search-departments input {
+  height: 30px !important;
+  display: initial !important;
+}
+
+.dtable-ui.department-editor-list .editor-department-container .dropdown-item {
+  padding-left: 10px;
+  padding-right: 15px;
+  cursor: pointer;
+}
+
+.dtable-ui.department-editor-list .editor-department-container .dropdown-item:hover {
+  background: #f5f5f5;
+  color: #212529;
+}
+
+.dtable-ui.department-editor-list .editor-department-container .expand {
+  color: #b5b5b5;
+  font-size: 12px;
+  transform: scale(0.8);
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 0px !important;
+}
+
+.dtable-ui.department-editor-list .editor-department-container .expand:hover {
+  color: #555;
+}
+
+.selected-departments.dtable-ui {
+  background-color: #f6f6f6;
+  padding: 5px;
+  border-bottom: 1px solid #dde2ea;
+  border-radius: 3px 3px 0 0;
+  min-height: 34px;
+  cursor: default;
+}
+
+.department-single-select-formatter,
+.selected-option-show .department,
+.selected-departments.dtable-ui .department {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  width: fit-content !important;
+  padding: 0 8px 0 2px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.department-single-select-formatter .department-avatar-container,
+.selected-option-show .department-avatar-container,
+.selected-departments.dtable-ui .department-avatar-container {
+  width: 18px;
+  height: 18px;
+  background: #ff8000;
+  border-radius: 50%;
+  padding: 2px 2px 3px 2px;
+}
+
+.department-single-select-formatter .department-avatar-container span,
+.selected-option-show .department-avatar-container span,
+.selected-departments.dtable-ui .department-avatar-container span {
+  font-size: 12px;
+  color: #fff;
+}
+
+.department-single-select-formatter .department-name,
+.selected-option-show .department-name,
+.selected-departments.dtable-ui .department-name {
+  margin-left: 4px;
+  flex: 1 1;
+}
+
+

package/lib/Department-editor/index.js

@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import DTablePopover from '../DTablePopover';
+import { DEPARTMENT_SELECT_RANGE_OPTIONS } from './constants';
+import DepartmentSingleSelect from './department-single-select';
+import { getLocale } from '../lang';
+import './index.css';
+class DepartmentSingleSelectEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.onCommit = value => {
+      const {
+        onCommit,
+        column
+      } = this.props;
+      this.setState({
+        value
+      }, () => {
+        this.isRowExpand ? onCommit(this.getValue(), column) : onCommit();
+      });
+    };
+    this.getValue = () => {
+      const updated = {};
+      updated[this.props.column.key] = this.state.value;
+      return updated;
+    };
+    this.createSpecificDepartments = () => {
+      return DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map(option => {
+        const {
+          type,
+          name
+        } = option;
+        return {
+          value: type,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "text-truncate department-name"
+          }, getLocale(name))
+        };
+      });
+    };
+    const {
+      column: _column,
+      mode,
+      value: _value,
+      height
+    } = props;
+    const editorWidth = _column.width > 300 ? _column.width : 300;
+    const isRowExpand = mode === 'row_expand';
+    const data = _column.data || {};
+    this.state = {
+      value: _value || '',
+      menuStyle: isRowExpand ? {} : {
+        width: editorWidth,
+        top: height - 2
+      }
+    };
+    this.enableSelectRange = data.enable_select_range || false;
+    this.isRowExpand = isRowExpand;
+  }
+  componentDidMount() {
+    if (this.isRowExpand) {
+      if (this.outerRef.getBoundingClientRect().top > 330) {
+        const menuStyle = {
+          top: -200
+        };
+        this.setState({
+          menuStyle
+        });
+      }
+    }
+  }
+  render() {
+    const {
+      target,
+      column,
+      userDepartmentIdsMap,
+      departments
+    } = this.props;
+    const dom = /*#__PURE__*/React.createElement(DepartmentSingleSelect, {
+      column: column,
+      value: this.state.value,
+      enableSelectRange: this.enableSelectRange,
+      menuStyle: this.state.menuStyle,
+      userDepartmentIdsMap: userDepartmentIdsMap,
+      departments: departments,
+      onCommit: this.onCommit
+    });
+    return this.isRowExpand ? /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.outerRef = ref
+    }, /*#__PURE__*/React.createElement(DTablePopover, {
+      hideArrow: true,
+      popoverClassName: "select-editor-popover",
+      target: target,
+      placement: "bottom-start",
+      hideDTablePopover: this.props.toggleDepartmentSelect,
+      hideDTablePopoverWithEsc: this.props.toggleDepartmentSelect
+    }, dom)) : dom;
+  }
+}
+export default DepartmentSingleSelectEditor;

package/lib/Department-editor/selected-departments/index.css

@@ -0,0 +1,26 @@
+
+.selected-departments.dtable-ui .remove-container {
+  width: 16px;
+  text-align: right;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.selected-departments.dtable-ui .remove-icon {
+  display: inline-block;
+  position: relative;
+  right: -2px;
+  width: 14px;
+  height: 20px;
+}
+
+.selected-departments.dtable-ui .remove-icon .dtable-font {
+  display: inline-block;
+  font-size: 12px;
+  color: #909090;
+  transform: scale(0.8);
+}
+
+.selected-departments.dtable-ui .remove-container:hover .remove-icon .dtable-font {
+  color: #5a5a5a;
+}