dtable-statistic 4.4.24 → 5.0.0-alpha.0

package/es/components/popover/color-rules/index.js

@@ -1,87 +0,0 @@
-"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 _colorRule = _interopRequireDefault(require("./color-rule"));
-class ColorRules extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.setEditingRuleIndex = editingRuleIndex => {
-      if (this.state.editingRuleIndex === editingRuleIndex) {
-        this.setState({
-          editingRuleIndex: -1
-        });
-        return;
-      }
-      this.setState({
-        editingRuleIndex
-      }, () => {
-        this.props.resetPopoverPosition();
-      });
-    };
-    this.updateRule = (ruleIndex, updatedRule) => {
-      const {
-        rules
-      } = this.props;
-      const isAddingFilter = updatedRule.filters.length > rules[ruleIndex].filters.length;
-      let updatedRules = [...rules];
-      updatedRules[ruleIndex] = updatedRule;
-      this.props.updateRules({
-        colorRules: updatedRules,
-        callback: () => {
-          isAddingFilter && this.props.resetPopoverPosition();
-        }
-      });
-    };
-    this.deleteRule = ruleIndex => {
-      const {
-        rules
-      } = this.props;
-      let updatedRules = [...rules];
-      updatedRules.splice(ruleIndex, 1);
-      this.props.updateRules({
-        colorRules: updatedRules
-      });
-    };
-    this.state = {
-      editingRuleIndex: -1
-    };
-  }
-  render() {
-    const {
-      rules,
-      labelColorConfigs,
-      colorRuleTypes,
-      rulesName
-    } = this.props;
-    const {
-      editingRuleIndex
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-color-rules"
-    }, rules.map((rule, ruleIndex) => {
-      const isEditing = editingRuleIndex === ruleIndex;
-      return /*#__PURE__*/_react.default.createElement(_colorRule.default, {
-        key: "statistic-color-rule-".concat(ruleIndex),
-        ruleIndex: ruleIndex,
-        rule: rule,
-        labelColorConfigs: labelColorConfigs,
-        colorRuleTypes: colorRuleTypes,
-        isEditing: isEditing,
-        ruleName: rulesName[ruleIndex],
-        setEditingRuleIndex: this.setEditingRuleIndex,
-        getColorConfigByColor: this.props.getColorConfigByColor,
-        getFilterConfigByType: this.props.getFilterConfigByType,
-        generateDefaultFilter: this.props.generateDefaultFilter,
-        updateRule: this.updateRule,
-        deleteRule: this.deleteRule
-      });
-    }));
-  }
-}
-var _default = exports.default = ColorRules;

package/es/components/popover/color-rules/rule-filters/filter.js

