zarm/es/custom-input/CustomInput.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

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) { _defineProperty(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; }

import { createBEM } from '@zarm-design/bem';
import { CloseCircleFill } from '@zarm-design/icons';
import { useControllableValue } from 'ahooks';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import KeyboardPicker from '../keyboard-picker';
import useClickAway from '../use-click-away';
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 = _objectWithoutProperties(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 = useControllableValue(_objectSpread(_objectSpread({}, props), {}, {
    defaultValue: defaultValue
  })),
      _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
      value = _useControllableValue2[0],
      setValue = _useControllableValue2[1];

  var _React$useState = React.useState(autoFocus),
      _React$useState2 = _slicedToArray(_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(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('custom-input', {
    prefixCls: prefixCls
  });
  var cls = bem([(_ref = {}, _defineProperty(_ref, "".concat(type), true), _defineProperty(_ref, "disabled", disabled), _defineProperty(_ref, "focus", focused), _defineProperty(_ref, "clearable", showClearIcon), _defineProperty(_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(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, {
    ref: pickerRef,
    visible: focused,
    type: type,
    onKeyClick: onKeyClick
  }));
  useClickAway([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", _extends({}, restProps, {
    className: cls
  }), labelRender, readOnly ? textRender : inputRender);
});
CustomInput.displayName = 'CustomInput';
CustomInput.defaultProps = {
  type: 'number'
};
export default CustomInput;