@kdcloudjs/kdesign 1.0.2

package/lib/date-picker/date-picker.js

@@ -0,0 +1,487 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _parse = _interopRequireDefault(require("date-fns/parse"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _hooks = require("../_utils/hooks");
+
+var _utils = require("../_utils");
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _datePanel = _interopRequireDefault(require("./date-panel"));
+
+var _inputDate = _interopRequireDefault(require("./single/input-date"));
+
+var _utils2 = require("./utils");
+
+var _useValueTexts = _interopRequireDefault(require("./hooks/use-value-texts"));
+
+var _useHoverValue3 = _interopRequireDefault(require("./hooks/use-hover-value"));
+
+var _dateFns = require("./utils/date-fns");
+
+var _useTextValueMapping3 = _interopRequireDefault(require("./hooks/use-text-value-mapping"));
+
+var _locale = require("../locale");
+
+var _getExtraFooter = _interopRequireDefault(require("./utils/get-extra-footer"));
+
+var _getRanges = _interopRequireDefault(require("./utils/get-ranges"));
+
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function DatePicker(props) {
+  var customPrefixcls = props.prefixCls;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps,
+      globalLocale = _useContext.locale;
+
+  var datePickerProps = (0, _utils.getCompProps)('DatePicker', userDefaultProps, props);
+  var datePickerPrefixCls = getPrefixCls(prefixCls, 'date-picker', customPrefixcls);
+  var id = datePickerProps.id,
+      style = datePickerProps.style,
+      className = datePickerProps.className,
+      dropdownClassName = datePickerProps.dropdownClassName,
+      popupStyle = datePickerProps.popupStyle,
+      locale = datePickerProps.locale,
+      inputReadOnly = datePickerProps.inputReadOnly,
+      allowClear = datePickerProps.allowClear,
+      autoFocus = datePickerProps.autoFocus,
+      _datePickerProps$pick = datePickerProps.picker,
+      picker = _datePickerProps$pick === void 0 ? 'date' : _datePickerProps$pick,
+      mode = datePickerProps.mode,
+      format = datePickerProps.format,
+      value = datePickerProps.value,
+      defaultValue = datePickerProps.defaultValue,
+      defaultPickerValue = datePickerProps.defaultPickerValue,
+      open = datePickerProps.open,
+      defaultOpen = datePickerProps.defaultOpen,
+      suffixIcon = datePickerProps.suffixIcon,
+      clearIcon = datePickerProps.clearIcon,
+      disabled = datePickerProps.disabled,
+      placeholder = datePickerProps.placeholder,
+      borderType = datePickerProps.borderType,
+      size = datePickerProps.size,
+      showToday = datePickerProps.showToday,
+      showTime = datePickerProps.showTime,
+      showNow = datePickerProps.showNow,
+      use12Hours = datePickerProps.use12Hours,
+      components = datePickerProps.components,
+      _datePickerProps$hour = datePickerProps.hourStep,
+      hourStep = _datePickerProps$hour === void 0 ? 1 : _datePickerProps$hour,
+      _datePickerProps$minu = datePickerProps.minuteStep,
+      minuteStep = _datePickerProps$minu === void 0 ? 1 : _datePickerProps$minu,
+      _datePickerProps$seco = datePickerProps.secondStep,
+      secondStep = _datePickerProps$seco === void 0 ? 1 : _datePickerProps$seco,
+      disabledDate = datePickerProps.disabledDate,
+      disabledHours = datePickerProps.disabledHours,
+      disabledMinutes = datePickerProps.disabledMinutes,
+      disabledSeconds = datePickerProps.disabledSeconds,
+      panelRender = datePickerProps.panelRender,
+      renderExtraFooter = datePickerProps.renderExtraFooter,
+      onChange = datePickerProps.onChange,
+      onSelect = datePickerProps.onSelect,
+      onOpenChange = datePickerProps.onOpenChange,
+      onFocus = datePickerProps.onFocus,
+      onBlur = datePickerProps.onBlur,
+      onMouseDown = datePickerProps.onMouseDown,
+      onMouseUp = datePickerProps.onMouseUp,
+      onMouseEnter = datePickerProps.onMouseEnter,
+      onMouseLeave = datePickerProps.onMouseLeave,
+      onContextMenu = datePickerProps.onContextMenu,
+      onClick = datePickerProps.onClick,
+      _onOk = datePickerProps.onOk; // ref
+
+  var panelDivRef = _react.default.useRef(null);
+
+  var inputDivRef = _react.default.useRef(null);
+
+  var popperRef = _react.default.useRef(null);
+
+  var inputRef = _react.default.useRef(null);
+
+  var isHourStepValid = 24 % hourStep === 0;
+  var isMinuteStepValid = 60 % minuteStep === 0;
+  var isSecondStepValid = 60 % secondStep === 0; // const hours = generateUnits(0, 23, hourStep, disabledHours && disabledHours())
+  // const minutes = generateUnits(0, 59, minuteStep, disabledMinutes && disabledMinutes(originHour))
+  // const seconds = generateUnits(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute))
+
+  var needConfirmButton = picker === 'date' && !!showTime || picker === 'time';
+  var datePickerLang = locale ? (0, _locale.getCompLangMsg)({
+    componentName: 'DatePicker'
+  }, function (_componentName, label) {
+    return locale[label];
+  }) : globalLocale.getCompLangMsg({
+    componentName: 'DatePicker'
+  }); // console.log(_format)
+  // 原始数据
+
+  var _useMergedState = (0, _hooks.useMergedState)(null, {
+    value: value,
+    defaultValue: defaultValue
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      dateValue = _useMergedState2[0],
+      setDateValue = _useMergedState2[1]; // 选中的数据
+
+
+  var _React$useState = _react.default.useState(dateValue),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      selectedValue = _React$useState2[0],
+      setSelectedValue = _React$useState2[1];
+
+  var hours;
+  var minutes;
+  var seconds;
+  var originHour;
+  var minute;
+  var second;
+  var disabledTimePanel = false;
+
+  if (picker === 'time' || picker === 'date' && showTime) {
+    originHour = selectedValue ? (0, _dateFns.getHours)(selectedValue) : -1;
+    minute = selectedValue ? (0, _dateFns.getMinutes)(selectedValue) : -1;
+    second = selectedValue ? (0, _dateFns.getSeconds)(selectedValue) : -1;
+    hours = (0, _utils2.generateUnits)(0, 23, hourStep, disabledHours && disabledHours());
+    minutes = (0, _utils2.generateUnits)(0, 59, minuteStep, disabledMinutes && disabledMinutes(originHour));
+    seconds = (0, _utils2.generateUnits)(0, 59, secondStep, disabledSeconds && disabledSeconds(originHour, minute));
+
+    if (hours && !(0, _find.default)(hours).call(hours, function (n) {
+      return !n.disabled;
+    }) || minutes && !(0, _find.default)(minutes).call(minutes, function (n) {
+      return !n.disabled;
+    }) || seconds && !(0, _find.default)(seconds).call(seconds, function (n) {
+      return !n.disabled;
+    })) {
+      disabledTimePanel = true;
+    }
+  }
+
+  var _format = (0, _utils2.getDefaultFormat)(format, picker, showTime && !disabledTimePanel, use12Hours); // 面板展示日期
+
+
+  var _useMergedState3 = (0, _hooks.useMergedState)(null, {
+    // value: pickerValue,
+    defaultValue: defaultPickerValue || dateValue,
+    postState: function postState(date) {
+      return date || (0, _dateFns.newDate)();
+    }
+  }),
+      _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+      viewDate = _useMergedState4[0],
+      setViewDate = _useMergedState4[1]; // text
+
+
+  var valueText = (0, _useValueTexts.default)(selectedValue, {
+    format: _format
+  }); // input 展示
+
+  var _useTextValueMapping = (0, _useTextValueMapping3.default)({
+    valueText: valueText,
+    onTextChange: function onTextChange(newText) {
+      // if (typeof _format !== 'function') {
+      var inputDate;
+
+      if (picker !== 'year') {
+        inputDate = (0, _dateFns.parseDate)(newText, _format);
+      } else {
+        var year = (0, _parse.default)(newText, _format, (0, _dateFns.newDate)());
+        inputDate = (0, _dateFns.isValid)(year) ? year : null;
+      }
+
+      if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
+        setSelectedValue(inputDate);
+        setViewDate(inputDate);
+      }
+    }
+  }),
+      _useTextValueMapping2 = (0, _slicedToArray2.default)(_useTextValueMapping, 3),
+      text = _useTextValueMapping2[0],
+      triggerTextChange = _useTextValueMapping2[1],
+      resetText = _useTextValueMapping2[2];
+
+  var _useHoverValue = (0, _useHoverValue3.default)(text, {
+    format: _format
+  }),
+      _useHoverValue2 = (0, _slicedToArray2.default)(_useHoverValue, 3),
+      hoverValue = _useHoverValue2[0],
+      onEnter = _useHoverValue2[1],
+      onLeave = _useHoverValue2[2];
+
+  var _useMergedState5 = (0, _hooks.useMergedState)(false, {
+    value: open,
+    defaultValue: defaultOpen,
+    postState: function postState(postOpen) {
+      return disabled ? false : postOpen;
+    },
+    onChange: function onChange(newOpen) {
+      if (onOpenChange) {
+        onOpenChange(newOpen);
+      } // if (!newOpen && operationRef.current && operationRef.current.onClose) {
+      //   operationRef.current.onClose()
+      // }
+
+    }
+  }),
+      _useMergedState6 = (0, _slicedToArray2.default)(_useMergedState5, 2),
+      openValue = _useMergedState6[0],
+      triggerInnerOpen = _useMergedState6[1]; // Save panel is changed from which panel
+
+
+  var _useMergedState7 = (0, _hooks.useMergedState)(function () {
+    if (picker === 'time') {
+      return 'time';
+    }
+
+    return (0, _utils2.getInternalNextMode)('date', picker);
+  }, {
+    value: mode
+  }),
+      _useMergedState8 = (0, _slicedToArray2.default)(_useMergedState7, 2),
+      mergedMode = _useMergedState8[0],
+      setInnerMode = _useMergedState8[1];
+
+  (0, _react.useEffect)(function () {
+    setInnerMode(picker);
+  }, [picker]);
+  (0, _react.useEffect)(function () {
+    if (!openValue) {
+      setSelectedValue(dateValue);
+
+      if (valueText === '') {
+        triggerTextChange('');
+      } else if (valueText !== text) {
+        resetText();
+      }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [openValue, valueText]);
+  (0, _react.useEffect)(function () {
+    if (!openValue) {
+      resetText();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [picker]);
+  (0, _react.useEffect)(function () {
+    setSelectedValue(dateValue);
+  }, [dateValue]);
+  (0, _hooks.useOnClickOutside)([popperRef, inputDivRef], function () {
+    setViewDate(selectedValue || (0, _dateFns.newDate)());
+    triggerOpen(false);
+  });
+
+  var triggerChange = function triggerChange(newValue) {
+    setSelectedValue(newValue);
+    setDateValue(newValue);
+
+    if (onSelect) {
+      onSelect(newValue);
+    }
+
+    if (onChange && !(0, _dateFns.isEqual)(dateValue, newValue)) {
+      onChange(newValue, newValue ? (0, _dateFns.formatDate)(newValue, _format) : '');
+    }
+  };
+
+  var triggerOpen = function triggerOpen(newOpen) {
+    if (disabled && newOpen) {
+      return;
+    }
+
+    triggerInnerOpen(newOpen);
+  };
+
+  var onContextSelect = function onContextSelect(date, type) {
+    if (type === 'submit' || type !== 'key' && !needConfirmButton) {
+      setViewDate(date);
+      triggerChange(date);
+      triggerOpen(false);
+    } else {
+      setViewDate(date);
+      triggerChange(date);
+    }
+  };
+
+  var onNow = function onNow() {
+    var now = (0, _dateFns.newDate)();
+    var lowerBoundTime = (0, _dateFns.getLowerBoundTime)((0, _dateFns.getHours)(now), (0, _dateFns.getMinutes)(now), (0, _dateFns.getSeconds)(now), isHourStepValid ? hourStep : 1, isMinuteStepValid ? minuteStep : 1, isSecondStepValid ? secondStep : 1);
+    var adjustedNow = (0, _dateFns.setTime)(now, {
+      hour: lowerBoundTime[0],
+      minute: lowerBoundTime[1],
+      second: lowerBoundTime[2]
+    });
+
+    if (disabledDate && disabledDate(adjustedNow) || disabledTimePanel) {
+      return;
+    }
+
+    onContextSelect(adjustedNow, 'submit');
+  };
+
+  var extraFooter = (0, _getExtraFooter.default)(datePickerPrefixCls, mergedMode, renderExtraFooter);
+  var rangesNode = (0, _getRanges.default)({
+    prefixCls: datePickerPrefixCls,
+    components: components,
+    needConfirmButton: needConfirmButton,
+    okDisabled: !selectedValue || disabledDate && disabledDate(selectedValue),
+    locale: datePickerLang,
+    showNow: showNow,
+    onNow: needConfirmButton && onNow,
+    onOk: function onOk() {
+      if (selectedValue) {
+        onContextSelect(selectedValue, 'submit');
+
+        if (_onOk) {
+          _onOk(selectedValue);
+        }
+      }
+    }
+  });
+  var todayNode;
+
+  if (showToday && mergedMode === 'date' && picker === 'date' && !showTime) {
+    var now = (0, _dateFns.newDate)();
+    var todayCls = "".concat(datePickerPrefixCls, "-today-btn");
+
+    var _disabled = disabledDate && disabledDate(now);
+
+    todayNode = /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(todayCls, _disabled && "".concat(datePickerPrefixCls, "-btn-disabled")),
+      "aria-disabled": _disabled,
+      onClick: function onClick() {
+        if (!_disabled) {
+          onContextSelect(now, 'mouse');
+        }
+      }
+    }, datePickerLang.today);
+  }
+
+  var panelProps = (0, _extends2.default)((0, _extends2.default)({}, datePickerProps), {
+    format: _format,
+    onChange: setSelectedValue
+  }); // 渲染日期选择表盘
+
+  function renderPanel() {
+    var panelNode = /*#__PURE__*/_react.default.createElement(_datePanel.default, (0, _extends2.default)({}, panelProps));
+
+    if (panelRender) {
+      panelNode = panelRender(panelNode);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+      value: {
+        hours: hours,
+        minutes: minutes,
+        seconds: seconds,
+        originHour: originHour,
+        minute: minute,
+        second: second,
+        disabledTimePanel: disabledTimePanel,
+        prefixCls: datePickerPrefixCls,
+        dateValue: selectedValue,
+        viewDate: viewDate,
+        open: openValue,
+        locale: datePickerLang,
+        onSelect: onContextSelect,
+        setViewDate: setViewDate,
+        onDateMouseEnter: onEnter,
+        onDateMouseLeave: onLeave
+      }
+    }, panelNode, extraFooter || rangesNode || todayNode ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(datePickerPrefixCls, "-footer")
+    }, extraFooter, rangesNode, todayNode) : null);
+  }
+
+  var inputProps = {
+    inputRef: inputRef,
+    panelDivRef: panelDivRef,
+    id: id,
+    autoFocus: autoFocus,
+    allowClear: allowClear,
+    className: className,
+    borderType: borderType,
+    disabled: disabled,
+    hoverValue: hoverValue,
+    picker: picker,
+    placeholder: placeholder,
+    style: style,
+    size: size,
+    text: text,
+    needConfirmButton: needConfirmButton,
+    suffixIcon: suffixIcon,
+    clearIcon: clearIcon,
+    dateValue: dateValue,
+    selectedValue: selectedValue,
+    format: _format,
+    open: openValue,
+    readOnly: inputReadOnly,
+    prefixCls: datePickerPrefixCls,
+    locale: datePickerLang,
+    dataOrAriaProps: (0, _utils2.getDataOrAriaProps)(datePickerProps),
+    disabledDate: disabledDate,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseDown: onMouseDown,
+    onMouseUp: onMouseUp,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onContextMenu: onContextMenu,
+    onClick: onClick,
+    setSelectedValue: setSelectedValue,
+    triggerTextChange: triggerTextChange,
+    triggerOpen: triggerOpen,
+    triggerChange: triggerChange,
+    resetText: resetText
+  };
+  return (0, _usePopper.default)( /*#__PURE__*/_react.default.createElement(_inputDate.default, (0, _extends2.default)({
+    ref: inputDivRef
+  }, inputProps)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: popperRef,
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    }
+  }, renderPanel()), {
+    trigger: 'click',
+    prefixCls: "".concat(datePickerPrefixCls, "-panel"),
+    arrow: false,
+    popperClassName: dropdownClassName,
+    popperStyle: popupStyle,
+    visible: openValue,
+    placement: 'bottomLeft'
+  });
+}
+
+var _default = DatePicker;
+exports.default = _default;