@@ -1,221 +0,0 @@
-"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 _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _DTableCustomizeSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableCustomizeSelect"));
-var _numberInput = _interopRequireDefault(require("./number-input"));
-var _colorRules = require("../../../../constants/color-rules");
-const INPUT_CMP_TYPE_MAP = {
-  NUMBER: 'number'
-};
-class Filter extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.initSelectOptions = props => {
-      const {
-        filter
-      } = props;
-      const {
-        filterPredicateList
-      } = this.props.getFilterConfigByType(filter.filter_type);
-      this.predicateOptions = filterPredicateList ? filterPredicateList.map(predicate => {
-        if (_colorRules.EMPTY_PREDICATE.includes(predicate)) {
-          return null;
-        }
-        return {
-          value: predicate,
-          label: /*#__PURE__*/_react.default.createElement("span", {
-            className: "select-option-name"
-          }, _reactIntlUniversal.default.get(predicate))
-        };
-      }).filter(Boolean) : [];
-    };
-    this.onDeleteFilter = event => {
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        index
-      } = this.props;
-      this.props.deleteFilter(index);
-    };
-    this.onSelectConjunction = filterConjunction => {
-      if (filterConjunction === this.props.filterConjunction) {
-        return;
-      }
-      this.props.modifyConjunction(filterConjunction);
-    };
-    this.onSelectFilterBy = filterType => {
-      const {
-        index,
-        filter
-      } = this.props;
-      if (filter.filter_type === filterType) return;
-      const {
-        filterPredicateList
-      } = this.props.getFilterConfigByType(filter.filter_type);
-      if (!filterPredicateList) return;
-      const updatedFilter = Object.assign({}, filter, {
-        filter_type: filterType,
-        filter_predicate: filterPredicateList[0]
-      });
-      this.props.updateFilter(index, updatedFilter);
-    };
-    this.onSelectPredicate = predicate => {
-      const {
-        index,
-        filter
-      } = this.props;
-      if (filter.filter_predicate === predicate) {
-        return;
-      }
-      const updatedFilter = Object.assign({}, filter, {
-        filter_predicate: predicate
-      });
-      this.props.updateFilter(index, updatedFilter);
-    };
-    this.onNumberFilterTermChanged = newFilterTerm => {
-      const {
-        index,
-        filter
-      } = this.props;
-      if (newFilterTerm === filter.filter_term) return;
-      const newFilter = Object.assign({}, filter, {
-        filter_term: newFilterTerm
-      });
-      this.props.updateFilter(index, newFilter);
-    };
-    this.getInputComponent = type => {
-      const {
-        filter
-      } = this.props;
-      const {
-        filter_term
-      } = filter;
-      switch (type) {
-        case INPUT_CMP_TYPE_MAP.NUMBER:
-          {
-            const number = filter_term || filter_term === 0 ? filter_term : '';
-            return /*#__PURE__*/_react.default.createElement(_numberInput.default, {
-              value: number,
-              onChange: this.onNumberFilterTermChanged
-            });
-          }
-        default:
-          {
-            return null;
-          }
-      }
-    };
-    this.renderConjunction = () => {
-      const {
-        index,
-        filterConjunction,
-        conjunctionOptions
-      } = this.props;
-      switch (index) {
-        case 0:
-          {
-            return null;
-          }
-        case 1:
-          {
-            const selectedConjunction = conjunctionOptions.find(option => option.value === filterConjunction);
-            return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-              value: selectedConjunction,
-              options: conjunctionOptions,
-              onSelectOption: this.onSelectConjunction
-            });
-          }
-        default:
-          {
-            return /*#__PURE__*/_react.default.createElement("span", {
-              className: "selected-conjunction-show"
-            }, _reactIntlUniversal.default.get(filterConjunction));
-          }
-      }
-    };
-    this.renderFilterTerm = () => {
-      const {
-        filter
-      } = this.props;
-      const {
-        filter_type,
-        filter_predicate
-      } = filter;
-
-      // predicate is empty or not empty
-      if (_colorRules.EMPTY_PREDICATE.includes(filter_predicate)) {
-        return null;
-      }
-      switch (filter_type) {
-        case _colorRules.COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE:
-          {
-            return this.getInputComponent(INPUT_CMP_TYPE_MAP.NUMBER);
-          }
-        default:
-          {
-            return null;
-          }
-      }
-    };
-    this.initSelectOptions(_props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      filter
-    } = this.props;
-    if (nextProps.filter !== filter) {
-      this.initSelectOptions(nextProps);
-    }
-  }
-  shouldComponentUpdate(nextProps) {
-    const currentProps = this.props;
-    const shouldUpdated = nextProps.index !== currentProps.index || nextProps.filter !== currentProps.filter || nextProps.filterConjunction !== currentProps.filterConjunction;
-    return shouldUpdated;
-  }
-  render() {
-    const {
-      filterTypeOptions,
-      filter
-    } = this.props;
-    const {
-      filter_type,
-      filter_predicate
-    } = filter;
-    const selectedFilterType = filterTypeOptions.find(option => option.value === filter_type);
-    const selectedPredicate = this.predicateOptions.find(option => option.value === filter_predicate);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "delete-filter",
-      onClick: this.onDeleteFilter
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "condition"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-conjunction"
-    }, this.renderConjunction()), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-column"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: selectedFilterType,
-      options: filterTypeOptions,
-      onSelectOption: this.onSelectFilterBy
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-predicate ml-2"
-    }, /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      value: selectedPredicate,
-      options: this.predicateOptions,
-      onSelectOption: this.onSelectPredicate
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-term ml-2"
-    }, this.renderFilterTerm()))));
-  }
-}
-var _default = exports.default = Filter;

package/es/components/popover/color-rules/rule-filters/index.css

