dtable-ui-component 4.4.0 → 4.4.2

package/lib/DTableFiltersPopover/utils/index.js

@@ -0,0 +1,452 @@
+import { FILTER_PREDICATE_TYPE, FILTER_COLUMN_OPTIONS, filterTermModifierNotWithin, filterTermModifierIsWithin, CellType, isDateColumn, isNumericColumn, FORMULA_RESULT_TYPE, COLLABORATOR_COLUMN_TYPES, DATE_COLUMN_OPTIONS, FORMULA_COLUMN_TYPES_MAP, DEFAULT_DATE_FORMAT } from 'dtable-utils';
+import FilterItemUtils from './filter-item-utils';
+import { FORMULA_COLUMN_TYPES, SPECIAL_TERM_TYPE, ARRAY_PREDICATE, STRING_PREDICATE, DATE_EMPTY_LABEL_MAP, MULTIPLE_SELECTOR_COLUMNS } from '../constants';
+const isArrayFilterTermByArrayType = array_type => {
+  return COLLABORATOR_COLUMN_TYPES.includes(array_type) || array_type === CellType.SINGLE_SELECT || array_type === CellType.MULTIPLE_SELECT;
+};
+export const isFilterTermArray = (column, filterPredicate) => {
+  const {
+    type,
+    data
+  } = column;
+  if (MULTIPLE_SELECTOR_COLUMNS.includes(type)) {
+    return true;
+  }
+  if (type === CellType.SINGLE_SELECT && [FILTER_PREDICATE_TYPE.IS_ANY_OF, FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filterPredicate)) {
+    return true;
+  }
+  if (FORMULA_COLUMN_TYPES.includes(type)) {
+    const {
+      result_type,
+      array_type
+    } = data || {};
+    if (result_type !== FORMULA_RESULT_TYPE.ARRAY) return false;
+    return isArrayFilterTermByArrayType(array_type);
+  }
+  if (type === CellType.LINK) {
+    const {
+      array_type
+    } = data || {};
+    return isArrayFilterTermByArrayType(array_type);
+  }
+  return false;
+};
+export const getUpdatedFilterByCreator = (filter, collaborator) => {
+  const multipleSelectType = [FILTER_PREDICATE_TYPE.CONTAINS, FILTER_PREDICATE_TYPE.NOT_CONTAIN];
+  let {
+    filter_predicate,
+    filter_term: filterTerm
+  } = filter;
+  if (multipleSelectType.includes(filter_predicate)) {
+    filterTerm = filterTerm ? filter.filter_term.slice(0) : [];
+    let selectedEmail = collaborator.email;
+    let collaborator_index = filterTerm.indexOf(selectedEmail);
+    if (collaborator_index > -1) {
+      filterTerm.splice(collaborator_index, 1);
+    } else {
+      filterTerm.push(selectedEmail);
+    }
+  } else {
+    if (filterTerm[0] === collaborator.email) {
+      return;
+    }
+    filterTerm = [collaborator.email];
+  }
+  return Object.assign({}, filter, {
+    filter_term: filterTerm
+  });
+};
+export const getUpdatedFilterBySelectSingle = (filter, columnOption) => {
+  let new_filter_term;
+  // if predicate is any of / is none of, filter_term is array; else filter_term is string
+  if (filter.filter_predicate === FILTER_PREDICATE_TYPE.IS_ANY_OF || filter.filter_predicate === FILTER_PREDICATE_TYPE.IS_NONE_OF) {
+    new_filter_term = Array.isArray(filter.filter_term) ? [...filter.filter_term] : [];
+    const index = new_filter_term.indexOf(columnOption.id);
+    if (index === -1) {
+      new_filter_term.push(columnOption.id);
+    } else {
+      new_filter_term.splice(index, 1);
+    }
+  } else {
+    new_filter_term = columnOption.id;
+  }
+  return Object.assign({}, filter, {
+    filter_term: new_filter_term
+  });
+};
+export const getUpdatedFilterBySelectMultiple = (filter, columnOption) => {
+  let filterTerm = filter.filter_term ? filter.filter_term : [];
+  let index = filterTerm.indexOf(columnOption.id);
+  if (index > -1) {
+    filterTerm.splice(index, 1);
+  } else {
+    filterTerm.push(columnOption.id);
+  }
+  return Object.assign({}, filter, {
+    filter_term: filterTerm
+  });
+};
+export const getUpdatedFilterByCollaborator = (filter, collaborator) => {
+  let filterTerm = filter.filter_term ? filter.filter_term.slice(0) : [];
+  let selectedEmail = collaborator.email;
+  let collaborator_index = filterTerm.indexOf(selectedEmail);
+  if (collaborator_index > -1) {
+    filterTerm.splice(collaborator_index, 1);
+  } else {
+    filterTerm.push(selectedEmail);
+  }
+  return Object.assign({}, filter, {
+    filter_term: filterTerm
+  });
+};
+export const getUpdatedFilterByRate = (filter, value) => {
+  if (filter.filter_term === value) {
+    return;
+  }
+  return Object.assign({}, filter, {
+    filter_term: value
+  });
+};
+export const getColumnOptions = column => {
+  const {
+    type,
+    data
+  } = column;
+  if (FORMULA_COLUMN_TYPES.includes(type)) {
+    return getFormulaColumnFilterOptions(column);
+  }
+  if (type === CellType.LINK) {
+    const {
+      array_type
+    } = data || {};
+    if (array_type === FORMULA_RESULT_TYPE.BOOL) {
+      return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+    }
+    if (array_type === FORMULA_RESULT_TYPE.STRING) {
+      return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+    }
+    return getFilterOptionsByArrayType(array_type);
+  }
+  return FILTER_COLUMN_OPTIONS[type] || {};
+};
+const getFormulaColumnFilterOptions = column => {
+  const {
+    data
+  } = column;
+  const {
+    result_type,
+    array_type
+  } = data || {};
+  if (result_type === FORMULA_RESULT_TYPE.BOOL) {
+    return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+  }
+  if (result_type === FORMULA_RESULT_TYPE.STRING) {
+    return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+  }
+  if ([FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.DATE].includes(result_type)) {
+    return FILTER_COLUMN_OPTIONS[result_type];
+  }
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+    return getFilterOptionsByArrayType(array_type);
+  }
+  return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+};
+const getFilterOptionsByArrayType = array_type => {
+  if (!array_type) {
+    return {};
+  }
+  let checkType = array_type;
+  if (COLLABORATOR_COLUMN_TYPES.includes(array_type)) {
+    checkType = CellType.COLLABORATOR;
+  } else if (array_type === CellType.SINGLE_SELECT) {
+    checkType = CellType.MULTIPLE_SELECT;
+  } else if (DATE_COLUMN_OPTIONS.includes(array_type)) {
+    checkType = CellType.DATE;
+  } else if (isNumericColumn({
+    type: array_type
+  })) {
+    checkType = CellType.NUMBER;
+  }
+
+  // only support: is
+  if (checkType === CellType.CHECKBOX || checkType === CellType.BOOL) {
+    return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+  }
+  let filterOptions = FILTER_COLUMN_OPTIONS[checkType] || FILTER_COLUMN_OPTIONS[CellType.TEXT];
+  let {
+    filterPredicateList
+  } = filterOptions;
+  if (filterPredicateList && !filterPredicateList.includes(FILTER_PREDICATE_TYPE.EMPTY)) {
+    filterPredicateList.push(FILTER_PREDICATE_TYPE.EMPTY);
+  }
+  if (filterPredicateList && !filterPredicateList.includes(FILTER_PREDICATE_TYPE.NOT_EMPTY)) {
+    filterPredicateList.push(FILTER_PREDICATE_TYPE.NOT_EMPTY);
+  }
+  return filterOptions;
+};
+export const getFilterByColumn = function (column, value) {
+  let {
+    textDefaultPredicate
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let filter = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  let {
+    type: columnType,
+    data: columnData
+  } = column;
+  let {
+    filterPredicateList
+  } = getColumnOptions(column, value);
+  if (!filterPredicateList) return;
+  let filterPredicate = filterPredicateList[0];
+  if (textDefaultPredicate && columnType === CellType.TEXT && filterPredicateList.includes(textDefaultPredicate)) {
+    filterPredicate = textDefaultPredicate;
+  }
+  let updatedFilter = Object.assign({}, filter, {
+    column_key: column.key,
+    filter_predicate: filterPredicate
+  });
+
+  // text | number | long-text | url | email 
+  // auto-number | geolocation | duration
+  updatedFilter.filter_term = '';
+
+  // checkbox
+  if (columnType === CellType.CHECKBOX) {
+    updatedFilter.filter_term = false;
+    return updatedFilter;
+  }
+  // rate
+  if (columnType === CellType.RATE) {
+    const {
+      rate_max_number
+    } = columnData;
+    updatedFilter.filter_term = rate_max_number;
+    return updatedFilter;
+  }
+  // single-select | multiple-select | collaborators | creator | last-modifier
+  if (isFilterTermArray(column, filterPredicate)) {
+    updatedFilter.filter_term = [];
+    return updatedFilter;
+  }
+  // date | ctime | mtime
+  if (isDateColumn(column)) {
+    let filterTermModifier = filterPredicate === FILTER_PREDICATE_TYPE.IS_WITHIN ? filterTermModifierIsWithin[0] : filterTermModifierNotWithin[0];
+    updatedFilter.filter_term_modifier = filterTermModifier;
+    updatedFilter.filter_term = '';
+    return updatedFilter;
+  }
+  // formula | link-formula
+  if (FORMULA_COLUMN_TYPES.includes(columnType)) {
+    const newUpdatedFilter = getFormulaColumnFilter(column, value, filter);
+    if (newUpdatedFilter) {
+      updatedFilter.filter_term = newUpdatedFilter.filter_term;
+    }
+    return updatedFilter;
+  }
+  // link
+  if (columnType === CellType.LINK) {
+    let {
+      array_type,
+      array_data
+    } = columnData || {};
+    if (array_type) {
+      if (array_type === FORMULA_RESULT_TYPE.BOOL) {
+        array_type = CellType.CHECKBOX;
+      }
+      if (array_type === FORMULA_RESULT_TYPE.STRING) {
+        array_type = CellType.TEXT;
+      }
+      const linkedColumn = {
+        key: column.key,
+        type: array_type,
+        data: array_data
+      };
+      const newUpdatedFilter = getFilterByColumn(linkedColumn, value, filter) || {};
+      if (newUpdatedFilter) {
+        updatedFilter.filter_term = newUpdatedFilter.filter_term;
+      }
+    }
+    return updatedFilter;
+  }
+  return updatedFilter;
+};
+export const getFormulaColumnFilter = (column, value, filter) => {
+  const {
+    data
+  } = column;
+  let {
+    result_type,
+    array_type,
+    array_data
+  } = data || {};
+  if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+    const linkedColumn = {
+      key: column.key,
+      type: array_type,
+      data: array_data
+    };
+    return getFilterByColumn(linkedColumn, value, filter);
+  }
+  // result_type: string | number | bool | date
+  if (result_type === FORMULA_RESULT_TYPE.BOOL) {
+    array_type = CellType.CHECKBOX;
+  }
+  if (result_type === FORMULA_RESULT_TYPE.STRING) {
+    array_type = CellType.TEXT;
+  }
+  const linkedColumn = {
+    key: column.key,
+    type: array_type,
+    data: array_data
+  };
+  return getFilterByColumn(linkedColumn, value, filter);
+};
+
+// file, image : not support
+// text, long-text, number, single-select, date, ctime, mtime, formula, link, geolocation : string
+// checkbox : boolean
+// multiple-select, collaborator, creator, last modifier : array
+
+export const getUpdatedFilterByColumn = (filters, value, filterIndex, column) => {
+  const filter = filters[filterIndex];
+  if (filter.column_key === column.key) {
+    return;
+  }
+  return getFilterByColumn(column, value, filter);
+};
+export const getUpdatedFilterByPredicate = (filter, column, filterPredicate) => {
+  let updatedFilter = Object.assign({}, filter, {
+    filter_predicate: filterPredicate
+  });
+  let {
+    type: columnType
+  } = column;
+  if (columnType === CellType.CHECKBOX) {
+    updatedFilter.filter_term = false;
+    return updatedFilter;
+  }
+  if ([CellType.SINGLE_SELECT, CellType.DEPARTMENT_SINGLE_SELECT].includes(columnType)) {
+    if (ARRAY_PREDICATE[filterPredicate]) {
+      if (ARRAY_PREDICATE[filter.filter_predicate] !== ARRAY_PREDICATE[filterPredicate]) {
+        updatedFilter.filter_term = [];
+      }
+    } else if (STRING_PREDICATE[filterPredicate]) {
+      if (STRING_PREDICATE[filter.filter_predicate] !== STRING_PREDICATE[filterPredicate]) {
+        updatedFilter.filter_term = '';
+      }
+    } else {
+      updatedFilter.filter_term = '';
+    }
+    return updatedFilter;
+  }
+  if ([CellType.CREATOR, CellType.LAST_MODIFIER].includes(columnType)) {
+    if (STRING_PREDICATE[filter.filter_predicate] !== STRING_PREDICATE[filterPredicate] || filterPredicate === FILTER_PREDICATE_TYPE.INCLUDE_ME) {
+      updatedFilter.filter_term = [];
+    }
+  }
+  if (isFilterTermArray(column, filterPredicate)) {
+    if (DATE_EMPTY_LABEL_MAP[filterPredicate] || filterPredicate === FILTER_PREDICATE_TYPE.INCLUDE_ME) {
+      updatedFilter.filter_term = [];
+    }
+    return updatedFilter;
+  }
+  if (isDateColumn(column)) {
+    let filterTermModifier = filterPredicate === FILTER_PREDICATE_TYPE.IS_WITHIN ? filterTermModifierIsWithin[0] : filterTermModifierNotWithin[0];
+    updatedFilter.filter_term_modifier = filterTermModifier;
+    return updatedFilter;
+  }
+  return updatedFilter;
+};
+export const getUpdatedFilterByTermModifier = (filters, filterIndex, filterTermModifier) => {
+  const filter = filters[filterIndex];
+  if (filter.filter_term_modifier === filterTermModifier) {
+    return;
+  }
+  return Object.assign({}, filter, {
+    filter_term_modifier: filterTermModifier
+  });
+};
+export const getUpdatedFilterByNormalTerm = (filters, column, filterIndex, event) => {
+  const filter = filters[filterIndex];
+  let filterTerm;
+  if (column.type === CellType.CHECKBOX) {
+    filterTerm = event.target.checked;
+  } else {
+    filterTerm = event.target.value;
+  }
+  if (filter.filter_term === filterTerm) {
+    return;
+  }
+  return Object.assign({}, filter, {
+    filter_term: filterTerm
+  });
+};
+export const getUpdatedFilterBySpecialTerm = (filters, filterIndex, type, value) => {
+  const filter = filters[filterIndex];
+  switch (type) {
+    case SPECIAL_TERM_TYPE.CREATOR:
+      {
+        return getUpdatedFilterByCreator(filter, value);
+      }
+    case SPECIAL_TERM_TYPE.SINGLE_SELECT:
+      {
+        return getUpdatedFilterBySelectSingle(filter, value);
+      }
+    case SPECIAL_TERM_TYPE.MULTIPLE_SELECT:
+      {
+        return getUpdatedFilterBySelectMultiple(filter, value);
+      }
+    case SPECIAL_TERM_TYPE.COLLABORATOR:
+      {
+        return getUpdatedFilterByCollaborator(filter, value);
+      }
+    case SPECIAL_TERM_TYPE.RATE:
+      {
+        return getUpdatedFilterByRate(filter, value);
+      }
+    default:
+      {
+        break;
+      }
+  }
+};
+export const getColumnByKey = (columns, columnKey) => {
+  if (!Array.isArray(columns) || !columnKey) return null;
+  return columns.find(column => column.key === columnKey);
+};
+export const isCheckboxColumn = column => {
+  let {
+    type,
+    data
+  } = column;
+  if (FORMULA_COLUMN_TYPES_MAP[type]) {
+    const {
+      result_type,
+      array_type
+    } = data || {};
+    if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
+      return array_type === CellType.CHECKBOX;
+    }
+    return false;
+  }
+  return type === CellType.CHECKBOX;
+};
+export const getDateColumnFormat = column => {
+  const format = column && column.data && column.data.format ? column.data.format : DEFAULT_DATE_FORMAT;
+  // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
+  return format;
+};
+const getMediaUrl = () => {
+  var _window, _window$dtable, _window2, _window2$dtablePlugin;
+  return ((_window = window) === null || _window === void 0 ? void 0 : (_window$dtable = _window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$dtablePlugin = _window2.dtablePluginConfig) === null || _window2$dtablePlugin === void 0 ? void 0 : _window2$dtablePlugin.mediaUrl) || '/media/';
+};
+export const generateDefaultUser = name => {
+  const mediaUrl = getMediaUrl();
+  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  return {
+    name,
+    email: name,
+    avatar_url: defaultAvatarUrl
+  };
+};
+export { FilterItemUtils };

