zarm/lib/custom-input/CustomInput.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _bem = require("@zarm-design/bem");

var _icons = require("@zarm-design/icons");

var _ahooks = require("ahooks");

var React = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

var _keyboardPicker = _interopRequireDefault(require("../keyboard-picker"));

var _useClickAway = _interopRequireDefault(require("../use-click-away"));

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 && {}.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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

var CustomInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _ref;

  var type = props.type,
      clearable = props.clearable,
      readOnly = props.readOnly,
      autoFocus = props.autoFocus,
      className = props.className,
      disabled = props.disabled,
      maxLength = props.maxLength,
      label = props.label,
      _props$defaultValue = props.defaultValue,
      defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
      onChange = props.onChange,
      onBlur = props.onBlur,
      onFocus = props.onFocus,
      placeholder = props.placeholder,
      restProps = (0, _objectWithoutProperties2.default)(props, ["type", "clearable", "readOnly", "autoFocus", "className", "disabled", "maxLength", "label", "defaultValue", "onChange", "onBlur", "onFocus", "placeholder"]);
  var contentRef = React.useRef(null);
  var pickerRef = React.useRef(null);
  var inputRef = React.useRef(null);

  var _useControllableValue = (0, _ahooks.useControllableValue)(_objectSpread(_objectSpread({}, props), {}, {
    defaultValue: defaultValue
  })),
      _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
      value = _useControllableValue2[0],
      setValue = _useControllableValue2[1];

  var _React$useState = React.useState(autoFocus),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      focused = _React$useState2[0],
      setFocused = _React$useState2[1];

  var showClearIcon = clearable && typeof value !== 'undefined' && (value === null || value === void 0 ? void 0 : value.length) > 0;

  var _React$useContext = React.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('custom-input', {
    prefixCls: prefixCls
  });
  var cls = bem([(_ref = {}, (0, _defineProperty2.default)(_ref, "".concat(type), true), (0, _defineProperty2.default)(_ref, "disabled", disabled), (0, _defineProperty2.default)(_ref, "focus", focused), (0, _defineProperty2.default)(_ref, "clearable", showClearIcon), (0, _defineProperty2.default)(_ref, "readonly", readOnly), _ref), className]);

  var onInputFocus = function onInputFocus() {
    if (disabled) return;
    window.setTimeout(function () {
      setFocused(true);
    }, 0);
    onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
  };

  var onInputBlur = function onInputBlur() {
    setFocused(false);
    onBlur === null || onBlur === void 0 ? void 0 : onBlur(value);
  };

  var onKeyClick = function onKeyClick(key) {
    if (['close', 'ok'].indexOf(key) > -1) {
      onInputBlur();
      return;
    }

    if (key !== 'delete' && (value === null || value === void 0 ? void 0 : value.length) >= maxLength) {
      return;
    }

    var newValue = key === 'delete' ? value === null || value === void 0 ? void 0 : value.slice(0, (value === null || value === void 0 ? void 0 : value.length) - 1) : value + key;

    if (typeof value === 'undefined') {
      setValue(newValue);
    }

    setValue === null || setValue === void 0 ? void 0 : setValue(newValue);
  };

  var onInputClear = function onInputClear(e) {
    e.stopPropagation();
    setValue('');
  };

  var scrollToStart = function scrollToStart() {
    contentRef.current.scrollLeft = 0;
  };

  var scrollToEnd = function scrollToEnd() {
    contentRef.current.scrollLeft = contentRef.current.scrollWidth;
  };

  var focus = function focus() {
    onInputFocus();
  };

  var blur = function blur() {
    onInputBlur();
  }; // 渲染标签栏


  var labelRender = !!label && /*#__PURE__*/React.createElement("div", {
    className: bem('label')
  }, label);
  var clearIconRender = showClearIcon && /*#__PURE__*/React.createElement(_icons.CloseCircleFill, {
    className: bem('clear'),
    onClick: onInputClear
  });
  var textRender = /*#__PURE__*/React.createElement("div", {
    className: bem('content')
  }, value);
  var inputRender = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: bem('content'),
    onClick: onInputFocus
  }, (value === undefined || value === '') && !readOnly && /*#__PURE__*/React.createElement("div", {
    className: bem('placeholder')
  }, placeholder), /*#__PURE__*/React.createElement("div", {
    ref: contentRef,
    className: bem('virtual-input')
  }, value), /*#__PURE__*/React.createElement("input", {
    ref: inputRef,
    type: "hidden",
    value: value
  })), clearIconRender, /*#__PURE__*/React.createElement(_keyboardPicker.default, {
    ref: pickerRef,
    visible: focused,
    type: type,
    onKeyClick: onKeyClick
  }));
  (0, _useClickAway.default)([contentRef, pickerRef], onInputBlur);
  React.useImperativeHandle(ref, function () {
    return {
      focus: focus,
      blur: blur
    };
  });
  React.useEffect(function () {
    if (!focused) return;
    var timeout = window.setTimeout(function () {
      var _contentRef$current;

      (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.scrollIntoView({
        block: 'center',
        inline: 'center',
        behavior: 'smooth'
      });
    }, 0);
    return function () {
      window.clearTimeout(timeout);
    };
  }, [focused]);
  React.useEffect(function () {
    if (readOnly) return;

    if (focused) {
      scrollToEnd();
    } else {
      scrollToStart();
    }
  }, [readOnly, focused, value]);
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
    className: cls
  }), labelRender, readOnly ? textRender : inputRender);
});
CustomInput.displayName = 'CustomInput';
CustomInput.defaultProps = {
  type: 'number'
};
var _default = CustomInput;
exports.default = _default;