dtable-statistic 4.2.1 → 4.3.0

package/es/stat-editor/stat-settings/basic-chart-settings/time-comparison-settings.js

@@ -1,8 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-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 intl from 'react-intl-universal';
 import { DTableSelect } from '../../../components';
@@ -15,254 +10,266 @@ import TimeCompareStyle from './style-setting/time-compare-style';
 import ColorPicker from '../color-setting/color-picker';
 import { TIME_COLUMN_LIST } from '../../../constants';
 import styles from '../../../assets/css/statistic-time-picker.module.css';
-var TimeComparisonSettings = /*#__PURE__*/function (_Component) {
-  _inherits(TimeComparisonSettings, _Component);
-  var _super = _createSuper(TimeComparisonSettings);
-  function TimeComparisonSettings(props) {
-    var _this;
-    _classCallCheck(this, TimeComparisonSettings);
-    _this = _super.call(this, props);
-    _this.renderGroupbyDateGranularity = function () {
-      var _this$props = _this.props,
-        dateGranularityOptions = _this$props.dateGranularityOptions,
-        groupbyDateGranularity = _this$props.groupbyDateGranularity;
-      var selectedDateGranularity = _this.getSelectedDateGranularity(groupbyDateGranularity);
+class TimeComparisonSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.renderGroupbyDateGranularity = () => {
+      let {
+        dateGranularityOptions,
+        groupbyDateGranularity
+      } = this.props;
+      let selectedDateGranularity = this.getSelectedDateGranularity(groupbyDateGranularity);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedDateGranularity,
-        onChange: _this.onSelectGroupbyDateGranularity,
+        onChange: this.onSelectGroupbyDateGranularity,
         options: dateGranularityOptions
       }));
     };
-    _this.renderGroupby = function () {
-      var statItem = _this.props.statItem;
-      var x_axis_column_key = statItem.x_axis_column_key;
-      var selectedColumnOption = _this.props.getSelectedColumnOption(x_axis_column_key, _this.columnsOptions);
+    this.renderGroupby = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        x_axis_column_key
+      } = statItem;
+      let selectedColumnOption = this.props.getSelectedColumnOption(x_axis_column_key, this.columnsOptions);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), /*#__PURE__*/React.createElement(DTableSelect, {
         placeholder: intl.get('Select_a_column'),
         value: selectedColumnOption,
-        onChange: _this.onSelectGroupbyColumn,
-        options: _this.columnsOptions
+        onChange: this.onSelectGroupbyColumn,
+        options: this.columnsOptions
       }));
     };
-    _this.renderGroupbyDateGranularity = function () {
-      var _this$props2 = _this.props,
-        dateGranularityOptions = _this$props2.dateGranularityOptions,
-        statItem = _this$props2.statItem;
-      dateGranularityOptions = dateGranularityOptions.filter(function (item) {
-        return item.value !== 'year';
-      });
-      var selectedDateGranularity = _this.getSelectedDateGranularity(statItem.x_axis_date_granularity);
+    this.renderGroupbyDateGranularity = () => {
+      let {
+        dateGranularityOptions,
+        statItem
+      } = this.props;
+      dateGranularityOptions = dateGranularityOptions.filter(item => item.value !== 'year');
+      let selectedDateGranularity = this.getSelectedDateGranularity(statItem.x_axis_date_granularity);
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedDateGranularity,
-        onChange: _this.onSelectGroupbyDateGranularity,
+        onChange: this.onSelectGroupbyDateGranularity,
         options: dateGranularityOptions
       }));
     };
