dtable-statistic 4.0.2-test-2

package/es/stat-editor/stat-settings/color-setting/color-use-type-selector.js

@@ -0,0 +1,348 @@
+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 classnames from 'classnames';
+import { Input } from 'reactstrap';
+import ReactColor from 'react-color';
+import intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+import ColorRulesPopover from '../../../components/popover/color-rules-popover';
+import { getValidColorRules } from '../../../utils/color-utils';
+import { STAT_TYPE, TYPE_COLOR_USING, TYPE_DISPLAY_COLOR_USING } from '../../../constants';
+import { COLOR_RULE_FILTER_TYPE_MAP } from '../../../constants/color-rules';
+var COVER = {
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+};
+var ColorUseTypeSelector = /*#__PURE__*/function (_Component) {
+  _inherits(ColorUseTypeSelector, _Component);
+  var _super = _createSuper(ColorUseTypeSelector);
+  function ColorUseTypeSelector(props) {
+    var _this;
+    _classCallCheck(this, ColorUseTypeSelector);
+    _this = _super.call(this, props);
+    _this.getPopoverStyle = function () {
+      if (!_this.colorPickerContainerRef) return {};
+      var _this$colorPickerCont = _this.colorPickerContainerRef.getBoundingClientRect(),
+        top = _this$colorPickerCont.top,
+        height = _this$colorPickerCont.height;
+      var clientHeight = document.body.clientHeight;
+      var selectTop = top + height;
+      if (clientHeight - selectTop < 247) {
+        // 247: ReactColor's height
+        return {
+          position: 'absolute',
+          left: '20px',
+          bottom: '2.375rem',
+          zIndex: '2'
+        };
+      }
+      return {
+        position: 'absolute',
+        left: '20px',
+        zIndex: '2'
+      };
+    };
+    _this.getUsableColorTypes = function (chartType) {
+      switch (chartType) {
+        case STAT_TYPE.BAR_GROUP:
+        case STAT_TYPE.BAR_STACK:
+        case STAT_TYPE.HORIZONTAL_GROUP_BAR:
+        case STAT_TYPE.STACKED_HORIZONTAL_BAR:
+        case STAT_TYPE.PIE:
+        case STAT_TYPE.RING:
+        case STAT_TYPE.GROUP_LINE:
+        case STAT_TYPE.AREA_GROUP_CHART:
+          {
+            return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_COLUMN_COLORS];
+          }
+        case STAT_TYPE.BAR:
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return [TYPE_COLOR_USING.USE_DEFAULT, TYPE_COLOR_USING.USE_SPECIFIC_COLORS, TYPE_COLOR_USING.USE_RULES];
+          }
+        default:
+          {
+            return [TYPE_COLOR_USING.USE_DEFAULT];
+          }
+      }
+    };
+    _this.initColorTypeOptions = function () {
+      var chart = _this.props.chart;
+      var type = chart.type;
+      var useableColorTypes = _this.getUsableColorTypes(type);
+      return useableColorTypes.map(function (colorType) {
+        return {
+          value: colorType,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-module select-module-name"
+          }, intl.get(TYPE_DISPLAY_COLOR_USING[colorType]))
+        };
+      });
+    };
+    _this.getSelectedSpecificColor = function () {
+      var _this$props = _this.props,
+        chart = _this$props.chart,
+        labelColorConfigs = _this$props.labelColorConfigs;
+      var type = chart.type;
+      switch (type) {
+        case STAT_TYPE.BAR:
+          {
+            var y_axis_label_color = chart.y_axis_label_color;
+            if (y_axis_label_color) {
+              return y_axis_label_color.toUpperCase();
+            }
+            return labelColorConfigs[0].color;
+          }
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            var horizontal_axis_label_color = chart.horizontal_axis_label_color;
+            if (horizontal_axis_label_color) {
+              return horizontal_axis_label_color.toUpperCase();
+            }
+            return labelColorConfigs[0].color;
+          }
+        default:
+          {
+            return '';
+          }
+      }
+    };
+    _this.getColorRules = function () {
+      var chart = _this.props.chart;
+      var type = chart.type;
+      switch (type) {
+        case STAT_TYPE.BAR:
+          {
+            return getValidColorRules(chart.y_axis_label_color_rules);
+          }
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return getValidColorRules(chart.horizontal_axis_label_color_rules);
+          }
+        default:
+          {
+            return [];
+          }
+      }
+    };
+    _this.getColorRuleTypes = function () {
+      var chart = _this.props.chart;
+      var type = chart.type;
+      switch (type) {
+        case STAT_TYPE.BAR:
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return [COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE];
+          }
+        default:
+          {
+            return [];
+          }
+      }
+    };
+    _this.onSelectColorOption = function (_ref) {
+      var color_option = _ref.value;
+      var _this$props2 = _this.props,
+        chart = _this$props2.chart,
+        labelColorConfigs = _this$props2.labelColorConfigs;
+      var updatedChart = Object.assign({}, chart, {
+        color_option: color_option
+      });
+      if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
+        switch (chart.type) {
+          case STAT_TYPE.BAR:
+            {
+              updatedChart.y_axis_label_color = updatedChart.y_axis_label_color || labelColorConfigs[0].color;
+              break;
+            }
+          case STAT_TYPE.HORIZONTAL_BAR:
+            {
+              updatedChart.horizontal_axis_label_color = updatedChart.horizontal_axis_label_color || labelColorConfigs[0].color;
+              break;
+            }
+          default:
+            {
+              break;
+            }
+        }
+      }
+      _this.props.updateChart(updatedChart);
+    };
+    _this.onToggleColorSelector = function () {
+      _this.setState({
+        isShowColorSelector: !_this.state.isShowColorSelector
+      }, function () {
+        if (!_this.state.isShowColorSelector) {
+          _this.modifySpecificColor(_this.state.specificColor);
+        }
+      });
+    };
+    _this.showColorRulesEditor = function () {
+      if (_this.state.isShowColorRulesEditor) {
+        return;
+      }
+      _this.setState({
+        isShowColorRulesEditor: true
+      });
+    };
+    _this.hideColorRulesEditor = function () {
+      _this.setState({
+        isShowColorRulesEditor: false
+      });
+    };
+    _this.modifySpecificColor = function (color) {
+      var chart = _this.props.chart;
+      var updatedChart = Object.assign({}, chart);
+      switch (chart.type) {
+        case STAT_TYPE.BAR:
+          {
+            updatedChart.y_axis_label_color = color;
+            break;
+          }
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            updatedChart.horizontal_axis_label_color = color;
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+      _this.setState({
+        specificColor: color
+      }, function () {
+        _this.props.updateChart(updatedChart);
+      });
+    };
+    _this.modifyHex = function (colorSelection) {
+      if (colorSelection.hex === _this.state.specificColor) return;
+      _this.setState({
+        specificColor: colorSelection.hex
+      });
+    };
+    _this.modifyColorRules = function (colorRules) {
+      var chart = _this.props.chart;
+      var updatedChart = Object.assign({}, chart);
+      switch (chart.type) {
+        case STAT_TYPE.BAR:
+          {
+            updatedChart.y_axis_label_color_rules = colorRules;
+            break;
+          }
+        case STAT_TYPE.HORIZONTAL_BAR:
+          {
+            updatedChart.horizontal_axis_label_color_rules = colorRules;
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+      _this.props.updateChart(updatedChart);
+    };
+    _this.renderSpecificColorSelector = function () {
+      var specificColor = _this.state.specificColor;
+      var id = 'statistic_selected_specific_color';
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        id: id,
+        className: "selected-specific-color mt-1",
+        ref: function ref(_ref2) {
+          return _this.colorPickerContainerRef = _ref2;
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "selected-specific-color-wrapper"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "specific-color-show",
+        style: {
+          backgroundColor: specificColor
+        },
+        onClick: _this.onToggleColorSelector
+      }), /*#__PURE__*/React.createElement(Input, {
+        type: "text",
+        className: "specific-color-input",
+        value: specificColor,
+        onChange: function onChange(event) {
+          return _this.modifySpecificColor(event.target.value);
+        }
+      }))), _this.state.isShowColorSelector && /*#__PURE__*/React.createElement("div", {
+        style: _this.getPopoverStyle()
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "position-fixed",
+        style: COVER,
+        onClick: _this.onToggleColorSelector
+      }), /*#__PURE__*/React.createElement(ReactColor, {
+        disableAlpha: true,
+        color: specificColor,
+        onChange: _this.modifyHex
+      })));
+    };
+    _this.renderColorRulesEditor = function () {
+      var labelColorConfigs = _this.props.labelColorConfigs;
+      var colorRules = _this.getColorRules();
+      var colorRuleTypes = _this.getColorRuleTypes();
+      var rulesLen = colorRules ? colorRules.length : 0;
+      var hasRules = rulesLen > 0;
+      var id = 'statistic_color_rules_toggle';
+      var msg = intl.get('Add_rule');
+      if (rulesLen === 1) {
+        msg = intl.get('Added_1_rule');
+      } else if (rulesLen > 1) {
+        msg = intl.get('Added_xxx_rules', {
+          rules_count: rulesLen
+        });
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        id: id,
+        className: classnames('statistic-color-rules-toggle', 'mt-1', hasRules ? 'statistic-edit-color-rule' : 'statistic-add-color-rule'),
+        onClick: _this.showColorRulesEditor
+      }, hasRules ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, msg), /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-rename"
+      })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "ml-2"
+      }, msg))), _this.state.isShowColorRulesEditor && /*#__PURE__*/React.createElement(ColorRulesPopover, {
+        target: id,
+        colorRules: colorRules,
+        colorRuleTypes: colorRuleTypes,
+        labelColorConfigs: labelColorConfigs,
+        hideColorRulesPopover: _this.hideColorRulesEditor,
+        updateColorRules: _this.modifyColorRules
+      }));
+    };
+    _this.state = {
+      isShowColorSelector: false,
+      isShowColorRulesEditor: false,
+      specificColor: _this.getSelectedSpecificColor()
+    };
+    _this.colorOptions = _this.initColorTypeOptions();
+    _this.isToggleColorRulesEditor = false;
+    return _this;
+  }
+  _createClass(ColorUseTypeSelector, [{
+    key: "render",
+    value: function render() {
+      var chart = this.props.chart;
+      var color_option = chart.color_option;
+      var selectedColorOption = this.colorOptions.find(function (colorOption) {
+        return colorOption.value === color_option;
+      }) || this.colorOptions[0];
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedColorOption,
+        options: this.colorOptions,
+        onChange: this.onSelectColorOption
+      }), color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
+    }
+  }]);
+  return ColorUseTypeSelector;
+}(Component);
+export default ColorUseTypeSelector;

