@chaoswise/ui 2.3.0 → 2.3.1

package/lib/DropdownDatePicker/DropdownMenu/index.js

@@ -0,0 +1,126 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
+import _Icon from "@chaoswise/ui/lib/Antd/Icon";
+import _ConfigProvider from "@chaoswise/ui/lib/ConfigProvider";
+var _excluded = ["timeDomain", "number", "unit", "value", "isRecently"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import classnames from "classnames";
+import { getLocale } from "../locale";
+import Calendar2Svg from "../assets/Calendar2";
+import LiveSvg from "../assets/live";
+import MoreSvg from "../assets/more";
+import MoreTimeList from "./MoreTimeList";
+import { funcValueChangeArrayValue, getCorrectValue } from "../utils";
+import _ from "lodash";
+import "./index.less";
+var DropdownMenu = function DropdownMenu(props) {
+  var dataSource = props.dataSource,
+    regroupDataSource = props.regroupDataSource,
+    setIsCalendar = props.setIsCalendar,
+    recordDateValue = props.recordDateValue,
+    setRecordDateValue = props.setRecordDateValue,
+    _value = props.value,
+    onChange = props.onChange,
+    menuOption = props.menuOption,
+    setIsFocus = props.setIsFocus;
+  var _ConfigProvider$useLo = _ConfigProvider.useLocale(),
+    _ConfigProvider$useLo2 = _ConfigProvider$useLo.locale,
+    locale = _ConfigProvider$useLo2 === void 0 ? "zh" : _ConfigProvider$useLo2;
+  var localeObj = getLocale(locale);
+  var _menuOption$showCalen = menuOption.showCalendar,
+    showCalendar = _menuOption$showCalen === void 0 ? true : _menuOption$showCalen,
+    _menuOption$showDefau = menuOption.showDefaultCount,
+    showDefaultCount = _menuOption$showDefau === void 0 ? 8 : _menuOption$showDefau,
+    _menuOption$moreItemD = menuOption.moreItemDropdownPosition,
+    moreItemDropdownPosition = _menuOption$moreItemD === void 0 ? "left" : _menuOption$moreItemD;
+  // 点击Menu.Item中切换选项列表
+  var onClickItem = function onClickItem(item) {
+    var timeDomain = recordDateValue.timeDomain,
+      number = recordDateValue.number,
+      unit = recordDateValue.unit,
+      value = recordDateValue.value,
+      isRecently = recordDateValue.isRecently,
+      rest = _objectWithoutProperties(recordDateValue, _excluded);
+    setIsFocus(false);
+    var values = item.value;
+    if (item.key !== recordDateValue.key) {
+      var returnValue = _objectSpread(_objectSpread({}, item), {}, {
+        value: funcValueChangeArrayValue(values)
+      });
+      returnValue = getCorrectValue(returnValue, item.key);
+      onChange(returnValue);
+      if (!_value) {
+        setRecordDateValue(returnValue);
+      }
+    }
+  };
+  // 点击切换为日历
+  var onClickSelectCalendar = function onClickSelectCalendar(e) {
+    e.nativeEvent.stopImmediatePropagation();
+    setIsCalendar(true);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-dropdown-date-picker-dropdown-menu-wrapper")
+  }, dataSource === null || dataSource === void 0 ? void 0 : dataSource.slice(0, showDefaultCount).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames("cw-dropdown-date-picker-dropdown-menu-_item", {
+        "cw-dropdown-date-picker-dropdown-menu-item-selected": (recordDateValue === null || recordDateValue === void 0 ? void 0 : recordDateValue.key) === item.key
+      }),
+      key: item.key,
+      onClick: function onClick() {
+        return onClickItem(item);
+      }
+    }, item.icon ? item.icon : /*#__PURE__*/React.createElement(LiveSvg, null), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginLeft: "4px"
+      }
+    }, item.render ? item.render(item) : item.title));
+  }), (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > showDefaultCount && /*#__PURE__*/React.createElement(_Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(MoreTimeList, {
+      regroupDataSource: regroupDataSource,
+      recordDateValue: recordDateValue,
+      onClickItem: onClickItem
+    }),
+    overlayClassName: classnames("cw-dropdown-date-picker-dropdown-menu-more-wrapper", {
+      "cw-dropdown-date-picker-dropdown-menu-more-wrapper-left": moreItemDropdownPosition === "left"
+    }),
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return triggerNode;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-dropdown-date-picker-dropdown-menu-_item", "cw-dropdown-date-picker-dropdown-menu-item-more")
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(MoreSvg, {
+    className: "cw-range-picker-prefix-icon"
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: "4px"
+    }
+  }, localeObj.more)), /*#__PURE__*/React.createElement(_Icon, {
+    type: "right"
+  }))), showCalendar && /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-dropdown-date-picker-dropdown-menu-_item"),
+    key: "unique-calendar",
+    onClick: onClickSelectCalendar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-range-picker-menu-item-calendar"
+  }, /*#__PURE__*/React.createElement(Calendar2Svg, {
+    className: "cw-range-picker-prefix-icon"
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: "4px"
+    }
+  }, localeObj["select-calendar"])));
+};
+export default DropdownMenu;

