betanet-mini-ui/lib/components/BmInput/index.js

为 Taro 而设计的 UI Library

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

var _components = require("@tarojs/components");

var _classnames = _interopRequireDefault(require("classnames"));

var _excluded = ["value", "onChange", "onFocus", "onBlur", "onConfirm", "editable", "onClick", "onKeyboardHeightChange", "onErrorClick", "children", "title", "required", "clear", "className", "name", "border", "customStyle", "placeholderClass", "error"];

function getInputProps(props) {
  var actualProps = {
    type: props.type,
    maxlength: props.maxlength,
    disabled: props.disabled,
    password: false
  };

  switch (actualProps.type) {
    case 'phone':
      actualProps.type = 'number';
      actualProps.maxlength = 11;
      break;

    case 'password':
      actualProps.type = 'text';
      actualProps.password = true;
      break;

    default:
      break;
  }

  if (!props.disabled && !props.editable) {
    actualProps.disabled = true;
  }

  return actualProps;
}

var inputClearing = false;

var BmInput = function BmInput(props) {
  var value = props.value,
      onChange = props.onChange,
      onFocus = props.onFocus,
      onBlur = props.onBlur,
      onConfirm = props.onConfirm,
      editable = props.editable,
      onClick = props.onClick,
      onKeyboardHeightChange = props.onKeyboardHeightChange,
      onErrorClick = props.onErrorClick,
      children = props.children,
      title = props.title,
      required = props.required,
      clear = props.clear,
      className = props.className,
      name = props.name,
      border = props.border,
      customStyle = props.customStyle,
      placeholderClass = props.placeholderClass,
      error = props.error,
      rest = (0, _objectWithoutProperties2.default)(props, _excluded);

  var handleInput = function handleInput(event) {
    return onChange(event.detail.value, event);
  };

  var handleFocus = function handleFocus(event) {
    if (typeof onFocus === 'function') {
      onFocus(event.detail.value, event);
    }
  };

  var handleBlur = function handleBlur(event) {
    if (typeof onBlur === 'function') {
      onBlur(event.detail.value, event);
    }

    if (event.type === 'blur' && !inputClearing) {
      // fix # 583 BmInput 不触发 onChange 的问题
      onChange(event.detail.value, event);
    } // 还原状态


    inputClearing = false;
  };

  var handleConfirm = function handleConfirm(event) {
    if (typeof onConfirm === 'function') {
      onConfirm(event.detail.value, event);
    }
  };

  var handleClick = function handleClick(event) {
    if (!editable && typeof onClick === 'function') {
      onClick(event);
    }
  };

  var handleClearValue = function handleClearValue(event) {
    inputClearing = true;
    onChange('', event);
  };

  var handleKeyboardHeightChange = function handleKeyboardHeightChange(event) {
    if (typeof onKeyboardHeightChange === 'function') {
      onKeyboardHeightChange(event);
    }
  };

  var handleErrorClick = function handleErrorClick(event) {
    if (typeof onErrorClick === 'function') {
      onErrorClick(event);
    }
  };

  var _getInputProps = getInputProps(props),
      type = _getInputProps.type,
      maxlength = _getInputProps.maxlength,
      disabled = _getInputProps.disabled,
      password = _getInputProps.password;

  var rootCls = (0, _classnames.default)('bm-input', {
    'bm-input--without-border': !border
  }, className);
  var containerCls = (0, _classnames.default)('bm-input__container', {
    'bm-input--error': error,
    'bm-input--disabled': disabled
  });
  var overlayCls = (0, _classnames.default)('bm-input__overlay', {
    'bm-input__overlay--hidden': !disabled
  });
  var placeholderCls = (0, _classnames.default)('placeholder', placeholderClass);
  var id = name && {
    id: name
  };
  return /*#__PURE__*/_react.default.createElement(_components.View, {
    className: rootCls,
    style: customStyle
  }, /*#__PURE__*/_react.default.createElement(_components.View, {
    className: containerCls
  }, /*#__PURE__*/_react.default.createElement(_components.View, {
    className: overlayCls,
    onClick: handleClick
  }), title && /*#__PURE__*/_react.default.createElement(_components.Label, {
    className: "bm-input__title ".concat(required && 'bm-input__title--required'),
    for: name
  }, title), /*#__PURE__*/_react.default.createElement(_components.Input, (0, _extends2.default)({
    className: "bm-input__input"
  }, id, {
    name: name,
    value: value
  }, rest, {
    type: type,
    maxlength: maxlength,
    password: password,
    onInput: handleInput,
    onFocus: handleFocus,
    onBlur: handleBlur,
    onConfirm: handleConfirm,
    onKeyboardHeightChange: handleKeyboardHeightChange
  })), clear && value && /*#__PURE__*/_react.default.createElement(_components.View, {
    className: "bm-input__icon",
    onTouchEnd: handleClearValue
  }, /*#__PURE__*/_react.default.createElement(_components.View, {
    className: "bm-input__icon-clear"
  })), error && /*#__PURE__*/_react.default.createElement(_components.View, {
    className: "bm-input__icon",
    onTouchStart: handleErrorClick
  }, /*#__PURE__*/_react.default.createElement(_components.View, {
    className: "bm-input__icon-close"
  })), /*#__PURE__*/_react.default.createElement(_components.View, {
    className: "bm-input__children"
  }, children)));
};

BmInput.defaultProps = {
  error: false,
  disabled: false,
  editable: true,
  onChange: function onChange() {}
};
var _default = BmInput;
exports.default = _default;