feat: add checkbox component (#80)

ory · Sep 19, 2023 · 235cfee · 235cfee
1 parent 3cdb65d
commit 235cfee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/components/Ory/Ui/Node/Input.tsx b/src/components/Ory/Ui/Node/Input.tsx
@@ -9,6 +9,7 @@ import {
   isUiNodeInputAttributes,
 } from "../../../../helpers/form"
 import StyledTextInput from "../../../Styled/StyledTextInput"
+import Checkbox from "../../../Styled/Checkbox"
 
 interface Props extends InputProps {
   node: UiNode
@@ -45,6 +46,8 @@ const guessVariant = ({ attributes }: UiNode) => {
       return "button"
     case "password":
       return "password"
+    case "checkbox":
+      return "checkbox"
     default:
       return "text"
   }
@@ -116,15 +119,24 @@ export const NodeInput = ({
   return (
     <View testID={`field/${name}`}>
       <Title>{title}</Title>
-      <StyledTextInput
-        testID={name}
-        onChange={onChange}
-        value={value ? String(value) : ""}
-        editable={!disabled}
-        onChangeText={onChange}
-        state={disabled ? "disabled" : undefined}
-        {...extraProps}
-      />
+      {variant === "checkbox" ? (
+        <Checkbox
+          testID={name}
+          onClick={() => onChange(!value)}
+          value={value}
+          disabled={disabled}
+        />
+      ) : (
+        <StyledTextInput
+          testID={name}
+          onChange={onChange}
+          value={value ? String(value) : ""}
+          editable={!disabled}
+          onChangeText={onChange}
+          state={disabled ? "disabled" : undefined}
+          {...extraProps}
+        />
+      )}
       <>
         {node.messages?.map(({ text, id, type }, k) => (
           <Subtitle key={`${id}${k}`} state={typeToState({ type, disabled })}>

diff --git a/src/components/Styled/Checkbox.tsx b/src/components/Styled/Checkbox.tsx
@@ -0,0 +1,3 @@
+import styled from "styled-components/native"
+
+export default styled.Switch({})