@rc-component/picker 1.0.0

package/lib/PickerInput/Selector/Icon.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClearIcon = ClearIcon;
+exports.default = Icon;
+var React = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../context"));
+var _excluded = ["icon", "type"],
+  _excluded2 = ["onClear"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 _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; }
+function Icon(props) {
+  var icon = props.icon,
+    type = props.type,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _React$useContext = React.useContext(_context.default),
+    prefixCls = _React$useContext.prefixCls;
+  return icon ? /*#__PURE__*/React.createElement("span", _extends({
+    className: "".concat(prefixCls, "-").concat(type)
+  }, restProps), icon) : null;
+}
+function ClearIcon(_ref) {
+  var onClear = _ref.onClear,
+    restProps = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React.createElement(Icon, _extends({}, restProps, {
+    type: "clear",
+    role: "button",
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClear();
+    }
+  }));
+}

package/lib/PickerInput/Selector/Input.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { PickerRef } from '../../interface';
+export interface InputRef extends PickerRef {
+    inputElement: HTMLInputElement;
+}
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    format?: string;
+    validateFormat: (value: string) => boolean;
+    active?: boolean;
+    /** Used for single picker only */
+    showActiveCls?: boolean;
+    suffixIcon?: React.ReactNode;
+    value?: string;
+    onChange: (value: string) => void;
+    onSubmit: VoidFunction;
+    /** Meaning current is from the hover cell getting the placeholder text */
+    helped?: boolean;
+    /**
+     * Trigger when input need additional help.
+     * Like open the popup for interactive.
+     */
+    onHelp: () => void;
+    preserveInvalidOnBlur?: boolean;
+    invalid?: boolean;
+    clearIcon?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default Input;

package/lib/PickerInput/Selector/Input.js