package/lib/date-picker/hooks/use-hover-value.d.ts

@@ -0,0 +1,3 @@
+import { DateType } from '../interface';
+import { ValueTextConfig } from './use-value-texts';
+export default function useHoverValue(valueText: string, { format }: ValueTextConfig): [string, (date: DateType) => void, (immediately?: boolean) => void];

package/lib/date-picker/hooks/use-hover-value.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useHoverValue;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
+
+var _react = require("react");
+
+var _useValueTexts = _interopRequireDefault(require("./use-value-texts"));
+
+function useHoverValue(valueText, _ref) {
+  var format = _ref.format;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      internalSetValue = _useState2[1];
+
+  var ref = (0, _react.useRef)();
+
+  function setValue(val) {
+    var immediately = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    (0, _isNumber.default)(ref.current) && cancelAnimationFrame(ref.current);
+
+    if (immediately) {
+      internalSetValue(val);
+      return;
+    }
+
+    ref.current = requestAnimationFrame(function () {
+      internalSetValue(val);
+    });
+  }
+
+  var valueTexts = (0, _useValueTexts.default)(value, {
+    format: format
+  });
+
+  function onEnter(date) {
+    setValue(date);
+  }
+
+  function onLeave() {
+    var immediately = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setValue(null, immediately);
+  }
+
+  (0, _react.useEffect)(function () {
+    onLeave(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueText]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if ((0, _isNumber.default)(ref.current)) {
+        return cancelAnimationFrame(ref.current);
+      }
+    };
+  }, []);
+  return [valueTexts, onEnter, onLeave];
+}

