sea-chart 0.0.1

package/lib/components/settings/widgets/summary-settings.js

@@ -0,0 +1,394 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component, Fragment } from 'react';
+import { COLUMNS_ICON_CONFIG, getTableById } from 'dtable-utils';
+import { FormGroup, Label } from 'reactstrap';
+import DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import NumericSummaryItem from './numeric-summary-item';
+import { StatisticsUtils } from '../../../utils';
+import { STATISTIC_SUMMARY_SHOW, STATISTIC_SUMMARY_CALCULATION_METHOD, STATISTIC_SUMMARY_TYPE, STATISTIC_Y_GROUP_TYPE, STATISTIC_TYPE, STATISTIC_SUPPORT_COLUMNS, STATISTIC_DATE_SUMMARY_CALCULATION_METHOD } from '../../../constants';
+import intl from '../../../intl';
+var SummarySettings = /*#__PURE__*/function (_Component) {
+  _inherits(SummarySettings, _Component);
+  var _super = _createSuper(SummarySettings);
+  function SummarySettings(_props) {
+    var _this;
+    _classCallCheck(this, SummarySettings);
+    _this = _super.call(this, _props);
+    _this.initTable = function (props) {
+      var config = props.config,
+        tables = props.tables;
+      var table_id = config.table_id;
+      _this.selectedTable = getTableById(tables, table_id);
+    };
+    _this.initColumns = function () {
+      if (!_this.selectedTable) {
+        _this.numericColumns = [];
+        _this.numericColumnsOptions = [];
+        _this.columnGroupbyColumnsOptions = [];
+        return;
+      }
+      var columns = Array.isArray(_this.selectedTable.columns) ? _this.selectedTable.columns : [];
+      _this.columns = _this.getAvailableColumns(columns);
+      _this.columnGroupbyColumnsOptions = _this.getColumnOptions(_this.columns);
+      _this.numericColumns = _this.columns.filter(function (column) {
+        return StatisticsUtils.isNumericSummaryColumn(column);
+      });
+      _this.numericColumnsOptions = _this.getColumnOptions(_this.numericColumns);
+    };
+    _this.getAvailableColumns = function (columns) {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(function (column) {
+        return STATISTIC_SUPPORT_COLUMNS.includes(column.type);
+      });
+    };
+    _this.getColumnOptions = function (columns) {
+      var options = columns.map(function (column) {
+        return {
+          value: column,
+          label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "header-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: COLUMNS_ICON_CONFIG[column.type]
+          })), /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name ml-0'
+          }, column.name))
+        };
+      });
+      return [{
+        value: {
+          key: 'Groupby_null'
+        },
+        label: /*#__PURE__*/React.createElement("span", {
+          className: 'select-module select-module-name null-option-name ml-0'
+        }, intl.get('Select_a_column')),
+        style: {
+          color: 'rgba(0, 0, 0, .25)'
+        }
+      }].concat(_toConsumableArray(options));
+    };
+    _this.getSummaryTypeOptions = function () {
+      var summaryTypes = [{
+        value: STATISTIC_Y_GROUP_TYPE.COUNT,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "select-module select-module-name ml-0"
+        }, intl.get(STATISTIC_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Count_the_number_of_records_in_each_group')))
+      }, {
+        value: STATISTIC_Y_GROUP_TYPE.SINGLE_NUMERIC_COLUMN,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "select-module select-module-name ml-0"
+        }, intl.get(STATISTIC_SUMMARY_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
+      }];
+
+      // multiple_numeric_column
+      if (_this.props.useMultipleSummaryColumns) {
+        summaryTypes.push({
+          value: STATISTIC_Y_GROUP_TYPE.MULTIPLE_NUMERIC_COLUMN,
+          label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+            className: "select-module select-module-name ml-0"
+          }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
+            className: "summary-type-explanation"
+          }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+        });
+      }
+      return summaryTypes;
+    };
+    _this.getSummaryExplanation = function () {
+      var config = _this.props.config;
+      var chartType = config.type;
+      var variable = '';
+      if (chartType === STATISTIC_TYPE.MAP) {
+        variable = '位置字段';
+      }
+      if (chartType === STATISTIC_TYPE.WORLD_MAP) {
+        variable = intl.get('Location_field');
+      }
+      if (chartType === STATISTIC_TYPE.HEAT_MAP) {
+        variable = intl.get('Time_field');
+      }
+      if (chartType === STATISTIC_TYPE.MIRROR) {
+        variable = intl.get('Statistic_field');
+      }
+      if (chartType === STATISTIC_TYPE.COMBINATION) {
+        variable = intl.get('X-axis');
+      }
+      if (chartType === STATISTIC_TYPE.TREND) {
+        return {
+          count: intl.get('Calculate_the_number_of_records_in_two_time_periods'),
+          advanced: intl.get('Use_a_field_to_calculate_the_sum_maximum_or_minimum_value_of_records_in_two_time_periods')
+        };
+      }
+      return {
+        count: intl.get('Count_by_var', {
+          var: variable
+        }),
+        advanced: intl.get('Compute_sum_max_min_by_var', {
+          var: variable
+        })
+      };
+    };
+    _this.getSummaryMethodsOptions = function () {
+      return STATISTIC_SUMMARY_CALCULATION_METHOD.map(function (method) {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(STATISTIC_SUMMARY_SHOW[method])),
+          value: method
+        };
+      });
+    };
+    _this.getSelectedMethodOption = function (method, summaryMethodsOptions) {
+      return summaryMethodsOptions.find(function (m) {
+        return m.value === method;
+      }) || summaryMethodsOptions[0];
+    };
+    _this.renderSummaryTypes = function () {
+      var label = _this.props.label;
+      var selectedSummaryType = _this.getSelectedSummaryType();
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        classNamePrefix: "chart-summary-types",
+        value: selectedSummaryType,
+        onChange: _this.onChangeSummaryType,
+        options: _this.summaryTypeOptions
+      }));
+    };
+    _this.getSelectedSummaryType = function () {
+      var _this$props = _this.props,
+        _this$props$summaryTy = _this$props.summaryType,
+        summaryType = _this$props$summaryTy === void 0 ? STATISTIC_SUMMARY_TYPE.COUNT : _this$props$summaryTy,
+        config = _this$props.config,
+        useMultipleSummaryColumns = _this$props.useMultipleSummaryColumns;
+      if (summaryType === STATISTIC_SUMMARY_TYPE.COUNT) {
+        return _this.summaryTypeOptions[0];
+      }
+      if (config.type === STATISTIC_TYPE.COMBINATION && config.y_axis_left_group_by_multiple_numeric_column && useMultipleSummaryColumns) {
+        return _this.summaryTypeOptions[2];
+      }
+      return _this.summaryTypeOptions[1];
+    };
+    _this.onChangeSummaryType = function (option) {
+      var type = option.value;
+      var summaryType = _this.props.summaryType;
+      if (type === summaryType) return;
+      _this.props.onChangeSummaryType(type);
+    };
+    _this.onSelectSummaryColumn = function (option) {
+      _this.props.onSelectSummaryColumn(option.value.key);
+    };
+    _this.renderNumericColumn = function () {
+      var summaryColumn = _this.props.summaryColumn;
+      var selectedColumnOption = _this.numericColumnsOptions.find(function (o) {
+        return o.value.key === summaryColumn;
+      });
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Numeric_field')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColumnOption,
+        onChange: _this.onSelectSummaryColumn,
+        options: _this.numericColumnsOptions,
+        placeholder: intl.get('Select_a_column'),
+        noOptionsMessage: function noOptionsMessage() {
+          return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
+        }
+      }));
+    };
+    _this.renderSummaryMethod = function () {
+      var selectedMethodOption = _this.getSelectedMethodOption(_this.props.summaryMethod, _this.summaryMethodsOptions);
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "seastatistic-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Summary_method')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedMethodOption,
+        onChange: _this.onSelectSummaryMethod,
+        options: _this.summaryMethodsOptions
+      }));
+    };
+    _this.onSelectSummaryMethod = function (option) {
+      _this.props.onSelectSummaryMethod(option.value);
+    };
+    _this.renderNumericSummaryItem = function () {
+      var _this$props2 = _this.props,
+        config = _this$props2.config,
+        statistic = _this$props2.statistic;
+      var type = config.type;
+      var column_key, summary_method;
+      if (type === STATISTIC_TYPE.COMBINATION) {
+        column_key = config.y_axis_left_summary_column;
+        summary_method = config.y_axis_left_summary_method;
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        statistic: statistic,
+        key: "number-column-".concat(0),
+        numericColumnOptions: _this.numericColumnsOptions,
+        onColumnOptionChange: _this.onChangeNumericSummaryColumn,
+        onSummaryMethodChange: _this.onChangeNumericSummaryMethod,
+        index: 0,
+        value: {
+          column_key: column_key,
+          summary_method: summary_method
+        }
+      }), _this.renderGroupbyNumericColumns(), Array.isArray(_this.numericColumnsOptions) && _this.numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-columns d-flex align-items-center",
+        onClick: _this.onAddNumericColumn
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-add-table mr-2"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, intl.get('Add_new_field'))));
+    };
+    _this.onDeleteNumericColumnItem = function (index) {
+      var _ref = _this.props.config || {},
+        y_axis_left_group_by_numeric_columns = _ref.y_axis_left_group_by_numeric_columns;
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+      y_axis_left_group_by_numeric_columns.splice(index - 1, 1);
+      _this.props.onChange({
+        y_axis_left_group_by_numeric_columns: _toConsumableArray(y_axis_left_group_by_numeric_columns)
+      });
+    };
+    _this.onAddNumericColumn = function () {
+      var config = _this.props.config;
+      var _ref2 = config || {},
+        y_axis_left_group_by_numeric_columns = _ref2.y_axis_left_group_by_numeric_columns;
+      var newNumericColumnKey = _this.numericColumnsOptions[0].value.key;
+      if (Array.isArray(y_axis_left_group_by_numeric_columns)) {
+        y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+        y_axis_left_group_by_numeric_columns.push({
+          column_key: newNumericColumnKey,
+          summary_method: STATISTIC_SUMMARY_CALCULATION_METHOD[0]
+        });
+      } else {
+        y_axis_left_group_by_numeric_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: STATISTIC_SUMMARY_CALCULATION_METHOD[0]
+        }];
+      }
+      _this.props.onChange({
+        y_axis_left_group_by_numeric_columns: _toConsumableArray(y_axis_left_group_by_numeric_columns)
+      });
+    };
+    _this.onChangeNumericSummaryColumn = function (option, index) {
+      var column = option.value;
+      var newXAxisColumnKey = column.key;
+      var validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
+      var statistic = _this.props.statistic;
+      var config = statistic.config;
+      var summaryMethods = StatisticsUtils.isDateSummaryColumn(column) ? STATISTIC_DATE_SUMMARY_CALCULATION_METHOD : STATISTIC_SUMMARY_CALCULATION_METHOD;
+      if (index === 0) {
+        var y_axis_left_summary_method = config.y_axis_left_summary_method;
+        if (!summaryMethods.includes(y_axis_left_summary_method)) {
+          y_axis_left_summary_method = summaryMethods[0];
+        }
+        _this.props.onChange({
+          y_axis_left_summary_column: validValue,
+          y_axis_left_summary_method: y_axis_left_summary_method
+        });
+        return;
+      }
+      var y_axis_left_group_by_numeric_columns = config.y_axis_left_group_by_numeric_columns;
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      y_axis_left_group_by_numeric_columns = _toConsumableArray(y_axis_left_group_by_numeric_columns);
+      var selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      var _selectedItem = selectedItem,
+        summary_method = _selectedItem.summary_method;
+      if (summaryMethods.includes(summary_method)) {
+        selectedItem = Object.assign({}, selectedItem, {
+          column_key: validValue
+        });
+      } else {
+        selectedItem = Object.assign({}, selectedItem, {
+          column_key: validValue,
+          summary_method: summaryMethods[0]
+        });
+      }
+      y_axis_left_group_by_numeric_columns[index - 1] = selectedItem;
+      _this.props.onChange({
+        y_axis_left_group_by_numeric_columns: y_axis_left_group_by_numeric_columns
+      });
+    };
+    _this.onChangeNumericSummaryMethod = function (option, index) {
+      var config = _this.props.config;
+      if (index === 0) {
+        var y_axis_left_summary_method = config.y_axis_left_summary_method;
+        if (y_axis_left_summary_method === option.value) return;
+        _this.props.onChange({
+          y_axis_left_summary_method: option.value
+        });
+        return;
+      }
+      var _ref3 = config || {},
+        y_axis_left_group_by_numeric_columns = _ref3.y_axis_left_group_by_numeric_columns;
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      var selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      selectedItem = Object.assign({}, selectedItem, {
+        summary_method: option.value
+      });
+      y_axis_left_group_by_numeric_columns[index - 1] = selectedItem;
+      _this.props.onChange({
+        y_axis_left_group_by_numeric_columns: y_axis_left_group_by_numeric_columns
+      });
+    };
+    _this.renderGroupbyNumericColumns = function () {
+      var _this$props3 = _this.props,
+        config = _this$props3.config,
+        statistic = _this$props3.statistic;
+      var y_axis_left_group_by_numeric_columns = config.y_axis_left_group_by_numeric_columns;
+      if (!y_axis_left_group_by_numeric_columns || !Array.isArray(y_axis_left_group_by_numeric_columns)) return null;
+      return y_axis_left_group_by_numeric_columns.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          statistic: statistic,
+          key: "number-column-".concat(index),
+          numericColumnOptions: _this.numericColumnsOptions,
+          onColumnOptionChange: _this.onChangeNumericSummaryColumn,
+          onSummaryMethodChange: _this.onChangeNumericSummaryMethod,
+          index: index + 1,
+          onDelete: _this.onDeleteNumericColumnItem,
+          value: item
+        });
+      });
+    };
+    _this.useMultipleSummaryColumns = function () {
+      var _this$props4 = _this.props,
+        config = _this$props4.config,
+        summaryType = _this$props4.summaryType,
+        useMultipleSummaryColumns = _this$props4.useMultipleSummaryColumns;
+      if (config.type === STATISTIC_TYPE.COMBINATION) {
+        if (useMultipleSummaryColumns && summaryType === STATISTIC_SUMMARY_TYPE.ADVANCED && config.y_axis_left_group_by_multiple_numeric_column) {
+          return true;
+        }
+      }
+      return false;
+    };
+    _this.initTable(_props);
+    _this.initColumns();
+    _this.summaryTypeOptions = _this.getSummaryTypeOptions();
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    return _this;
+  }
+  _createClass(SummarySettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.config.table_id !== this.props.config.table_id) {
+        this.initTable(nextProps);
+        this.initColumns();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var summaryType = this.props.summaryType;
+      var _useMultipleSummaryColumns = this.useMultipleSummaryColumns();
+      return /*#__PURE__*/React.createElement(Fragment, null, this.renderSummaryTypes(), !_useMultipleSummaryColumns && summaryType === STATISTIC_SUMMARY_TYPE.ADVANCED && /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()), _useMultipleSummaryColumns && this.renderNumericSummaryItem());
+    }
+  }]);
+  return SummarySettings;
+}(Component);
+export default SummarySettings;

