feat: add attribute props and file type for input

makefragment · Aug 7, 2024 · 5291ea6 · 5291ea6
1 parent 4d4f6dc
commit 5291ea6
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/src/fragment/components/input.tsx b/src/fragment/components/input.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import { CodeComponentMeta, useSelector } from "@plasmicapp/host";
 import * as InputPrimitive from "@/components/ui/input";
-import { HTMLInputTypeAttribute } from "react";
+import { HTMLInputTypeAttribute, RefAttributes } from "react";
 
 type InputType = {
   placeholder?: string;
@@ -11,6 +11,9 @@ type InputType = {
   className?: string;
   name?: string;
   type?: HTMLInputTypeAttribute;
+  attributes?: InputPrimitive.InputProps & RefAttributes<HTMLInputElement>;
+  multiple?: boolean;
+  accept?: string;
 };
 
 export const Input = (props: InputType) => {
@@ -22,6 +25,9 @@ export const Input = (props: InputType) => {
     className,
     name,
     type = "text",
+    attributes,
+    multiple,
+    accept,
   } = props;
   const fragmentConfig = useSelector("Fragment");
   return (
@@ -34,6 +40,11 @@ export const Input = (props: InputType) => {
       placeholder={placeholder}
       className={className}
       type={type}
+      {...(type == "file" && {
+        multiple,
+        accept,
+      })}
+      {...attributes}
     />
   );
 };
@@ -61,16 +72,29 @@ export const inputMeta: CodeComponentMeta<InputType> = {
         "time",
         "email",
         "tel",
+        "file",
       ],
       defaultValue: "text",
       defaultValueHint: "text",
     },
     disabled: "boolean",
+    multiple: {
+      type: "boolean",
+      hidden: (ps) => ps.type != "file",
+    },
+    accept: {
+      type: "string",
+      hidden: (ps) => ps.type != "file",
+    },
     name: {
       type: "string",
       advanced: true,
       description: "The HTML name of the input",
     },
+    attributes: {
+      type: "object",
+      advanced: true,
+    },
     onChange: {
       type: "eventHandler",
       argTypes: [{ name: "value", type: "string" }],

diff --git a/src/fragment/components/textarea.tsx b/src/fragment/components/textarea.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import { CodeComponentMeta, useSelector } from "@plasmicapp/host";
 import * as TextareaPrimitive from "@/components/ui/textarea";
-import { HTMLInputTypeAttribute } from "react";
+import { RefAttributes } from "react";
 
 type InputType = {
   placeholder?: string;
@@ -10,10 +10,20 @@ type InputType = {
   disabled?: boolean;
   className?: string;
   name?: string;
+  attributes?: TextareaPrimitive.TextareaProps &
+    RefAttributes<HTMLTextAreaElement>;
 };
 
 export const Textarea = (props: InputType) => {
-  const { placeholder, value, onChange, disabled, className, name } = props;
+  const {
+    placeholder,
+    value,
+    onChange,
+    disabled,
+    className,
+    name,
+    attributes,
+  } = props;
   const fragmentConfig = useSelector("Fragment");
   return (
     <TextareaPrimitive.Textarea
@@ -24,6 +34,7 @@ export const Textarea = (props: InputType) => {
       name={name}
       placeholder={placeholder}
       className={className}
+      {...attributes}
     />
   );
 };
@@ -45,6 +56,10 @@ export const textareaMeta: CodeComponentMeta<InputType> = {
       advanced: true,
       description: "The HTML name of the input",
     },
+    attributes: {
+      type: "object",
+      advanced: true,
+    },
     onChange: {
       type: "eventHandler",
       argTypes: [{ name: "value", type: "string" }],