gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
246 lines (245 loc) • 8.59 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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__default, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { c as cn } from './bem-893ad28d.js';
import { P as Popup } from './popup.taro-33d0bbc8.js';
import { u as useConfig } from './configprovider.taro-6c7b3056.js';
var defaultProps = {
confirmText: '',
title: '',
visible: false,
type: 'default',
customKey: [],
className: '',
randomKeys: false,
popClass: '',
onClose: function onClose() {}
};
var NumberKeyboard = function NumberKeyboard(props) {
var _useConfig = useConfig(),
locale = _useConfig.locale;
var title = props.title,
confirmText = props.confirmText,
visible = props.visible,
type = props.type,
customKey = props.customKey,
randomKeys = props.randomKeys,
popClass = props.popClass,
style = props.style,
className = props.className,
onChange = props.onChange,
onDelete = props.onDelete,
onClose = props.onClose;
var b = cn('numberkeyboard');
var _useState = useState(visible),
_useState2 = _slicedToArray(_useState, 2),
show = _useState2[0],
setShow = _useState2[1];
var _useState3 = useState(undefined),
_useState4 = _slicedToArray(_useState3, 2),
clickKeyIndex = _useState4[0],
setClickKeyIndex = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
keysList = _useState6[0],
setKeysList = _useState6[1];
useEffect(function () {
setShow(visible);
}, [visible]);
var defaultKey = function defaultKey() {
var leftBottomKey = {
id: 'lock',
type: 'lock'
};
if (customKey) {
var customKeys = Array.isArray(customKey) ? customKey : [customKey];
if (customKeys.length > 0) {
var newCustomKey = customKeys[0];
leftBottomKey = {
id: newCustomKey,
type: 'custom'
};
}
}
return [].concat(_toConsumableArray(getBasicKeys()), [leftBottomKey, {
id: 0,
type: 'number'
}, {
id: 'delete',
type: 'delete'
}]);
};
var getBasicKeys = function getBasicKeys() {
var keys = [];
for (var i = 1; i <= 9; i++) {
keys.push({
id: i,
type: 'number'
});
}
if (randomKeys) {
return keys.sort(function () {
return Math.random() > 0.5 ? 1 : -1;
});
}
return keys;
};
var genCustomKeys = function genCustomKeys() {
var keys = getBasicKeys();
if (!customKey) return [];
var customKeys = Array.isArray(customKey) ? customKey : [customKey];
if (customKeys.length > 2) {
customKeys = [customKeys[0], customKeys[1]];
}
if (customKeys.length === 2 && props.title && props.type !== 'rightColumn') {
customKeys = [customKeys[0]];
}
if (customKeys.length === 1) {
if (props.title && props.type !== 'rightColumn') {
keys.push({
id: customKeys[0],
type: 'custom'
}, {
id: 0,
type: 'number'
}, {
id: 'delete',
type: 'delete'
});
} else {
keys.push({
id: 0,
type: 'number'
}, {
id: customKeys[0],
type: 'custom'
});
}
} else if (customKeys.length === 2) {
keys.push({
id: customKeys[0],
type: 'custom'
}, {
id: 0,
type: 'number'
}, {
id: customKeys[1],
type: 'custom'
});
}
return keys;
};
useEffect(function () {
if (props.type === 'rightColumn' || props.title !== '') {
setKeysList(genCustomKeys());
} else {
setKeysList(defaultKey());
}
}, []);
var onTouchstart = function onTouchstart(item, event) {
event.stopPropagation();
setClickKeyIndex(item.id);
if (item.type === 'number' || item.type === 'custom') {
onChange && onChange(item.id);
}
if (item.type === 'lock') {
onClose && onClose();
}
if (item.type === 'delete') {
onDelete && onDelete();
}
};
var onTouchMove = function onTouchMove(event) {
event.stopPropagation();
};
var onTouchEnd = function onTouchEnd(event) {
event.preventDefault();
setClickKeyIndex(undefined);
};
return React__default.createElement("div", null, React__default.createElement(Popup, {
visible: show,
position: "bottom",
popClass: popClass,
onClickOverlay: onClose,
onClickCloseIcon: onClose,
overlayStyle: {
backgroundColor: 'rgba(0, 0, 0, 0)'
}
}, React__default.createElement("div", {
className: "".concat(b(), " ").concat(className),
style: _objectSpread({}, style)
}, title ? React__default.createElement("div", {
className: b('header')
}, React__default.createElement("h3", {
className: b('header__tit')
}, title), type === 'default' ? React__default.createElement("span", {
className: b('header__close'),
onClick: onClose
}, locale.done) : null) : null, React__default.createElement("div", {
className: b('body')
}, React__default.createElement("div", {
className: b('body__keys')
}, keysList === null || keysList === void 0 ? void 0 : keysList.map(function (item, index) {
return React__default.createElement("div", {
key: index,
className: classNames({
'key-board-wrapper': true,
'key-board-wrapper-large': item.id === 0 && type === 'rightColumn' && Array.isArray(customKey) && customKey.length === 1
})
}, React__default.createElement("div", {
className: classNames({
key: true,
active: item.id === clickKeyIndex,
lock: item.type === 'lock',
"delete": item.type === 'delete'
}),
onTouchStart: function onTouchStart(event) {
return onTouchstart(item, event);
},
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
}, item.type === 'number' || item.type === 'custom' ? React__default.createElement("div", null, item.id) : null, item.type === 'lock' ? React__default.createElement("img", {
src: "https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png",
alt: ""
}) : null, item.type === 'delete' ? React__default.createElement("img", {
src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png",
alt: ""
}) : null));
})), type === 'rightColumn' ? React__default.createElement("div", {
className: b('sidebar')
}, React__default.createElement("div", {
className: "key-board-wrapper"
}, React__default.createElement("div", {
className: classNames({
key: true,
active: clickKeyIndex === 'delete'
}),
onTouchStart: function onTouchStart(event) {
return onTouchstart({
id: 'delete',
type: 'delete'
}, event);
},
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd
}, React__default.createElement("img", {
src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png",
alt: ""
}))), React__default.createElement("div", {
className: "key-board-wrapper key-board-finish",
onClick: onClose
}, React__default.createElement("div", {
className: classNames({
key: true,
finish: true,
activeFinsh: clickKeyIndex === 'finish'
})
}, confirmText || locale.done))) : null))));
};
NumberKeyboard.defaultProps = defaultProps;
NumberKeyboard.displayName = 'NutNumberKeyboard';
export { NumberKeyboard as N };