zmp-react/esm/zalo-ui-kits/input.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";
import React, { useState, useRef, forwardRef, useImperativeHandle, useMemo } from 'react';
import Input from '../components/input';
import InputInfo from './input-info';
import Icon from './icon';
import { ICON_EYE, ICON_EYE_FILL, RESIZABLE_TEXTAREA_HEIGHT } from '../../common/constants';
import { classNames } from '../shared/utils';
import { isNumber } from '../../common/utils';
/* dts-imports
import { Calendar, ColorPicker, TextEditor } from 'zmp-core/types';
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  type? : string
  name? : string
  value? : string | number | Array<any> | Date | Object
  defaultValue? : string | number | Array<any>
  inputmode? : string
  placeholder? : string
  inputId? : string | number
  size? : string | number
  accept? : string | number
  autocomplete? : string
  autocorrect? : string
  autocapitalize? : string
  spellcheck? : string
  autofocus? : boolean
  autosave? : string
  checked? : boolean
  disabled? : boolean
  max? : string | number
  min? : string | number
  step? : string | number
  maxlength? : string | number
  minlength? : string | number
  multiple? : boolean
  readonly? : boolean
  required? : boolean
  pattern? : string
  validate? : boolean | string
  validateOnBlur? : boolean
  onValidate? : Function
  tabindex? : string | number
  resizable? : boolean
  minRows? : number
  maxRows: number
  clearButton? : boolean
  noFormStoreData? : boolean
  noStoreData? : boolean
  ignoreStoreData? : boolean
  errorMessage? : string
  errorMessageForce? : boolean
  info? : string
  label?: string
  outline? : boolean
  wrap? : boolean
  dropdown? : string | boolean
  calendarParams? : Calendar.Parameters;
  colorPickerParams? : ColorPicker.Parameters;
  textEditorParams? : TextEditor.Parameters;
  inputStyle? : React.CSSProperties
  COLOR_PROPS
  onCalendarChange? : (calendarValue?: any) => void
  onColorPickerChange? : (colorPickerValue?: any) => void
  onTextareaResize? : (event?: any) => void
  onInputNotEmpty? : (event?: any) => void
  onInputEmpty? : (event?: any) => void
  onInputClear? : (event?: any) => void
  onInput? : (...args: any[]) => void
  onFocus? : (...args: any[]) => void
  onBlur? : (...args: any[]) => void
  onChange? : (...args: any[]) => void
  onTextEditorChange? : (...args: any[]) => void
  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
  CHILDREN_PROP
*/

var ZMPInput = /*#__PURE__*/forwardRef(function (props, ref) {
  var _classNames;

  var inputRef = useRef(null);

  var _useState = useState(undefined),
      valid = _useState[0],
      setValid = _useState[1];

  var _useState2 = useState(false),
      showPassword = _useState2[0],
      setShowPassword = _useState2[1];

  var _onValidate = props.onValidate,
      info = props.info,
      label = props.label,
      type = props.type,
      minRows = props.minRows,
      _props$maxRows = props.maxRows,
      maxRows = _props$maxRows === void 0 ? 8 : _props$maxRows;
  useImperativeHandle(ref, function () {
    return inputRef.current;
  });

  var handleOnValidate = function handleOnValidate(isValid) {
    setValid(isValid);
  };

  var handleClickShowPassword = function handleClickShowPassword() {
    setShowPassword(!showPassword);
  };

  var isValidTextareaMinRows = useMemo(function () {
    return isNumber(minRows) && minRows >= RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MIN && minRows <= RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MAX;
  }, [minRows]);
  var isValidTextareaMaxRows = useMemo(function () {
    return isNumber(maxRows) && maxRows >= RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MIN && maxRows <= RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MAX;
  }, [maxRows]);
  var inputClasses = classNames((_classNames = {
    'item-input-successful': valid
  }, _classNames["textarea-rows-" + minRows] = type === 'textarea' && props.resizable && isValidTextareaMinRows, _classNames["textarea-max-rows-" + maxRows] = type === 'textarea' && props.resizable && isValidTextareaMaxRows, _classNames));

  if (type === 'password') {
    return /*#__PURE__*/React.createElement("div", {
      className: "zmp-input-wrapper"
    }, label && /*#__PURE__*/React.createElement("span", {
      className: "item-title item-label"
    }, label), /*#__PURE__*/React.createElement(Input, _extends({}, props, {
      className: "item-input-password " + (valid ? 'item-input-successful' : ''),
      info: /*#__PURE__*/React.createElement(InputInfo, {
        info: info,
        valid: valid
      }),
      type: showPassword ? 'text' : 'password',
      onValidate: function onValidate(isValid) {
        handleOnValidate(isValid);

        if (_onValidate && typeof _onValidate === 'function') {
          _onValidate(isValid);
        }
      }
    })), /*#__PURE__*/React.createElement("span", {
      onClick: handleClickShowPassword,
      className: "show-password-button"
    }, /*#__PURE__*/React.createElement(Icon, {
      zmp: "" + (showPassword ? ICON_EYE_FILL : ICON_EYE)
    })));
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "zmp-input-wrapper"
  }, label && /*#__PURE__*/React.createElement("span", {
    className: "item-title item-label"
  }, label), /*#__PURE__*/React.createElement(Input, _extends({
    ref: inputRef
  }, props, {
    className: inputClasses,
    rows: type === 'textarea' && isValidTextareaMinRows ? minRows : undefined,
    info: /*#__PURE__*/React.createElement(InputInfo, {
      info: info,
      valid: valid
    }),
    onValidate: function onValidate(isValid) {
      handleOnValidate(isValid);

      if (_onValidate && typeof _onValidate === 'function') {
        _onValidate(isValid);
      }
    }
  })));
});
ZMPInput.displayName = 'zmp-input';
export default ZMPInput;