@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/date-picker/components/RangePanel.js

@@ -1,353 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Header = _interopRequireDefault(require("./Header"));
-
-var _Calender = _interopRequireDefault(require("./Calender"));
-
-var _moment = _interopRequireDefault(require("moment"));
-
-var _context = _interopRequireDefault(require("../context"));
-
-var _TimePanel = _interopRequireDefault(require("./TimePanel"));
-
-var _hooks = require("../hooks");
-
-var _TimePeriodPanel = _interopRequireDefault(require("./TimePeriodPanel"));
-
-var _lodash = _interopRequireDefault(require("lodash"));
-
-var _utils = require("../utils");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var RangePanel = function RangePanel() {
-  var _useContext = (0, _react.useContext)(_context["default"]),
-      outDate = _useContext.outDate,
-      type = _useContext.type,
-      onPick = _useContext.onPick,
-      localeDatas = _useContext.localeDatas,
-      showTime = _useContext.showTime,
-      format = _useContext.format,
-      timeInterval = _useContext.timeInterval,
-      shortcuts = _useContext.shortcuts,
-      weekOffset = _useContext.weekOffset,
-      theme = _useContext.theme,
-      locale = _useContext.locale,
-      onSelect = _useContext.onSelect;
-
-  var calenderClickIsEnd = (0, _react.useRef)(false);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      showRangeMask = _useState2[0],
-      setShowRangeMask = _useState2[1];
-
-  var _useState3 = (0, _react.useState)([(0, _utils.getView)(type), (0, _utils.getView)(type)]),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      views = _useState4[0],
-      setViews = _useState4[1];
-
-  var _useFormat = (0, _hooks.useFormat)({
-    format: format,
-    type: type,
-    showTime: showTime,
-    locale: locale
-  }),
-      _useFormat2 = (0, _slicedToArray2["default"])(_useFormat, 1),
-      iFormat = _useFormat2[0];
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      calRenderDates = _useState6[0],
-      setCalRenderDates = _useState6[1];
-
-  var _useState7 = (0, _react.useState)({
-    start: null,
-    end: null,
-    selecting: false
-  }),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      range = _useState8[0],
-      setRange = _useState8[1];
-
-  (0, _react.useEffect)(function () {
-    var _outDate = _lodash["default"].cloneDeep(outDate);
-
-    setRange({
-      start: _outDate[0],
-      end: _outDate[1],
-      selecting: _outDate[0] && !_outDate[1]
-    });
-  }, [outDate]);
-  (0, _react.useEffect)(function () {
-    setCalRenderDates((0, _utils.parseRenderDates)(outDate, type));
-  }, [outDate, type]);
-  /**
-   * Header 部分点击事件
-   */
-
-  var changeViewEvent = (0, _react.useCallback)(function (uIndex) {
-    setViews(function (pre) {
-      var p = (0, _toConsumableArray2["default"])(pre);
-      p[uIndex] = 'year';
-      return p;
-    });
-  }, [type]);
-
-  var setRanges = function setRanges(date) {
-    var newRange = _objectSpread({}, range);
-
-    if (range.selecting || !calenderClickIsEnd.current) {
-      if (newRange.start >= date) {
-        newRange.selecting = false;
-        newRange.end = newRange.start;
-        newRange.start = date;
-      }
-
-      onSelect(date, calenderClickIsEnd);
-
-      if (type === 'weekrange') {
-        var weekMethod = weekOffset ? 'isoWeek' : 'week';
-        onPick([newRange.start.startOf(weekMethod), newRange.end.endOf(weekMethod)], showTime);
-      } else {
-        onPick([newRange.start, newRange.end], showTime);
-      }
-    } else {
-      newRange.selecting = true;
-      newRange.start = date;
-      newRange.end = null;
-      onSelect(date, false);
-    }
-
-    setRange(newRange);
-  };
-  /**
-   * 日历面板点击事件
-   * @param {*} date
-   * @param {*} dir
-   */
-
-
-  var onCalenderPick = function onCalenderPick(date, uIndex) {
-    calenderClickIsEnd.current = !calenderClickIsEnd.current;
-
-    if (type === 'timeperiod' && views[uIndex] === 'date') {
-      onPick([date, (0, _moment["default"])(date).hour(date.hour() + timeInterval / 60)], true);
-      onSelect(date, true);
-      return;
-    }
-
-    if (type.includes(views[uIndex]) || type === 'weekrange') {
-      setRanges(date);
-    } else {
-      var _innerDates = (0, _utils.genNewDates)(calRenderDates, date, uIndex);
-
-      setCalRenderDates(_innerDates);
-    }
-
-    var _views = _lodash["default"].cloneDeep(views);
-
-    if (views[uIndex] === 'month' && !type.includes('month')) {
-      _views[uIndex] = 'date';
-    }
-
-    if (views[uIndex] === 'year' && !type.includes('year')) {
-      _views[uIndex] = 'month';
-    }
-
-    setViews(_views);
-  };
-
-  var onMouseMove = function onMouseMove(date) {
-    setRange(_objectSpread(_objectSpread({}, range), {}, {
-      end: date
-    }));
-  };
-
-  var onTimeChange = function onTimeChange(date, cIndex) {
-    var _innerDates = _lodash["default"].cloneDeep([range.start, range.end]);
-
-    _innerDates[cIndex] = date;
-    onPick(_innerDates, true);
-  };
-
-  var getRangeDateStr = function getRangeDateStr() {
-    var _format = iFormat.substr(iFormat.match(/[H|h]\s*/).index);
-
-    var cls = (0, _classnames["default"])(showRangeMask && 'hi-datepicker__timetext');
-    var startOfDay = (0, _moment["default"])().startOf('day').format(_format);
-    var endOfDay = (0, _moment["default"])().endOf('day').format(_format);
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      className: cls
-    }, "".concat(range.start ? range.start.format(_format) : startOfDay, " - ").concat(range.end ? range.end.format(_format) : endOfDay));
-  };
-
-  var onArrowEvent = function onArrowEvent(date, index) {
-    var _innerDates = (0, _utils.genNewDates)(calRenderDates, date, index);
-
-    if (type.includes('range') && _innerDates[0].isSameOrAfter(_innerDates[1], 'month')) {
-      return;
-    }
-
-    setCalRenderDates(_innerDates);
-  };
-
-  var onTimePeriodPick = (0, _react.useCallback)(function (ts1, ts2) {
-    var _$cloneDeep = _lodash["default"].cloneDeep(calRenderDates),
-        _$cloneDeep2 = (0, _slicedToArray2["default"])(_$cloneDeep, 1),
-        leftDate = _$cloneDeep2[0];
-
-    if (outDate[0]) {
-      onPick([(0, _moment["default"])(leftDate).hour(parseInt(ts1)).minute((0, _moment["default"])(ts1, 'HH:mm').format('mm')).second(0), (0, _moment["default"])(leftDate).hour(parseInt(ts2)).minute((0, _moment["default"])(ts2, 'HH:mm').format('mm')).second(0)]);
-    }
-  }, [calRenderDates]);
-
-  var shortcutsClickEvent = function shortcutsClickEvent(item) {
-    if (item.range) {
-      // 新版 shortcuts
-      onPick([(0, _moment["default"])(item.range[0]), (0, _moment["default"])(item.range[1])]);
-    } else {
-      // 旧版
-      var days;
-      var currentDate = (0, _moment["default"])();
-
-      switch (item) {
-        case localeDatas.datePicker.lastWeek:
-          days = 7;
-          break;
-
-        case localeDatas.datePicker.lastMonth:
-          days = 30;
-          break;
-
-        case localeDatas.datePicker.lastThreeMonth:
-          days = 90;
-          break;
-
-        default:
-          days = 365;
-          break;
-      }
-
-      var startDate = (0, _moment["default"])().subtract(days, 'days');
-      onPick([startDate, currentDate]);
-    }
-  };
-
-  var renderShortcut = function renderShortcut() {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "hi-datepicker__shortcuts"
-    }, /*#__PURE__*/_react["default"].createElement("ul", {
-      className: "hi-datepicker__shortcuts-list"
-    }, shortcuts.map(function (m, n) {
-      return /*#__PURE__*/_react["default"].createElement("li", {
-        className: "hi-datepicker__shortcuts-item",
-        key: n,
-        onClick: function onClick() {
-          return shortcutsClickEvent(m);
-        }
-      }, m.title || m);
-    })));
-  };
-
-  var isDisableFooter = range.start && range.end && !range.selecting;
-  var panelCls = (0, _classnames["default"])('hi-datepicker__panel', "theme__".concat(theme), type.includes('range') && 'hi-datepicker__panel--range', type === 'timeperiod' && 'hi-datepicker__panel--timeperiod', (showTime || type === 'timeperiod') && 'hi-datepicker__panel--noshadow');
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: panelCls
-  }, shortcuts && renderShortcut(), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-datepicker__panel--left"
-  }, calRenderDates[0] && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    renderDate: calRenderDates[0],
-    renderDates: calRenderDates,
-    changeView: function changeView() {
-      return changeViewEvent(0);
-    },
-    onArrowEvent: onArrowEvent,
-    localeDatas: localeDatas,
-    view: views[0],
-    panelPosition: 0,
-    type: type,
-    locale: locale
-  }), /*#__PURE__*/_react["default"].createElement(_Calender["default"], {
-    renderDate: calRenderDates[0],
-    originDate: outDate[0],
-    onPick: function onPick(date) {
-      return onCalenderPick(date, 0);
-    },
-    view: views[0],
-    range: range,
-    mouseMove: onMouseMove,
-    panelPosition: "left"
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-datepicker__panel--right"
-  }, calRenderDates[1] && (type === 'timeperiod' ? /*#__PURE__*/_react["default"].createElement(_TimePeriodPanel["default"], {
-    date: calRenderDates[0],
-    onTimePeriodPick: onTimePeriodPick
-  }) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
-    renderDate: calRenderDates[1],
-    changeView: function changeView() {
-      return changeViewEvent(1);
-    },
-    onArrowEvent: onArrowEvent,
-    localeDatas: localeDatas,
-    view: views[1],
-    leftDate: calRenderDates[0],
-    panelPosition: 1,
-    type: type,
-    locale: locale
-  }), /*#__PURE__*/_react["default"].createElement(_Calender["default"], {
-    originDate: outDate[1],
-    renderDate: calRenderDates[1],
-    range: range,
-    view: views[1],
-    onPick: function onPick(date) {
-      return onCalenderPick(date, 1);
-    },
-    mouseMove: onMouseMove,
-    leftDate: calRenderDates[0],
-    panelPosition: "right"
-  }))))), type === 'daterange' && showTime && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-datepicker__footer ".concat(!isDisableFooter ? 'hi-datepicker__footer--disable' : ''),
-    onClick: function onClick() {
-      isDisableFooter && setShowRangeMask(true);
-    }
-  }, getRangeDateStr()), showRangeMask && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-datepicker__mask",
-    onClick: function onClick() {
-      return setShowRangeMask(false);
-    }
-  }), /*#__PURE__*/_react["default"].createElement(_TimePanel["default"], {
-    dates: [range.start, range.end],
-    onTimeChange: onTimeChange,
-    style: {
-      position: 'absolute',
-      top: 5,
-      left: '50%',
-      transform: 'translateX(-50%)'
-    }
-  })));
-};
-
-var _default = RangePanel;
-exports["default"] = _default;

