30 lines
689 B
TypeScript
30 lines
689 B
TypeScript
|
import React from "react";
|
||
|
|
import clsx from "clsx";
|
||
|
|
|
||
|
|
export const ButtonIconCycle = <T extends any>({
|
||
|
|
options,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
group,
|
||
|
|
}: {
|
||
|
|
options: { value: T; text: string; icon: JSX.Element }[];
|
||
|
|
value: T | null;
|
||
|
|
onChange: (value: T) => void;
|
||
|
|
group: string;
|
||
|
|
}) => {
|
||
|
|
const current = options.find((op) => op.value === value);
|
||
|
|
|
||
|
|
function cycle() {
|
||
|
|
const index = options.indexOf(current!);
|
||
|
|
const next = (index + 1) % options.length;
|
||
|
|
onChange(options[next].value);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<label key={group} className={clsx({ active: current!.value !== null })}>
|
||
|
|
<input type="button" name={group} onClick={cycle} />
|
||
|
|
{current!.icon}
|
||
|
|
</label>
|
||
|
|
);
|
||
|
|
};
|