@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
168 lines (167 loc) • 5.77 kB
JavaScript
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);
})]));
};
}
});
;