sea-chart 0.0.1 → 0.0.2

package/dist/settings/widgets/summary-settings.js

@@ -0,0 +1,411 @@
+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 { ChartUtils } from '../../utils';
+import { CHART_SUMMARY_SHOW, CHART_SUMMARY_CALCULATION_METHOD, CHART_SUMMARY_TYPE, CHART_Y_GROUP_TYPE, CHART_TYPE, CHART_SUPPORT_COLUMNS, CHART_DATE_SUMMARY_CALCULATION_METHOD } from '../../constants';
+import intl from '../../intl';
+class SummarySettings extends Component {
+  constructor(_props) {
+    super(_props);
+    this.initTable = props => {
+      const {
+        config,
+        tables
+      } = props;
+      const {
+        table_id
+      } = config;
+      this.selectedTable = getTableById(tables, table_id);
+    };
+    this.initColumns = () => {
+      if (!this.selectedTable) {
+        this.numericColumns = [];
+        this.numericColumnsOptions = [];
+        this.columnGroupbyColumnsOptions = [];
+        return;
+      }
+      const 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(column => ChartUtils.isNumericSummaryColumn(column));
+      this.numericColumnsOptions = this.getColumnOptions(this.numericColumns);
+    };
+    this.getAvailableColumns = columns => {
+      if (!columns || !Array.isArray(columns)) return [];
+      return columns.filter(column => CHART_SUPPORT_COLUMNS.includes(column.type));
+    };
+    this.getColumnOptions = columns => {
+      const options = columns.map(column => {
+        return {
+          value: column,
+          label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "sea-chart-column-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)'
+        }
+      }, ...options];
+    };
+    this.getSummaryTypeOptions = () => {
+      const summaryTypes = [{
+        value: CHART_Y_GROUP_TYPE.COUNT,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: "select-module select-module-name ml-0"
+        }, intl.get(CHART_SUMMARY_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Count_the_number_of_records_in_each_group')))
+      }, {
+        value: CHART_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(CHART_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: CHART_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 = () => {
+      const {
+        config
+      } = this.props;
+      const chartType = config.type;
+      let variable = '';
+      if (chartType === CHART_TYPE.MAP) {
+        variable = '位置字段';
+      }
+      if (chartType === CHART_TYPE.WORLD_MAP) {
+        variable = intl.get('Location_field');
+      }
+      if (chartType === CHART_TYPE.HEAT_MAP) {
+        variable = intl.get('Time_field');
+      }
+      if (chartType === CHART_TYPE.MIRROR) {
+        variable = intl.get('Statistic_field');
+      }
+      if (chartType === CHART_TYPE.COMBINATION) {
+        variable = intl.get('X-axis');
+      }
+      if (chartType === CHART_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 = () => {
+      return CHART_SUMMARY_CALCULATION_METHOD.map(method => {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, intl.get(CHART_SUMMARY_SHOW[method])),
+          value: method
+        };
+      });
+    };
+    this.getSelectedMethodOption = (method, summaryMethodsOptions) => {
+      return summaryMethodsOptions.find(m => m.value === method) || summaryMethodsOptions[0];
+    };
+    this.renderSummaryTypes = () => {
+      let {
+        label
+      } = this.props;
+      const selectedSummaryType = this.getSelectedSummaryType();
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "sea-chart-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 = () => {
+      const {
+        summaryType = CHART_SUMMARY_TYPE.COUNT,
+        config,
+        useMultipleSummaryColumns
+      } = this.props;
+      if (summaryType === CHART_SUMMARY_TYPE.COUNT) {
+        return this.summaryTypeOptions[0];
+      }
+      if (config.type === CHART_TYPE.COMBINATION && config.y_axis_left_group_by_multiple_numeric_column && useMultipleSummaryColumns) {
+        return this.summaryTypeOptions[2];
+      }
+      return this.summaryTypeOptions[1];
+    };
+    this.onChangeSummaryType = option => {
+      const type = option.value;
+      let {
+        summaryType
+      } = this.props;
+      if (type === summaryType) return;
+      this.props.onChangeSummaryType(type);
+    };
+    this.onSelectSummaryColumn = option => {
+      this.props.onSelectSummaryColumn(option.value.key);
+    };
+    this.renderNumericColumn = () => {
+      let {
+        summaryColumn
+      } = this.props;
+      let selectedColumnOption = this.numericColumnsOptions.find(o => o.value.key === summaryColumn);
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "sea-chart-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: () => {
+          return /*#__PURE__*/React.createElement("span", null, intl.get('No_options'));
+        }
+      }));
+    };
+    this.renderSummaryMethod = () => {
+      let selectedMethodOption = this.getSelectedMethodOption(this.props.summaryMethod, this.summaryMethodsOptions);
+      return /*#__PURE__*/React.createElement(FormGroup, {
+        className: "sea-chart-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 = option => {
+      this.props.onSelectSummaryMethod(option.value);
+    };
+    this.renderNumericSummaryItem = () => {
+      const {
+        config,
+        chart
+      } = this.props;
+      const {
+        type
+      } = config;
+      let column_key, summary_method;
+      if (type === CHART_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, {
+        chart: chart,
+        key: "number-column-".concat(0),
+        numericColumnOptions: this.numericColumnsOptions,
+        onColumnOptionChange: this.onChangeNumericSummaryColumn,
+        onSummaryMethodChange: this.onChangeNumericSummaryMethod,
+        index: 0,
+        value: {
+          column_key,
+          summary_method
+        }
+      }), this.renderGroupbyNumericColumns(), Array.isArray(this.numericColumnsOptions) && this.numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistic-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 = index => {
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = this.props.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];
+      y_axis_left_group_by_numeric_columns.splice(index - 1, 1);
+      this.props.onChange({
+        y_axis_left_group_by_numeric_columns: [...y_axis_left_group_by_numeric_columns]
+      });
+    };
+    this.onAddNumericColumn = () => {
+      const {
+        config
+      } = this.props;
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = config || {};
+      let newNumericColumnKey = this.numericColumnsOptions[0].value.key;
+      if (Array.isArray(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.push({
+          column_key: newNumericColumnKey,
+          summary_method: CHART_SUMMARY_CALCULATION_METHOD[0]
+        });
+      } else {
+        y_axis_left_group_by_numeric_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: CHART_SUMMARY_CALCULATION_METHOD[0]
+        }];
+      }
+      this.props.onChange({
+        y_axis_left_group_by_numeric_columns: [...y_axis_left_group_by_numeric_columns]
+      });
+    };
+    this.onChangeNumericSummaryColumn = (option, index) => {
+      const column = option.value;
+      const {
+        key: newXAxisColumnKey
+      } = column;
+      const validValue = newXAxisColumnKey === 'Groupby_null' ? null : newXAxisColumnKey;
+      const {
+        chart
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const summaryMethods = ChartUtils.isDateSummaryColumn(column) ? CHART_DATE_SUMMARY_CALCULATION_METHOD : CHART_SUMMARY_CALCULATION_METHOD;
+      if (index === 0) {
+        let {
+          y_axis_left_summary_method
+        } = config;
+        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
+        });
+        return;
+      }
+      let {
+        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];
+      let selectedItem = y_axis_left_group_by_numeric_columns[index - 1];
+      const {
+        summary_method
+      } = selectedItem;
+      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
+      });
+    };
+    this.onChangeNumericSummaryMethod = (option, index) => {
+      const {
+        config
+      } = this.props;
+      if (index === 0) {
+        let {
+          y_axis_left_summary_method
+        } = config;
+        if (y_axis_left_summary_method === option.value) return;
+        this.props.onChange({
+          y_axis_left_summary_method: option.value
+        });
+        return;
+      }
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = config || {};
+      y_axis_left_group_by_numeric_columns = y_axis_left_group_by_numeric_columns || [];
+      let 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
+      });
+    };
+    this.renderGroupbyNumericColumns = () => {
+      const {
+        config,
+        chart
+      } = this.props;
+      let {
+        y_axis_left_group_by_numeric_columns
+      } = config;
+      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((item, index) => {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          chart: chart,
+          key: "number-column-".concat(index),
+          numericColumnOptions: this.numericColumnsOptions,
+          onColumnOptionChange: this.onChangeNumericSummaryColumn,
+          onSummaryMethodChange: this.onChangeNumericSummaryMethod,
+          index: index + 1,
+          onDelete: this.onDeleteNumericColumnItem,
+          value: item
+        });
+      });
+    };
+    this.useMultipleSummaryColumns = () => {
+      const {
+        config,
+        summaryType,
+        useMultipleSummaryColumns
+      } = this.props;
+      if (config.type === CHART_TYPE.COMBINATION) {
+        if (useMultipleSummaryColumns && summaryType === CHART_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();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.config.table_id !== this.props.config.table_id) {
+      this.initTable(nextProps);
+      this.initColumns();
+    }
+  }
+  render() {
+    const {
+      summaryType
+    } = this.props;
+    const _useMultipleSummaryColumns = this.useMultipleSummaryColumns();
+    return /*#__PURE__*/React.createElement(Fragment, null, this.renderSummaryTypes(), !_useMultipleSummaryColumns && summaryType === CHART_SUMMARY_TYPE.ADVANCED && /*#__PURE__*/React.createElement(Fragment, null, this.renderNumericColumn(), this.renderSummaryMethod()), _useMultipleSummaryColumns && this.renderNumericSummaryItem());
+  }
+}
+export default SummarySettings;

