mui-component
Version:
some custom mui components
134 lines • 5.4 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { useState } from "react";
import { useKeyPress, useMemoizedFn } from "ahooks";
import { useId } from "@iimm/react-shared";
import { Button, Card, CardActions, CardContent, IconButton, Popover, TextField } from "@mui/material";
import { IconCornerUpRightDouble } from "@tabler/icons-react";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var JumpTo = function JumpTo(_ref) {
var total = _ref.total,
onPageChange = _ref.onPageChange,
color = _ref.color,
size = _ref.size;
var id = useId();
var inputId = useId();
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
anchorEl = _useState2[0],
setAnchorEl = _useState2[1];
var _useState3 = useState(""),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
setValue = _useState4[1];
var onClick = useMemoizedFn(function (e) {
setValue("");
setAnchorEl(e.currentTarget);
});
var onClose = useMemoizedFn(function () {
setValue("");
setAnchorEl(null);
});
var onChange = useMemoizedFn(function (e) {
setValue(e.target.value || "");
});
var onJump = useMemoizedFn(function () {
var v = parseInt("".concat(value || 1));
if (v < 1) {
v = 1;
} else if (v > total) {
v = total || 1;
}
onPageChange === null || onPageChange === void 0 || onPageChange(v);
onClose();
});
var onEnter = useMemoizedFn(function (e) {
e === null || e === void 0 || e.preventDefault();
if (!value) return;
onJump();
});
useKeyPress("enter", onEnter, {
target: document.getElementById(inputId)
});
var open = Boolean(anchorEl);
var popoverId = open ? id : undefined;
var wh = !size || size === "small" ? 26 : size === "large" ? 40 : 32;
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(IconButton, {
onClick: onClick,
"aria-describedby": id,
title: "\u8DF3\u8F6C\u5230\u6307\u5B9A\u9875",
size: "small",
color: color || "secondary",
sx: {
borderRadius: "50%",
borderStyle: "solid",
borderColor: "rgba(0,0,0,0.2)",
borderWidth: 1,
width: wh,
height: wh
},
children: /*#__PURE__*/_jsx(IconCornerUpRightDouble, {})
}), /*#__PURE__*/_jsx(Popover, {
id: popoverId,
open: open,
anchorEl: anchorEl,
onClose: onClose,
anchorOrigin: {
vertical: "center",
horizontal: "center"
},
transformOrigin: {
vertical: "center",
horizontal: "center"
},
children: /*#__PURE__*/_jsxs(Card, {
sx: {
px: 0,
minWidth: 180,
maxWidth: 250
},
children: [/*#__PURE__*/_jsx(CardContent, {
children: /*#__PURE__*/_jsx(TextField, {
id: inputId,
label: "\u8F93\u5165\u8981\u8DF3\u8F6C\u7684\u9875\u7801",
size: "small",
placeholder: "\u76EE\u6807\u9875\u7801",
variant: "standard",
autoFocus: true,
type: "number",
fullWidth: true,
inputProps: {
type: "number",
min: 1,
max: total || 1
},
value: value,
onChange: onChange
})
}), /*#__PURE__*/_jsxs(CardActions, {
sx: {
py: 0,
px: 1,
display: "flex",
justifyContent: "space-between"
},
children: [/*#__PURE__*/_jsx(Button, {
color: "secondary",
onClick: onClose,
children: "\u5173\u95ED"
}), /*#__PURE__*/_jsx(Button, {
disabled: !value,
onClick: onJump,
children: "\u8DF3\u8F6C!"
})]
})]
})
})]
});
};