dtable-ui-component 4.4.0-alpha1 → 4.4.0-beta

package/lib/CollaboratorEditor/index.js

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import MediaQuery from 'react-responsive';
 import { getLocale } from '../lang';
-import ModalPortal from '../common/modal-portal';
 import CollaboratorItem from '../CollaboratorItem';
 import EditEditorButton from '../EditEditorButton';
 import PCCollaboratorEditorPopover from './pc-collaborator-editor-popover';
@@ -168,13 +167,13 @@ class CollaboratorEditor extends React.Component {
       });
     }))), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MediaQuery, {
       query: '(min-width: 768px)'
-    }, /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
+    }, /*#__PURE__*/React.createElement(PCCollaboratorEditorPopover, {
       popoverPosition: popoverPosition,
       isReadOnly: this.props.isReadOnly,
       selectedCollaborators: selectedCollaborators,
       collaborators: collaborators,
       onCollaboratorItemToggle: this.onCollaboratorItemToggle
-    }))), /*#__PURE__*/React.createElement(MediaQuery, {
+    })), /*#__PURE__*/React.createElement(MediaQuery, {
       query: '(max-width: 767.8px)'
     }, /*#__PURE__*/React.createElement(MBCollaboratorEditorPopover, {
       isReadOnly: this.props.isReadOnly,

package/lib/DTableCommonAddTool/index.css

@@ -0,0 +1,25 @@
+.dtable-ui.add-item-btn {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  border-top: 1px solid #dedede;
+  background: #fff;
+  padding: 0 1rem;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  position: relative;
+}
+
+.dtable-ui.add-item-btn:hover {
+  cursor: pointer;
+  background: #f5f5f5;
+}
+
+.dtable-ui.add-item-btn .dtable-icon-add-table {
+  margin-right: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  transform: none;
+}

package/lib/DTableCommonAddTool/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import './index.css';
+function DTableCommonAddTool(_ref) {
+  let {
+    callBack,
+    footerName,
+    className,
+    addIconClassName,
+    hideIcon,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dtable-ui add-item-btn ".concat(className ? className : ''),
+    style: style,
+    onClick: e => {
+      callBack(e);
+    }
+  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
+    className: "dtable-font dtable-icon-add-table ".concat(addIconClassName || '')
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-truncate"
+  }, footerName));
+}
+export default DTableCommonAddTool;

package/lib/DTableFiltersPopover/constants/index.js

@@ -0,0 +1,65 @@
+import { FILTER_PREDICATE_TYPE, FILTER_TERM_MODIFIER_TYPE, CellType, FORMULA_RESULT_TYPE } from 'dtable-utils';
+const FORMULA_COLUMN_TYPES = [CellType.FORMULA, CellType.LINK_FORMULA];
+const SPECIAL_TERM_TYPE = {
+  CREATOR: 'creator',
+  SINGLE_SELECT: 'single_select',
+  MULTIPLE_SELECT: 'multiple_select',
+  COLLABORATOR: 'collaborator',
+  RATE: 'rate'
+};
+const SIMPLE_TEXT_INPUT_COLUMNS_MAP = {
+  [CellType.TEXT]: true,
+  [CellType.LONG_TEXT]: true,
+  [CellType.GEOLOCATION]: true,
+  [CellType.AUTO_NUMBER]: true,
+  [CellType.EMAIL]: true,
+  [CellType.URL]: true,
+  [CellType.IMAGE]: true,
+  [CellType.FILE]: true,
+  [FORMULA_RESULT_TYPE.STRING]: true,
+  [FORMULA_RESULT_TYPE.BOOL]: true
+};
+const DATE_LABEL_MAP = {
+  [FILTER_TERM_MODIFIER_TYPE.EXACT_DATE]: true,
+  [FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_AGO]: true,
+  [FILTER_TERM_MODIFIER_TYPE.NUMBER_OF_DAYS_FROM_NOW]: true,
+  [FILTER_TERM_MODIFIER_TYPE.THE_NEXT_NUMBERS_OF_DAYS]: true,
+  [FILTER_TERM_MODIFIER_TYPE.THE_PAST_NUMBERS_OF_DAYS]: true
+};
+const ARRAY_PREDICATE = {
+  [FILTER_PREDICATE_TYPE.IS_ANY_OF]: true,
+  [FILTER_PREDICATE_TYPE.IS_NONE_OF]: true
+};
+const STRING_PREDICATE = {
+  [FILTER_PREDICATE_TYPE.IS]: true,
+  [FILTER_PREDICATE_TYPE.IS_NOT]: true
+};
+const DATE_EMPTY_LABEL_MAP = {
+  [FILTER_PREDICATE_TYPE.EMPTY]: true,
+  [FILTER_PREDICATE_TYPE.NOT_EMPTY]: true
+};
+const MULTIPLE_SELECTOR_COLUMNS = [CellType.MULTIPLE_SELECT, CellType.COLLABORATOR, CellType.CREATOR, CellType.LAST_MODIFIER];
+const FILTER_TERM_MODIFIER_SHOW = {
+  'today': 'Today',
+  'tomorrow': 'Tomorrow',
+  'yesterday': 'Yesterday',
+  'one_week_ago': 'One_week_ago',
+  'one_week_from_now': 'One_week_from_now',
+  'one_month_ago': 'One_month_ago',
+  'one_month_from_now': 'One_month_from_now',
+  'number_of_days_ago': 'Number_of_days_ago',
+  'number_of_days_from_now': 'Number_of_days_from_now',
+  'exact_date': 'Exact_date',
+  'the_past_week': 'Last_week',
+  'the_past_month': 'Last_month',
+  'the_past_year': 'Last_year',
+  'the_next_week': 'The_next_week',
+  'the_next_month': 'The_next_month',
+  'the_next_year': 'The_next_year',
+  'the_next_numbers_of_days': 'The_next_numbers_of_days',
+  'the_past_numbers_of_days': 'The_past_numbers_of_days',
+  'this_week': 'This_week',
+  'this_month': 'This_month',
+  'this_year': 'This_year'
+};
+export { FORMULA_COLUMN_TYPES, SPECIAL_TERM_TYPE, SIMPLE_TEXT_INPUT_COLUMNS_MAP, DATE_LABEL_MAP, ARRAY_PREDICATE, STRING_PREDICATE, DATE_EMPTY_LABEL_MAP, MULTIPLE_SELECTOR_COLUMNS, FILTER_TERM_MODIFIER_SHOW };

package/lib/DTableFiltersPopover/index.css

@@ -0,0 +1,39 @@
+.dtable-filter-popover .popover {
+  max-width: none;
+  min-width: 300px;
+}
+
+.dtable-filter-popover .dtable-filter-popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}
+
+/*  */
+.dtable-filter-popover .popover-add-tool {
+  border-top: none;
+  color: #555555;
+}
+
+.dtable-filter-popover .popover-add-tool.disabled {
+  color: #c2c2c2;
+}
+
+.dtable-filter-popover .popover-add-tool.disabled:hover {
+  cursor: not-allowed;
+  background: #fff;
+}
+
+.dtable-filter-popover .popover-add-tool .popover-add-icon {
+  margin-right: 14px;
+}
+
+.dtable-filter-popover .dtable-filter-popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}