package/es/stat-editor/stat-settings/public-setting/axis-label-position-setting.js

@@ -0,0 +1,102 @@
+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 intl from 'react-intl-universal';
+import { DTableSelect } from '../../../components';
+var LABEL_POSITIONS_X = ['left', 'center', 'right'];
+var LABEL_POSITIONS_Y = ['bottom', 'center', 'top'];
+var LABEL_POSITIONS_SHOW_X = {
+  left: 'Left',
+  center: 'Center',
+  right: 'Right'
+};
+var LABEL_POSITIONS_SHOW_Y = {
+  bottom: 'Bottom',
+  center: 'Center',
+  top: 'Top'
+};
+var AxisLabelPosition = /*#__PURE__*/function (_Component) {
+  _inherits(AxisLabelPosition, _Component);
+  var _super = _createSuper(AxisLabelPosition);
+  function AxisLabelPosition(props) {
+    var _this;
+    _classCallCheck(this, AxisLabelPosition);
+    _this = _super.call(this, props);
+    _this.getLabelPositionOptions = function () {
+      var axisType = _this.props.axisType;
+      var positions = LABEL_POSITIONS_X;
+      if (axisType.includes('y') || axisType === 'vertical') {
+        positions = LABEL_POSITIONS_Y;
+      }
+      if (axisType === 'x' || axisType === 'horizontal') {
+        return positions.map(function (g) {
+          return {
+            value: g,
+            label: /*#__PURE__*/React.createElement("span", {
+              className: 'select-module select-module-name'
+            }, intl.get(LABEL_POSITIONS_SHOW_X[g]))
+          };
+        });
+      }
+      if (axisType.includes('y') || axisType === 'vertical') {
+        return positions.map(function (g) {
+          return {
+            value: g,
+            label: /*#__PURE__*/React.createElement("span", {
+              className: 'select-module select-module-name'
+            }, intl.get(LABEL_POSITIONS_SHOW_Y[g]))
+          };
+        });
+      }
+    };
+    _this.onSelectAxisPosition = function (option) {
+      var axisType = _this.props.axisType;
+      _this.props.onSelectAxisLabelPosition(axisType, option);
+    };
+    _this.renderXAxisLabelPosition = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        axisType = _this$props.axisType;
+      var selectedOption = null;
+      if (axisType === 'y' || axisType === 'vertical') {
+        var y_axis_label_position = statItem.y_axis_label_position,
+          vertical_axis_label_position = statItem.vertical_axis_label_position;
+        selectedOption = _this.labelPositionOptions.find(function (item) {
+          return item.value === y_axis_label_position || item.value === vertical_axis_label_position;
+        });
+      } else if (axisType === 'y_left' || axisType === 'y_right') {
+        var y_axis_left_label_position = statItem.y_axis_left_label_position,
+          y_axis_right_label_position = statItem.y_axis_right_label_position;
+        var target = axisType === 'y_left' ? y_axis_left_label_position : y_axis_right_label_position;
+        selectedOption = _this.labelPositionOptions.find(function (item) {
+          return item.value === target;
+        });
+      } else {
+        var x_axis_label_position = statItem.x_axis_label_position,
+          horizontal_axis_label_position = statItem.horizontal_axis_label_position;
+        selectedOption = _this.labelPositionOptions.find(function (item) {
+          return item.value === x_axis_label_position || item.value === horizontal_axis_label_position;
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        onChange: _this.onSelectAxisPosition,
+        options: _this.labelPositionOptions
+      }));
+    };
+    _this.labelPositionOptions = _this.getLabelPositionOptions();
+    return _this;
+  }
+  _createClass(AxisLabelPosition, [{
+    key: "render",
+    value: function render() {
+      return this.renderXAxisLabelPosition();
+    }
+  }]);
+  return AxisLabelPosition;
+}(Component);
+export default AxisLabelPosition;

