Skip to content
Snippets Groups Projects
Verified Commit f27bfd2a authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: more button increment features

parent 5d86fe69
No related branches found
No related tags found
1 merge request!8Support for react.js components
Pipeline #1146 passed
......@@ -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
......
......@@ -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);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment