@stakefish/ui
Version:
<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>
198 lines (195 loc) • 8.04 kB
JavaScript
import { _ as __assign, a as __rest } from '../tslib.es6-35932c2c.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
import { styled, useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import MuiBox from '@mui/material/Box';
import TextField from './TextField.js';
import IconButton from './IconButton.js';
import '@mui/material/TextField';
import '../theme/colors.js';
import './EndAdornment.js';
import '@mui/material/InputAdornment';
import './Icon.js';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import './Button.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import './Input.js';
import '@mui/material/Input';
import '../theme/typography.js';
import '@mui/material/IconButton';
/**
* Constants
*/
var stepperSizeMap = {
xs: "xs1",
sm: "sm",
md: "sm",
lg: "lg"
};
var stepperMobileSizeMap = {
xs: "xs1",
sm: "xs1",
md: "xs1",
lg: "sm"
};
var stepperPaddingMap = {
xs: 4,
sm: 4,
md: 8,
lg: 8
};
/**
* Styles
*/
var StepperBox = styled(MuiBox)(function (_a) {
var _b;
var _c = _a.$data, inputSize = _c.inputSize, disabled = _c.disabled, theme = _a.theme;
return (_b = {
display: "flex",
gap: 0,
pointerEvents: disabled ? "none" : "initial",
marginRight: theme.spacing(1.5),
"& .icon:last-child": {
marginRight: 0
},
"& .MuiIconButton-root": {
padding: "0 ".concat(stepperPaddingMap[inputSize], "px"),
boxSizing: "content-box",
"& + .MuiButtonBase-root": {
marginLeft: theme.spacing(1)
}
}
},
_b[theme.breakpoints.down("sm")] = {
marginRight: 0,
"& .MuiIconButton-root": {
"& + .MuiButtonBase-root": {
marginLeft: theme.spacing(0.5)
}
}
},
_b);
});
/**
* Helpers
*/
var getButtonProps = function (type, inputSize, keyPress, isMobile) {
if (inputSize === void 0) { inputSize = "xs"; }
return ({
iconKey: type === "up" ? "plus" : "minus",
size: isMobile ? stepperMobileSizeMap[inputSize] : stepperSizeMap[inputSize],
color: (function () {
if (keyPress === "ArrowUp" && type === "up")
return "primary";
if (keyPress === "ArrowDown" && type === "down")
return "primary";
return "secondary";
})()
});
};
/**
* Components
*/
var Stepper = function (_a) {
var _b = _a.inputSize, inputSize = _b === void 0 ? "xs" : _b, _c = _a.inputColor, inputColor = _c === void 0 ? "primary" : _c, inputNode = _a.inputNode, keyPress = _a.keyPress, disabled = _a.disabled, upButtonProps = _a.upButtonProps, downButtonProps = _a.downButtonProps;
var theme = useTheme();
var isMobile = useMediaQuery(theme.breakpoints.down("sm"));
return (jsxs(StepperBox, __assign({ "$data": {
inputSize: inputSize,
inputColor: inputColor,
disabled: disabled
} }, { children: [jsx(IconButton, __assign({}, downButtonProps, { iconProps: __assign({}, getButtonProps("down", inputSize, keyPress, isMobile)), onClick: function (e) {
inputNode === null || inputNode === void 0 ? void 0 : inputNode.stepDown();
inputNode === null || inputNode === void 0 ? void 0 : inputNode.dispatchEvent(new Event("input", { bubbles: true }));
if (downButtonProps === null || downButtonProps === void 0 ? void 0 : downButtonProps.onClick)
downButtonProps.onClick(e);
} }), void 0), jsx(IconButton, __assign({}, upButtonProps, { iconProps: __assign({}, getButtonProps("up", inputSize, keyPress, isMobile)), onClick: function (e) {
inputNode === null || inputNode === void 0 ? void 0 : inputNode.stepUp();
inputNode === null || inputNode === void 0 ? void 0 : inputNode.dispatchEvent(new Event("input", { bubbles: true }));
if (upButtonProps === null || upButtonProps === void 0 ? void 0 : upButtonProps.onClick)
upButtonProps.onClick(e);
} }), void 0)] }), void 0));
};
/**
* Main
*/
var NumericField = function (_a) {
var onChange = _a.onChange, onKeyDown = _a.onKeyDown, InputProps = _a.InputProps, stepperProps = _a.stepperProps, actionButtonProps = _a.actionButtonProps, props = __rest(_a, ["onChange", "onKeyDown", "InputProps", "stepperProps", "actionButtonProps"]);
var fieldRef = useRef(null);
var _b = useState(null), keyPress = _b[0], setKeyPress = _b[1];
var _c = useState(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current), fieldRefCurrent = _c[0], setFieldRefCurrent = _c[1];
useEffect(function () {
setFieldRefCurrent(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current);
}, [fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current]);
return (jsx(TextField, __assign({ ref: fieldRef, type: "number", onChange: function (event) {
if (onChange)
onChange(event);
}, onKeyDown: function (event) {
setKeyPress(event.key);
if (onKeyDown)
onKeyDown(event);
}, onKeyUp: function () { return setKeyPress(null); }, actionButtonProps: actionButtonProps, InputProps: __assign({ size: props === null || props === void 0 ? void 0 : props.size, endAdornment: (jsx(Stepper, __assign({ keyPress: keyPress, inputSize: props === null || props === void 0 ? void 0 : props.size, inputColor: props === null || props === void 0 ? void 0 : props.color, disabled: props === null || props === void 0 ? void 0 : props.disabled, inputNode: fieldRefCurrent === null || fieldRefCurrent === void 0 ? void 0 : fieldRefCurrent.querySelector("input") }, stepperProps), void 0)) }, InputProps) }, props), void 0));
};
export { Stepper, NumericField as default };