Function CustomColors

docs/src/components/DynamicColorTheme.tsx:186–244

({
  customColors,
  setCustomColors,
}: {
  customColors: CustomColorEntry[];
  setCustomColors: React.Dispatch<React.SetStateAction<CustomColorEntry[]>>;
})

let uniqColorKey = 0;

const CustomColors = ({
  customColors,
  setCustomColors,
}: {
  customColors: CustomColorEntry[];
  setCustomColors: React.Dispatch<React.SetStateAction<CustomColorEntry[]>>;
}) => {
  const addCustomColor = () => {
    const newColor = {
      key: `custom${++uniqColorKey}`,
      name: `custom${customColors.length}`,
      hex: defaultColor,
    };
    setCustomColors((colors) => [...colors, newColor]);
  };

  const setCustomColor = (key: string, hex: string) => {
    setCustomColors((colors) =>
      colors.map((color) => (color.key === key ? { ...color, hex } : color))
    );
  };

  const setCustomName = (key: string, name: string) => {
    setCustomColors((colors) =>
      colors.map((color) => (color.key === key ? { ...color, name } : color))
    );
  };

  const deleteCustomColor = (key: string) =>
    setCustomColors((colors) => colors.filter((color) => key !== color.key));

  return (
    <>
      {customColors.map(({ key, name, hex }, index) => (
        <CustomColor
          key={key}
          uniqKey={key}
          name={name}
          index={index}
          color={hex}
          setCustomColor={setCustomColor}
          deleteCustomColor={deleteCustomColor}
          setCustomName={setCustomName}
        />
      ))}

      <tr>
        <td colSpan={2} align="center">
          <button
            onClick={addCustomColor}
            className="color-picker-action-button"
          >
            + Add custom color
          </button>
        </td>
      </tr>
    </>
  );