package/lib/DTableFiltersPopover/index.js

@@ -0,0 +1,216 @@
+import React, { Component } from 'react';
+import isHotkey from 'is-hotkey';
+import { Button, UncontrolledPopover } from 'reactstrap';
+import { FILTER_COLUMN_OPTIONS, getValidFilters } from 'dtable-utils';
+import CommonAddTool from '../DTableCommonAddTool';
+import { getEventClassName } from '../utils/utils';
+import { getFilterByColumn } from './utils';
+import FiltersList from './widgets/filter-list';
+import eventBus from '../utils/event-bus';
+import { EVENT_BUS_TYPE } from '../constants';
+import { getLocale } from '../lang';
+import './index.css';
+
+/**
+ * filter = {
+ *  column_key: '',
+ *  filter_predicate: '',
+ *  filter_term: '',
+ *  filter_term_modifier: '',
+ * }
+ */
+class DTableFiltersPopover extends Component {
+  constructor(props) {
+    super(props);
+    this.onHotKey = e => {
+      if (isHotkey('esc', e) && !this.isSelectOpen) {
+        e.preventDefault();
+        this.props.hidePopover();
+      }
+    };
+    this.setSelectStatus = status => {
+      this.isSelectOpen = status;
+    };
+    this.hideDTablePopover = e => {
+      if (this.dtablePopoverRef && !getEventClassName(e).includes('popover') && !this.dtablePopoverRef.contains(e.target)) {
+        this.props.hidePopover(e);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    };
+    this.isNeedSubmit = () => {
+      return this.props.isNeedSubmit;
+    };
+    this.update = filters => {
+      if (this.isNeedSubmit()) {
+        const isSubmitDisabled = false;
+        this.setState({
+          filters,
+          isSubmitDisabled
+        });
+        return;
+      }
+      this.setState({
+        filters
+      }, () => {
+        const update = {
+          filters,
+          filter_conjunction: this.state.filterConjunction
+        };
+        this.props.update(update);
+      });
+    };
+    this.deleteFilter = (filterIndex, scheduleUpdate) => {
+      const filters = this.state.filters.slice(0);
+      filters.splice(filterIndex, 1);
+      if (filters.length === 0) {
+        scheduleUpdate();
+      }
+      this.update(filters);
+    };
+    this.updateFilter = (filterIndex, updated) => {
+      const filters = this.state.filters.slice(0);
+      filters[filterIndex] = updated;
+      this.update(filters);
+    };
+    this.updateFilterConjunction = conjunction => {
+      if (this.isNeedSubmit()) {
+        const isSubmitDisabled = false;
+        this.setState({
+          filterConjunction: conjunction,
+          isSubmitDisabled
+        });
+        return;
+      }
+      this.setState({
+        filterConjunction: conjunction
+      }, () => {
+        const update = {
+          filters: this.state.filters,
+          filter_conjunction: conjunction
+        };
+        this.props.update(update);
+      });
+    };
+    this.addFilter = scheduleUpdate => {
+      let {
+        columns
+      } = this.props;
+      let defaultColumn = columns[0];
+      if (!FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
+        defaultColumn = columns.find(c => FILTER_COLUMN_OPTIONS[c.type]);
+      }
+      if (!defaultColumn) return;
+      let filter = getFilterByColumn(defaultColumn);
+      const filters = this.state.filters.slice(0);
+      if (filters.length === 0) {
+        scheduleUpdate();
+      }
+      filters.push(filter);
+      this.update(filters);
+    };
+    this.onClosePopover = () => {
+      this.props.hidePopover();
+    };
+    this.onSubmitFilters = () => {
+      const {
+        filters,
+        filterConjunction
+      } = this.state;
+      const update = {
+        filters,
+        filter_conjunction: filterConjunction
+      };
+      this.props.update(update);
+      this.props.hidePopover();
+    };
+    this.onPopoverInsideClick = e => {
+      e.stopPropagation();
+    };
+    this.state = {
+      filters: getValidFilters(props.filters, props.columns),
+      filterConjunction: props.filterConjunction || 'And'
+    };
+    this.isSelectOpen = false;
+  }
+  componentDidMount() {
+    document.addEventListener('mousedown', this.hideDTablePopover, true);
+    document.addEventListener('keydown', this.onHotKey);
+    this.unsubscribeOpenSelect = eventBus.subscribe(EVENT_BUS_TYPE.OPEN_SELECT, this.setSelectStatus);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.hideDTablePopover, true);
+    document.removeEventListener('keydown', this.onHotKey);
+    this.unsubscribeOpenSelect();
+  }
+  render() {
+    const {
+      target,
+      columns,
+      className,
+      roleId,
+      userDepartmentIdsMap,
+      departments,
+      lang,
+      readOnly
+    } = this.props;
+    const {
+      filters,
+      filterConjunction
+    } = this.state;
+    const canAddFilter = columns.length > 0;
+    return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      placement: "auto-start",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true,
+      className: "dtable-filter-popover",
+      boundariesElement: document.body
+    }, _ref => {
+      let {
+        scheduleUpdate
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: ref => this.dtablePopoverRef = ref,
+        onClick: this.onPopoverInsideClick,
+        className: className
+      }, /*#__PURE__*/React.createElement(FiltersList, {
+        filterConjunction: filterConjunction,
+        filters: filters,
+        roleId: roleId,
+        columns: columns,
+        emptyPlaceholder: getLocale('No_filters'),
+        collaborators: this.props.collaborators,
+        readOnly: readOnly,
+        scheduleUpdate: scheduleUpdate,
+        userDepartmentIdsMap: userDepartmentIdsMap,
+        departments: departments,
+        lang: lang,
+        updateFilter: this.updateFilter,
+        deleteFilter: this.deleteFilter,
+        updateFilterConjunction: this.updateFilterConjunction
+      }), /*#__PURE__*/React.createElement(CommonAddTool, {
+        className: "popover-add-tool ".concat(canAddFilter ? '' : 'disabled'),
+        callBack: canAddFilter ? () => this.addFilter(scheduleUpdate) : () => {},
+        footerName: getLocale('Add_filter'),
+        addIconClassName: "popover-add-icon"
+      }), this.isNeedSubmit() && /*#__PURE__*/React.createElement("div", {
+        className: "dtable-filter-popover-footer"
+      }, /*#__PURE__*/React.createElement(Button, {
+        className: "mr-2",
+        onClick: this.onClosePopover
+      }, getLocale('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        disabled: this.state.isSubmitDisabled,
+        onClick: this.onSubmitFilters
+      }, getLocale('Submit'))));
+    });
+  }
+}
+DTableFiltersPopover.defaultProps = {
+  className: '',
+  readOnly: false
+};
+export default DTableFiltersPopover;

