sea-chart 1.1.21 → 1.1.22-alpha.2

package/dist/components/data-process-setter/data-setting-header.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Label } from 'reactstrap';
+import intl from '../../intl';
+function DataSettingHeader() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "setting-item data-setting"
+  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center"
+  }, /*#__PURE__*/React.createElement("span", null, intl.get('Data_settings')))));
+}
+export default DataSettingHeader;

package/dist/components/data-process-setter/hide-column-setter.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import HideColumnPopover from '../popover/hide-column-popover/hide-column-popover';
+import intl from '../../intl';
+class HideColumnSetter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onHideColumnToggle = () => {
+      const {
+        isShowHideColumnSetter
+      } = this.state;
+      if (isShowHideColumnSetter) {
+        const {
+          shownColumnKeys
+        } = this.state;
+        this.props.onSettingUpdate(shownColumnKeys);
+      }
+      this.setState({
+        isShowHideColumnSetter: !isShowHideColumnSetter
+      });
+    };
+    this.modifyHiddenColumns = shownColumnKeys => {
+      this.setState({
+        shownColumnKeys
+      });
+    };
+    this.state = {
+      isShowHideColumnSetter: false,
+      shownColumnKeys: props.shownColumnKeys || []
+    };
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {
+      shownColumnKeys
+    } = nextProps;
+    if (shownColumnKeys !== this.props.shownColumnKeys) {
+      this.setState({
+        isShowHideColumnSetter: false,
+        shownColumnKeys
+      });
+    }
+  }
+  render() {
+    const {
+      columns,
+      wrapperClass
+    } = this.props;
+    if (!columns) return null;
+    const {
+      shownColumnKeys
+    } = this.state;
+    const shown_column_keys = shownColumnKeys || [];
+    const hiddenColumns = columns.filter(column => !shown_column_keys.includes(column.key));
+    const hiddenColumnsLength = hiddenColumns.length;
+    let message = intl.get('hide_columns');
+    if (hiddenColumnsLength === 1) {
+      message = intl.get('1_hidden_column');
+    } else if (hiddenColumnsLength > 1) {
+      message = hiddenColumnsLength + ' ' + intl.get('Hidden_columns');
+    }
+    let settingClass = wrapperClass || '';
+    settingClass = settingClass && hiddenColumnsLength > 0 ? settingClass + ' active' : settingClass;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "setting-item ".concat(settingClass ? '' : 'mb-1')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 filters-setting-btn",
+      onClick: this.onHideColumnToggle
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font dtable-icon-hide mr-2",
+      id: "dtable-hidden-column-popover"
+    }), /*#__PURE__*/React.createElement("span", null, message)), this.state.isShowHideColumnSetter && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HideColumnPopover, {
+      columns: columns,
+      target: 'dtable-hidden-column-popover',
+      shownColumnKeys: shownColumnKeys,
+      modifyHiddenColumns: this.modifyHiddenColumns,
+      onPopoverToggle: this.onHideColumnToggle
+    })));
+  }
+}
+export default HideColumnSetter;

package/dist/components/data-process-setter/index.js

@@ -0,0 +1,4 @@
+import SortSetter from './sort-setter';
+import HideColumnSetter from './hide-column-setter';
+import DataSettingHeader from './data-setting-header';
+export { SortSetter, HideColumnSetter, DataSettingHeader };

package/dist/components/data-process-setter/sort-setter.js

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { getValidSorts } from 'dtable-utils';
+import SortPopover from '../../components/popover/sort-popover/sort-popover';
+import { isEnter, isSpace } from '../../utils/hotkey';
+import intl from '../../intl';
+class SortSetter extends Component {
+  constructor(props) {
+    super(props);
+    this.onSortToggle = () => {
+      this.setState({
+        isSortPopoverShow: !this.state.isSortPopoverShow
+      });
+    };
+    this.onKeyDown = e => {
+      e.stopPropagation();
+      if (isEnter(e) || isSpace(e)) this.onSortToggle();
+    };
+    this.update = update => {
+      const {
+        sorts
+      } = update || {};
+      this.props.onSortsChange(sorts);
+    };
+    this.state = {
+      isSortPopoverShow: false
+    };
+  }
+  render() {
+    const {
+      sorts,
+      columns,
+      isNeedSubmit,
+      wrapperClass
+    } = this.props;
+    if (!columns) return null;
+    const validSorts = getValidSorts(sorts || [], columns);
+    const sortsLength = validSorts ? validSorts.length : 0;
+    let sortMessage = intl.get('Sort');
+    if (sortsLength === 1) {
+      sortMessage = intl.get('1_Sort');
+    } else if (sortsLength > 1) {
+      sortMessage = isNeedSubmit ? intl.get('Sorts') : intl.get('Sorts');
+      sortMessage = sortsLength + ' ' + sortMessage;
+    }
+    let labelClass = wrapperClass || '';
+    labelClass = labelClass && sortsLength > 0 ? labelClass + ' active' : labelClass;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "setting-item ".concat(labelClass ? '' : 'mb-1')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "mr-2 setting-item-btn filters-setting-btn ".concat(labelClass),
+      onClick: this.onSortToggle,
+      role: "button",
+      onKeyDown: this.onKeyDown,
+      title: sortMessage,
+      "aria-label": sortMessage,
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-sort mr-2",
+      id: this.props.target
+    }), /*#__PURE__*/React.createElement("span", null, sortMessage))), this.state.isSortPopoverShow && /*#__PURE__*/React.createElement(SortPopover, {
+      target: this.props.target,
+      isNeedSubmit: isNeedSubmit,
+      columns: columns,
+      onSortComponentToggle: this.onSortToggle,
+      update: this.update,
+      sorts: sorts
+    }));
+  }
+}
+SortSetter.defaultProps = {
+  target: 'dtable-sort-popover',
+  isNeedSubmit: false
+};
+export default SortSetter;

