Clearable prop added in TextFormField

Rishith25 · Oct 29, 2024 · 20dbaf7 · 20dbaf7
1 parent 9a0236c
commit 20dbaf7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 18 deletions.
diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -389,26 +389,23 @@ export default function ConfigureCamera(props: Props) {
                     setPresetName("");
                   }}
                 >
-                  <div className="relative w-full">
-                    <TextFormField
-                      name="preset-name"
-                      className="w-full py-4"
-                      value={presetName}
-                      onChange={({ value }) => setPresetName(value)}
-                      errorClassName="hidden"
-                      placeholder={t("preset_name_placeholder")}
-                      suggestions={presetNameSuggestions}
-                      isClear={true}
-                    />
-                  </div>
+                  <TextFormField
+                    name="preset-name"
+                    className="w-full py-4"
+                    value={presetName}
+                    onChange={({ value }) => setPresetName(value)}
+                    errorClassName="hidden"
+                    placeholder={t("preset_name_placeholder")}
+                    suggestions={presetNameSuggestions}
+                    clearable={true}
+                  />
 
-                  <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+                  <div className="cui-form-button-group">
                     <Cancel
                       onClick={() => {
                         setCreatePreset(undefined);
                         setPresetName("");
                       }}
-                      className="ml-0 w-full sm:ml-2 sm:w-auto"
                     />
 
                     <Submit
@@ -429,7 +426,6 @@ export default function ConfigureCamera(props: Props) {
                         cameraPresetsQuery.refetch();
                       }}
                       disabled={!presetName}
-                      className="w-full sm:w-auto"
                     />
                   </div>
                 </DialogModal>

diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
@@ -24,7 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
     trailingPadding?: string | undefined;
     leadingPadding?: string | undefined;
     suggestions?: string[];
-    isClear?: boolean;
+    clearable?: boolean | undefined;
   };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
@@ -36,7 +36,6 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
   const hasTrailing = !!(trailing || trailingFocused);
   const hasIcon = hasLeading || hasTrailing;
   const [showPassword, setShowPassword] = useState(false);
-  const isClear = props.isClear || false;
 
   const getPasswordFieldType = () => {
     return showPassword ? "text" : "password";
@@ -66,7 +65,7 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
         required={field.required}
         onChange={(e) => field.handleChange(e.target.value)}
       />
-      {isClear && field.value && (
+      {props.clearable && field.value && (
         <button
           type="button"
           className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"