Move similar field component to same folder and extract repeated code…

… in selector
EyeSeeTea · Jun 28, 2024 · 23b8c7c · 23b8c7c
1 parent ada9868
commit 23b8c7c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 40 deletions.
diff --git a/...ts/multiple-selector/MultipleSelector.tsx → .../components/selector/MultipleSelector.tsx b/...ts/multiple-selector/MultipleSelector.tsx → .../components/selector/MultipleSelector.tsx
@@ -2,18 +2,13 @@ import React, { useCallback } from "react";
 import styled from "styled-components";
 import { Select, InputLabel, MenuItem, FormHelperText, Chip } from "@material-ui/core";
 import { IconChevronDown24, IconCross16 } from "@dhis2/ui";
-
-export type MultipleSelectorOption<T extends string = string> = {
-    value: T;
-    label: string;
-    disabled?: boolean;
-};
+import { SelectorOption, getLabelFromValue } from "./utils/selectorHelper";
 
 type MultipleSelectorProps<T extends string = string> = {
     id: string;
     selected: T[];
-    onChange: (value: MultipleSelectorOption["value"][]) => void;
-    options: MultipleSelectorOption<T>[];
+    onChange: (value: SelectorOption["value"][]) => void;
+    options: SelectorOption<T>[];
     label?: string;
     placeholder?: string;
     disabled?: boolean;
@@ -26,7 +21,7 @@ type MultipleSelectorProps<T extends string = string> = {
 export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         placeholder = "",
         selected,
         onChange,
@@ -37,21 +32,14 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
         error = false,
         required = false,
     }) => {
-        const getLabelFromValue = useCallback(
-            (value: MultipleSelectorOption["value"]) => {
-                return options.find(option => option.value === value)?.label || "";
-            },
-            [options]
-        );
-
         const handleChange = useCallback(
             (
                 event: React.ChangeEvent<{
                     value: unknown;
                 }>,
                 _child: React.ReactNode
             ) => {
-                const value = event.target.value as MultipleSelectorOption["value"][];
+                const value = event.target.value as SelectorOption["value"][];
                 onChange(value);
             },
             [onChange]
@@ -60,7 +48,7 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
         const handleDelete = useCallback(
             (
                 event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-                value: MultipleSelectorOption["value"]
+                value: SelectorOption["value"]
             ) => {
                 event.stopPropagation();
                 onChange(selected?.filter(selection => selection !== value));
@@ -85,12 +73,12 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
                     IconComponent={IconChevronDown24}
                     error={error}
                     renderValue={(selected: unknown) =>
-                        (selected as MultipleSelectorOption["value"][])?.length ? (
+                        (selected as SelectorOption["value"][])?.length ? (
                             <div>
-                                {(selected as MultipleSelectorOption["value"][]).map(value => (
+                                {(selected as SelectorOption["value"][]).map(value => (
                                     <SelectedChip
                                         key={value}
-                                        label={getLabelFromValue(value)}
+                                        label={getLabelFromValue(value, options)}
                                         deleteIcon={<IconCross16 />}
                                         onDelete={event => handleDelete(event, value)}
                                         onMouseDown={event => handleDelete(event, value)}

diff --git a/src/webapp/components/selector/Selector.tsx b/src/webapp/components/selector/Selector.tsx
@@ -2,12 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components";
 import { Select, InputLabel, MenuItem, FormHelperText } from "@material-ui/core";
 import { IconChevronDown24 } from "@dhis2/ui";
-
-export type SelectorOption<T extends string = string> = {
-    value: T;
-    label: string;
-    disabled?: boolean;
-};
+import { SelectorOption, getLabelFromValue } from "./utils/selectorHelper";
 
 type SelectorProps<T extends string = string> = {
     id: string;
@@ -26,7 +21,7 @@ type SelectorProps<T extends string = string> = {
 export const Selector: React.FC<SelectorProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         placeholder = "",
         selected,
         onChange,
@@ -37,13 +32,6 @@ export const Selector: React.FC<SelectorProps> = React.memo(
         error = false,
         required = false,
     }) => {
-        const getLabelFromValue = useCallback(
-            (value: SelectorOption["value"]) => {
-                return options.find(option => option.value === value)?.label || "";
-            },
-            [options]
-        );
-
         const handleChange = useCallback(
             (
                 event: React.ChangeEvent<{
@@ -74,7 +62,8 @@ export const Selector: React.FC<SelectorProps> = React.memo(
                     IconComponent={IconChevronDown24}
                     error={error}
                     renderValue={(selected: unknown) =>
-                        getLabelFromValue(selected as SelectorOption["value"]) || placeholder
+                        getLabelFromValue(selected as SelectorOption["value"], options) ||
+                        placeholder
                     }
                     displayEmpty
                 >

diff --git a/src/webapp/components/selector/utils/selectorHelper.ts b/src/webapp/components/selector/utils/selectorHelper.ts
@@ -0,0 +1,12 @@
+export type SelectorOption<T extends string = string> = {
+    value: T;
+    label: string;
+    disabled?: boolean;
+};
+
+export function getLabelFromValue<T extends string = string>(
+    value: SelectorOption["value"],
+    options: SelectorOption<T>[]
+) {
+    return options.find(option => option.value === value)?.label;
+}
diff --git a/src/webapp/components/text-area/TextArea.tsx → ...webapp/components/text-input/TextArea.tsx b/src/webapp/components/text-area/TextArea.tsx → ...webapp/components/text-input/TextArea.tsx
@@ -17,7 +17,7 @@ type TextAreaProps = {
 export const TextArea: React.FC<TextAreaProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         value,
         onChange,
         disabled = false,

diff --git a/...app/components/input-field/InputField.tsx → ...ebapp/components/text-input/TextInput.tsx b/...app/components/input-field/InputField.tsx → ...ebapp/components/text-input/TextInput.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { TextField, InputLabel } from "@material-ui/core";
 import styled from "styled-components";
 
-type InputFieldProps = {
+type TextInputProps = {
     id: string;
     label?: string;
     value: string;
@@ -14,10 +14,10 @@ type InputFieldProps = {
     error?: boolean;
 };
 
-export const InputField: React.FC<InputFieldProps> = React.memo(
+export const TextInput: React.FC<TextInputProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         value,
         onChange,
         helperText = "",

diff --git a/src/webapp/components/utils/selectorHelper.ts b/src/webapp/components/utils/selectorHelper.ts