vantui-edit/lib/field/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

var _taro = require("@tarojs/taro");

var _react = require("react");

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

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _cell = require("../cell");

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

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

var computed = _interopRequireWildcard(require("./wxs"));

var _jsxRuntime = require("react/jsx-runtime");

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; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var FIELD_INDEX = 0;

function Field(props) {
  var ref = (0, _react.useRef)({
    focused: false
  });

  var _useState = (0, _react.useState)({
    // innerValue: '',
    showClear: false,
    unitag: 'van-field'
  }),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var _useState3 = (0, _react.useState)(''),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      innerValue = _useState4[0],
      setInnerValue = _useState4[1];

  var showClear = state.showClear;
  var size = props.size,
      leftIcon = props.leftIcon,
      center = props.center,
      _props$border = props.border,
      border = _props$border === void 0 ? true : _props$border,
      isLink = props.isLink,
      required = props.required,
      clickable = props.clickable,
      className = props.className,
      _props$titleWidth = props.titleWidth,
      titleWidth = _props$titleWidth === void 0 ? '6.2em' : _props$titleWidth,
      style = props.style,
      arrowDirection = props.arrowDirection,
      label = props.label,
      disabled = props.disabled,
      _props$type = props.type,
      type = _props$type === void 0 ? 'text' : _props$type,
      inputAlign = props.inputAlign,
      _props$clearIcon = props.clearIcon,
      clearIcon = _props$clearIcon === void 0 ? 'clear' : _props$clearIcon,
      rightIcon = props.rightIcon,
      icon = props.icon,
      iconClass = props.iconClass,
      value = props.value,
      maxlength = props.maxlength,
      showWordLimit = props.showWordLimit,
      errorMessageAlign = props.errorMessageAlign,
      error = props.error,
      errorMessage = props.errorMessage,
      fixed = props.fixed,
      focus = props.focus,
      _props$cursor = props.cursor,
      cursor = _props$cursor === void 0 ? -1 : _props$cursor,
      autoFocus = props.autoFocus,
      readonly = props.readonly,
      placeholder = props.placeholder,
      placeholderStyle = props.placeholderStyle,
      autosize = props.autosize,
      _props$cursorSpacing = props.cursorSpacing,
      cursorSpacing = _props$cursorSpacing === void 0 ? 50 : _props$cursorSpacing,
      _props$adjustPosition = props.adjustPosition,
      adjustPosition = _props$adjustPosition === void 0 ? true : _props$adjustPosition,
      _props$showConfirmBar = props.showConfirmBar,
      showConfirmBar = _props$showConfirmBar === void 0 ? true : _props$showConfirmBar,
      holdKeyboard = props.holdKeyboard,
      _props$selectionEnd = props.selectionEnd,
      selectionEnd = _props$selectionEnd === void 0 ? -1 : _props$selectionEnd,
      _props$selectionStart = props.selectionStart,
      selectionStart = _props$selectionStart === void 0 ? -1 : _props$selectionStart,
      alwaysEmbed = props.alwaysEmbed,
      _props$disableDefault = props.disableDefaultPadding,
      disableDefaultPadding = _props$disableDefault === void 0 ? true : _props$disableDefault,
      confirmType = props.confirmType,
      confirmHold = props.confirmHold,
      password = props.password,
      clearable = props.clearable,
      _props$clearTrigger = props.clearTrigger,
      clearTrigger = _props$clearTrigger === void 0 ? 'focus' : _props$clearTrigger,
      renderLeftIcon = props.renderLeftIcon,
      renderTitle = props.renderTitle,
      renderInput = props.renderInput,
      renderRightIcon = props.renderRightIcon,
      renderIcon = props.renderIcon,
      renderButton = props.renderButton,
      onChange = props.onChange,
      onFocus = props.onFocus,
      onBlur = props.onBlur,
      onClear = props.onClear,
      onConfirm = props.onConfirm,
      onInput = props.onInput,
      onClickInput = props.onClickInput,
      onClickIcon = props.onClickIcon,
      onLineChange = props.onLineChange,
      onKeyboardHeightChange = props.onKeyboardHeightChange;
  (0, _react.useEffect)(function () {
    setState(function (state) {
      return _objectSpread(_objectSpread({}, state), {}, {
        unitag: "van-field_uni_".concat(FIELD_INDEX++)
      });
    });
  }, []);

  var adjustTextareaSize = function adjustTextareaSize() {
    var _taroTextarea$childre;

    var taroTextarea = document.querySelector(".".concat(state.unitag));
    var textarea = taroTextarea === null || taroTextarea === void 0 ? void 0 : (_taroTextarea$childre = taroTextarea.children) === null || _taroTextarea$childre === void 0 ? void 0 : _taroTextarea$childre[0];

    if (type === 'textarea' && autosize && textarea) {
      // 须等待textarea渲染value才有滚动高度
      setTimeout(function () {
        (0, _utils2.resizeTextarea)(textarea, autosize);
      });
    }
  };

  var emitChange = function emitChange(event) {
    event = event || {
      detail: {
        value: ''
      }
    };
    Object.defineProperty(event, 'detail', {
      value: event.detail.value
    });
    setInnerValue(event.detail || '');
    (0, _taro.nextTick)(function () {
      onInput === null || onInput === void 0 ? void 0 : onInput(event);
      onChange === null || onChange === void 0 ? void 0 : onChange(event);
    });
  };

  var setShowClear = function setShowClear(value) {
    var showClear = false;

    if (clearable && !readonly) {
      var hasValue = !!value;
      var trigger = clearTrigger === 'always' || clearTrigger === 'focus' && ref.current.focused;
      showClear = hasValue && trigger;
    }

    setState(function (pre) {
      return _objectSpread(_objectSpread({}, pre), {}, {
        showClear: showClear
      });
    });
  };

  var _input = function _input(event) {
    var _ref = event.detail || {},
        _ref$value = _ref.value,
        value = _ref$value === void 0 ? '' : _ref$value;

    setShowClear(value);
    emitChange(event);
  };

  var _focus = function _focus(event) {
    ref.current.focused = true;
    setTimeout(function () {
      setShowClear(innerValue);
    });
    Object.defineProperty(event, 'detail', {
      value: event.detail.value
    });
    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
  };

  var _blur = function _blur(event) {
    ref.current.focused = false;
    setShowClear(innerValue);
    Object.defineProperty(event, 'detail', {
      value: event.detail.value
    });
    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
  };

  var _clear = function _clear() {
    setInnerValue('');
    setShowClear('');
    (0, _taro.nextTick)(function () {
      emitChange();
      onClear === null || onClear === void 0 ? void 0 : onClear();
    });
  };

  var _confirm = function _confirm(event) {
    var _ref2 = event.detail || {},
        _ref2$value = _ref2.value,
        value = _ref2$value === void 0 ? '' : _ref2$value;

    setShowClear(value);
    Object.defineProperty(event, 'detail', {
      value: event.detail.value
    });
    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(event);
  }; // setValue(value) {
  //   this.value = value
  //   this.setShowClear()
  //   if (value === '') {
  //     this.setData({ innerValue: '' })
  //   }
  //   this.emitChange()
  // },


  (0, _react.useEffect)(function () {
    setShowClear(innerValue);
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [readonly, clearable]);
  (0, _react.useEffect)(function () {
    setInnerValue(value !== null && value !== void 0 ? value : '');
  }, [value]);
  (0, _react.useEffect)(function () {
    if (process.env.TARO_ENV === 'h5' && innerValue) {
      adjustTextareaSize();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [innerValue]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_cell.Cell, {
    size: size,
    icon: leftIcon,
    center: center,
    border: border,
    isLink: isLink,
    required: required,
    clickable: clickable,
    titleWidth: titleWidth,
    titleStyle: {
      marginRight: '12px'
    },
    style: style,
    arrowDirection: arrowDirection,
    className: 'van-field ' + "".concat(className || ''),
    renderIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: renderLeftIcon
    }),
    renderTitle: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: 'label-class ' + utils.bem('field__label', {
          disabled: disabled
        }),
        children: label
      }) : renderTitle
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: utils.bem('field__body', [type]),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: utils.bem('field__control', [inputAlign, 'custom']),
        onClick: onClickInput,
        children: renderInput
      }), type === 'textarea' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Textarea, {
        className: utils.bem('field__control', [inputAlign, type, {
          disabled: disabled,
          error: error
        }]) + " input-class ".concat(autosize ? 'autosize' : '', " ").concat(state.unitag) + "".concat(process.env.TARO_ENV !== 'weapp' && autosize ? ' autosize-height' : ''),
        fixed: fixed,
        focus: focus,
        cursor: cursor,
        value: innerValue,
        autoFocus: autoFocus,
        disabled: disabled || readonly,
        maxlength: maxlength,
        placeholder: placeholder,
        placeholderStyle: placeholderStyle,
        placeholderClass: utils.bem('field__placeholder', {
          error: error,
          disabled: disabled
        }) // eslint-disable-next-line
        // @ts-ignore
        ,
        nativeProps: autosize ? {
          rows: 1
        } : {},
        autoHeight: !!autosize,
        style: computed.inputStyle(autosize),
        cursorSpacing: cursorSpacing,
        adjustPosition: adjustPosition,
        showConfirmBar: showConfirmBar,
        holdKeyboard: holdKeyboard,
        selectionEnd: selectionEnd,
        selectionStart: selectionStart,
        disableDefaultPadding: disableDefaultPadding,
        onInput: _input,
        onClick: onClickInput,
        onBlur: _blur,
        onFocus: _focus,
        onConfirm: _confirm,
        onLineChange: onLineChange,
        onKeyboardHeightChange: onKeyboardHeightChange,
        showCount: ""
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
        className: utils.bem('field__control', [inputAlign, {
          disabled: disabled,
          error: error
        }]) + ' input-class' // eslint-disable-next-line
        // @ts-ignore
        ,
        type: type,
        focus: focus,
        cursor: cursor,
        value: innerValue,
        autoFocus: autoFocus,
        disabled: disabled || readonly,
        maxlength: maxlength,
        placeholder: placeholder,
        placeholderStyle: placeholderStyle,
        placeholderClass: utils.bem('field__placeholder', {
          error: error
        }),
        confirmType: confirmType,
        confirmHold: confirmHold,
        holdKeyboard: holdKeyboard,
        cursorSpacing: cursorSpacing,
        adjustPosition: adjustPosition,
        selectionEnd: selectionEnd,
        selectionStart: selectionStart,
        alwaysEmbed: alwaysEmbed,
        password: password || type === 'password',
        onInput: _input,
        onClick: onClickInput,
        onBlur: _blur,
        onFocus: _focus,
        onConfirm: _confirm,
        onKeyboardHeightChange: onKeyboardHeightChange
      }), showClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
        name: clearIcon,
        className: "van-field__clear-root van-field__icon-root",
        onTouchStart: _clear
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
        className: "van-field__icon-container",
        onClick: onClickIcon,
        children: [(rightIcon || icon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
          name: rightIcon || icon,
          className: 'van-field__icon-root ' + iconClass + ' right-icon-class'
        }), renderRightIcon, renderIcon]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-field__button",
        children: renderButton
      })]
    }), showWordLimit && maxlength && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      className: "van-field__word-limit",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: utils.bem('field__word-num', {
          full: innerValue.length >= maxlength
        }),
        children: innerValue.length >= maxlength ? maxlength : innerValue.length
      }), '/' + maxlength]
    }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
      className: utils.bem('field__error-message', [errorMessageAlign, {
        disabled: disabled,
        error: error
      }]),
      children: errorMessage
    })]
  });
}

var _default = Field;
exports.default = _default;