@@ -0,0 +1,385 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("@rc-component/util");
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var _raf = _interopRequireDefault(require("@rc-component/util/lib/raf"));
+var React = _interopRequireWildcard(require("react"));
+var _miscUtil = require("../../utils/miscUtil");
+var _context = _interopRequireDefault(require("../context"));
+var _useLockEffect = _interopRequireDefault(require("../hooks/useLockEffect"));
+var _Icon = _interopRequireDefault(require("./Icon"));
+var _MaskFormat = _interopRequireDefault(require("./MaskFormat"));
+var _util2 = require("./util");
+var _excluded = ["active", "showActiveCls", "suffixIcon", "format", "validateFormat", "onChange", "onInput", "helped", "onHelp", "onSubmit", "onKeyDown", "preserveInvalidOnBlur", "invalid", "clearIcon"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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; }
+// Format logic
+//
+// First time on focus:
+//  1. check if the text is valid, if not fill with format
+//  2. set highlight cell to the first cell
+// Cells
+//  1. Selection the index cell, set inner `cacheValue` to ''
+//  2. Key input filter non-number char, patch after the `cacheValue`
+//    1. Replace the `cacheValue` with input align the cell length
+//    2. Re-selection the mask cell
+//  3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell
+
+var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var active = props.active,
+    _props$showActiveCls = props.showActiveCls,
+    showActiveCls = _props$showActiveCls === void 0 ? true : _props$showActiveCls,
+    suffixIcon = props.suffixIcon,
+    format = props.format,
+    validateFormat = props.validateFormat,
+    onChange = props.onChange,
+    onInput = props.onInput,
+    helped = props.helped,
+    onHelp = props.onHelp,
+    onSubmit = props.onSubmit,
+    onKeyDown = props.onKeyDown,
+    _props$preserveInvali = props.preserveInvalidOnBlur,
+    preserveInvalidOnBlur = _props$preserveInvali === void 0 ? false : _props$preserveInvali,
+    invalid = props.invalid,
+    clearIcon = props.clearIcon,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var value = props.value,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onMouseUp = props.onMouseUp;
+  var _React$useContext = React.useContext(_context.default),
+    prefixCls = _React$useContext.prefixCls,
+    _React$useContext$inp = _React$useContext.input,
+    Component = _React$useContext$inp === void 0 ? 'input' : _React$useContext$inp;
+  var inputPrefixCls = "".concat(prefixCls, "-input");
+
+  // ======================== Value =========================
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var _React$useState3 = React.useState(value),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    internalInputValue = _React$useState4[0],
+    setInputValue = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusCellText = _React$useState6[0],
+    setFocusCellText = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focusCellIndex = _React$useState8[0],
+    setFocusCellIndex = _React$useState8[1];
+  var _React$useState9 = React.useState(null),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    forceSelectionSyncMark = _React$useState10[0],
+    forceSelectionSync = _React$useState10[1];
+  var inputValue = internalInputValue || '';
+
+  // Sync value if needed
+  React.useEffect(function () {
+    setInputValue(value);
+  }, [value]);
+
+  // ========================= Refs =========================
+  var holderRef = React.useRef();
+  var inputRef = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      nativeElement: holderRef.current,
+      inputElement: inputRef.current,
+      focus: function focus(options) {
+        inputRef.current.focus(options);
+      },
+      blur: function blur() {
+        inputRef.current.blur();
+      }
+    };
+  });
+
+  // ======================== Format ========================
+  var maskFormat = React.useMemo(function () {
+    return new _MaskFormat.default(format || '');
+  }, [format]);
+  var _React$useMemo = React.useMemo(function () {
+      if (helped) {
+        return [0, 0];
+      }
+      return maskFormat.getSelection(focusCellIndex);
+    }, [maskFormat, focusCellIndex, helped]),
+    _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+    selectionStart = _React$useMemo2[0],
+    selectionEnd = _React$useMemo2[1];
+
+  // ======================== Modify ========================
+  // When input modify content, trigger `onHelp` if is not the format
+  var onModify = function onModify(text) {
+    if (text && text !== format && text !== value) {
+      onHelp();
+    }
+  };
+
+  // ======================== Change ========================
+  /**
+   * Triggered by paste, keyDown and focus to show format
+   */
+  var triggerInputChange = (0, _util.useEvent)(function (text) {
+    if (validateFormat(text)) {
+      onChange(text);
+    }
+    setInputValue(text);
+    onModify(text);
+  });
+
+  // Directly trigger `onChange` if `format` is empty
+  var onInternalChange = function onInternalChange(event) {
+    // Hack `onChange` with format to do nothing
+    if (!format) {
+      var text = event.target.value;
+      onModify(text);
+      setInputValue(text);
+      onChange(text);
+    }
+  };
+  var onFormatPaste = function onFormatPaste(event) {
+    // Get paste text
+    var pasteText = event.clipboardData.getData('text');
+    if (validateFormat(pasteText)) {
+      triggerInputChange(pasteText);
+    }
+  };
+
+  // ======================== Mouse =========================
+  // When `mouseDown` get focus, it's better to not to change the selection
+  // Since the up position maybe not is the first cell
+  var mouseDownRef = React.useRef(false);
+  var onFormatMouseDown = function onFormatMouseDown() {
+    mouseDownRef.current = true;
+  };
+  var onFormatMouseUp = function onFormatMouseUp(event) {
+    var _ref = event.target,
+      start = _ref.selectionStart;
+    var closeMaskIndex = maskFormat.getMaskCellIndex(start);
+    setFocusCellIndex(closeMaskIndex);
+
+    // Force update the selection
+    forceSelectionSync({});
+    onMouseUp === null || onMouseUp === void 0 || onMouseUp(event);
+    mouseDownRef.current = false;
+  };
+
+  // ====================== Focus Blur ======================
+  var onFormatFocus = function onFormatFocus(event) {
+    setFocused(true);
+    setFocusCellIndex(0);
+    setFocusCellText('');
+    onFocus(event);
+  };
+  var onSharedBlur = function onSharedBlur(event) {
+    onBlur(event);
+  };
+  var onFormatBlur = function onFormatBlur(event) {
+    setFocused(false);
+    onSharedBlur(event);
+  };
+
+  // ======================== Active ========================
+  // Check if blur need reset input value
+  (0, _useLockEffect.default)(active, function () {
+    if (!active && !preserveInvalidOnBlur) {
+      setInputValue(value);
+    }
+  });
+
+  // ======================= Keyboard =======================
+  var onSharedKeyDown = function onSharedKeyDown(event) {
+    if (event.key === 'Enter' && validateFormat(inputValue)) {
+      onSubmit();
+    }
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+  };
+  var onFormatKeyDown = function onFormatKeyDown(event) {
+    onSharedKeyDown(event);
+    var key = event.key;
+
+    // Save the cache with cell text
+    var nextCellText = null;
+
+    // Fill in the input
+    var nextFillText = null;
+    var maskCellLen = selectionEnd - selectionStart;
+    var cellFormat = format.slice(selectionStart, selectionEnd);
+
+    // Cell Index
+    var offsetCellIndex = function offsetCellIndex(offset) {
+      setFocusCellIndex(function (idx) {
+        var nextIndex = idx + offset;
+        nextIndex = Math.max(nextIndex, 0);
+        nextIndex = Math.min(nextIndex, maskFormat.size() - 1);
+        return nextIndex;
+      });
+    };
+
+    // Range
+    var offsetCellValue = function offsetCellValue(offset) {
+      var _getMaskRange = (0, _util2.getMaskRange)(cellFormat),
+        _getMaskRange2 = _slicedToArray(_getMaskRange, 3),
+        rangeStart = _getMaskRange2[0],
+        rangeEnd = _getMaskRange2[1],
+        rangeDefault = _getMaskRange2[2];
+      var currentText = inputValue.slice(selectionStart, selectionEnd);
+      var currentTextNum = Number(currentText);
+      if (isNaN(currentTextNum)) {
+        return String(rangeDefault ? rangeDefault : offset > 0 ? rangeStart : rangeEnd);
+      }
+      var num = currentTextNum + offset;
+      var range = rangeEnd - rangeStart + 1;
+      return String(rangeStart + (range + num - rangeStart) % range);
+    };
+    switch (key) {
+      // =============== Remove ===============
+      case 'Backspace':
+      case 'Delete':
+        nextCellText = '';
+        nextFillText = cellFormat;
+        break;
+
+      // =============== Arrows ===============
+      // Left key
+      case 'ArrowLeft':
+        nextCellText = '';
+        offsetCellIndex(-1);
+        break;
+
+      // Right key
+      case 'ArrowRight':
+        nextCellText = '';
+        offsetCellIndex(1);
+        break;
+
+      // Up key
+      case 'ArrowUp':
+        nextCellText = '';
+        nextFillText = offsetCellValue(1);
+        break;
+
+      // Down key
+      case 'ArrowDown':
+        nextCellText = '';
+        nextFillText = offsetCellValue(-1);
+        break;
+
+      // =============== Number ===============
+      default:
+        if (!isNaN(Number(key))) {
+          nextCellText = focusCellText + key;
+          nextFillText = nextCellText;
+        }
+        break;
+    }
+
+    // Update cell text
+    if (nextCellText !== null) {
+      setFocusCellText(nextCellText);
+      if (nextCellText.length >= maskCellLen) {
+        // Go to next cell
+        offsetCellIndex(1);
+        setFocusCellText('');
+      }
+    }
+
+    // Update the input text
+    if (nextFillText !== null) {
+      // Replace selection range with `nextCellText`
+      var nextFocusValue =
+      // before
+      inputValue.slice(0, selectionStart) +
+      // replace
+      (0, _miscUtil.leftPad)(nextFillText, maskCellLen) +
+      // after
+      inputValue.slice(selectionEnd);
+      triggerInputChange(nextFocusValue.slice(0, format.length));
+    }
+
+    // Always trigger selection sync after key down
+    forceSelectionSync({});
+  };
+
+  // ======================== Format ========================
+  var rafRef = React.useRef();
+  (0, _useLayoutEffect.default)(function () {
+    if (!focused || !format || mouseDownRef.current) {
+      return;
+    }
+
+    // Reset with format if not match
+    if (!maskFormat.match(inputValue)) {
+      triggerInputChange(format);
+      return;
+    }
+
+    // Match the selection range
+    inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+
+    // Chrome has the bug anchor position looks not correct but actually correct
+    rafRef.current = (0, _raf.default)(function () {
+      inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+    });
+    return function () {
+      _raf.default.cancel(rafRef.current);
+    };
+  }, [maskFormat, format, focused, inputValue, focusCellIndex, selectionStart, selectionEnd, forceSelectionSyncMark, triggerInputChange]);
+
+  // ======================== Render ========================
+  // Input props for format
+  var inputProps = format ? {
+    onFocus: onFormatFocus,
+    onBlur: onFormatBlur,
+    onKeyDown: onFormatKeyDown,
+    onMouseDown: onFormatMouseDown,
+    onMouseUp: onFormatMouseUp,
+    onPaste: onFormatPaste
+  } : {};
+  return /*#__PURE__*/React.createElement("div", {
+    ref: holderRef,
+    className: (0, _classnames.default)(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped))
+  }, /*#__PURE__*/React.createElement(Component, _extends({
+    ref: inputRef,
+    "aria-invalid": invalid,
+    autoComplete: "off"
+  }, restProps, {
+    onKeyDown: onSharedKeyDown,
+    onBlur: onSharedBlur
+    // Replace with format
+  }, inputProps, {
+    // Value
+    value: inputValue,
+    onChange: onInternalChange
+  })), /*#__PURE__*/React.createElement(_Icon.default, {
+    type: "suffix",
+    icon: suffixIcon
+  }), clearIcon);
+});
+if (process.env.NODE_ENV !== 'production') {
+  Input.displayName = 'Input';
+}
+var _default = exports.default = Input;

