diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 9bf41756900f0badc67cf7e729d2a5155c085d44..0307e7f9744a8de310365a00c6f758a5b9b1c622 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 19b49416140db34c38b6a1682340bbb657e78fb9..a4395b771baa97b2319bc081616abf6307b7845d 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); };