package/dist/settings/widgets/switch/index.css

@@ -0,0 +1,37 @@
+.sea-chart-settings .sea-chart-parameter-container {
+  margin-bottom: 5px;
+}
+
+.sea-chart-settings .sea-chart-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%);
+}
+
+.sea-chart-settings .sea-chart-toggle-parameter .custom-switch {
+  flex-direction: row-reverse;
+}
+
+.sea-chart-settings .sea-chart-toggle-parameter .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  cursor: pointer;
+}
+
+.sea-chart-settings .sea-chart-toggle-parameter .custom-switch-indicator::before {
+  height: 8px;
+  width: 8px;
+}
+
+.sea-chart-settings .sea-chart-toggle-parameter .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}
+
+.sea-chart-settings .sea-chart-toggle-parameter .custom-switch-description {
+  margin-left: 0.5rem;
+}

package/{lib/components → dist}/settings/widgets/switch/index.js

@@ -2,18 +2,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;
+const Switch = _ref => {
+  let {
+    checked,
+    placeholder,
+    className,
+    disabled,
+    onChange
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('seastatistic-parameter-container', className)
+    className: classnames('sea-chart-parameter-container', className)
   }, /*#__PURE__*/React.createElement(DTableSwitch, {
+    key: "custom-switch-checkbox-".concat(checked),
     checked: checked,
     disabled: disabled,
-    switchClassName: "seastatistic-toggle-parameter",
+    switchClassName: "sea-chart-toggle-parameter",
     placeholder: placeholder,
     onChange: onChange
   }));