package/dist/components/popover/hide-column-popover/hide-column-popover-widgets/hide-column-item.js

@@ -0,0 +1,60 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React from 'react';
+class HideColumnItem extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onUpdateFieldSetting = event => {
+      event.nativeEvent.stopImmediatePropagation();
+      const value = event.target.checked;
+      const {
+        setting
+      } = this.state;
+      if (setting.isChecked === value) {
+        return;
+      }
+      const newSetting = Object.assign({}, setting, {
+        isChecked: value
+      });
+      this.setState({
+        setting: newSetting
+      }, () => {
+        this.props.onUpdateFieldSetting(newSetting);
+      });
+    };
+    this.state = {
+      setting: null
+    };
+  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (JSON.stringify(nextProps.setting) !== JSON.stringify(prevState.setting)) {
+      return {
+        setting: nextProps.setting
+      };
+    }
+    return null;
+  }
+  render() {
+    const {
+      setting
+    } = this.state;
+    const {
+      readonly
+    } = this.props;
+    const placeholder = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      className: "dtable-font ".concat(setting.columnIcon)
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-truncate"
+    }, setting.columnName));
+    return /*#__PURE__*/React.createElement(_DTableSwitch, {
+      checked: setting.isChecked,
+      disabled: readonly,
+      placeholder: placeholder,
+      onChange: this.onUpdateFieldSetting,
+      switchClassName: "dropdown-item"
+    });
+  }
+}
+HideColumnItem.defaultProps = {
+  readonly: false
+};
+export default HideColumnItem;

package/dist/components/popover/hide-column-popover/hide-column-popover.css

@@ -0,0 +1,38 @@
+.hidden-column-popover .custom-switch .custom-switch-description {
+  width: 192px;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding-right: 5px;
+}
+
+.hidden-column-popover .custom-switch .dtable-font {
+  transform: scale(0.8);
+  display: inline-block;
+  line-height: 24px;
+  margin-right: 8px;
+  color: #666;
+}
+
+.hidden-column-popover .custom-switch .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.hidden-column-popover .custom-switch .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}
+
+.hidden-column-popover .custom-switch .custom-switch-indicator:before {
+  content: "";
+  position: absolute;
+  top: 1px;
+  width: 8px;
+  height: 8px;
+  left: 1px;
+  background: #fff;
+  border-radius: 50%;
+  transition: .3s left;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4);
+}

package/dist/components/popover/hide-column-popover/hide-column-popover.js

