From 1c1de6356c1022d79bccbe9825647472c6843187 Mon Sep 17 00:00:00 2001
From: uwap <me@uwap.name>
Date: Thu, 8 Oct 2020 17:40:42 +0200
Subject: [PATCH] Define icon transformations on withState (Closes #148)

---
 src/config/icon.js | 52 +++++++++++++++++++++++++---------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/config/icon.js b/src/config/icon.js
index 31939fb..54a598b 100644
--- a/src/config/icon.js
+++ b/src/config/icon.js
@@ -4,15 +4,6 @@ import ReactIcon from "@mdi/react";
 import { type Color } from "./colors";
 import * as mdiIcons from "@mdi/js";
 
-export type Icon = {
-  render: (s: State) => React.Node,
-  size: (n: number) => Icon,
-  rotate: (n: number) => Icon,
-  flip: () => Icon,
-  flipV: () => Icon,
-  color: (c: Color | (State) => Color) => Icon
-};
-
 type IconPropHelper = {
   size?: number,
   rotate?: number,
@@ -21,6 +12,27 @@ type IconPropHelper = {
   color?: Color
 };
 
+export type Icon = {
+  render: (s: State) => React.Node,
+  size: (n: number) => Icon,
+  rotate: (n: number) => Icon,
+  flip: () => Icon,
+  flipV: () => Icon,
+  color: (c: Color | (State) => Color) => Icon,
+  applyProps: (props: IconPropHelper) => Icon
+};
+
+const iconChainUtils = <T> (cb: (x: T, p?: IconPropHelper) => Icon,
+  p1: T, p?: IconPropHelper) => ({
+    size: (n: number) => cb(p1, {...p, size: n}),
+    rotate: (n: number) => cb(p1, {...p, rotate: n}),
+    flip: () => cb(p1, {...p, horizontal: !p?.horizontal ?? true}),
+    flipV: () => cb(p1, {...p, vertical: !p?.vertical ?? true}),
+    color: (c: Color | (State) => Color) => cb(p1, {...p, color: c}),
+    applyProps: (props: IconPropHelper) => cb(p1, {...p, ...props})
+  }
+  );
+
 export const svg = (data: string, props?: IconPropHelper): Icon => {
   const propColor = ((c: Color | (State) => Color) => (state: State) => {
     if (typeof c === "function") {
@@ -37,24 +49,16 @@ export const svg = (data: string, props?: IconPropHelper): Icon => {
         color={propColor(state)}
       />
     ),
-    size: (n: number) => svg(data, {...props, size: n}),
-    rotate: (n: number) => svg(data, {...props, rotate: n}),
-    flip: () => svg(data, {...props, horizontal: !props?.horizontal ?? true}),
-    flipV: () => svg(data, {...props, vertical: !props?.vertical ?? true}),
-    color: (c: Color | (State) => Color) => svg(data, {...props, color: c})
+    ...iconChainUtils(svg, data, props)
   };
 };
 
-export const withState = (f: (s: State) => Icon): Icon => {
-  return {
-    render: (state) => f(state).render(state),
-    size: () => withState(f),
-    rotate: () => withState(f),
-    flip: () => withState(f),
-    flipV: () => withState(f),
-    color: () => withState(f)
-  };
-};
+export const withState = (f: (s: State) => Icon,
+  props?: IconPropHelper): Icon => ({
+  render: (state) => f(state).applyProps(props).render(state),
+  ...iconChainUtils(withState, f, props)
+}
+);
 
 export const mdiBattery = (topic: string): Icon => withState((state) => {
   const rawval = state[topic];