package/lib/DTableFiltersPopover/utils/filter-item-utils.js

@@ -0,0 +1,145 @@
+import React, { Fragment } from 'react';
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import { getLocale } from '../../lang';
+class FilterItemUtils {
+  static generatorColumnOption(column) {
+    if (!column) return null;
+    const {
+      type,
+      name
+    } = column;
+    return {
+      value: {
+        column
+      },
+      label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "filter-header-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: COLUMNS_ICON_CONFIG[type]
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, name))
+    };
+  }
+  static generatorPredicateOption(filterPredicate) {
+    return {
+      value: {
+        filterPredicate
+      },
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, getLocale(filterPredicate))
+    };
+  }
+  static generatorTermModifierOption(filterTermModifier) {
+    const FILTER_TERM_MODIFIER_SHOW = {
+      'today': getLocale('today'),
+      'tomorrow': getLocale('tomorrow'),
+      'yesterday': getLocale('yesterday'),
+      'one_week_ago': getLocale('one_week_ago'),
+      'one_week_from_now': getLocale('one_week_from_now'),
+      'one_month_ago': getLocale('one_month_ago'),
+      'one_month_from_now': getLocale('one_month_from_now'),
+      'number_of_days_ago': getLocale('number_of_days_ago'),
+      'number_of_days_from_now': getLocale('number_of_days_from_now'),
+      'exact_date': getLocale('exact_date'),
+      'the_past_week': getLocale('last_week'),
+      'the_past_month': getLocale('last_month'),
+      'the_past_year': getLocale('last_year'),
+      'the_next_week': getLocale('the_next_week'),
+      'the_next_month': getLocale('the_next_month'),
+      'the_next_year': getLocale('the_next_year'),
+      'the_next_numbers_of_days': getLocale('the_next_numbers_of_days'),
+      'the_past_numbers_of_days': getLocale('the_past_numbers_of_days'),
+      'this_week': getLocale('this_week'),
+      'this_month': getLocale('this_month'),
+      'this_year': getLocale('this_year')
+    };
+    return {
+      value: {
+        filterTermModifier
+      },
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, FILTER_TERM_MODIFIER_SHOW[filterTermModifier])
+    };
+  }
+  static generatorSingleSelectOption(option) {
+    return {
+      value: {
+        columnOption: option
+      },
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "select-option-name"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "single-select-option",
+        style: {
+          background: option.color,
+          color: option.textColor || null
+        },
+        title: option.name,
+        "aria-label": option.name
+      }, option.name))
+    };
+  }
+  static generatorMultipleSelectOption(option, filterTerm) {
+    return {
+      value: {
+        columnOption: option
+      },
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "select-option-name multiple-option-name"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "multiple-select-option",
+        style: {
+          background: option.color,
+          color: option.textColor
+        },
+        title: option.name,
+        "aria-label": option.name
+      }, option.name), /*#__PURE__*/React.createElement("div", {
+        className: "multiple-check-icon"
+      }, filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/React.createElement("i", {
+        className: "option-edit dtable-font dtable-icon-check-mark"
+      })))
+    };
+  }
+  static generatorConjunctionOptions() {
+    return [{
+      value: {
+        filterConjunction: 'And'
+      },
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, getLocale('And'))
+    }, {
+      value: {
+        filterConjunction: 'Or'
+      },
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, getLocale('Or'))
+    }];
+  }
+  static getActiveConjunctionOption(conjunction) {
+    if (conjunction === 'And') {
+      return {
+        value: {
+          filterConjunction: 'And'
+        },
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, getLocale('And'))
+      };
+    }
+    return {
+      value: {
+        filterConjunction: 'Or'
+      },
+      label: /*#__PURE__*/React.createElement("span", {
+        className: "select-option-name"
+      }, getLocale('Or'))
+    };
+  }
+}
+export default FilterItemUtils;