package/lib/DropdownDatePicker/DropdownMenu/index.less

@@ -0,0 +1,68 @@
+@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
+
+
+.cw-dropdown-date-picker-dropdown-menu-wrapper {
+    width: 360px;
+    padding: @dropdown-edge-child-vertical-padding 0;
+    text-align: left;
+    list-style-type: none;
+    box-shadow: @box-shadow-base;
+    background-color: @component-background;
+    border-radius: @border-radius-base;
+    outline: none;
+    background-clip: padding-box;
+    -webkit-transform: translate3d(0, 0, 0);
+    position: relative;
+
+    .cw-dropdown-date-picker-dropdown-menu-_item {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: @dropdown-vertical-padding @control-padding-horizontal;
+        cursor: pointer;
+        transition: all 0.3s;
+        color: @text-color;
+        font-weight: normal;
+        font-size: @dropdown-font-size;
+        line-height: @dropdown-line-height;
+
+        .cw-range-picker-menu-item-calendar {
+            width: 14px;
+            height: 14px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        &.cw-dropdown-date-picker-dropdown-menu-item-selected {
+            background-color: @select-selected-enable-bg;
+        }
+
+        &:hover {
+            background-color: @select-selected-enable-bg;
+        }
+    }
+
+    .cw-dropdown-date-picker-dropdown-menu-item-more {
+        position: relative;
+        justify-content: space-between;
+        overflow: visible;
+
+    }
+
+
+    .cw-dropdown-date-picker-dropdown-menu-more-wrapper {
+        width: 384px;
+        bottom: -30px !important;
+        top: auto !important;
+        left: calc(100% + 2px) !important;
+        box-shadow: @box-shadow-base;
+
+        &.cw-dropdown-date-picker-dropdown-menu-more-wrapper-left {
+            right: calc(100% + 2px) !important;
+            left: auto !important;
+        }
+    }
+}

package/lib/DropdownDatePicker/assets/Calendar2.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+var SvgCalendar = function SvgCalendar(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 12,
+    height: 12,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11.031 1.516H8.734V.64a.11.11 0 0 0-.109-.11h-.766a.11.11 0 0 0-.109.11v.875h-3.5V.64a.11.11 0 0 0-.11-.11h-.765a.11.11 0 0 0-.11.11v.875H.97a.437.437 0 0 0-.438.437v9.078c0 .242.196.438.438.438H11.03a.437.437 0 0 0 .438-.438V1.953a.437.437 0 0 0-.438-.437Zm-.547 8.968H1.516V5.29h8.968v5.195ZM1.516 4.36V2.5h1.75v.656c0 .06.049.11.109.11h.766c.06 0 .109-.05.109-.11V2.5h3.5v.656c0 .06.05.11.11.11h.765c.06 0 .11-.05.11-.11V2.5h1.75v1.86h-8.97Z",
+    fillOpacity: 0.45,
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export default SvgCalendar;

package/lib/DropdownDatePicker/assets/live.js

@@ -0,0 +1,19 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+var SvgLive = function SvgLive(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 14,
+    height: 14,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h14v14H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.937.564a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm1.189 2.507-4.37 3.973c-.151.138-.037.364.186.364h1.736c.156 0 .276.12.25.25l-.618 3.217c-.04.21.266.338.438.183l4.37-3.973c.152-.139.037-.364-.186-.364H8.196c-.157 0-.276-.12-.25-.251l.617-3.217c.041-.21-.265-.338-.437-.182Z",
+    fill: "#52c41a",
+    fillRule: "nonzero"
+  })));
+};
+export default SvgLive;

package/lib/DropdownDatePicker/assets/more.js

