@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
67 lines • 3.02 kB
JSX
"use client";
import { useCallback, useEffect, useRef } from "react";
import { Controls } from "../../../components";
import { format, parseNumber } from "../../../lib/utils";
import { Numberpad } from "../../../parts";
export default function Currency(props) {
const step = props?.step || 1;
const max = parseNumber(props?.max);
const ref = useRef(props?.value?.toString() || "");
const handleClick = useCallback((e) => {
if (typeof props?.button?.onClick === "function")
props?.button?.onClick(e, ref.current);
}, [ref]);
const handleChange = (e, v) => {
const value = ref.current;
let input = "";
if (v === "+") {
const number = value === "" ? 0 : parseFloat(format(value, "number").toString());
input = number + step;
}
else if (v === "-") {
const number = value === "" ? 0 : parseFloat(format(value, "number").toString());
input = number - step;
if (input <= 0)
input = "0";
}
else
input = v;
if (v === ".") {
input = value === "" ? "0." : value + ".";
}
v = parseNumber(v);
if (!isNaN(max) && max > 0 && !isNaN(v) && v > 0 && v >= max)
input = max;
if (typeof props?.onChange === "function")
props?.onChange(e, input);
};
useEffect(() => {
ref.current = props?.value?.toString() || "";
handleChange(null, ref.current);
}, [props?.value]);
useEffect(() => {
if (props?.input) {
const ref = props?.input === true ? window : props?.input?.current;
const input = (e) => {
if (e.key === "." || e.key === "+" || e.key === "-" || e.code === "NumpadAdd" || e.code === "NumpadSubtract")
handleChange(e, e.code === "NumpadAdd" ? "+" : e.code === "NumpadSubtract" ? "-" : e.key);
};
ref.addEventListener("keydown", input);
return () => ref.removeEventListener("keydown", input);
}
}, [props?.input]);
return (<Numberpad {...props} value={props?.value} onChange={(e, v) => handleChange(e, v)} right={{
children: (<>
<Controls.Button onClick={(e) => handleChange(e, "+")} icon={"plus-small-bold"} scale={0.875}/>
<Controls.Button onClick={(e) => handleChange(e, "-")} icon={"minus-small-bold"} scale={0.875}/>
<Controls.Button onClick={(e) => handleChange(e, ".")} icon={"dot"} scale={0.875}/>
<Controls.Button {...props?.button} onClick={(e) => handleClick(e)} color={props?.button?.color} style={{
...props?.button?.style,
...(props?.reverse && { order: -1 }),
}}>
{props?.button?.children || "OK"}
</Controls.Button>
</>),
}}/>);
}
//# sourceMappingURL=Currency.jsx.map