package/lib/date-picker/hooks/use-picker-input.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export default function usePickerInput({ preventBlurRef, open, value, isClickOutside, triggerOpen, blurToCancel, onSubmit, onCancel, onFocus, onBlur, }: {
+    preventBlurRef: React.RefObject<boolean>;
+    open: boolean;
+    value: string;
+    isClickOutside: (clickElement: EventTarget | null) => boolean;
+    triggerOpen: (open: boolean) => void;
+    blurToCancel?: boolean;
+    onSubmit: () => void | boolean;
+    onCancel: () => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}): [React.DOMAttributes<HTMLInputElement>, {
+    focused: boolean;
+    typing: boolean;
+}];

package/lib/date-picker/hooks/use-picker-input.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePickerInput;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// import KeyCode from '../../_utils/KeyCode'
+function usePickerInput(_ref) {
+  var preventBlurRef = _ref.preventBlurRef,
+      open = _ref.open,
+      value = _ref.value,
+      isClickOutside = _ref.isClickOutside,
+      triggerOpen = _ref.triggerOpen,
+      blurToCancel = _ref.blurToCancel,
+      onSubmit = _ref.onSubmit,
+      onCancel = _ref.onCancel,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      typing = _useState2[0],
+      setTyping = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var valueChangedRef = (0, _react.useRef)(false);
+  var inputProps = {
+    onMouseDown: function onMouseDown() {
+      setTyping(true);
+      triggerOpen(true);
+    },
+    // onKeyDown: (e) => {
+    //   switch (e.which) {
+    //     case KeyCode.ENTER: {
+    //       if (!open) {
+    //         triggerOpen(true)
+    //       } else if (onSubmit() !== false) {
+    //         setTyping(true)
+    //       }
+    //       e.preventDefault()
+    //       return
+    //     }
+    //     case KeyCode.TAB: {
+    //       if (typing && open && !e.shiftKey) {
+    //         setTyping(false)
+    //         e.preventDefault()
+    //       } else if (!typing && open) {
+    //         if (!forwardKeyDown(e) && e.shiftKey) {
+    //           setTyping(true)
+    //           e.preventDefault()
+    //         }
+    //       }
+    //       return
+    //     }
+    //     case KeyCode.ESC: {
+    //       setTyping(true)
+    //       onCancel()
+    //       return
+    //     }
+    //   }
+    //   if (!open && ![KeyCode.SHIFT].includes(e.which)) {
+    //     triggerOpen(true)
+    //   } else if (!typing) {
+    //     // Let popup panel handle keyboard
+    //     forwardKeyDown(e)
+    //   }
+    // },
+    onFocus: function onFocus(e) {
+      setTyping(true);
+      setFocused(true);
+
+      if (_onFocus) {
+        _onFocus(e);
+      }
+    },
+    onBlur: function onBlur(e) {
+      if (preventBlurRef.current || !isClickOutside(document.activeElement)) {
+        // preventBlurRef.current = false
+        return;
+      }
+
+      if (blurToCancel) {
+        setTimeout(function () {
+          if (isClickOutside(document.activeElement)) {
+            onCancel();
+          }
+        }, 0);
+      } else if (open) {
+        triggerOpen(false);
+
+        if (valueChangedRef.current) {
+          onSubmit();
+        }
+      }
+
+      setFocused(false);
+
+      if (_onBlur) {
+        _onBlur(e);
+      }
+    }
+  }; // check if value changed
+
+  (0, _react.useEffect)(function () {
+    valueChangedRef.current = false;
+  }, [open]);
+  (0, _react.useEffect)(function () {
+    valueChangedRef.current = true;
+  }, [value]);
+  return [inputProps, {
+    focused: focused,
+    typing: typing
+  }];
+}