zmp-react/cjs/zalo-ui-kits/list-input.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

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

var _listInput = _interopRequireDefault(require("../components/list-input"));

var _inputInfo = _interopRequireDefault(require("./input-info"));

var _icon = _interopRequireDefault(require("./icon"));

var _constants = require("../../common/constants");

var _utils = require("../shared/utils");

var _utils2 = require("../../common/utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* dts-imports
import { Calendar, ColorPicker, TextEditor } from 'zmp-core/types';
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  wrap? : boolean
  input? : boolean
  type? : string
  name? : string
  value? : string | number | Array<any> | Date | Object
  defaultValue? : string | number | Array<any>
  inputmode? : string
  readonly? : boolean
  required? : boolean
  disabled? : boolean
  placeholder? : string
  inputId? : string | number
  size? : string | number
  accept? : string | number
  autocomplete? : string
  autocorrect? : string
  autocapitalize? : string
  spellcheck? : string
  autofocus? : boolean
  autosave? : string
  max? : string | number
  min? : string | number
  step? : string | number
  maxlength? : string | number
  minlength? : string | number
  multiple? : boolean
  inputStyle?: React.CSSProperties;
  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 | number
  calendarParams? : Calendar.Parameters;
  colorPickerParams? : ColorPicker.Parameters;
  textEditorParams? : TextEditor.Parameters;
  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__*/(0, _react.forwardRef)(function (props, ref) {
  var _classNames;

  var elRef = (0, _react.useRef)(null);

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

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

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

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

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

  var isValidTextareaMinRows = (0, _react.useMemo)(function () {
    return (0, _utils2.isNumber)(minRows) && minRows >= _constants.RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MIN && minRows <= _constants.RESIZABLE_TEXTAREA_HEIGHT.MIN_ROWS.MAX;
  }, [minRows]);
  var isValidTextareaMaxRows = (0, _react.useMemo)(function () {
    return (0, _utils2.isNumber)(maxRows) && maxRows >= _constants.RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MIN && maxRows <= _constants.RESIZABLE_TEXTAREA_HEIGHT.MAX_ROWS.MAX;
  }, [maxRows]);
  var inputClasses = (0, _utils.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.default.createElement(_listInput.default, (0, _extends2.default)({
      ref: elRef
    }, props, {
      sortable: false,
      media: null,
      inlineLabel: false,
      floatingLabel: false,
      outline: false,
      className: "item-input-password " + (valid ? 'item-input-successful' : ''),
      info: /*#__PURE__*/_react.default.createElement(_inputInfo.default, {
        info: info,
        valid: valid
      }),
      type: showPassword ? 'text' : 'password',
      onValidate: function onValidate(isValid) {
        handleOnValidate(isValid);

        if (_onValidate && typeof _onValidate === 'function') {
          _onValidate(isValid);
        }
      }
    }), /*#__PURE__*/_react.default.createElement("span", {
      slot: "input",
      onClick: handleClickShowPassword,
      className: "show-password-button"
    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
      zmp: "" + (showPassword ? _constants.ICON_EYE_FILL : _constants.ICON_EYE),
      size: _constants.ICON_SIZE_MD
    })));
  }

  return /*#__PURE__*/_react.default.createElement(_listInput.default, (0, _extends2.default)({}, props, {
    sortable: false,
    media: null,
    inlineLabel: false,
    outline: false,
    className: inputClasses,
    rows: type === 'textarea' && isValidTextareaMinRows ? minRows : undefined,
    info: /*#__PURE__*/_react.default.createElement(_inputInfo.default, {
      info: info,
      valid: valid
    }),
    onValidate: function onValidate(isValid) {
      handleOnValidate(isValid);

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