From f27bfd2afa6dd401cbffbb5f90701ed0805c1406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Thu, 18 Aug 2022 00:16:52 +0100
Subject: [PATCH] feat: more button increment features
---
examples/web/react/app.tsx | 7 ++++++-
.../button-increment/button-increment.tsx | 14 ++++++++++++++
2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 9bf41756..0307e7f9 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -22,7 +22,12 @@ export const App = () => {
key="button-tobias"
name={"Button Increment"}
valueNode={
- <ButtonIncrement value={200} delta={100} suffix={"Hz"} />
+ <ButtonIncrement
+ value={200}
+ delta={100}
+ min={0}
+ suffix={"Hz"}
+ />
}
/>,
<Pair
diff --git a/examples/web/react/components/button-increment/button-increment.tsx b/examples/web/react/components/button-increment/button-increment.tsx
index 19b49416..a4395b77 100644
--- a/examples/web/react/components/button-increment/button-increment.tsx
+++ b/examples/web/react/components/button-increment/button-increment.tsx
@@ -6,22 +6,28 @@ import "./button-increment.css";
type ButtonIncrementProps = {
value: number;
delta?: number;
+ min?: number;
+ max?: number;
prefix?: string;
suffix?: string;
size?: string;
style?: string[];
onClick?: () => void;
+ onBeforeChange?: (value: number) => boolean;
onChange?: (value: number) => void;
};
export const ButtonIncrement: FC<ButtonIncrementProps> = ({
value,
delta = 1,
+ min,
+ max,
prefix,
suffix,
size = "medium",
style = ["simple", "border"],
onClick,
+ onBeforeChange,
onChange
}) => {
const [valueState, setValue] = useState(value);
@@ -31,11 +37,19 @@ export const ButtonIncrement: FC<ButtonIncrementProps> = ({
};
const _onMinusClick = () => {
const valueNew = valueState - delta;
+ if (onBeforeChange) {
+ if (!onBeforeChange(valueNew)) return;
+ }
+ if (min !== undefined && valueNew < min) return;
setValue(valueNew);
if (onChange) onChange(valueNew);
};
const _onPlusClick = () => {
const valueNew = valueState + delta;
+ if (onBeforeChange) {
+ if (!onBeforeChange(valueNew)) return;
+ }
+ if (max !== undefined && valueNew > max) return;
setValue(valueNew);
if (onChange) onChange(valueNew);
};
--
GitLab