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

Ray basic components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["placeholderStyle", "className", "maxLength", "onBlur", "onFocus", "onConfirm"];
import * as React from 'react';
import clsx from 'clsx';
import { useEventListener } from 'ahooks';
import { inlineStyle, useStylesheet } from '@ray-js/framework-shared';
import { defaultInputProps } from './props';
import styles from './index.module.less';
import handleProps from '../utils/handleProps';
const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
      placeholderStyle,
      className,
      maxLength,
      onBlur,
      onFocus,
      onConfirm
    } = props,
    restProps = _objectWithoutProperties(props, _excluded);
  const [placeholderStyleClassName] = useStylesheet(inlineStyle(placeholderStyle));
  const currentNode = ref || React.useRef(null);
  useEventListener('focus', e => {
    onFocus === null || onFocus === void 0 || onFocus(_objectSpread(_objectSpread({}, e), {}, {
      type: 'focus',
      value: e.detail.value,
      origin: e
    }));
  }, {
    target: currentNode
  });
  useEventListener('blur', e => {
    const {
      value
    } = e.target;
    onBlur === null || onBlur === void 0 || onBlur(_objectSpread(_objectSpread({}, e), {}, {
      type: 'blur',
      value,
      origin: e
    }));
  }, {
    target: currentNode
  });
  useEventListener('confirm', e => {
    const {
      value
    } = e.target;
    onConfirm === null || onConfirm === void 0 || onConfirm(_objectSpread(_objectSpread({}, e), {}, {
      type: 'confirm',
      value,
      origin: e
    }));
  }, {
    target: currentNode
  });
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement("v-input", _extends({}, handleProps(restProps), {
      maxlength: maxLength,
      onInput: function (e) {
        var _props$onInput;
        const {
          value
        } = e.target;
        (_props$onInput = props.onInput) === null || _props$onInput === void 0 || _props$onInput.call(props, _objectSpread(_objectSpread({}, e), {}, {
          type: 'input',
          value,
          origin: e
        }));
      },
      class: clsx('ray-input', styles.input, className, placeholderStyleClassName),
      ref: currentNode
    }))
  );
});
Input.defaultProps = defaultInputProps;
export default Input;