@@ -0,0 +1,23 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/*
+ * @Author: andrew.qiao andrew.qiao@cloudwise.com
+ * @Date: 2022-09-13 17:59:38
+ * @LastEditors: andrew.qiao andrew.qiao@cloudwise.com
+ * @LastEditTime: 2022-10-25 14:46:23
+ * @FilePath: /change_01/aops_web_commons/packages/ui/components/CWRangePicker/assets/more.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import * as React from "react";
+var SvgMore = function SvgMore(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 14,
+    height: 14,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M7 .875a6.125 6.125 0 1 1 0 12.25A6.125 6.125 0 0 1 7 .876Zm0 1.04a5.087 5.087 0 1 0 .002 10.173A5.087 5.087 0 0 0 7 1.914ZM7 6.22a.766.766 0 1 1 0 1.531.766.766 0 0 1 0-1.531Zm3.828 0a.766.766 0 1 1 0 1.531.766.766 0 0 1 0-1.531Zm-8.039.102a.766.766 0 1 1 .766 1.326.766.766 0 0 1-.766-1.326Z",
+    fillOpacity: 0.45,
+    fill: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+export default SvgMore;

package/lib/DropdownDatePicker/index.js

@@ -0,0 +1,281 @@
+import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
+import "@chaoswise/ui/lib/Input/index.less";
+import _Input from "@chaoswise/ui/lib/Input";
+import "@chaoswise/ui/lib/DatePicker/index.less";
+import _DatePicker from "@chaoswise/ui/lib/DatePicker";
+import "@chaoswise/ui/lib/RangePicker/index.less";
+import _RangePicker from "@chaoswise/ui/lib/RangePicker";
+import _ConfigProvider from "@chaoswise/ui/lib/ConfigProvider";
+var _excluded = ["inputPrefixIcon", "className"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useState, useEffect, useMemo, useRef } from "react";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import DropDownMenu from "./DropdownMenu";
+import LiveSvg from "./assets/live";
+import { regroupDataSourceFn, echoInputValue } from "./utils";
+import moment from "moment";
+import "./index.less";
+var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var defaultValue = props.defaultValue,
+    value = props.value,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    classNameWrapper = props.classNameWrapper,
+    _props$onChange = props.onChange,
+    _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+    _props$inputOption = props.inputOption,
+    inputOption = _props$inputOption === void 0 ? {} : _props$inputOption,
+    _props$menuOption = props.menuOption,
+    menuOption = _props$menuOption === void 0 ? {} : _props$menuOption,
+    _props$format = props.format,
+    format = _props$format === void 0 ? "YYYY/MM/DD HH:mm:ss" : _props$format,
+    recordDateValueRender = props.recordDateValueRender;
+  var _ConfigProvider$useLo = _ConfigProvider.useLocale(),
+    _ConfigProvider$useLo2 = _ConfigProvider$useLo.locale,
+    locale = _ConfigProvider$useLo2 === void 0 ? "zh" : _ConfigProvider$useLo2;
+  var _menuOption$showCalen = menuOption.showCalendar,
+    showCalendar = _menuOption$showCalen === void 0 ? true : _menuOption$showCalen,
+    _menuOption$isRangePi = menuOption.isRangePickerCalendar,
+    isRangePickerCalendar = _menuOption$isRangePi === void 0 ? true : _menuOption$isRangePi,
+    _menuOption$exceedSho = menuOption.exceedShowInMore,
+    exceedShowInMore = _menuOption$exceedSho === void 0 ? false : _menuOption$exceedSho,
+    _menuOption$showDefau = menuOption.showDefaultCount,
+    showDefaultCount = _menuOption$showDefau === void 0 ? 8 : _menuOption$showDefau,
+    dropdownClassName = menuOption.dropdownClassName,
+    _getPopupContainer = menuOption.getPopupContainer,
+    getPopupContainerCalendar = menuOption.getPopupContainerCalendar,
+    dropdownCalendarClassName = menuOption.dropdownCalendarClassName,
+    open = menuOption.open;
+  var inputPrefixIcon = inputOption.inputPrefixIcon,
+    inputWrapperClassName = inputOption.className,
+    _inputOption = _objectWithoutProperties(inputOption, _excluded);
+  // 输入框是否获取焦点
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocus = _useState2[0],
+    setIsFocus = _useState2[1];
+  // 输入框回填内容
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  // 记录切换之后的时间项
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    recordDateValue = _useState6[0],
+    setRecordDateValue = _useState6[1];
+  // 是否切换到日历选择
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isCalendar = _useState8[0],
+    setIsCalendar = _useState8[1];
+  // 特殊时间选择器外壳容器
+  var calendarRef = useRef(null);
+  // 初始时记录当前时间项
+  useEffect(function () {
+    if (value) {
+      setRecordDateValue(value);
+    } else if (defaultValue) {
+      setRecordDateValue(defaultValue);
+    }
+  }, [defaultValue, value]);
+  // 输入框回显
+  useEffect(function () {
+    setInputValue(echoInputValue(recordDateValue, locale, format, recordDateValueRender));
+  }, [recordDateValue, locale, format, isFocus, recordDateValueRender]);
+
+  // 点击空白处日历切换
+  useEffect(function () {
+    document.addEventListener("click", clickBody);
+    return function () {
+      document.removeEventListener("click", clickBody);
+    };
+  }, []);
+  // 重组数据源
+  var regroupDataSource = useMemo(function () {
+    if (exceedShowInMore) {
+      return regroupDataSourceFn(dataSource);
+    }
+    return regroupDataSourceFn(dataSource.slice(showDefaultCount));
+  }, [dataSource, exceedShowInMore, showDefaultCount]);
+  // 日历模式下点击body
+  var clickBody = function clickBody(e) {
+    var targetCalendar = calendarRef.current.querySelector(".cw-dropdown-date-picker-calendar-wrapper");
+    var targetInput = calendarRef.current.querySelector(".cw-dropdown-date-picker-box-wrapper");
+    if (targetCalendar) {
+      if (!targetCalendar.contains(e.target)) {
+        setIsCalendar(false);
+      }
+    }
+    if (targetInput) {
+      if (!targetInput.contains(e.target)) {
+        setIsFocus(false);
+      }
+    }
+  };
+  // 输入框前缀图标,
+  var inputPrefix = /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-dropdown-date-picker-prefix-wrapper"),
+    onClick: function onClick() {
+      setIsFocus(false);
+    }
+  }, inputPrefixIcon ? inputPrefixIcon : /*#__PURE__*/React.createElement(LiveSvg, {
+    className: classnames("cw-dropdown-date-picker-prefix-icon")
+  }));
+  // 输入框获取焦点
+  var onInputFocus = function onInputFocus(e) {
+    setIsFocus(true);
+  };
+  var dropdownMenuProps = {
+    onChange: _onChange,
+    recordDateValue: recordDateValue,
+    setRecordDateValue: setRecordDateValue,
+    value: value,
+    dataSource: dataSource,
+    regroupDataSource: regroupDataSource,
+    setIsCalendar: setIsCalendar,
+    menuOption: menuOption,
+    setIsFocus: setIsFocus,
+    format: format
+  };
+  var renderInputDom = isCalendar && showCalendar ? isRangePickerCalendar ? /*#__PURE__*/React.createElement(_RangePicker, {
+    open: isCalendar,
+    className: classnames("cw-dropdown-date-picker-calendar-wrapper"),
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return getPopupContainerCalendar ? getPopupContainerCalendar(triggerNode) : triggerNode.parentNode;
+    },
+    style: {
+      width: 0,
+      height: 0,
+      padding: 0,
+      border: 0,
+      overflow: "hidden"
+    },
+    dropdownClassName: classnames(dropdownCalendarClassName),
+    format: format,
+    onChange: function onChange(_value, mode) {
+      setIsCalendar(false);
+      setIsFocus(false);
+      if (_value) {
+        _onChange({
+          value: _value
+        });
+        if (!value) {
+          setRecordDateValue({
+            value: _value
+          });
+        }
+      }
+    },
+    defaultTimeOption: {
+      startTimeOption: moment("00:00:00", "HH:mm:ss"),
+      endTimeOption: moment("23:59:59", "HH:mm:ss")
+    },
+    showTime: {
+      hideDisabledOptions: true
+    }
+  }) : /*#__PURE__*/React.createElement(_DatePicker, {
+    open: isCalendar,
+    className: classnames("cw-dropdown-date-picker-calendar-wrapper"),
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return getPopupContainerCalendar ? getPopupContainerCalendar(triggerNode) : triggerNode.parentNode;
+    },
+    style: {
+      width: 0,
+      height: 0,
+      padding: 0,
+      border: 0,
+      overflow: "hidden"
+    },
+    dropdownClassName: classnames(dropdownCalendarClassName),
+    format: format,
+    onChange: function onChange(_value, mode) {
+      setIsCalendar(false);
+      setIsFocus(false);
+      if (_value) {
+        _onChange({
+          value: [_value]
+        });
+        if (!value) {
+          setRecordDateValue({
+            value: [_value]
+          });
+        }
+      }
+    },
+    inputReadOnly: true
+  }) : null;
+  var _renderInputDom = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input, _extends({
+    prefix: inputPrefix
+  }, _inputOption, {
+    className: classnames("cw-dropdown-date-picker-input-wrapper", inputWrapperClassName),
+    onFocus: onInputFocus,
+    value: inputValue,
+    readonly: "readOnly"
+  })), renderInputDom);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-dropdown-date-picker-wrapper", classNameWrapper),
+    ref: calendarRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-dropdown-date-picker-box-wrapper"
+  }, _renderInputDom, /*#__PURE__*/React.createElement(_Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(DropDownMenu, dropdownMenuProps),
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return _getPopupContainer ? _getPopupContainer(triggerNode) : triggerNode;
+    },
+    visible: open !== undefined ? open && !isCalendar : isFocus && !isCalendar,
+    overlayClassName: classnames("cw-dropdown-date-picker-dropdown", dropdownClassName)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-dropdown-date-picker-position-dom",
+    style: {
+      position: "relative"
+    }
+  }))));
+});
+DropdownDatePicker.defaultProps = {
+  format: "YYYY/MM/DD HH:mm:ss"
+};
+DropdownDatePicker.propTypes = {
+  /**
+   * 默认value
+   */
+  defaultValue: PropTypes.object,
+  /**
+   * 受控value
+   */
+  value: PropTypes.object,
+  /**
+   * 时间数据源
+   */
+  dataSource: PropTypes.array,
+  /**
+   * 时间变化的回调onChange({value,isRecently?timeDomain?number?unit?})
+   */
+  onChange: PropTypes.func,
+  /**
+   * 时间选择器控件下拉菜单配置项，详情参考demo中案例注释
+   */
+  menuOption: PropTypes.object,
+  /**
+   * 时间选择器控件外层容器新增外层容器类名
+   */
+  classNameWrapper: PropTypes.string,
+  /**
+   * 非最近日期format展示格式
+   */
+  format: PropTypes.string,
+  /**
+   * 输入框配置项
+   */
+  inputOption: PropTypes.object
+};
+export default DropdownDatePicker;