@@ -0,0 +1,208 @@
+import React from 'react';
+// import intl from 'react-intl-universal';
+import { UncontrolledPopover } from 'reactstrap';
+import isHotkey from 'is-hotkey';
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import intl from '../../../intl';
+import { getEventClassName } from '../../../utils';
+import HideColumnItem from './hide-column-popover-widgets/hide-column-item';
+import './hide-column-popover.css';
+class HideColumnPopover extends React.Component {
+  constructor(props) {
+    super(props);
+    this.hidePopover = e => {
+      if (this.popoverRef && !getEventClassName(e).includes('popover') && !this.popoverRef.contains(e.target)) {
+        this.props.onPopoverToggle(e);
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    };
+    this.onHotKey = e => {
+      if (isHotkey('esc', e)) {
+        e.preventDefault();
+        this.props.onPopoverToggle();
+      }
+    };
+    this.onChooseAllColumns = () => {
+      const {
+        columns
+      } = this.props;
+      let shownColumnKeys = [];
+      const {
+        fieldSettings
+      } = this.state;
+      const newFieldSettings = fieldSettings.map(setting => {
+        setting.isChecked = true;
+        shownColumnKeys.push(setting.key);
+        return setting;
+      });
+      shownColumnKeys.unshift(columns[0].key);
+      this.setState({
+        fieldSettings: newFieldSettings
+      }, () => {
+        this.props.modifyHiddenColumns(shownColumnKeys);
+      });
+    };
+    this.onHideAllColumns = () => {
+      const {
+        columns
+      } = this.props;
+      const newFieldSettings = this.state.fieldSettings.map(setting => {
+        setting.isChecked = false;
+        return setting;
+      });
+      // table page cannot hide first column
+      const shownColumnKeys = [columns[0].key];
+      this.setState({
+        fieldSettings: newFieldSettings
+      }, () => {
+        this.props.modifyHiddenColumns(shownColumnKeys);
+      });
+    };
+    this.onUpdateFieldSetting = columnSetting => {
+      const {
+        columns
+      } = this.props;
+      const {
+        fieldSettings
+      } = this.state;
+      let shownColumnKeys = [];
+      const newFieldSettings = fieldSettings.map(setting => {
+        if (setting.key === columnSetting.key) {
+          setting = columnSetting;
+        }
+        if (setting.isChecked) {
+          shownColumnKeys.push(setting.key);
+        }
+        return setting;
+      });
+      // table page cannot hide first column
+      if (!shownColumnKeys.includes(columns[0].key)) {
+        shownColumnKeys.unshift(columns[0].key);
+      }
+      this.setState({
+        fieldSettings: newFieldSettings
+      }, () => {
+        this.props.modifyHiddenColumns(shownColumnKeys);
+      });
+    };
+    this.onPopoverInsideClick = e => {
+      e.stopPropagation();
+    };
+    this.onChangeSearch = event => {
+      let {
+        searchVal
+      } = this.state;
+      if (searchVal === event.target.value) {
+        return;
+      }
+      searchVal = event.target.value;
+      this.setState({
+        searchVal
+      });
+    };
+    this.getFilteredColumns = () => {
+      let {
+        searchVal,
+        fieldSettings
+      } = this.state;
+      searchVal = searchVal.toLowerCase();
+      if (!searchVal) {
+        return fieldSettings;
+      }
+      return fieldSettings.filter(setting => {
+        return setting.columnName.toLowerCase().includes(searchVal);
+      });
+    };
+    this.state = {
+      fieldSettings: [],
+      searchVal: ''
+    };
+  }
+  componentDidMount() {
+    document.addEventListener('click', this.hidePopover, true);
+    document.addEventListener('keydown', this.onHotKey);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('click', this.hidePopover, true);
+    document.removeEventListener('keydown', this.onHotKey);
+  }
+  static getDerivedStateFromProps(nextProps, preState) {
+    const {
+      columns,
+      shownColumnKeys
+    } = nextProps;
+    let fieldSettings = columns.map(column => {
+      return {
+        key: column.key,
+        isChecked: shownColumnKeys.includes(column.key),
+        columnName: column.name,
+        columnIcon: COLUMNS_ICON_CONFIG[column.type]
+      };
+    });
+    // table page cannot hide first column
+    fieldSettings.shift();
+    return {
+      fieldSettings: fieldSettings
+    };
+  }
+  render() {
+    const {
+      target,
+      readonly
+    } = this.props;
+    const fieldSettings = this.getFilteredColumns();
+    const isEmpty = fieldSettings.length === 0 ? true : false;
+    return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      placement: "auto-start",
+      isOpen: true,
+      target: target,
+      fade: false,
+      hideArrow: true,
+      className: "hidden-column-popover",
+      boundariesElement: document.body
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.popoverRef = ref,
+      onClick: this.onPopoverInsideClick
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "field-settings ".concat(isEmpty ? 'empty' : '')
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "search-column"
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "form-control",
+      type: "text",
+      placeholder: intl.get('Search_column'),
+      value: this.state.searchVal,
+      onChange: this.onChangeSearch
+    })), isEmpty && /*#__PURE__*/React.createElement("div", {
+      className: "empty-hidden-columns-container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "empty-hidden-columns-list"
+    }, intl.get('No_columns_available_to_be_hidden'))), !isEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "field-settings-body",
+      style: {
+        maxHeight: window.innerHeight - 200 + 'px'
+      }
+    }, fieldSettings.map(setting => {
+      return /*#__PURE__*/React.createElement(HideColumnItem, {
+        key: setting.key,
+        setting: setting,
+        onUpdateFieldSetting: this.onUpdateFieldSetting,
+        readonly: readonly
+      });
+    })), !this.state.searchVal && !readonly && /*#__PURE__*/React.createElement("div", {
+      className: "field-settings-header"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "hide-all px-2",
+      onClick: this.onHideAllColumns
+    }, intl.get('Hide_all')), /*#__PURE__*/React.createElement("div", {
+      className: "show-all px-2",
+      onClick: this.onChooseAllColumns
+    }, intl.get('Show_all')))))));
+  }
+}
+HideColumnPopover.defaultProps = {
+  readonly: false
+};
+export default HideColumnPopover;

