feat: add radio input type

uiforks · Jun 26, 2023 · a7cb3a0 · a7cb3a0
1 parent 08123b7
commit a7cb3a0
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 15 deletions.
diff --git a/apps/demo/app/configs/antd/blocks/Hero.tsx b/apps/demo/app/configs/antd/blocks/Hero.tsx
@@ -41,7 +41,7 @@ export const Hero: ComponentConfig<HeroProps> = {
           type: "text",
         },
         type: {
-          type: "select",
+          type: "radio",
           options: [
             {
               value: "primary",

diff --git a/apps/demo/app/configs/antd/blocks/Video.tsx b/apps/demo/app/configs/antd/blocks/Video.tsx
@@ -13,14 +13,14 @@ export const Video: ComponentConfig<VideoProps> = {
       type: "text",
     },
     autoplay: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "On", value: "on" },
         { label: "Off", value: "off" },
       ],
     },
     loop: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "On", value: "on" },
         { label: "Off", value: "off" },

diff --git a/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx b/apps/demo/app/configs/custom/blocks/ButtonGroup/index.tsx
@@ -22,7 +22,7 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
         label: { type: "text" },
         href: { type: "text" },
         variant: {
-          type: "select",
+          type: "radio",
           options: [
             { label: "primary", value: "primary" },
             { label: "secondary", value: "secondary" },
@@ -31,7 +31,7 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
       },
     },
     align: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "left", value: "left" },
         { label: "center", value: "center" },

diff --git a/apps/demo/app/configs/custom/blocks/FeatureList/index.tsx b/apps/demo/app/configs/custom/blocks/FeatureList/index.tsx
@@ -56,7 +56,7 @@ export const FeatureList: ComponentConfig<FeatureListProps> = {
       },
     },
     mode: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "flat", value: "flat" },
         { label: "card", value: "card" },

diff --git a/apps/demo/app/configs/custom/blocks/Heading/index.tsx b/apps/demo/app/configs/custom/blocks/Heading/index.tsx
@@ -45,7 +45,7 @@ export const Heading: ComponentConfig<HeadingProps> = {
       options: levelOptions,
     },
     align: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "Left", value: "left" },
         { label: "Center", value: "center" },

diff --git a/apps/demo/app/configs/custom/blocks/Hero/index.tsx b/apps/demo/app/configs/custom/blocks/Hero/index.tsx
@@ -38,15 +38,15 @@ export const Hero: ComponentConfig<HeroProps> = {
       },
     },
     align: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "left", value: "left" },
         { label: "center", value: "center" },
       ],
     },
     imageUrl: { type: "text" },
     imageMode: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "inline", value: "inline" },
         { label: "background", value: "background" },

diff --git a/apps/demo/app/configs/custom/blocks/Text/index.tsx b/apps/demo/app/configs/custom/blocks/Text/index.tsx
@@ -23,15 +23,15 @@ export const Text: ComponentConfig<TextProps> = {
       ],
     },
     align: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "Left", value: "left" },
         { label: "Center", value: "center" },
         { label: "Right", value: "right" },
       ],
     },
     color: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "Default", value: "default" },
         { label: "Muted", value: "muted" },

diff --git a/apps/demo/app/configs/material-ui/blocks/ButtonGroup.tsx b/apps/demo/app/configs/material-ui/blocks/ButtonGroup.tsx
@@ -20,7 +20,7 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
       getItemSummary: (item) => item.label || "Button",
       groupFields: {
         variant: {
-          type: "select",
+          type: "radio",
           options: [
             { value: "text", label: "text" },
             { value: "outlined", label: "outlined" },
@@ -36,7 +36,7 @@ export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
       },
     },
     align: {
-      type: "select",
+      type: "radio",
       options: [
         { value: "flex-start", label: "left" },
         { value: "center", label: "center" },

diff --git a/apps/demo/app/configs/material-ui/blocks/TypographyBlock.tsx b/apps/demo/app/configs/material-ui/blocks/TypographyBlock.tsx
@@ -49,7 +49,7 @@ export const TypographyBlock: ComponentConfig<TypographyBlockProps> = {
       options: variantOptions,
     },
     align: {
-      type: "select",
+      type: "radio",
       options: [
         { label: "Left", value: "left" },
         { label: "Center", value: "center" },

diff --git a/packages/core/InputOrGroup/index.tsx b/packages/core/InputOrGroup/index.tsx
@@ -150,6 +150,37 @@ export const InputOrGroup = ({
     );
   }
 
+  if (field.type === "radio") {
+    if (!field.options) {
+      return null;
+    }
+
+    return (
+      <div className={getClassName("radioGroup")}>
+        <div className={getClassName("label")}>{field.label || name}</div>
+
+        <div className={getClassName("radioGroupItems")}>
+          {field.options.map((option) => (
+            <label
+              key={option.label + option.value}
+              className={getClassName("radio")}
+            >
+              <input
+                type="radio"
+                value={option.value}
+                name={name}
+                onChange={(e) => onChange(e.currentTarget.value)}
+                readOnly={readOnly}
+                defaultChecked={value === option.value}
+              />
+              <div>{option.value}</div>
+            </label>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <label className={getClassName({ readOnly })}>
       <div className={getClassName("label")}>{label || name}</div>

diff --git a/packages/core/InputOrGroup/styles.module.css b/packages/core/InputOrGroup/styles.module.css
@@ -110,3 +110,20 @@
   margin-top: 4px;
   overflow: hidden;
 }
+
+.Input-radioGroup {
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+
+.Input-radioGroupItems {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.Input-radio {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
@@ -11,7 +11,14 @@ export type Adaptor<AdaptorParams = {}> = {
 export type Field<
   Props extends { [key: string]: any } = { [key: string]: any }
 > = {
-  type: "text" | "textarea" | "number" | "select" | "group" | "external";
+  type:
+    | "text"
+    | "textarea"
+    | "number"
+    | "select"
+    | "group"
+    | "external"
+    | "radio";
   label?: string;
   adaptor?: Adaptor;
   adaptorParams?: object;