package/lib/DropdownDatePicker/index.less

@@ -0,0 +1,34 @@
+.cw-dropdown-date-picker-wrapper {
+    display: flex;
+    align-items: center;
+    .cw-dropdown-date-picker-box-wrapper{
+        display: flex;
+        flex-direction: column;
+    }
+    .cw-dropdown-date-picker-input-wrapper {
+        width: 360px;
+        .@{ant-prefix}-input{
+            outline: none;
+        }
+        .@{ant-prefix}-input:not(:first-child) {
+            padding-left: 29px;
+        }
+
+        // 前缀尾缀图标共同样式
+        .cw-dropdown-date-picker-prefix-wrapper,
+        .cw-dropdown-date-picker-suffix-wrapper {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .cw-dropdown-date-picker-prefix-icon{
+            color: @menu-dark-arrow-color;
+        }
+    }
+
+    .cw-dropdown-date-picker-calendar-wrapper {
+        width: 360px;
+    }
+}

package/lib/DropdownDatePicker/locale/en_US.js

@@ -0,0 +1,20 @@
+export default {
+  s: "Second",
+  m: "Minute",
+  h: "Hour",
+  d: "Day",
+  mo: "Month",
+  y: "Year",
+  more: "More",
+  "select-calendar": "Select From Calendar",
+  recently: "recently",
+  relative: "relative",
+  absolute: "absolute",
+  unixTimestamp: "Unix",
+  other: "other",
+  history: 'History',
+  clear: 'Clear',
+  "enter manually": "You can manually enter a query statement in the following format",
+  "fit-the-input-format": "Fit the input format",
+  "does-not-match-the-input-format": "Does not match the input format"
+};

package/lib/DropdownDatePicker/locale/index.js

@@ -0,0 +1,12 @@
+import zhCN from './zh_CN.js';
+import enUS from './en_US.js';
+export var getLocale = function getLocale(locale) {
+  switch (locale) {
+    case 'zh':
+      return zhCN;
+    case 'en':
+      return enUS;
+    default:
+      return zhCN;
+  }
+};

package/lib/DropdownDatePicker/locale/zh_CN.js

@@ -0,0 +1,20 @@
+export default {
+  s: "秒",
+  m: "分钟",
+  h: "小时",
+  d: "天",
+  mo: "个月",
+  y: "年",
+  more: "更多",
+  "select-calendar": "日历选择",
+  recently: "最近",
+  relative: "相对",
+  absolute: "绝对",
+  unixTimestamp: "Unix",
+  other: "其他",
+  history: '历史记录',
+  clear: '清空',
+  "enter manually": "可根据以下类型，按查询语句格式手动输入",
+  "fit-the-input-format": "符合输入格式",
+  "does-not-match-the-input-format": "不符合输入格式,请重新输入"
+};