package/lib/components/settings/widgets/switch/index.css

@@ -0,0 +1,37 @@
+.seastatistic-settings .seastatistic-parameter-container {
+  margin-bottom: 5px;
+}
+
+.seastatistic-settings .seastatistic-toggle-parameter {
+  height: 36px;
+  padding-left: 8px;
+  box-sizing: border-box;
+  font-size: 14px;
+  background-color: #fff;
+  display: flex;
+  border-radius: 4px;
+  border: 1px solid hsl(0, 0%, 80%);
+}
+
+.seastatistic-settings .seastatistic-toggle-parameter .custom-switch {
+  flex-direction: row-reverse;
+}
+
+.seastatistic-settings .seastatistic-toggle-parameter .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  cursor: pointer;
+}
+
+.seastatistic-settings .seastatistic-toggle-parameter .custom-switch-indicator::before {
+  height: 8px;
+  width: 8px;
+}
+
+.seastatistic-settings .seastatistic-toggle-parameter .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}
+
+.seastatistic-settings .seastatistic-toggle-parameter .custom-switch-description {
+  margin-left: 0.5rem;
+}

package/lib/components/settings/widgets/switch/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import classnames from 'classnames';
+import './index.css';
+var Switch = function Switch(_ref) {
+  var checked = _ref.checked,
+    placeholder = _ref.placeholder,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('seastatistic-parameter-container', className)
+  }, /*#__PURE__*/React.createElement(DTableSwitch, {
+    checked: checked,
+    disabled: disabled,
+    switchClassName: "seastatistic-toggle-parameter",
+    placeholder: placeholder,
+    onChange: onChange
+  }));
+};
+export default Switch;

