@aplus-frontend/antdv/lib/input/OTP/index.js

Vue basic component library maintained based on ant-design-vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inputProps = _interopRequireDefault(require("../inputProps"));
var _FormItemContext = require("../../form/FormItemContext");
var _useConfigInject = _interopRequireDefault(require("../../config-provider/hooks/useConfigInject"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _otp = _interopRequireDefault(require("../style/otp"));
var _OTPInput = _interopRequireDefault(require("./OTPInput"));
var _statusUtils = require("../../_util/statusUtils");
var _warning = _interopRequireDefault(require("../../_util/warning"));
var _default = exports.default = (0, _vue.defineComponent)({
  compatConfig: {
    MODE: 3
  },
  name: 'AOTP',
  inheritAttrs: false,
  props: (0, _extends2.default)((0, _extends2.default)({}, (0, _inputProps.default)()), {
    length: {
      type: Number,
      default: 6
    },
    onChange: {
      type: Function,
      default: undefined
    },
    onInput: {
      type: Function,
      default: undefined
    },
    formatter: {
      type: Function,
      default: undefined
    },
    defaultValue: {
      type: String,
      default: undefined
    },
    mask: {
      type: [String, Boolean],
      default: false
    },
    status: {
      type: String,
      default: undefined
    }
  }),
  setup(props, _ref) {
    let {
      attrs
    } = _ref;
    const {
      prefixCls,
      direction,
      size
    } = (0, _useConfigInject.default)('otp', props);
    // Style
    const [wrapSSR, hashId] = (0, _otp.default)(prefixCls);
    // ==================== Provider =========================
    const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
    const mergedStatus = (0, _vue.computed)(() => (0, _statusUtils.getMergedStatus)(formItemInputContext.status, props.status));
    const refs = (0, _vue.ref)([]);
    const strToArr = str => (str || '').split('');
    // keep reactive
    const internalFormatter = txt => props.formatter ? props.formatter(txt) : txt;
    const valueCells = (0, _vue.ref)(strToArr(internalFormatter(props.defaultValue || '')));
    (0, _vue.watchEffect)(() => {
      if (typeof props.value !== 'undefined' && props.value !== null) {
        valueCells.value = strToArr(String(props.value));
      }
    });
    const patchValue = (index, txt) => {
      let nextCells = valueCells.value.slice();
      for (let i = 0; i < index; i += 1) {
        if (!nextCells[i]) {
          nextCells[i] = '';
        }
      }
      if (txt.length <= 1) {
        nextCells[index] = txt;
      } else {
        nextCells = nextCells.slice(0, index).concat(strToArr(txt));
      }
      nextCells = nextCells.slice(0, props.length);
      for (let i = nextCells.length - 1; i >= 0; i -= 1) {
        if (nextCells[i]) {
          break;
        }
        nextCells.pop();
      }
      const formattedValue = internalFormatter(nextCells.map(c => c || ' ').join(''));
      nextCells = strToArr(formattedValue).map((c, i) => {
        if (c === ' ' && !nextCells[i]) {
          return nextCells[i];
        }
        return c;
      });
      return nextCells;
    };
    // ======================= Change handlers =================
    const onInputActiveChange = nextIndex => {
      var _a;
      (_a = refs.value[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
    };
    const onInputChange = (index, value) => {
      var _a;
      const nextValueCells = patchValue(index, value);
      const nextIndex = Math.min(index + value.length, props.length);
      if (nextIndex !== index) {
        (_a = refs.value[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
      }
      if (props.onInput) {
        props.onInput(nextValueCells);
      }
      if (props.onChange && nextValueCells.length === props.length && nextValueCells.every(v => v) && nextValueCells.some((v, i) => v !== valueCells.value[i])) {
        props.onChange(nextValueCells.join(''));
      }
      valueCells.value = nextValueCells.slice();
    };
    return () => {
      const cls = (0, _classNames.default)(prefixCls.value, {
        [`${prefixCls}-sm`]: size.value === 'small',
        [`${prefixCls}-lg`]: size.value === 'large',
        [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
      }, attrs.class, hashId.value);
      const {
        length,
        autofocus,
        disabled,
        mask
      } = props;
      const inputShardProps = {
        disabled,
        mask
      };
      if (process.env.NODE_ENV !== 'production') {
        (0, _warning.default)(!(typeof mask === 'string' && mask.length > 1), 'Input.OTP', '`mask` prop should be a single character.');
      }
      return wrapSSR((0, _vue.createVNode)("div", {
        "class": cls
      }, [Array.from({
        length
      }).map((_, index) => {
        const key = `opt-${index}`;
        const singleValue = valueCells.value[index];
        return (0, _vue.createVNode)(_OTPInput.default, (0, _objectSpread2.default)({
          "ref": ref => refs.value[index] = ref,
          "key": key,
          "index": index,
          "class": `${prefixCls.value}-input`,
          "value": singleValue,
          "htmlSize": 1,
          "onChange": onInputChange,
          "status": mergedStatus.value,
          "onActiveChange": onInputActiveChange,
          "autofocus": index === 0 && autofocus
        }, inputShardProps), null);
      })]));
    };
  }
});