@@ -1,210 +0,0 @@
-.statistic-color-rule-filters {
-  min-height: 120px;
-  max-height: 100%;
-  padding: 8px 15px;
-}
-
-.statistic-color-rule-filters .selected-option {
-  align-self: stretch;
-}
-
-.statistic-color-rule-filters .filter-item {
-  display: flex;
-  align-items: center;
-  padding: .25rem 12px .25rem 12px;
-}
-
-.statistic-color-rule-filters .filter-item .condition {
-  display: flex;
-  flex: 1;
-}
-
-.statistic-color-rule-filters .filter-item .condition>div {
-  margin-left: .5rem;
-}
-
-.statistic-color-rule-filters .filter-item .condition>div:first-child {
-  margin-left: 0;
-}
-
-.statistic-color-rule-filters .filter-item .filter-term {
-  max-width: 300px;
-}
-
-.statistic-color-rule-filters .filter-item .dtable-font {
-  font-size: 12px;
-  color: #747474;
-}
-
-.statistic-color-rule-filters .filter-item .dtable-font:hover {
-  color: #000;
-}
-
-.statistic-color-rule-filters .filter-conjunction {
-  width: 72px;
-}
-
-.statistic-color-rule-filters .filter-conjunction-readonly {
-  width: 52px;
-}
-
-.statistic-color-rule-filters .filter-container {
-  width : calc(100% - 72px);
-  display: flex;
-}
-
-.statistic-color-rule-filters .selected-option-show {
-  width: calc(100% - 20px);
-  height: 20px;
-  line-height: 20px;
-}
-
-.statistic-color-rule-filters .selected-option {
-  width: auto;
-  overflow-x: auto;
-  background-color: #f5f5f5;
-}
-
-.statistic-color-rule-filters .dtable-icon-drop-down {
-  margin-left: .5rem;
-}
-
-.statistic-color-rule-filters .selected-conjunction-show {
-  padding: 0 10px;
-  color: #999;
-}
-
-.statistic-color-rule-filters .filter-column {
-  max-width: 150px;
-}
-
-.filter-column .option:hover .filter-header-icon .dtable-font {
-  color: #fff;
-}
-
-.statistic-color-rule-filters .filter-term input {
-  display: flex;
-  width: 100%;
-  height: 30px;
-  background-color: #ffffff;
-  padding-left: 8px;
-  padding-right: 8px;
-  outline: none;
-  border-radius: 3px;
-  font-size: 0.875rem;
-}
-
-.statistic-color-rule-filters .custom-select:hover,
-.statistic-color-rule-filters .filter-term input:hover {
-  border-color: rgb(179, 179, 179);
-}
-
-.statistic-color-rule-filters .filter-term input.disabled:hover {
-  border-color: rgba(0, 40, 100, 0.12);
-}
-
-.statistic-color-rule-filters .filter-term input:hover:focus {
-  border-color: #1991eb;
-}
-
-.statistic-color-rule-filters .filter-term input:focus {
-  color: #495057;
-  background-color: #fff;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-}
-
-.statistic-color-rule-filters .filter-term .date-picker-container input:focus {
-  color: #495057;
-  background-color: #fff;
-  border: 1px solid #fff;
-  outline: 0;
-}
-
-.statistic-color-rule-filters .filter-term .date-picker-container table tr {
-  height: 30px;
-}
-
-.statistic-color-rule-filters .filter-term input[type='checkbox'] {
-  width: inherit;
-}
-
-.statistic-color-rule-filters .filter-term input[type='checkbox']:focus {
-  border: 0;
-  box-shadow: none;
-}
-
-.filter-term .filter-rate-list {
-  display: flex;
-  padding: 0 5px;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-}
-
-.statistic-color-rule-filters .delete-filter {
-  width: 12px;
-  height: 20px;
-  margin-right: 14px;
-  text-align: center;
-}
-
-.statistic-color-rule-filters .delete-filter:hover {
-  cursor: pointer;
-}
-
-.statistic-color-rule-filters .delete-filter .dtable-icon-fork-number {
-  display: inline-block;
-  font-size: 12px;
-  color: #949494;
-}
-
-.statistic-color-rule-filters .popover-add-tool {
-  border-top: none;
-  color: #555555;
-}
-
-.statistic-color-rule-filters .popover-add-tool .popover-add-icon {
-  margin-right: 14px;
-}
-
-.statistic-color-rule-filters .option-group {
-  max-height: 360px;
-  overflow: auto;
-}
-
-.statistic-color-rule-filters .filter-item .dtable-icon-fork-number:hover {
-  color: #5a5a5a;
-}
-
-.statistic-color-rule-filters .filter-container-readonly .selected-option-show,
-.statistic-color-rule-filters .filter-conjunction-readonly .selected-option-show {
-  width: 100%;
-}
-
-.statistic-color-rule-filters .selected-option-show .remove-container {
-  display: none;
-}
-
-.filter-header-icon {
-  display: inline-block;
-  padding: 0 0.3125rem;
-  margin-left: -0.3125rem;
-}
-
-.filter-header-icon .dtable-font {
-  font-size: 14px;
-  color: #aaa;
-  cursor: default;
-}
-
-.statistic-color-rule-filters .custom-select,
-.statistic-color-rule-filters .filter-term,
-.statistic-color-rule-filters .filter-term input,
-.statistic-color-rule-filters .filter-item .condition>div,
-.statistic-color-rule-filters .filter-item .filter-term input:focus {
-  height: 30px;
-  line-height: 30px;
-  background-color: #f5f5f5;
-  border-color: rgba(0, 40, 100, 0.12);
-  box-shadow: unset;
-}

package/es/components/popover/color-rules/rule-filters/index.js

@@ -1,97 +0,0 @@
-"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 _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _filter = _interopRequireDefault(require("./filter"));
-var _colorRules = require("../../../../constants/color-rules");
-require("./index.css");
-class RuleFilters extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.generateConjunctionOptions = () => {
-      this.conjunctionOptions = [{
-        value: 'And',
-        label: /*#__PURE__*/_react.default.createElement("span", {
-          className: "select-option-name"
-        }, _reactIntlUniversal.default.get('And'))
-      }, {
-        value: 'Or',
-        label: /*#__PURE__*/_react.default.createElement("span", {
-          className: "select-option-name"
-        }, _reactIntlUniversal.default.get('Or'))
-      }];
-    };
-    this.generateFilterTypeOptions = _ref => {
-      let {
-        filterTypes
-      } = _ref;
-      this.filterTypeOptions = filterTypes.map(filterType => {
-        return {
-          value: filterType,
-          label: /*#__PURE__*/_react.default.createElement("span", {
-            className: "select-option-name"
-          }, _reactIntlUniversal.default.get(_colorRules.DISPLAY_COLOR_RULE_FILTER_TYPE[filterTypes]))
-        };
-      });
-    };
-    this.deleteFilter = index => {
-      const {
-        filters
-      } = this.props;
-      let updatedFilters = [...filters];
-      updatedFilters.splice(index, 1);
-      this.props.updateFilters(updatedFilters);
-    };
-    this.updateFilter = (index, updatedFilter) => {
-      const {
-        filters
-      } = this.props;
-      let updatedFilters = [...filters];
-      updatedFilters[index] = updatedFilter;
-      this.props.updateFilters(updatedFilters);
-    };
-    this.renderFilter = (filter, index) => {
-      const {
-        filterConjunction
-      } = this.props;
-      return /*#__PURE__*/_react.default.createElement(_filter.default, {
-        key: index,
-        index: index,
-        filter: filter,
-        filterConjunction: filterConjunction,
-        conjunctionOptions: this.conjunctionOptions,
-        filterTypeOptions: this.filterTypeOptions,
-        getFilterConfigByType: this.props.getFilterConfigByType,
-        modifyConjunction: this.props.modifyConjunction,
-        deleteFilter: this.deleteFilter,
-        updateFilter: this.updateFilter
-      });
-    };
-    this.generateConjunctionOptions();
-    this.generateFilterTypeOptions(props);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.filterTypes !== this.props.filterTypes) {
-      this.generateFilterTypeOptions(nextProps);
-    }
-  }
-  render() {
-    const {
-      filters,
-      className
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('statistic-color-rule-filters', className)
-    }, filters.map((filter, index) => {
-      return this.renderFilter(filter, index);
-    }));
-  }
-}
-var _default = exports.default = RuleFilters;

