Move all state out of Checkbox

gameflow-tv · Jan 29, 2022 · 7cf7507 · 7cf7507
1 parent 8e53c82
commit 7cf7507
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 50 deletions.
diff --git a/src/lib/components/inputs/Checkbox/Checkbox.styles.tsx b/src/lib/components/inputs/Checkbox/Checkbox.styles.tsx
@@ -62,4 +62,8 @@ export const SpanEl = styled.span<SpanProps>`
   align-content: center;
   color: ${(props) => props.uncheckedTextColor};
   ${(props) => typographyToCss(props.typography)};
+
+  & > svg {
+    color: ${(props) => props.checkedTextColor};
+  }
 `
diff --git a/src/lib/components/inputs/Checkbox/Checkbox.tsx b/src/lib/components/inputs/Checkbox/Checkbox.tsx
@@ -31,56 +31,42 @@ export type CheckboxProps = {
   className?: string
 }
 
-export const Checkbox = forwardRef(
-  (
-    {
-      id = _.uniqueId(),
-      checked = false,
-      checkedContent = <Icon icon="check" />,
-      uncheckedContent = <Icon icon="close" />,
-      ...props
-    }: CheckboxProps,
-    ref
-  ) => {
-    const [isChecked, setIsChecked] = useState(checked)
+export const Checkbox = ({
+  id = _.uniqueId(),
+  checked,
+  checkedContent,
+  uncheckedContent,
+  ...props
+}: CheckboxProps) => {
+  const theme = useTheme()
 
-    useImperativeHandle(ref, () => {
-      return {
-        isChecked,
-        setIsChecked
-      }
-    })
+  uncheckedContent ??= <Icon icon="plus" color={theme.colors.primaryText} />
+  checkedContent ??= <Icon icon="check" color={props.checkedTextColor || theme.colors.onPrimary} />
 
-    useEffect(() => {
-      props.onChange && props.onChange.call(isChecked)
-    }, [isChecked])
-
-    const theme = useTheme()
-    const styles: SpanProps = {
-      typography: props.typography || theme.typography.body2,
-      checkedBackground: props.checkedBackground || theme.colors.checkedBackground,
-      uncheckedBackground: props.uncheckedBackground || theme.colors.background,
-      uncheckedBorder: props.uncheckedBorder || theme.colors.uncheckedBorder,
-      checkedBorder: props.checkedBorder || theme.colors.checkedBackground,
-      checkedTextColor: props.checkedTextColor || theme.colors.checkedText,
-      uncheckedTextColor: props.uncheckedTextColor || theme.colors.uncheckedText,
-      width: props.width,
-      height: props.height,
-      spacing: theme.spacing.xxsmall,
-      ...props
-    }
-
-    return (
-      <Wrapper {...styles}>
-        <CheckInput
-          id={id}
-          className={props.className}
-          checked={checked}
-          onChange={props.onChange}
-          {...styles}
-        />
-        <SpanEl {...styles}>{checked ? checkedContent : uncheckedContent}</SpanEl>
-      </Wrapper>
-    )
+  const styles: SpanProps = {
+    typography: props.typography || theme.typography.body2,
+    checkedBackground: props.checkedBackground || theme.colors.primary,
+    uncheckedBackground: props.uncheckedBackground || theme.colors.background,
+    uncheckedBorder: props.uncheckedBorder || theme.colors.uncheckedBorder,
+    checkedBorder: props.checkedBorder || theme.colors.onPrimary,
+    checkedTextColor: props.checkedTextColor || theme.colors.onPrimary,
+    uncheckedTextColor: props.uncheckedTextColor || theme.colors.uncheckedText,
+    width: props.width,
+    height: props.height,
+    spacing: theme.spacing.xxsmall,
+    ...props
   }
-)
+
+  return (
+    <Wrapper {...styles}>
+      <CheckInput
+        id={id}
+        className={props.className}
+        checked={checked}
+        onChange={props.onChange}
+        {...styles}
+      />
+      <SpanEl {...styles}>{checked ? checkedContent : uncheckedContent}</SpanEl>
+    </Wrapper>
+  )
+}