@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
196 lines (192 loc) • 7.96 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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) { _defineProperty(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; }
import React, { useRef, useMemo, useCallback, useState } from 'react';
import { View, Text } from '@tarojs/components';
import classNames from 'classnames';
import { Icon } from '../icon';
import { Popup } from '../popup';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var classPrefix = 'vantui-number-keyboard';
export var NumberKeyboard = function NumberKeyboard(props) {
var _useState = useState(get().NumberKeyboard),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
visible = _d$props.visible,
title = _d$props.title,
customKey = _d$props.customKey,
onInput = _d$props.onInput,
_d$props$randomOrder = _d$props.randomOrder,
randomOrder = _d$props$randomOrder === void 0 ? false : _d$props$randomOrder,
_d$props$showCloseBut = _d$props.showCloseButton,
showCloseButton = _d$props$showCloseBut === void 0 ? true : _d$props$showCloseBut,
_d$props$confirmText = _d$props.confirmText,
confirmText = _d$props$confirmText === void 0 ? null : _d$props$confirmText,
_d$props$closeOnConfi = _d$props.closeOnConfirm,
closeOnConfirm = _d$props$closeOnConfi === void 0 ? true : _d$props$closeOnConfi;
var shuffle = useCallback(function (array) {
var len = array.length;
for (var i = len - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var _ref = [array[j], array[i]];
array[i] = _ref[0];
array[j] = _ref[1];
}
return array;
}, []);
var keys = useMemo(function () {
var defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
var keyList = randomOrder ? shuffle(defaultKeys) : defaultKeys;
keyList.push('0');
if (confirmText) {
keyList.push(customKey || '');
} else {
keyList.splice(9, 0, customKey || '');
keyList.push('BACKSPACE');
}
return keyList;
}, [randomOrder, shuffle, confirmText, customKey]);
var timeoutRef = useRef(-1);
var intervalRef = useRef(-1);
var onDelete = useCallback(function () {
var _props$onDelete;
(_props$onDelete = props.onDelete) === null || _props$onDelete === void 0 ? void 0 : _props$onDelete.call(props);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.onDelete]);
var onBackspacePressStart = function onBackspacePressStart() {
timeoutRef.current = window.setTimeout(function () {
onDelete();
intervalRef.current = window.setInterval(onDelete, 150);
}, 700);
};
var onBackspacePressEnd = function onBackspacePressEnd() {
clearTimeout(timeoutRef.current);
clearInterval(intervalRef.current);
};
// 点击键盘按键
var onKeyPress = function onKeyPress(e, key) {
var _props$onConfirm;
e.preventDefault();
e.stopPropagation();
switch (key) {
case 'BACKSPACE':
onDelete === null || onDelete === void 0 ? void 0 : onDelete();
break;
case 'OK':
(_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 ? void 0 : _props$onConfirm.call(props);
if (closeOnConfirm) {
var _props$onClose;
(_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
}
break;
default:
// 当 customKey 不存在时，点击该键不应该触发 onInput
if (key !== '') onInput === null || onInput === void 0 ? void 0 : onInput(key);
break;
}
};
// 渲染 title 和 close button
var renderHeader = function renderHeader() {
if (!showCloseButton && !title) return null;
return /*#__PURE__*/_jsxs(View, {
className: classNames("".concat(classPrefix, "-header"), {
'with-title': !!title
}),
children: [title && /*#__PURE__*/_jsx(View, {
className: "".concat(classPrefix, "-title"),
children: title
}), showCloseButton && /*#__PURE__*/_jsx(Text, {
className: "".concat(classPrefix, "-header-close-button"),
onClick: function onClick() {
var _props$onClose2;
(_props$onClose2 = props.onClose) === null || _props$onClose2 === void 0 ? void 0 : _props$onClose2.call(props);
},
children: /*#__PURE__*/_jsx(Icon, {
name: "arrow-down"
})
})]
});
};
// 渲染基础键盘按键
var renderKey = function renderKey(key, index) {
var isNumberKey = /^\d$/.test(key);
var className = classNames("".concat(classPrefix, "-key"), {
'number-key': isNumberKey,
'sign-key': !isNumberKey && key,
'mid-key': index === 9 && !!confirmText
});
return /*#__PURE__*/_jsx(View, {
className: className,
onTouchStart: function onTouchStart() {
if (key === 'BACKSPACE') {
onBackspacePressStart();
}
},
onTouchEnd: function onTouchEnd() {
if (key === 'BACKSPACE') {
onBackspacePressEnd();
}
},
onClick: function onClick(e) {
onKeyPress(e, key);
},
children: key === 'BACKSPACE' ? /*#__PURE__*/_jsx(Icon, {
name: "close",
size: 40
}) : key
}, key);
};
return /*#__PURE__*/_jsx(Popup, {
show: visible,
overlay: false,
onClose: props.afterClose,
className: "".concat(classPrefix, "-popup"),
position: "bottom",
children: /*#__PURE__*/_jsxs(View, {
className: classPrefix,
onClick: function onClick(e) {
e.preventDefault();
},
children: [renderHeader(), /*#__PURE__*/_jsxs(View, {
className: "".concat(classPrefix, "-wrapper"),
children: [/*#__PURE__*/_jsx(View, {
className: classNames("".concat(classPrefix, "-main"), {
'confirmed-style': !!confirmText
}),
children: keys.map(renderKey)
}), !!confirmText && /*#__PURE__*/_jsxs(View, {
className: "".concat(classPrefix, "-confirm"),
children: [/*#__PURE__*/_jsx(View, {
className: "".concat(classPrefix, "-key extra-key bs-key"),
onTouchStart: function onTouchStart() {
onBackspacePressStart();
},
onTouchEnd: function onTouchEnd(e) {
onKeyPress(e, 'BACKSPACE');
onBackspacePressEnd();
}
// onClick={(e) => onKeyPress(e, 'BACKSPACE')}
,
children: /*#__PURE__*/_jsx(Icon, {
name: "close",
size: 40
})
}), /*#__PURE__*/_jsx(View, {
className: "".concat(classPrefix, "-key extra-key ok-key"),
onTouchEnd: function onTouchEnd(e) {
return onKeyPress(e, 'OK');
}
// onClick={(e) => onKeyPress(e, 'OK')}
,
children: confirmText
})]
})]
})]
})
});
};
export default NumberKeyboard;