package/es/components/popover/color-rules/rule-filters/number-input.js

@@ -1,78 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
-/**
- * support type number with format
- */
-
-class NumberInput extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.getInitValue = () => {
-      const {
-        value
-      } = this.props;
-      let numericValue = null;
-      const valueType = typeof value;
-      if (valueType === 'number') {
-        numericValue = value;
-      } else if (valueType === 'string') {
-        numericValue = (0, _dtableUtils.formatStringToNumber)(value, {});
-      }
-      if (!numericValue && numericValue !== 0) {
-        return '';
-      }
-      return (0, _dtableUtils.getNumberDisplayString)(numericValue, {}) || '';
-    };
-    this.onChange = evt => {
-      const value = (0, _dtableUtils.replaceNumberNotAllowInput)(evt.target.value.trim(), _dtableUtils.DEFAULT_NUMBER_FORMAT, null);
-      this.setState({
-        value
-      }, () => {
-        this.props.onChange((0, _dtableUtils.formatStringToNumber)(value, {}));
-      });
-    };
-    this.onPaste = evt => {
-      evt.stopPropagation();
-    };
-    this.state = {
-      value: this.getInitValue()
-    };
-  }
-  componentDidUpdate(prevProps) {
-    if (this.props.value !== prevProps.value) {
-      this.setState({
-        value: this.getInitValue()
-      });
-    }
-  }
-  render() {
-    const {
-      placeholder,
-      disabled,
-      autoFocus
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("input", {
-      ref: ref => this.input = ref,
-      type: "text",
-      className: "form-control",
-      value: this.state.value,
-      onChange: this.onChange,
-      onPaste: this.onPaste,
-      placeholder: placeholder || '',
-      autoFocus: autoFocus,
-      disabled: disabled
-    });
-  }
-}
-NumberInput.defaultProps = {
-  autoFocus: false,
-  disabled: false
-};
-var _default = exports.default = NumberInput;