-    _this.onSelectGroupbyDateGranularity = function (dateGranularity) {
-      var updated = {
+    this.onSelectGroupbyDateGranularity = dateGranularity => {
+      let updated = {
         x_axis_date_granularity: dateGranularity.value
       };
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.onSelectGroupbyColumn = function (option) {
-      var updated = {
+    this.onSelectGroupbyColumn = option => {
+      let updated = {
         x_axis_column_key: option.value.key
       };
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
     };
-    _this.getSelectedDateGranularity = function (dateGranularity) {
-      var dateGranularityOptions = _this.props.dateGranularityOptions;
-      return dateGranularityOptions.find(function (g) {
-        return g.value === dateGranularity;
-      }) || dateGranularityOptions[2];
+    this.getSelectedDateGranularity = dateGranularity => {
+      let {
+        dateGranularityOptions
+      } = this.props;
+      return dateGranularityOptions.find(g => g.value === dateGranularity) || dateGranularityOptions[2];
     };
-    _this.onColorChanged = function (color) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.onColorChanged = color => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         increase_line_color: color.hex
       }));
     };
-    _this.renderDateRange = function () {
-      var statItem = _this.props.statItem;
+    this.renderDateRange = () => {
+      const {
+        statItem
+      } = this.props;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Date_range')), /*#__PURE__*/React.createElement("div", {
         className: styles['time-input-container']
       }, /*#__PURE__*/React.createElement(TimePicker, {
-        onCommit: function onCommit(value) {
-          return _this.updateDate('x_axis_date_range_start', value);
-        },
+        onCommit: value => this.updateDate('x_axis_date_range_start', value),
         value: statItem.x_axis_date_range_start
       }), /*#__PURE__*/React.createElement("div", {
         className: styles['concat']
       }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
-        onCommit: function onCommit(value) {
-          return _this.updateDate('x_axis_date_range_end', value);
-        },
+        onCommit: value => this.updateDate('x_axis_date_range_end', value),
         value: statItem.x_axis_date_range_end
       })));
     };
-    _this.renderComparedDateRange = function () {
-      var statItem = _this.props.statItem;
+    this.renderComparedDateRange = () => {
+      const {
+        statItem
+      } = this.props;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Compare_to_date_range')), /*#__PURE__*/React.createElement("div", {
         className: styles['time-input-container']
       }, /*#__PURE__*/React.createElement(TimePicker, {
-        onCommit: function onCommit(value) {
-          return _this.updateDate('x_axis_compared_date_range_start', value);
-        },
+        onCommit: value => this.updateDate('x_axis_compared_date_range_start', value),
         value: statItem.x_axis_compared_date_range_start
       }), /*#__PURE__*/React.createElement("div", {
         className: styles['concat']
       }, '   -   '), /*#__PURE__*/React.createElement(TimePicker, {
-        onCommit: function onCommit(value) {
-          return _this.updateDate('x_axis_compared_date_range_end', value);
-        },
+        onCommit: value => this.updateDate('x_axis_compared_date_range_end', value),
         value: statItem.x_axis_compared_date_range_end
       })));
     };
-    _this.renderIncrementLineSetting = function () {
-      var statItem = _this.props.statItem;
-      var display_increase = statItem.display_increase;
+    this.renderIncrementLineSetting = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_increase
+      } = statItem;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
         isChecked: display_increase || false,
-        handleToggleChange: _this.onToggleIncrease,
+        handleToggleChange: this.onToggleIncrease,
         label: intl.get('Display_increase')
       }));
     };
-    _this.renderColorPicker = function () {
-      var _this$props$statItem$ = _this.props.statItem.increase_line_color,
-        increase_line_color = _this$props$statItem$ === void 0 ? '#fbd44a' : _this$props$statItem$;
+    this.renderColorPicker = () => {
+      const {
+        statItem: {
+          increase_line_color = '#fbd44a'
+        }
+      } = this.props;
       return /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Line_color')), /*#__PURE__*/React.createElement(ColorPicker, {
         isPickAllColor: true,
         activeColor: increase_line_color,
-        onColorChanged: _this.onColorChanged
+        onColorChanged: this.onColorChanged
       }));
     };