package/es/stat-editor/stat-settings/public-setting/base-settings.js

@@ -0,0 +1,124 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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';
+import { INIT_STAT_ITEM } from '../../../constants';
+var BaseSettings = /*#__PURE__*/function (_Component) {
+  _inherits(BaseSettings, _Component);
+  var _super = _createSuper(BaseSettings);
+  function BaseSettings(_props) {
+    var _this;
+    _classCallCheck(this, BaseSettings);
+    _this = _super.call(this, _props);
+    _this.getTablesOptions = function () {
+      var tables = _this.props.getTables();
+      return Array.isArray(tables) && tables.map(function (table) {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, table.name),
+          value: {
+            name: table.name,
+            id: table._id
+          }
+        };
+      });
+    };
+    _this.getViewsOptions = function (props) {
+      var getTableById = props.getTableById,
+        getViews = props.getViews,
+        selectedTableId = props.selectedTableId;
+      var selectedTable = getTableById(selectedTableId);
+      var views = getViews(selectedTable);
+      return views.map(function (view) {
+        var isArchiveView = view.type === 'archive';
+        return {
+          label: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            className: "header-icon"
+          }, /*#__PURE__*/React.createElement("i", {
+            className: isArchiveView ? 'dtable-font dtable-icon-archive-view' : 'dtable-font dtable-icon-main-view'
+          })), /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, view.name)),
+          value: {
+            name: view.name,
+            id: view._id
+          }
+        };
+      });
+    };
+    _this.getSelectedTableOption = function () {
+      return _this.tablesOptions.find(function (option) {
+        return option.value.id === _this.props.selectedTableId;
+      });
+    };
+    _this.getSelectedViewOption = function () {
+      return _this.viewsOptions.find(function (option) {
+        return option.value.id === _this.props.selectedViewId;
+      });
+    };
+    _this.onSelectTable = function (option) {
+      var selectedTableId = option.value.id;
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        getViews = _this$props.getViews,
+        statItem = _this$props.statItem;
+      var type = statItem.type,
+        table_id = statItem.table_id;
+      if (selectedTableId === table_id) return;
+      var selectedTable = getTableById(selectedTableId);
+      var selectedView = getViews(selectedTable)[0];
+      var view_id = selectedView._id;
+      _this.props.updateStatItem(Object.assign({}, statItem, _objectSpread({
+        table_id: selectedTable._id,
+        view_id: view_id
+      }, INIT_STAT_ITEM[type])));
+    };
+    _this.onSelectView = function (option) {
+      var selectedView = option.value;
+      var statItem = _this.props.statItem;
+      var id = selectedView.id;
+      var view_id = statItem.view_id;
+      if (id === view_id) return;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        view_id: id
+      }));
+    };
+    _this.tablesOptions = _this.getTablesOptions();
+    _this.viewsOptions = _this.getViewsOptions(_props);
+    return _this;
+  }
+  _createClass(BaseSettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        this.viewsOptions = this.getViewsOptions(nextProps);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var selectedTableOption = this.getSelectedTableOption();
+      var selectedViewOption = this.getSelectedViewOption();
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Table')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedTableOption,
+        options: this.tablesOptions,
+        onChange: this.onSelectTable
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Views')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedViewOption,
+        options: this.viewsOptions,
+        onChange: this.onSelectView
+      })));
+    }
+  }]);
+  return BaseSettings;
+}(Component);
+export default BaseSettings;

