feat(font-select): change onChange return value

NAS-Service · Sep 9, 2022 · 502ba08 · 502ba08
1 parent 1051a26
commit 502ba08
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/libs/shared/ui/src/lib/components/forms/font-select/font-select.stories.tsx b/libs/shared/ui/src/lib/components/forms/font-select/font-select.stories.tsx
@@ -11,4 +11,8 @@ const Template: ComponentStory<typeof FontSelect> = (args) => (
 );
 
 export const Primary = Template.bind({});
-Primary.args = {};
+Primary.args = {
+  onChange: (fontName: string, variants: string[]) => {
+    console.log({fontName, variants});
+  }
+};
diff --git a/libs/shared/ui/src/lib/components/forms/font-select/font-select.tsx b/libs/shared/ui/src/lib/components/forms/font-select/font-select.tsx
@@ -7,7 +7,7 @@ export interface FontSelectProps {
   className?: string;
   value?: string;
   defaultValue?: { value: string; label: string };
-  onChange?: (value: SingleValue<{ value: string; label: string }>) => void;
+  onChange?: (fontName: string, variants: string[]) => void;
   disabled?: boolean;
 }
 
@@ -22,6 +22,17 @@ export function FontSelect(props: FontSelectProps) {
 
   const { data: fonts } = useGoogleFonts();
 
+  const handleChange = (
+    value: SingleValue<{ value: string; label: string }>
+  ) => {
+    const font = fonts?.find((f) => f.family === value?.value);
+    const variants = font?.variants.filter((v) => !v.includes('italic'));
+
+    if (font) {
+      onChange && onChange(font.family, variants ? variants : []);
+    }
+  };
+
   return (
     <Select
       options={fonts.map((font) => {
@@ -32,7 +43,7 @@ export function FontSelect(props: FontSelectProps) {
       placeholder="Choose a font..."
       defaultValue={defaultValue}
       disabled={disabled}
-      onChange={onChange}
+      onChange={(e) => handleChange(e)}
     />
   );
 }