package/lib/components/settings/widgets/text-horizontal-settings.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import { Row, Label } from 'reactstrap';
+import SelectGroup from '../../select-group';
+import { HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN_SHOW } from '../../../constants';
+import intl from '../../../intl';
+var TextHorizontalSettings = function TextHorizontalSettings(_ref) {
+  var defaultValue = _ref.defaultValue,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var validValue = value || defaultValue || HORIZONTAL_ALIGNS[0];
+  var onHorizontalChanged = useCallback(function (value) {
+    onChange && onChange(value);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(Row, {
+    className: "mt-0 mb-4 ml-0 mr-0 settings-text-horizontal-align seastatistic-select-group"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get('Text_horizontal_alignment')), /*#__PURE__*/React.createElement(SelectGroup, {
+    activeOption: validValue,
+    options: HORIZONTAL_ALIGNS,
+    optionsDisplay: HORIZONTAL_ALIGN_SHOW,
+    onSelectChanged: onHorizontalChanged
+  }));
+};
+export default TextHorizontalSettings;

package/lib/components/settings/widgets/time-picker.js

@@ -0,0 +1,182 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import dayjs from 'dayjs';
+import Calendar from '@seafile/seafile-calendar';
+import DatePicker from '@seafile/seafile-calendar/lib/Picker';
+import { translateCalendar } from '../../../utils';
+import intl from '../../../intl';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en-gb';
+import '@seafile/seafile-calendar/assets/index.css';
+var now = dayjs();
+var DATE_FORMAT = 'YYYY-MM-DD';
+var TimePicker = /*#__PURE__*/function (_Component) {
+  _inherits(TimePicker, _Component);
+  var _super = _createSuper(TimePicker);
+  function TimePicker(props) {
+    var _this;
+    _classCallCheck(this, TimePicker);
+    _this = _super.call(this, props);
+    _this.getDefaultMinutesTime = function () {
+      var value = _this.props.value;
+      if (value) return dayjs(value).format('HH:mm');
+      return '';
+    };
+    _this.getCalendarContainer = function () {
+      return _this.calendarContainerRef.current;
+    };
+    _this.onChange = function (value) {
+      _this.setState({
+        value: value
+      }, function () {
+        if (_this.state.value) {
+          _this.props.onChange(_this.state.value.format(DATE_FORMAT));
+        }
+      });
+    };
+    _this.onClickRightPanelTime = function () {
+      setTimeout(function () {
+        _this.toggleCalendar(false);
+      }, 1);
+    };
+    _this.onOpenChange = function (open) {
+      if (open) {
+        _this.toggleCalendar(open);
+      }
+    };
+    _this.onClear = function () {
+      _this.setState({
+        value: null
+      }, function () {
+        _this.setState({
+          open: true
+        });
+      });
+    };
+    _this.onReadOnlyFocus = function () {
+      if (!_this.state.open && _this.state.isMouseDown) {
+        _this.setState({
+          isMouseDown: false
+        });
+      } else {
+        _this.setState({
+          open: true
+        });
+      }
+    };
+    _this.handleMouseDown = function (e) {
+      e.preventDefault();
+    };
+    _this.toggleCalendar = function (open) {
+      _this.setState({
+        open: open
+      });
+    };
+    _this.state = {
+      open: false,
+      value: null
+    };
+    _this.calendarContainerRef = React.createRef();
+    _this.defaultCalendarValue = null;
+    return _this;
+  }
+  _createClass(TimePicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var value = this.props.value;
+      var iszhcn = window.seaStatistic.context.getSetting('lang') === 'zh-cn';
+      if (iszhcn) {
+        now = now.locale('zh-cn');
+      } else {
+        now = now.locale('en-gb');
+      }
+      this.defaultCalendarValue = now.clone();
+      if (value && dayjs(value).isValid()) {
+        var validValue = dayjs(value).isValid() ? dayjs(value) : dayjs(this.defaultCalendarValue);
+        this.setState({
+          value: iszhcn ? dayjs(validValue).locale('zh-cn') : dayjs(validValue).locale('en-gb')
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isReadOnly = this.props.isReadOnly;
+      var _this$state = this.state,
+        value = _this$state.value,
+        open = _this$state.open;
+      var minutesTime = this.getDefaultMinutesTime();
+      var columnDataFormat = this.getColumnFormat();
+      if (isReadOnly) return /*#__PURE__*/React.createElement("input", {
+        className: "ant-calendar-picker-input ant-input form-control",
+        value: value && value.format(columnDataFormat) || '',
+        disabled: true
+      });
+      var clearStyle = {
+        position: 'absolute',
+        top: '15px',
+        left: '225px',
+        color: 'gray',
+        fontSize: '12px',
+        cursor: 'pointer'
+      };
+      var clearIcon = React.createElement('i', {
+        className: 'item-icon dtable-font dtable-icon-x',
+        style: clearStyle
+      });
+      var calendar = /*#__PURE__*/React.createElement(Calendar, {
+        className: "dtable-rc-calendar",
+        locale: translateCalendar(),
+        style: {
+          zIndex: 1001
+        },
+        dateInputPlaceholder: intl.get('Please_input_date'),
+        format: DATE_FORMAT,
+        defaultValue: this.defaultCalendarValue,
+        showDateInput: true,
+        focusablePanel: false,
+        onClear: this.onClear,
+        clearIcon: clearIcon,
+        showHourAndMinute: false,
+        defaultMinutesTime: minutesTime,
+        onClickRightPanelTime: this.onClickRightPanelTime
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: "date-picker-container",
+        ref: function ref(_ref2) {
+          return _this2.datePicker = _ref2;
+        }
+      }, /*#__PURE__*/React.createElement(DatePicker, {
+        calendar: calendar,
+        value: value,
+        onChange: this.onChange,
+        getCalendarContainer: this.getCalendarContainer,
+        onOpenChange: this.onOpenChange,
+        open: open,
+        style: {
+          zIndex: 1001
+        }
+      }, function (_ref) {
+        var value = _ref.value;
+        return /*#__PURE__*/React.createElement("span", {
+          tabIndex: "0",
+          onFocus: _this2.onReadOnlyFocus
+        }, /*#__PURE__*/React.createElement("input", {
+          tabIndex: "-1",
+          onChange: function onChange() {},
+          className: "ant-calendar-picker-input ant-input form-control",
+          value: value && value.format(columnDataFormat) || '',
+          onMouseDown: _this2.handleMouseDown
+        }), /*#__PURE__*/React.createElement("div", {
+          ref: _this2.calendarContainerRef
+        }));
+      }));
+    }
+  }]);
+  return TimePicker;
+}(Component);
+export default TimePicker;