@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
139 lines (138 loc) • 6.37 kB
JavaScript
import { _ as __rest } from "./tslib.es6.js";
import React__default, { useMemo, useState } from "react";
import classNames from "classnames";
import { ArrowDown } from "@nutui/icons-react";
import Popup__default from "./Popup.js";
import { useConfig } from "./ConfigProvider.js";
import { C as ComponentDefaults } from "./typings.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, rightActions: "", type: "default", custom: [], random: false, onClose: () => {
} });
const NumberKeyboard = (props) => {
const { locale } = useConfig();
const _a = Object.assign(Object.assign({}, defaultProps), props), { title, rightActions, confirmText, visible, type, custom, random, style, className, onChange, onDelete, onClose, onConfirm } = _a, rest = __rest(_a, ["title", "rightActions", "confirmText", "visible", "type", "custom", "random", "style", "className", "onChange", "onDelete", "onClose", "onConfirm"]);
const classPrefix = "nut-numberkeyboard";
const getBasicKeys = () => {
const keys = new Array(9).fill(0).map((_, index) => {
return {
id: String(index + 1),
type: "num"
};
});
return random ? keys.sort(() => Math.random() > 0.5 ? 1 : -1) : keys;
};
const getCustomKeys = () => {
const customKeys = [
{ id: "close", type: "close" },
{ id: "0", type: "num" },
{ id: "delete", type: "delete" }
];
if (!custom)
return customKeys;
if (custom.length > 0) {
customKeys[0] = { id: custom[0], type: "custom" };
}
if (custom.length > 1) {
customKeys[2] = { id: custom[1], type: "custom" };
}
return customKeys;
};
const keysList = useMemo(() => {
return [...getBasicKeys(), ...getCustomKeys()];
}, [type, random, custom]);
const DeleteIcon = () => {
return React__default.createElement(
"svg",
{ viewBox: "0 0 1024 1024", width: "28", height: "28" },
React__default.createElement("path", { d: "M875.594 186.122H390.803a51.162 51.162 0 0 0-36.18 14.986L79.91 475.821a51.166 51.166 0 0 0 0 72.358l274.714 274.712a51.164 51.164 0 0 0 36.179 14.986h484.791c46.033 0 83.484-37.45 83.484-83.483V269.606c.001-46.033-37.45-83.484-83.483-83.484zm32.32 568.274c0 17.85-14.473 32.318-32.32 32.318H390.803L116.089 512l274.714-274.714h484.791c17.849 0 32.32 14.47 32.32 32.32v484.789z", fill: "currentColor" }),
React__default.createElement("path", { d: "M753.945 360.214l-121.43 121.429-121.43-121.429s-16.062-8.224-30.356 6.072c-14.295 14.295-6.073 30.357-6.073 30.357l121.43 121.428L486.8 627.357s-8.222 16.062 6.072 30.357c14.297 14.296 30.358 6.072 30.358 6.072l109.286-109.285 109.286 109.285s16.062 8.224 30.357-6.072c14.295-14.295 6.07-30.357 6.07-30.357L668.944 518.072l121.431-121.43s8.22-16.061-6.074-30.356c-14.294-14.296-30.356-6.072-30.356-6.072z", fill: "currentColor" })
);
};
const NumberKeyboardKey = (props2) => {
const { item } = props2;
const [active, setActive] = useState(false);
const onTouchStart = () => {
setActive(true);
};
const onTouchEnd = (item2) => {
setActive(false);
switch (item2.type) {
case "num":
case "custom":
onChange === null || onChange === void 0 ? void 0 : onChange(item2.id);
break;
case "close":
onClose === null || onClose === void 0 ? void 0 : onClose();
break;
case "delete":
onDelete === null || onDelete === void 0 ? void 0 : onDelete();
break;
case "confirm":
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
break;
}
};
const renderContent = (item2) => {
switch (item2.type) {
case "num":
case "custom":
return React__default.createElement("div", null, item2.id);
case "delete":
return React__default.createElement(DeleteIcon, null);
case "close":
return React__default.createElement(ArrowDown, { width: 18, height: 18 });
case "confirm":
return React__default.createElement(React__default.Fragment, null, confirmText || locale.done);
default:
return null;
}
};
return React__default.createElement(
"div",
{ key: item.id, className: `${classPrefix}-body-wrapper` },
React__default.createElement("div", { className: classNames({
key: true,
active,
close: item.type === "close",
delete: item.type === "delete",
confirm: item.type === "confirm"
}), onTouchStart: () => onTouchStart(), onTouchEnd: () => onTouchEnd(item), onTouchCancel: () => onTouchEnd(item) }, renderContent(item))
);
};
return React__default.createElement(
Popup__default,
Object.assign({}, rest, { visible, position: "bottom", onOverlayClick: onClose, onCloseIconClick: onClose, zIndex: 9999, overlayStyle: { backgroundColor: "rgba(0, 0, 0, 0)" } }),
React__default.createElement(
"div",
{ className: classNames(classPrefix, className), style },
title && React__default.createElement(
"div",
{ className: `${classPrefix}-header` },
React__default.createElement("div", { className: `${classPrefix}-header-title` }, title),
type === "default" && React__default.createElement("span", { className: `${classPrefix}-header-close`, onClick: onConfirm }, rightActions || locale.done)
),
React__default.createElement(
"div",
{ className: `${classPrefix}-body` },
React__default.createElement("div", { className: `${classPrefix}-body-keys` }, keysList === null || keysList === void 0 ? void 0 : keysList.map((item) => {
return React__default.createElement(NumberKeyboardKey, { key: item.id, item });
})),
type === "rightColumn" && React__default.createElement(
"div",
{ className: `${classPrefix}-sidebar` },
React__default.createElement(NumberKeyboardKey, { key: "delete", item: {
id: "delete",
type: "delete"
} }),
React__default.createElement(NumberKeyboardKey, { key: "confirm", item: {
id: "confirm",
type: "confirm"
} })
)
)
)
);
};
NumberKeyboard.displayName = "NutNumberKeyboard";
export {
NumberKeyboard as default
};