package/{lib/components → dist}/settings/widgets/text-horizontal-settings.js

@@ -1,18 +1,20 @@
 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) {
+import { SelectGroup } from '../../components';
+import { HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN_SHOW } from '../../constants';
+import intl from '../../intl';
+const TextHorizontalSettings = _ref => {
+  let {
+    defaultValue,
+    value,
+    onChange
+  } = _ref;
+  const validValue = value || defaultValue || HORIZONTAL_ALIGNS[0];
+  const onHorizontalChanged = useCallback(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"
+    className: "mt-0 mb-4 ml-0 mr-0 settings-text-horizontal-align sea-chart-select-group"
   }, /*#__PURE__*/React.createElement(Label, null, intl.get('Text_horizontal_alignment')), /*#__PURE__*/React.createElement(SelectGroup, {
     activeOption: validValue,
     options: HORIZONTAL_ALIGNS,

package/dist/settings/widgets/time-picker.js

@@ -0,0 +1,174 @@
+import React, { Component } from 'react';
+import dayjs from 'dayjs';
+import Calendar from '@seafile/seafile-calendar';
+import DatePicker from '@seafile/seafile-calendar/lib/Picker';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en-gb';
+import { translateCalendar } from '../../utils';
+import intl from '../../intl';
+import context from '../../context';
+import '@seafile/seafile-calendar/assets/index.css';
+let now = dayjs();
+const DATE_FORMAT = 'YYYY-MM-DD';
+class TimePicker extends Component {
+  constructor(props) {
+    super(props);
+    this.getDefaultMinutesTime = () => {
+      const {
+        value
+      } = this.props;
+      if (value) return dayjs(value).format('HH:mm');
+      return '';
+    };
+    this.getCalendarContainer = () => {
+      return this.calendarContainerRef.current;
+    };
+    this.onChange = value => {
+      this.setState({
+        value
+      }, () => {
+        if (this.state.value) {
+          this.props.onChange(this.state.value.format(DATE_FORMAT));
+        }
+      });
+    };
+    this.onClickRightPanelTime = () => {
+      setTimeout(() => {
+        this.toggleCalendar(false);
+      }, 1);
+    };
+    this.onOpenChange = open => {
+      if (open) {
+        this.toggleCalendar(open);
+      }
+    };
+    this.onClear = () => {
+      this.setState({
+        value: null
+      }, () => {
+        this.setState({
+          open: true
+        });
+      });
+    };
+    this.onReadOnlyFocus = () => {
+      if (!this.state.open && this.state.isMouseDown) {
+        this.setState({
+          isMouseDown: false
+        });
+      } else {
+        this.setState({
+          open: true
+        });
+      }
+    };
+    this.handleMouseDown = e => {
+      e.preventDefault();
+    };
+    this.toggleCalendar = open => {
+      this.setState({
+        open
+      });
+    };
+    this.state = {
+      open: false,
+      value: null
+    };
+    this.calendarContainerRef = React.createRef();
+    this.defaultCalendarValue = null;
+  }
+  componentDidMount() {
+    const {
+      value
+    } = this.props;
+    const iszhcn = 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()) {
+      let validValue = dayjs(value).isValid() ? dayjs(value) : dayjs(this.defaultCalendarValue);
+      this.setState({
+        value: iszhcn ? dayjs(validValue).locale('zh-cn') : dayjs(validValue).locale('en-gb')
+      });
+    }
+  }
+  render() {
+    const {
+      isReadOnly
+    } = this.props;
+    const {
+      value,
+      open
+    } = this.state;
+    const minutesTime = this.getDefaultMinutesTime();
+    const 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
+    });
+    const clearStyle = {
+      position: 'absolute',
+      top: '15px',
+      left: '225px',
+      color: 'gray',
+      fontSize: '12px',
+      cursor: 'pointer'
+    };
+    const clearIcon = React.createElement('i', {
+      className: 'item-icon dtable-font dtable-icon-x',
+      style: clearStyle
+    });
+    const 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: ref => this.datePicker = ref
+    }, /*#__PURE__*/React.createElement(DatePicker, {
+      calendar: calendar,
+      value: value,
+      onChange: this.onChange,
+      getCalendarContainer: this.getCalendarContainer,
+      onOpenChange: this.onOpenChange,
+      open: open,
+      style: {
+        zIndex: 1001
+      }
+    }, _ref => {
+      let {
+        value
+      } = _ref;
+      return /*#__PURE__*/React.createElement("span", {
+        tabIndex: "0",
+        onFocus: this.onReadOnlyFocus
+      }, /*#__PURE__*/React.createElement("input", {
+        tabIndex: "-1",
+        onChange: () => {},
+        className: "ant-calendar-picker-input ant-input form-control",
+        value: value && value.format(columnDataFormat) || '',
+        onMouseDown: this.handleMouseDown
+      }), /*#__PURE__*/React.createElement("div", {
+        ref: this.calendarContainerRef
+      }));
+    }));
+  }
+}
+export default TimePicker;