-    _this.onToggleIncrease = function () {
-      var statItem = _this.props.statItem;
-      var display_increase = statItem.display_increase;
-      _this.props.updateStatItem(Object.assign({}, statItem, {
+    this.onToggleIncrease = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        display_increase
+      } = statItem;
+      this.props.updateStatItem(Object.assign({}, statItem, {
         display_increase: !display_increase
       }));
     };
-    _this.updateDate = function (key, date) {
-      var statItem = _this.props.statItem;
-      _this.props.updateStatItem(Object.assign({}, statItem, _defineProperty({}, key, date)));
+    this.updateDate = (key, date) => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        [key]: date
+      }));
     };
-    _this.updatedSummaryType = function (summaryType, summaryColumnKey, summaryMethod) {
-      var statItem = _this.props.statItem;
-      var updated = {
+    this.updatedSummaryType = (summaryType, summaryColumnKey, summaryMethod) => {
+      let {
+        statItem
+      } = this.props;
+      let updated = {
         y_axis_summary_type: summaryType,
         y_axis_column_key: summaryColumnKey,
         y_axis_summary_method: summaryMethod
       };
-      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
-    _this.updateSummaryColumn = function (summaryColumnKey) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.updateSummaryColumn = summaryColumnKey => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axis_column_key: summaryColumnKey
       }));
     };
-    _this.updateSummaryMethod = function (summaryMethod) {
-      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
         y_axis_summary_method: summaryMethod
       }));
     };
-    var _statItem = props.statItem,
-      generalColumnsOptions = props.generalColumnsOptions;
-    var x_axis_date_range_start = _statItem.x_axis_date_range_start,
-      x_axis_date_range_end = _statItem.x_axis_date_range_end,
-      x_axis_compared_date_range_start = _statItem.x_axis_compared_date_range_start,
-      x_axis_compared_date_range_end = _statItem.x_axis_compared_date_range_end;
-    _this.state = {
+    const {
+      statItem: _statItem,
+      generalColumnsOptions
+    } = props;
+    const {
+      x_axis_date_range_start,
+      x_axis_date_range_end,
+      x_axis_compared_date_range_start,
+      x_axis_compared_date_range_end
+    } = _statItem;
+    this.state = {
       dateRangeStart: x_axis_date_range_start,
       dateRangeEnd: x_axis_date_range_end,
       comparedDateRangeStart: x_axis_compared_date_range_start,
       comparedDateRangeEnd: x_axis_compared_date_range_end
     };
-    _this.columnsOptions = generalColumnsOptions.filter(function (item) {
+    this.columnsOptions = generalColumnsOptions.filter(item => {
       return TIME_COLUMN_LIST.includes(item.value.type);
     });
-    return _this;
   }
-  _createClass(TimeComparisonSettings, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps, props) {
-      if (nextProps.selectedTableId !== this.props.selectedTableId || nextProps.generalColumnsOptions !== props.generalColumnsOptions) {
-        this.columnsOptions = nextProps.generalColumnsOptions.filter(function (item) {
-          return TIME_COLUMN_LIST.includes(item.value.type);
-        });
-      }
+  componentWillReceiveProps(nextProps, props) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId || nextProps.generalColumnsOptions !== props.generalColumnsOptions) {
+      this.columnsOptions = nextProps.generalColumnsOptions.filter(item => {
+        return TIME_COLUMN_LIST.includes(item.value.type);
+      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-        getTableById = _this$props3.getTableById,
-        statItem = _this$props3.statItem,
-        labelColorConfigs = _this$props3.labelColorConfigs,
-        eventBus = _this$props3.eventBus,
-        numericColumnsOptions = _this$props3.numericColumnsOptions,
-        settingType = _this$props3.settingType;
-      var _ref = statItem || {},
-        selectedTableId = _ref.table_id,
-        selectedViewId = _ref.view_id,
-        y_axis_summary_type = _ref.y_axis_summary_type,
-        y_axis_column_key = _ref.y_axis_column_key,
-        y_axis_summary_method = _ref.y_axis_summary_method;
-      if (settingType === 'style') {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BarChartStyle, {
-          hideDisplayDataSetting: false,
-          statItem: statItem,
-          labelColorConfigs: labelColorConfigs,
-          eventBus: eventBus,
-          getTableById: getTableById,
-          updateStatItem: this.props.updateStatItem
-        }), /*#__PURE__*/React.createElement(TimeCompareStyle, {
-          statItem: statItem,
-          updateStatItem: this.props.updateStatItem
-        }), this.renderColorPicker());
-      }
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+  }
+  render() {
+    const {
+      getTableById,
+      statItem,
+      labelColorConfigs,
+      eventBus,
+      numericColumnsOptions,
+      settingType
+    } = this.props;
+    let {
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      y_axis_summary_type,
+      y_axis_column_key,
+      y_axis_summary_method
+    } = statItem || {};
+    if (settingType === 'style') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BarChartStyle, {
+        hideDisplayDataSetting: false,
         statItem: statItem,
-        selectedTableId: selectedTableId,
-        selectedViewId: selectedViewId,
-        getTables: this.props.getTables,
-        getViews: this.props.getViews,
-        getTableById: this.props.getTableById,
-        getConvertedChart: this.props.getConvertedChart,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTableById: getTableById,
         updateStatItem: this.props.updateStatItem
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderGroupby(), this.renderGroupbyDateGranularity(), this.renderDateRange(), this.renderComparedDateRange(), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), /*#__PURE__*/React.createElement(SummarySettings, {
+      }), /*#__PURE__*/React.createElement(TimeCompareStyle, {
         statItem: statItem,
-        label: intl.get('Y-axis'),
-        numericColumnsOptions: numericColumnsOptions,
-        summaryType: y_axis_summary_type,
-        summaryColumnKey: y_axis_column_key,
-        summaryMethod: y_axis_summary_method,
-        getSelectedColumnOption: this.props.getSelectedColumnOption,
-        onChangeSummaryType: this.updatedSummaryType,
-        onSelectNumericColumn: this.updateSummaryColumn,
-        onSelectSummaryMethod: this.updateSummaryMethod
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "statistic-chart-parameter-divider"
-      }), this.renderIncrementLineSetting());
+        updateStatItem: this.props.updateStatItem
+      }), this.renderColorPicker());
     }
