@ray-js/components/lib/Input/Input.thing.js

Ray basic components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["name", "id", "className", "style", "disabled", "type", "value", "focus", "maxLength", "onBlur", "onConfirm", "onFocus", "onInput", "password", "placeholder", "placeholderStyle"];
import * as React from 'react';
import clsx from 'clsx';
import { Input as RemaxInput } from '@ray-js/adapter';
import { inlineStyle } from '@ray-js/framework-shared';
import { nextFrame } from '../core';
import styles from './index.module.less';
const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
      name,
      id,
      className,
      style,
      disabled,
      type = 'text',
      value,
      focus,
      maxLength,
      onBlur,
      onConfirm,
      onFocus,
      onInput,
      password,
      placeholder,
      placeholderStyle
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  const [internalValue, setInternalValue] = React.useState(value);
  const bufferValue = React.useRef(value);
  React.useEffect(() => {
    if (value !== bufferValue.current) {
      // HACK: 避免重复设置相同 value 不渲染的问题
      setInternalValue(bufferValue.current);
      nextFrame(1).then(() => {
        bufferValue.current = value;
        setInternalValue(value);
      });
    }
  }, [value]);
  const selection = focus ? {
    selectionStart: (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) || -1,
    selectionEnd: (internalValue === null || internalValue === void 0 ? void 0 : internalValue.length) || -1
  } : undefined;
  return /*#__PURE__*/React.createElement(RemaxInput, _extends({
    name: name
    //@ts-ignore
    ,
    ref: ref,
    id: id,
    style: inlineStyle(style),
    className: clsx('ray-input', styles.input, className),
    disabled: disabled,
    type: type,
    focus: focus,
    password: password,
    placeholder: placeholder,
    placeholderStyle: inlineStyle(placeholderStyle),
    maxlength: maxLength,
    onInput: function (event) {
      const {
        value
      } = event.detail;
      // 内部 value 管控
      bufferValue.current = value;
      event.value = value;
      onInput === null || onInput === void 0 || onInput(event);
    },
    onBlur: onBlur,
    onConfirm: function (event) {
      const {
        value = ''
      } = event.detail;
      setInternalValue(value);
      onConfirm === null || onConfirm === void 0 || onConfirm(event);
    },
    onFocus: onFocus,
    value: internalValue
  }, selection, restProps));
});
export default Input;