Skip to content

Commit

Permalink
improved number input spin buttons, #313
Browse files Browse the repository at this point in the history
  • Loading branch information
@mienaiyami
mienaiyami committed Jan 29, 2024
1 parent 58d15bb commit 641a997
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 104 deletions.
2 changes: 1 addition & 1 deletion src/electron/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ if (handleSquirrelEvent()) {
app.quit();
}

const saveFile = (path: string, data: any, sync = true, retry = 3) => {
const saveFile = (path: string, data: string, sync = true, retry = 3) => {
try {
if (sync) {
fs.writeFileSync(path, data);
Expand Down
108 changes: 58 additions & 50 deletions src/renderer/Components/Element/InputCheckboxNumber.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const InputCheckboxNumber = ({
}) => {
const [valueProxy, setValueProxy] = useState(value);
const repeater = useRef<NodeJS.Timer | null>(null);
const mouseDownRef = useRef(false);
const inputRef = useRef<HTMLInputElement | null>(null);
useLayoutEffect(() => {
let timeoutid: NodeJS.Timeout;
Expand Down Expand Up @@ -73,6 +74,7 @@ const InputCheckboxNumber = ({
}
};
const stopRepeater = () => {
if (mouseDownRef.current) mouseDownRef.current = false;
if (repeater.current) {
clearInterval(repeater.current);
setTimeout(() => {
Expand All @@ -81,57 +83,63 @@ const InputCheckboxNumber = ({
}
repeater.current = null;
};
const ButtonUp = () => (
<button
className="spin"
onMouseUp={stopRepeater}
onMouseLeave={stopRepeater}
onMouseOut={stopRepeater}
onMouseDown={() => {
if (repeater.current) clearInterval(repeater.current);
repeater.current = setInterval(() => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (max && value + step > parseFloat(max.toString()))
inputRef.current.value = max.toString();
inputRef.current.value = parseFloat((value + step).toFixed(3)).toString();
changeHandler(inputRef.current);
// setTimeout(() => {
// if (inputRef.current) inputRef.current.focus();
// }, 200);
}
}, 100);
}}
>
<FontAwesomeIcon icon={faCaretUp} />
</button>
);
const ButtonUp = () => {
const valueUp = () => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (max && value + step > parseFloat(max.toString())) inputRef.current.value = max.toString();
inputRef.current.value = parseFloat((value + step).toFixed(3)).toString();
changeHandler(inputRef.current);
}
};
return (
<button
className="spin"
onMouseLeave={stopRepeater}
// onMouseOut={stopRepeater}
onMouseUp={stopRepeater}
onMouseDown={() => {
mouseDownRef.current = true;
if (repeater.current) clearInterval(repeater.current);
valueUp();
setTimeout(() => {
if (mouseDownRef.current) repeater.current = setInterval(valueUp, 100);
}, 500);
}}
>
<FontAwesomeIcon icon={faCaretUp} />
</button>
);
};

const ButtonDown = () => (
<button
className="spin"
onMouseUp={stopRepeater}
onMouseLeave={stopRepeater}
onMouseOut={stopRepeater}
onMouseDown={() => {
if (repeater.current) clearInterval(repeater.current);
repeater.current = setInterval(() => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (min && value - step < parseFloat(min.toString()))
inputRef.current.value = min.toString();
inputRef.current.value = parseFloat((value - step).toFixed(3)).toString();
changeHandler(inputRef.current);
// setTimeout(() => {
// if (inputRef.current) inputRef.current.focus();
// }, 200);
}
}, 100);
}}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
);
const ButtonDown = () => {
const valueDown = () => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (min && value - step < parseFloat(min.toString())) inputRef.current.value = min.toString();
inputRef.current.value = parseFloat((value - step).toFixed(3)).toString();
changeHandler(inputRef.current);
}
};
return (
<button
className="spin"
onMouseLeave={stopRepeater}
// onMouseOut={stopRepeater}
onMouseUp={stopRepeater}
onMouseDown={() => {
mouseDownRef.current = true;
if (repeater.current) clearInterval(repeater.current);
valueDown();
setTimeout(() => {
if (mouseDownRef.current) repeater.current = setInterval(valueDown, 100);
}, 500);
}}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
);
};
return (
<label
className={(disabled ? "disabled " : "") + (checked ? "optionSelected " : "") + className}
Expand Down
108 changes: 58 additions & 50 deletions src/renderer/Components/Element/InputNumber.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const InputNumber = ({
}) => {
const [valueProxy, setValueProxy] = useState(value);
const repeater = useRef<NodeJS.Timer | null>(null);
const mouseDownRef = useRef(false);
// const [lastEvent, setLastEvent] = useState<React.ChangeEvent<HTMLInputElement> | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
useLayoutEffect(() => {
Expand Down Expand Up @@ -75,6 +76,7 @@ const InputNumber = ({
}
};
const stopRepeater = () => {
if (mouseDownRef.current) mouseDownRef.current = false;
if (repeater.current) {
clearInterval(repeater.current);
setTimeout(() => {
Expand All @@ -83,57 +85,63 @@ const InputNumber = ({
}
repeater.current = null;
};
const ButtonUp = () => (
<button
className="spin"
onMouseUp={stopRepeater}
onMouseLeave={stopRepeater}
onMouseOut={stopRepeater}
onMouseDown={() => {
if (repeater.current) clearInterval(repeater.current);
repeater.current = setInterval(() => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (max && value + step > parseFloat(max.toString()))
inputRef.current.value = max.toString();
inputRef.current.value = parseFloat((value + step).toFixed(3)).toString();
changeHandler(inputRef.current);
// setTimeout(() => {
// if (inputRef.current) inputRef.current.focus();
// }, 200);
}
}, 100);
}}
>
<FontAwesomeIcon icon={faCaretUp} />
</button>
);
const ButtonUp = () => {
const valueUp = () => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (max && value + step > parseFloat(max.toString())) inputRef.current.value = max.toString();
inputRef.current.value = parseFloat((value + step).toFixed(3)).toString();
changeHandler(inputRef.current);
}
};
return (
<button
className="spin"
onMouseLeave={stopRepeater}
// onMouseOut={stopRepeater}
onMouseUp={stopRepeater}
onMouseDown={() => {
mouseDownRef.current = true;
if (repeater.current) clearInterval(repeater.current);
valueUp();
setTimeout(() => {
if (mouseDownRef.current) repeater.current = setInterval(valueUp, 100);
}, 500);
}}
>
<FontAwesomeIcon icon={faCaretUp} />
</button>
);
};

const ButtonDown = () => (
<button
className="spin"
onMouseUp={stopRepeater}
onMouseLeave={stopRepeater}
onMouseOut={stopRepeater}
onMouseDown={() => {
if (repeater.current) clearInterval(repeater.current);
repeater.current = setInterval(() => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (min && value - step < parseFloat(min.toString()))
inputRef.current.value = min.toString();
inputRef.current.value = parseFloat((value - step).toFixed(3)).toString();
changeHandler(inputRef.current);
// setTimeout(() => {
// if (inputRef.current) inputRef.current.focus();
// }, 200);
}
}, 100);
}}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
);
const ButtonDown = () => {
const valueDown = () => {
if (inputRef.current) {
const value = inputRef.current.valueAsNumber || parseFloat(min.toString());
if (min && value - step < parseFloat(min.toString())) inputRef.current.value = min.toString();
inputRef.current.value = parseFloat((value - step).toFixed(3)).toString();
changeHandler(inputRef.current);
}
};
return (
<button
className="spin"
onMouseLeave={stopRepeater}
// onMouseOut={stopRepeater}
onMouseUp={stopRepeater}
onMouseDown={() => {
mouseDownRef.current = true;
if (repeater.current) clearInterval(repeater.current);
valueDown();
setTimeout(() => {
if (mouseDownRef.current) repeater.current = setInterval(valueDown, 100);
}, 500);
}}
>
<FontAwesomeIcon icon={faCaretDown} />
</button>
);
};

if (labelAfter || labelBefore || paraAfter || paraBefore) {
return (
Expand Down
6 changes: 3 additions & 3 deletions webpack.plugins.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { IgnorePlugin } from "webpack";
const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

export const plugins = [
new ForkTsCheckerWebpackPlugin({
logger: "webpack-infrastructure",
}),
// new ForkTsCheckerWebpackPlugin({
// logger: "webpack-infrastructure",
// }),
new IgnorePlugin({ resourceRegExp: /^fsevents$/ }),
];

0 comments on commit 641a997

Please sign in to comment.