package/dist/components/popover/sort-popover/sort-popover-widgets/sort-utils.js

@@ -0,0 +1,71 @@
+import { SORT_TYPE, isValidSort } from 'dtable-utils';
+export const SORT_OPERATION = {
+  ADD_SORT: 'add_sort',
+  DELETE_SORT: 'delete_sort',
+  MODIFY_SORT_COLUMN: 'modify_sort_column',
+  MODIFY_SORT_TYPE: 'modify_sort_type'
+};
+export const getDisplaySorts = (sorts, columns) => {
+  if (!Array.isArray(sorts) || !Array.isArray(columns)) {
+    return [];
+  }
+  return sorts.filter(sort => !sort.column_key || isValidSort(sort, columns));
+};
+export const isSortsEmpty = sorts => {
+  return !sorts || sorts.length === 0;
+};
+export const execSortsOperation = (action, payload) => {
+  const {
+    sorts: updatedSorts
+  } = payload;
+  switch (action) {
+    case SORT_OPERATION.ADD_SORT:
+      {
+        const newSort = {
+          column_key: null,
+          sort_type: SORT_TYPE.UP
+        };
+        updatedSorts.push(newSort);
+        return updatedSorts;
+      }
+    case SORT_OPERATION.DELETE_SORT:
+      {
+        const {
+          index
+        } = payload;
+        updatedSorts.splice(index, 1);
+        return updatedSorts;
+      }
+    case SORT_OPERATION.MODIFY_SORT_COLUMN:
+      {
+        const {
+          index,
+          column_key
+        } = payload;
+        const newSort = {
+          column_key: column_key,
+          sort_type: SORT_TYPE.UP
+        };
+        updatedSorts[index] = newSort;
+        return updatedSorts;
+      }
+    case SORT_OPERATION.MODIFY_SORT_TYPE:
+      {
+        const {
+          index,
+          sort_type
+        } = payload;
+        const updatedSort = updatedSorts[index];
+        const newSort = {
+          column_key: updatedSort.column_key,
+          sort_type: sort_type
+        };
+        updatedSorts[index] = newSort;
+        return updatedSorts;
+      }
+    default:
+      {
+        return updatedSorts;
+      }
+  }
+};

package/dist/components/popover/sort-popover/sort-popover.css

@@ -0,0 +1,83 @@
+.sort-popover .popover {
+  max-width: none;
+  min-width: 400px;
+}
+
+.sort-popover .sorts-list {
+  min-height: 120px;
+  max-height: 100%;
+  padding: 15px;
+}
+
+.sort-popover .sorts-list .option-group {
+  overflow: auto;
+  max-height: 360px;
+}
+
+.sort-popover .empty-sorts-container {
+  min-height: 80px;
+  padding: 16px;
+}
+
+.sorts-list .sort-item {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0;
+}
+
+.sort-item .condition {
+  display: flex;
+  flex: 1 1;
+}
+
+.sort-item .condition > div {
+  height: 38px;
+  line-height: 38px;
+}
+
+.sort-item .sort-column {
+  width: 150px;
+}
+
+.sort-item .sort-predicate {
+  width: 130px;
+}
+
+.sorts-list .delete-sort {
+  width: 12px;
+  height: 20px;
+  margin-right: 14px;
+  text-align: center;
+}
+
+.sorts-list .empty-sorts-list {
+  color: #666666;
+}
+
+.delete-sort .dtable-icon-fork-number {
+  display: inline-block;
+  font-size: 12px;
+  color: #999;
+  cursor: pointer;
+}
+
+.sorts-list .delete-sort .dtable-icon-fork-number:hover {
+  color: #555555;
+}
+
+.sort-popover .popover-add-tool {
+  border-top: none;
+  color: #666666;
+}
+
+.sort-popover .popover-add-tool .popover-add-icon {
+  margin-right: 14px;
+}
+
+.sort-popover .sort-popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #e9ecef;
+}