vantui-edit
Version:
一套适用于Taro3及React的vantui组件库
223 lines (187 loc) • 8.65 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NumberKeyboard = void 0;
var _react = _interopRequireWildcard(require("react"));
var _components = require("@tarojs/components");
var _classnames = _interopRequireDefault(require("classnames"));
var _icon = require("../icon");
var _popup = require("../popup");
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; }
var classPrefix = 'vantui-number-keyboard';
var NumberKeyboard = function NumberKeyboard(props) {
var visible = props.visible,
title = props.title,
customKey = props.customKey,
onInput = props.onInput,
_props$randomOrder = props.randomOrder,
randomOrder = _props$randomOrder === void 0 ? false : _props$randomOrder,
_props$showCloseButto = props.showCloseButton,
showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
_props$confirmText = props.confirmText,
confirmText = _props$confirmText === void 0 ? null : _props$confirmText,
_props$closeOnConfirm = props.closeOnConfirm,
closeOnConfirm = _props$closeOnConfirm === void 0 ? true : _props$closeOnConfirm;
var shuffle = (0, _react.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 = (0, _react.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 = (0, _react.useRef)(-1);
var intervalRef = (0, _react.useRef)(-1);
var onDelete = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: (0, _classnames.default)("".concat(classPrefix, "-header"), {
'with-title': !!title
}),
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "".concat(classPrefix, "-title"),
children: title
}), showCloseButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
name: "arrow-down"
})
})]
});
}; // 渲染基础键盘按键
var renderKey = function renderKey(key, index) {
var isNumberKey = /^\d$/.test(key);
var className = (0, _classnames.default)("".concat(classPrefix, "-key"), {
'number-key': isNumberKey,
'sign-key': !isNumberKey && key,
'mid-key': index === 9 && !!confirmText
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
name: "close",
size: 40
}) : key
}, key);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popup.Popup, {
show: visible,
overlay: false,
onClose: props.afterClose,
className: "".concat(classPrefix, "-popup"),
position: "bottom",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: classPrefix,
onClick: function onClick(e) {
e.preventDefault();
},
children: [renderHeader(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "".concat(classPrefix, "-wrapper"),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames.default)("".concat(classPrefix, "-main"), {
'confirmed-style': !!confirmText
}),
children: keys.map(renderKey)
}), !!confirmText && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "".concat(classPrefix, "-confirm"),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_icon.Icon, {
name: "close",
size: 40
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "".concat(classPrefix, "-key extra-key ok-key"),
onTouchEnd: function onTouchEnd(e) {
return onKeyPress(e, 'OK');
} // onClick={(e) => onKeyPress(e, 'OK')}
,
children: confirmText
})]
})]
})]
})
});
};
exports.NumberKeyboard = NumberKeyboard;
var _default = NumberKeyboard;
exports.default = _default;