package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js

@@ -0,0 +1,106 @@
+import React, { Component, Fragment } from 'react';
+import { FILTER_PREDICATE_TYPE } from 'dtable-utils';
+import DTableCustomizeSelect from '../../../DTableCustomizeSelect';
+import { getLocale } from '../../../lang';
+import './index.css';
+class CollaboratorFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.createCollaboratorOptions = (filterIndex, collaborators, filterTerm) => {
+      return collaborators.map(collaborator => {
+        let isSelected = filterTerm.findIndex(item => item === collaborator.email) > -1;
+        return {
+          value: {
+            filterIndex,
+            columnOption: collaborator
+          },
+          label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+            className: "select-option-name option-collaborator"
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "collaborator-container"
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "collaborator"
+          }, /*#__PURE__*/React.createElement("span", {
+            className: "collaborator-avatar-container"
+          }, /*#__PURE__*/React.createElement("img", {
+            className: "collaborator-avatar",
+            alt: collaborator.name,
+            src: collaborator.avatar_url
+          })), /*#__PURE__*/React.createElement("span", {
+            className: "collaborator-name text-truncate",
+            style: {
+              maxWidth: '200px'
+            },
+            title: collaborator.name,
+            "aria-label": collaborator.name
+          }, collaborator.name))), /*#__PURE__*/React.createElement("div", {
+            className: "collaborator-check-icon"
+          }, isSelected && /*#__PURE__*/React.createElement("i", {
+            className: "option-edit dtable-font dtable-icon-check-mark"
+          }))))
+        };
+      });
+    };
+    this.onClick = (e, collaborator) => {
+      e.stopPropagation();
+      this.props.onSelectCollaborator({
+        columnOption: collaborator
+      });
+    };
+    this.supportMultipleSelectOptions = [FILTER_PREDICATE_TYPE.HAS_ANY_OF, FILTER_PREDICATE_TYPE.HAS_ALL_OF, FILTER_PREDICATE_TYPE.HAS_NONE_OF, FILTER_PREDICATE_TYPE.IS_EXACTLY];
+  }
+  render() {
+    let {
+      filterIndex,
+      filterTerm,
+      collaborators,
+      placeholder,
+      filter_predicate
+    } = this.props;
+    let isSupportMultipleSelect = this.supportMultipleSelectOptions.indexOf(filter_predicate) > -1 ? true : false;
+    let selectedCollaborators = Array.isArray(filterTerm) && filterTerm.length > 0 && filterTerm.map(item => {
+      let collaborator = collaborators.find(c => c.email === item);
+      if (!collaborator) return null;
+      return /*#__PURE__*/React.createElement("div", {
+        key: item,
+        className: "collaborator"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-avatar-container"
+      }, /*#__PURE__*/React.createElement("img", {
+        className: "collaborator-avatar",
+        alt: collaborator.name,
+        src: collaborator.avatar_url
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "collaborator-name text-truncate",
+        title: collaborator.name,
+        "aria-label": collaborator.name
+      }, collaborator.name), /*#__PURE__*/React.createElement("span", {
+        className: "remove-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "remove-icon",
+        onClick: e => {
+          this.onClick(e, collaborator);
+        }
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      }))));
+    });
+    let value = selectedCollaborators ? {
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, selectedCollaborators)
+    } : {};
+    let options = Array.isArray(filterTerm) ? this.createCollaboratorOptions(filterIndex, collaborators, filterTerm) : [];
+    return /*#__PURE__*/React.createElement(DTableCustomizeSelect, {
+      className: "selector-collaborator",
+      value: value,
+      onSelectOption: this.props.onSelectCollaborator,
+      options: options,
+      placeholder: placeholder,
+      isLocked: this.props.isLocked,
+      supportMultipleSelect: isSupportMultipleSelect,
+      searchable: true,
+      searchPlaceholder: getLocale('Find_a_collaborator'),
+      isShowSelected: false
+    });
+  }
+}
+export default CollaboratorFilter;

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -0,0 +1,89 @@
+import React, { useState, useRef } from 'react';
+import classnames from 'classnames';
+import SelectedDepartments from '../../../Department-editor/selected-departments';
+import DepartmentMultipleSelect from '../../../Department-editor/department-multiple-select';
+import { DEPARTMENT_SELECT_RANGE_OPTIONS } from '../../../Department-editor/constants';
+import { useClickOutside } from '../../../hooks/common-hooks';
+import { getLocale } from '../../../lang';
+function DepartmentMultipleSelectFilter(props) {
+  const {
+    value,
+    departments
+  } = props;
+  const [isShowSelector, setIsShowSelector] = useState(false);
+  const [selectedDepartments, setSelectedDepartments] = useState(value || []);
+  const selectorRef = useRef(null);
+  useClickOutside({
+    currDOM: selectorRef.current,
+    onClickOutside: () => setIsShowSelector(false)
+  }, [selectedDepartments]);
+  function renderUserDepartmentOptions() {
+    return DEPARTMENT_SELECT_RANGE_OPTIONS.slice(0, 2).map((option, index) => {
+      const {
+        type,
+        name
+      } = option;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dropdown-item d-flex align-items-center",
+        key: index,
+        onClick: event => selectDepartment(event, type)
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        className: "vam department-select-input",
+        checked: selectedDepartments.includes(type),
+        onChange: event => selectDepartment(event, type)
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "text-truncate department-name"
+      }, getLocale(name)));
+    });
+  }
+  function onSelectToggle(event) {
+    event.preventDefault();
+    setIsShowSelector(!isShowSelector);
+  }
+  function selectDepartment(event, value) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    let newSelectedDepartment = selectedDepartments.slice(0);
+    const index = newSelectedDepartment.findIndex(item => item === value);
+    if (index !== -1) {
+      newSelectedDepartment.splice(index, 1);
+    } else {
+      newSelectedDepartment.push(value);
+    }
+    setSelectedDepartments(newSelectedDepartment);
+    const columnOption = {
+      id: value
+    };
+    props.onCommit({
+      columnOption
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: selectorRef,
+    className: classnames('dtable-select custom-select', {
+      'focus': isShowSelector
+    }),
+    onClick: onSelectToggle,
+    id: "filter-department-editor"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "selected-option"
+  }, selectedDepartments.length > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: "selected-option-show"
+  }, /*#__PURE__*/React.createElement(SelectedDepartments, {
+    value: selectedDepartments,
+    departments: departments
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "select-placeholder"
+  }, getLocale('Select_department')), /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-drop-down"
+  })), isShowSelector && /*#__PURE__*/React.createElement(DepartmentMultipleSelect, {
+    isShowSelectedDepartments: false,
+    classNamePrefix: "filter",
+    value: selectedDepartments,
+    onCommit: selectDepartment,
+    renderUserDepartmentOptions: renderUserDepartmentOptions,
+    departments: departments
+  }));
+}
+export default DepartmentMultipleSelectFilter;