package/es/date-picker/components/Root.js

@@ -1,128 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Input = _interopRequireDefault(require("./Input"));
-
-var _PickerIcon = _interopRequireDefault(require("./PickerIcon"));
-
-var _context = _interopRequireDefault(require("../context"));
-
-var _hooks = require("../hooks");
-
-var _utils = require("../utils");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var Root = function Root(_ref) {
-  var onTrigger = _ref.onTrigger,
-      onMouseEnter = _ref.onMouseEnter,
-      onMouseLeave = _ref.onMouseLeave,
-      children = _ref.children,
-      inputChangeEvent = _ref.inputChangeEvent,
-      onClear = _ref.onClear,
-      inputFocus = _ref.inputFocus,
-      rangeInputIsError = _ref.rangeInputIsError;
-
-  var _useContext = (0, _react.useContext)(_context["default"]),
-      localeDatas = _useContext.localeDatas,
-      type = _useContext.type,
-      outDate = _useContext.outDate,
-      placeholder = _useContext.placeholder,
-      showTime = _useContext.showTime,
-      disabled = _useContext.disabled,
-      clearable = _useContext.clearable,
-      theme = _useContext.theme,
-      width = _useContext.width,
-      value = _useContext.value,
-      format = _useContext.format,
-      bordered = _useContext.bordered,
-      weekOffset = _useContext.weekOffset,
-      locale = _useContext.locale;
-
-  var _useState = (0, _react.useState)(outDate),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      inputData = _useState2[0],
-      setInputData = _useState2[1];
-
-  var inputRef = (0, _react.useRef)(null);
-  var placeholders = (0, _hooks.usePlaceholder)({
-    type: type,
-    showTime: showTime,
-    placeholder: placeholder,
-    localeDatas: localeDatas
-  });
-  (0, _react.useEffect)(function () {
-    setInputData(value ? (0, _utils.parseValue)(value, type, format, weekOffset, locale) : outDate);
-  }, [outDate, value, weekOffset]);
-
-  var onPickerClickEvent = function onPickerClickEvent() {
-    onTrigger();
-  };
-
-  var pickerIconClick = function pickerIconClick(isClear) {
-    if (isClear) {
-      onClear();
-      return;
-    }
-
-    onPickerClickEvent();
-  };
-
-  var _cls = (0, _classnames["default"])('hi-datepicker__picker', "theme__".concat(theme), "hi-datepicker__picker--".concat(type), inputFocus && 'hi-datepicker__picker--focus', disabled && 'hi-datepicker__picker--disabled', showTime && 'hi-datepicker__picker--hastime', rangeInputIsError && 'hi-datepicker__picker--error', {
-    bordered: bordered
-  });
-
-  var renderRange = type.includes('range') || type === 'timeperiod';
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _cls,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    ref: inputRef,
-    style: {
-      width: width
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "hi-datepicker__input",
-    style: {
-      width: width
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
-    date: inputData[0],
-    placeholder: placeholders[0],
-    onChange: inputChangeEvent,
-    onFocus: onPickerClickEvent,
-    dir: 0
-  }), renderRange && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "hi-datepicker__input--connection"
-  }, localeDatas.datePicker.to), /*#__PURE__*/_react["default"].createElement(_Input["default"], {
-    date: inputData[1],
-    placeholder: placeholders[1],
-    onChange: inputChangeEvent,
-    onFocus: onPickerClickEvent,
-    dir: 1
-  })), /*#__PURE__*/_react["default"].createElement(_PickerIcon["default"], {
-    focus: inputFocus,
-    type: type,
-    showTime: showTime,
-    disabled: disabled,
-    clearable: clearable,
-    onClick: pickerIconClick
-  }), /*#__PURE__*/_react["default"].cloneElement(children, {
-    attachEle: inputRef.current
-  })));
-};
-
-var _default = Root;
-exports["default"] = _default;