package/es/stat-editor/stat-settings/public-setting/calender.js

@@ -0,0 +1,124 @@
+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 from 'react';
+import dayjs from 'dayjs';
+import intl from 'react-intl-universal';
+import DatePicker from '@seafile/seafile-calendar/lib/Picker';
+import Calendar from '@seafile/seafile-calendar';
+import { translateCalendar } from '../../../utils';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en-gb';
+import '@seafile/seafile-calendar/assets/index.css';
+var DateEditorPopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateEditorPopover, _React$Component);
+  var _super = _createSuper(DateEditorPopover);
+  function DateEditorPopover(props) {
+    var _this;
+    _classCallCheck(this, DateEditorPopover);
+    _this = _super.call(this, props);
+    // event trigger sequence: onOpenChange --> onChange
+    _this.onChange = function (value) {
+      if (!value) return;
+      var dateFormat = _this.props.dateFormat;
+      _this.setState({
+        datePickerValue: value
+      });
+      _this.props.onValueChanged(value.format(dateFormat));
+    };
+    _this.onOpenChange = function (open) {
+      _this.setState({
+        open: open
+      });
+      if (!open) {
+        setTimeout(function () {
+          _this.props.commitAndClosePopover();
+        }, 1);
+      }
+      return;
+    };
+    _this.onClear = function () {
+      _this.setState({
+        datePickerValue: null
+      });
+    };
+    _this.onFocusDatePicker = function () {
+      _this.setState({
+        open: true
+      });
+    };
+    _this.handleMouseDown = function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    _this.getCalendarContainer = function () {
+      return _this.calendarContainerRef.current;
+    };
+    _this.getCalender = function () {
+      var _this$props = _this.props,
+        dateFormat = _this$props.dateFormat,
+        showHourAndMinute = _this$props.showHourAndMinute;
+      var defaultValue = dayjs().clone();
+      return /*#__PURE__*/React.createElement(Calendar, {
+        showDateInput: true,
+        focusablePanel: false,
+        locale: translateCalendar(),
+        style: {
+          zIndex: 1001
+        },
+        format: dateFormat,
+        defaultValue: defaultValue,
+        showHourAndMinute: showHourAndMinute,
+        dateInputPlaceholder: intl.get('Enter_date'),
+        onClear: _this.onClear
+      });
+    };
+    _this.state = {
+      open: true,
+      datePickerValue: props.value ? dayjs(props.value) : null
+    };
+    _this.calendarContainerRef = React.createRef();
+    return _this;
+  }
+  _createClass(DateEditorPopover, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var dateFormat = this.props.dateFormat;
+      var _this$state = this.state,
+        open = _this$state.open,
+        datePickerValue = _this$state.datePickerValue;
+      var calendar = this.getCalender();
+      return /*#__PURE__*/React.createElement(DatePicker, {
+        open: open,
+        value: datePickerValue,
+        style: {
+          zIndex: 1001
+        },
+        calendar: calendar,
+        getCalendarContainer: this.getCalendarContainer,
+        onChange: this.onChange,
+        onOpenChange: this.onOpenChange
+      }, function (_ref) {
+        var value = _ref.value;
+        value = value && value.format(dateFormat);
+        return /*#__PURE__*/React.createElement("span", {
+          tabIndex: "0",
+          onFocus: _this2.onFocusDatePicker
+        }, /*#__PURE__*/React.createElement("input", {
+          readOnly: true,
+          tabIndex: "-1",
+          className: "form-control",
+          placeholder: intl.get('Please_select'),
+          value: value || '',
+          onMouseDown: _this2.handleMouseDown
+        }), /*#__PURE__*/React.createElement("div", {
+          ref: _this2.calendarContainerRef
+        }));
+      });
+    }
+  }]);
+  return DateEditorPopover;
+}(React.Component);
+export default DateEditorPopover;