-  }]);
-  return TimeComparisonSettings;
-}(Component);
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: this.props.getTables,
+      getViews: this.props.getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderGroupby(), this.renderGroupbyDateGranularity(), this.renderDateRange(), this.renderComparedDateRange(), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/React.createElement(SummarySettings, {
+      statItem: statItem,
+      label: intl.get('Y-axis'),
+      numericColumnsOptions: numericColumnsOptions,
+      summaryType: y_axis_summary_type,
+      summaryColumnKey: y_axis_column_key,
+      summaryMethod: y_axis_summary_method,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onChangeSummaryType: this.updatedSummaryType,
+      onSelectNumericColumn: this.updateSummaryColumn,
+      onSelectSummaryMethod: this.updateSummaryMethod
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderIncrementLineSetting());
+  }
+}
 export default TimeComparisonSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/timer-picker.js

@@ -1,108 +1,95 @@
-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, { Fragment } from 'react';
 import dayjs from 'dayjs';
 import DateEditorPopover from '../public-setting/calender';
 import styles from '../../../assets/css/statistic-time-picker.module.css';
-var DATE_FORMAT = 'YYYY-MM-DD';
-var TimePicker = /*#__PURE__*/function (_React$Component) {
-  _inherits(TimePicker, _React$Component);
-  var _super = _createSuper(TimePicker);
-  function TimePicker(props) {
-    var _this;
-    _classCallCheck(this, TimePicker);
-    _this = _super.call(this, props);
-    _this.onDateEditorToggle = function () {
-      _this.setState({
-        isPopoverShow: !_this.state.isPopoverShow
+const DATE_FORMAT = 'YYYY-MM-DD';
+class TimePicker extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onDateEditorToggle = () => {
+      this.setState({
+        isPopoverShow: !this.state.isPopoverShow
       });
     };
-    _this.onValueChanged = function (value) {
-      if (value !== _this.props.value) {
-        _this.setState({
-          value: value
+    this.onValueChanged = value => {
+      if (value !== this.props.value) {
+        this.setState({
+          value
         });
       }
     };
-    _this.handleKeyDown = function (e) {
+    this.handleKeyDown = e => {
       if (e.keyCode === 13) {
         e.preventDefault();
-        setTimeout(function () {
-          _this.onClosePopover();
+        setTimeout(() => {
+          this.onClosePopover();
         }, 1);
       }
     };
-    _this.commitAndClosePopover = function () {
-      if (_this.state.value !== _this.props.value) {
-        _this.onCommit(_this.state.value);
+    this.commitAndClosePopover = () => {
+      if (this.state.value !== this.props.value) {
+        this.onCommit(this.state.value);
       }
-      _this.onClosePopover();
+      this.onClosePopover();
     };
-    _this.onCommit = function (newValue) {
-      _this.props.onCommit(newValue);
+    this.onCommit = newValue => {
+      this.props.onCommit(newValue);
     };
-    _this.onClosePopover = function () {
-      _this.setState({
+    this.onClosePopover = () => {
+      this.setState({
         isPopoverShow: false
       });
     };
-    _this.state = {
+    this.state = {
       isDateInit: false,
       isPopoverShow: false,
       defaultCalendarValue: null,
       value: props.value
     };
-    return _this;
   }
-  _createClass(TimePicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isZhcn = window.dtable && window.dtable.lang === 'zh-cn';
-      if (isZhcn) {
-        dayjs.locale('zh-cn');
-      } else {
-        dayjs.locale('en-gb');
-      }
-      this.setState({
-        isDateInit: true
-      });
+  componentDidMount() {
+    const isZhcn = window.dtable && window.dtable.lang === 'zh-cn';
+    if (isZhcn) {
+      dayjs.locale('zh-cn');
+    } else {
+      dayjs.locale('en-gb');
     }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.state.isDateInit) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "cell-editor date-editor"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "date-editor-container"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "control-form"
-        })));
-      }
-      var isPopoverShow = this.state.isPopoverShow;
-      var lang = window.dtable && window.dtable.lang || 'zh-cn';
+    this.setState({
+      isDateInit: true
+    });
+  }
+  render() {
+    if (!this.state.isDateInit) {
       return /*#__PURE__*/React.createElement("div", {
-        onKeyDown: this.handleKeyDown,
-        className: styles['date-editor']
-      }, !isPopoverShow && /*#__PURE__*/React.createElement("div", {
-        className: styles['date-editor-container']
+        className: "cell-editor date-editor"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "form-control",
-        onClick: this.onDateEditorToggle
-      }, this.props.value)), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DateEditorPopover, {
-        lang: lang,
-        value: this.props.value,
-        dateFormat: DATE_FORMAT,
-        showHourAndMinute: false,
-        onValueChanged: this.onValueChanged,
-        commitAndClosePopover: this.commitAndClosePopover
+        className: "date-editor-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "control-form"
       })));
     }
-  }]);
-  return TimePicker;
-}(React.Component);
+    let {
+      isPopoverShow
+    } = this.state;
+    let lang = window.dtable && window.dtable.lang || 'zh-cn';
+    return /*#__PURE__*/React.createElement("div", {
+      onKeyDown: this.handleKeyDown,
+      className: styles['date-editor']
+    }, !isPopoverShow && /*#__PURE__*/React.createElement("div", {
+      className: styles['date-editor-container']
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-control",
+      onClick: this.onDateEditorToggle
+    }, this.props.value)), isPopoverShow && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DateEditorPopover, {
+      lang: lang,
+      value: this.props.value,
+      dateFormat: DATE_FORMAT,
+      showHourAndMinute: false,
+      onValueChanged: this.onValueChanged,
+      commitAndClosePopover: this.commitAndClosePopover
+    })));
+  }
+}
 TimePicker.defaultProps = {
   value: ''
 };