package/lib/PickerInput/Selector/MaskFormat.d.ts

@@ -0,0 +1,22 @@
+declare const FORMAT_KEYS: string[];
+export type FormatKey = (typeof FORMAT_KEYS)[number];
+export interface Cell {
+    text: string;
+    mask: boolean;
+    start: number;
+    end: number;
+}
+export default class MaskFormat {
+    format: string;
+    maskFormat: string;
+    cells: Cell[];
+    maskCells: Cell[];
+    constructor(format: string);
+    getSelection(maskCellIndex: number): [start: number, end: number];
+    /** Check given text match format */
+    match(text: string): boolean;
+    /** Get mask cell count */
+    size(): number;
+    getMaskCellIndex(anchorIndex: number): number;
+}
+export {};

package/lib/PickerInput/Selector/MaskFormat.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS'];
+// Use Chinese character to avoid conflict with the mask format
+var REPLACE_KEY = '顧';
+var MaskFormat = exports.default = /*#__PURE__*/function () {
+  function MaskFormat(format) {
+    _classCallCheck(this, MaskFormat);
+    _defineProperty(this, "format", void 0);
+    _defineProperty(this, "maskFormat", void 0);
+    _defineProperty(this, "cells", void 0);
+    _defineProperty(this, "maskCells", void 0);
+    this.format = format;
+
+    // Generate mask format
+    var replaceKeys = FORMAT_KEYS.map(function (key) {
+      return "(".concat(key, ")");
+    }).join('|');
+    var replaceReg = new RegExp(replaceKeys, 'g');
+    this.maskFormat = format.replace(replaceReg,
+    // Use Chinese character to avoid user use it in format
+    function (key) {
+      return REPLACE_KEY.repeat(key.length);
+    });
+
+    // Generate cells
+    var cellReg = new RegExp("(".concat(FORMAT_KEYS.join('|'), ")"));
+    var strCells = (format.split(cellReg) || []).filter(function (str) {
+      return str;
+    });
+    var offset = 0;
+    this.cells = strCells.map(function (text) {
+      var mask = FORMAT_KEYS.includes(text);
+      var start = offset;
+      var end = offset + text.length;
+      offset = end;
+      return {
+        text: text,
+        mask: mask,
+        start: start,
+        end: end
+      };
+    });
+
+    // Mask cells
+    this.maskCells = this.cells.filter(function (cell) {
+      return cell.mask;
+    });
+  }
+  _createClass(MaskFormat, [{
+    key: "getSelection",
+    value: function getSelection(maskCellIndex) {
+      var _ref = this.maskCells[maskCellIndex] || {},
+        start = _ref.start,
+        end = _ref.end;
+      return [start || 0, end || 0];
+    }
+
+    /** Check given text match format */
+  }, {
+    key: "match",
+    value: function match(text) {
+      for (var i = 0; i < this.maskFormat.length; i += 1) {
+        var maskChar = this.maskFormat[i];
+        var textChar = text[i];
+        if (!textChar || maskChar !== REPLACE_KEY && maskChar !== textChar) {
+          return false;
+        }
+      }
+      return true;
+    }
+
+    /** Get mask cell count */
+  }, {
+    key: "size",
+    value: function size() {
+      return this.maskCells.length;
+    }
+  }, {
+    key: "getMaskCellIndex",
+    value: function getMaskCellIndex(anchorIndex) {
+      var closetDist = Number.MAX_SAFE_INTEGER;
+      var closetIndex = 0;
+      for (var i = 0; i < this.maskCells.length; i += 1) {
+        var _this$maskCells$i = this.maskCells[i],
+          start = _this$maskCells$i.start,
+          end = _this$maskCells$i.end;
+        if (anchorIndex >= start && anchorIndex <= end) {
+          return i;
+        }
+        var dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end));
+        if (dist < closetDist) {
+          closetDist = dist;
+          closetIndex = i;
+        }
+      }
+      return closetIndex;
+    }
+  }]);
+  return MaskFormat;
+}();

package/lib/PickerInput/Selector/RangeSelector.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { RangePickerRef, SelectorProps } from '../../interface';
+export type SelectorIdType = string | {
+    start?: string;
+    end?: string;
+};
+export interface RangeSelectorProps<DateType = any> extends SelectorProps<DateType> {
+    id?: SelectorIdType;
+    activeIndex: number | null;
+    separator?: React.ReactNode;
+    value?: [DateType?, DateType?];
+    onChange: (date: DateType, index?: number) => void;
+    disabled: [boolean, boolean];
+    /** All the field show as `placeholder` */
+    allHelp: boolean;
+    placeholder?: string | [string, string];
+    invalid: [boolean, boolean];
+    placement?: string;
+    /**
+     * Trigger when the active bar offset position changed.
+     * This is used for popup panel offset.
+     */
+    onActiveInfo: (info: [activeInputLeft: number, activeInputRight: number, selectorWidth: number]) => void;
+}
+declare const RefRangeSelector: React.ForwardRefExoticComponent<RangeSelectorProps<object> & React.RefAttributes<RangePickerRef>>;
+export default RefRangeSelector;