Merge pull request #85 from grucloud/select-autocomplete-default-option

Select autocomplete default option

bau-ui/autocomplete/autocomplete.js

@@ -64,7 +64,9 @@ export default function (context, componentOptions = {}) {
         placeholder,
         Option,
         options,
-        getOptionLabel = ({ label }) => label,
+        defaultOption,
+        getOptionLabel,
+        getOptionValue,
         onSelect = () => {},
         id,
         required,
@@ -81,14 +83,9 @@ export default function (context, componentOptions = {}) {
     const List = list(context);
     const Spinner = spinner(context, { variant, color, size });
 
-    const selectedState = bau.state(props.value);
-    bau.derive(() => {
-      if (selectedState.val) {
-        inputShadowEl.value = getOptionLabel(selectedState.val);
-        onSelect(selectedState.val);
-      }
-    });
-    const inputState = bau.state("");
+    const selectedState = bau.state(defaultOption);
+
+    const inputState = bau.state(props.value);
     const openState = bau.state(false);
     const itemIndexActive = bau.state(0);
 
@@ -267,6 +264,13 @@ export default function (context, componentOptions = {}) {
       `,
     });
 
+    bau.derive(() => {
+      if (selectedState.val) {
+        inputShadowEl.value = getOptionValue(selectedState.val);
+        onSelect(selectedState.val);
+      }
+    });
+
     return div(
       {
         ...props,

bau-ui/autocomplete/index.d.ts

@@ -8,8 +8,10 @@ declare module "@grucloud/bau-ui/autocomplete" {
     label: string;
     placeholder: string;
     size?: string;
-    getOptionLabel?: (item: object | string) => string;
+    getOptionLabel: (item: object | string) => HTMLElement | string;
+    getOptionValue: (item: object | string) => string;
     Option: (props) => HTMLElement;
+    defaultOption?: any;
   } & DefaultDesignProps;
 
   type Component = import("../bau-ui").Component<

bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-default-option.ts

@@ -0,0 +1,42 @@
+import { Context } from "@grucloud/bau-ui/context";
+import autocomplete from "@grucloud/bau-ui/autocomplete";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div, span } = bau.tags;
+
+  const Autocomplete = autocomplete(context);
+
+  const defaultCode = "AD";
+
+  const options = [
+    { code: "AD", label: "Andorra", phone: "376" },
+    { code: "AF", label: "Afghanistan", phone: "93" },
+  ];
+
+  const Option = (option: any) =>
+    div(
+      {
+        class: css`
+          display: flex;
+          justify-content: space-between;
+          gap: 0.5rem;
+        `,
+      },
+      span(option.label),
+      span(option.code)
+    );
+  return () =>
+    section(
+      Autocomplete({
+        options,
+        Option,
+        defaultOption: options.find(({ code }) => code == defaultCode),
+        getOptionValue: ({ code }: any) => code,
+        getOptionLabel: ({ label }: any) => label,
+        label: "Country",
+        placeholder: "Search countries",
+        id: "country",
+      })
+    );
+};

bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-example-default.ts

@@ -30,6 +30,7 @@ export default (context: Context) => {
       Autocomplete({
         options,
         Option,
+        getOptionValue: ({ code }: any) => code,
         getOptionLabel: ({ label }: any) => label,
         label: "Country",
         placeholder: "Search countries",

bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-grid-item.ts

@@ -30,6 +30,7 @@ export default (context: Context, componentsOptions?: any) => {
       ...props,
       options,
       Option,
+      getOptionValue: ({ code }: any) => code,
       getOptionLabel: ({ label }: any) => label,
       label: "Country",
       placeholder: "Search countries",

bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete-loading.ts

@@ -66,6 +66,7 @@ export default (context: Context) => {
           Autocomplete({
             options: dataState.val,
             Option,
+            getOptionValue: ({ name }: any) => name.common,
             getOptionLabel: ({ name }: any) => name.common,
             label: "Country",
             placeholder: "Search countries",

bau-ui/examples/bau-storybook/src/pages/autocomplete/autocomplete.examples.ts

@@ -7,6 +7,10 @@ import autocompleteDefault from "./autocomplete-example-default.ts";
 // @ts-ignore
 import codeExampleDefault from "./autocomplete-example-default.ts?raw";
 
+import autocompleteDefaultOption from "./autocomplete-default-option.ts";
+// @ts-ignore
+import codeDefaultOption from "./autocomplete-default-option.ts?raw";
+
 import autocompleteLoading from "./autocomplete-loading.ts";
 // @ts-ignore
 import codeExampleLoading from "./autocomplete-loading.ts?raw";
@@ -31,6 +35,12 @@ export const autocompleteSpec = {
       code: codeExampleLoading,
       createComponent: autocompleteLoading,
     },
+    {
+      title: "Default Option",
+      description: "A autocomplete with a default option.",
+      code: codeDefaultOption,
+      createComponent: autocompleteDefaultOption,
+    },
   ],
   gridItem: autocompleteGridItem,
 };

bau-ui/examples/bau-storybook/src/pages/select/select-aws-region.ts

@@ -35,6 +35,7 @@ export default (context: Context) => {
         options,
         Option,
         label: "Select a region",
+        getOptionValue: (label: any) => label,
         getOptionLabel: (label: any) => label,
       })
     );

bau-ui/examples/bau-storybook/src/pages/select/select-default-option.ts

@@ -0,0 +1,46 @@
+import select from "@grucloud/bau-ui/select";
+import { Context } from "@grucloud/bau-ui/context";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div, span } = bau.tags;
+
+  const Select = select(context);
+
+  const defaultCode = "AD";
+
+  const options = [
+    { code: "AD", label: "Andorra", phone: "376" },
+    {
+      code: "AE",
+      label: "United Arab Emirates",
+      phone: "971",
+    },
+    { code: "AF", label: "Afghanistan", phone: "93" },
+  ];
+
+  const Option = (option: any) =>
+    div(
+      {
+        class: css`
+          display: flex;
+          justify-content: space-between;
+          gap: 0.5rem;
+        `,
+      },
+      span(option.label),
+      span(option.code)
+    );
+
+  return () =>
+    section(
+      Select({
+        options,
+        Option,
+        defaultOption: options.find(({ code }) => code == defaultCode),
+        getOptionValue: ({ code }: any) => code,
+        getOptionLabel: ({ label }: any) => label,
+        label: "Select a country...",
+      })
+    );
+};

bau-ui/examples/bau-storybook/src/pages/select/select-example-default.ts

@@ -35,6 +35,7 @@ export default (context: Context) => {
       Select({
         options,
         Option,
+        getOptionValue: ({ code }: any) => code,
         getOptionLabel: ({ label }: any) => label,
         label: "Select a country...",
       })

bau-ui/examples/bau-storybook/src/pages/select/select-grid-item.ts

@@ -35,6 +35,7 @@ export default (context: Context, componentOptions?: any) => {
       ...props,
       options,
       Option,
+      getOptionValue: ({ code }: any) => code,
       getOptionLabel: ({ label }: any) => label,
       label: "Select a country...",
     });

bau-ui/examples/bau-storybook/src/pages/select/select-loading.ts

@@ -0,0 +1,78 @@
+import { Context } from "@grucloud/bau-ui/context";
+import select from "@grucloud/bau-ui/select";
+import button from "@grucloud/bau-ui/button";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div, span } = bau.tags;
+
+  const Button = button(context, { variant: "outline" });
+  const Select = select(context);
+
+  const dataState = bau.state([]);
+  const loadingState = bau.state(false);
+  const errorMessageState = bau.state("");
+
+  async function fetchData({ url, transform = (x: any) => x }: any) {
+    try {
+      loadingState.val = true;
+      const response = await fetch(url, {});
+      if (response.ok) {
+        const json = await response.json();
+        dataState.val = transform(json);
+      } else {
+        errorMessageState.val = response.statusText;
+      }
+    } catch (error: any) {
+      errorMessageState.val = error.message;
+    } finally {
+      loadingState.val = false;
+    }
+  }
+  const fetchCountries = () =>
+    fetchData({
+      url: "https://restcountries.com/v3.1/all?fields=name,flag",
+      transform: (data: any) =>
+        data.sort((a: any, b: any) =>
+          a.name.common.localeCompare(b.name.common)
+        ),
+    });
+
+  fetchCountries();
+
+  const Option = (option: any) =>
+    div(
+      {
+        class: css`
+          display: flex;
+          justify-content: space-between;
+          gap: 0.5rem;
+        `,
+      },
+      span(option.flag),
+      span(option.name.common)
+    );
+
+  return () =>
+    section(
+      div(
+        {
+          class: css`
+            display: flex;
+            gap: 1rem;
+          `,
+        },
+        () =>
+          Select({
+            options: dataState.val,
+            Option,
+            getOptionValue: ({ name }: any) => name.common,
+            getOptionLabel: ({ name }: any) => name.common,
+            label: "Country",
+            id: "country",
+            loading: loadingState.val,
+          }),
+        Button({ onclick: () => fetchCountries() }, "Reload")
+      )
+    );
+};

bau-ui/examples/bau-storybook/src/pages/select/select.examples.ts

@@ -8,10 +8,18 @@ import selectDefault from "./select-example-default.ts";
 // @ts-ignore
 import codeExampleDefault from "./select-example-default.ts?raw";
 
+import selectDefaultOption from "./select-default-option.ts";
+// @ts-ignore
+import codeDefaultOption from "./select-default-option.ts?raw";
+
 import selectAwsRegion from "./select-aws-region.ts";
 // @ts-ignore
 import codeExampleAwsRegion from "./select-aws-region.ts?raw";
 
+import selectLoading from "./select-loading.ts";
+// @ts-ignore
+import codeExampleLoading from "./select-loading.ts?raw";
+
 export const selectSpec = {
   title: "Select",
   package: "select",
@@ -26,12 +34,24 @@ export const selectSpec = {
       code: codeExampleDefault,
       createComponent: selectDefault,
     },
+    {
+      title: "Default Option",
+      description: "Select with a default option",
+      code: codeDefaultOption,
+      createComponent: selectDefaultOption,
+    },
     {
       title: "Select AWS region",
       description: "Select the AWS region",
       code: codeExampleAwsRegion,
       createComponent: selectAwsRegion,
     },
+    {
+      title: "Loading Indicator",
+      description: "Select with a loading indicator",
+      code: codeExampleLoading,
+      createComponent: selectLoading,
+    },
   ],
   gridItem: selectGridItem,
 };

bau-ui/examples/bau-storybook/src/pages/stepper/cloud-config/configGoogle.ts

@@ -47,7 +47,6 @@ export default (context: Context) => {
         reader.readAsText(file);
         reader.onload = () => {
           try {
-            debugger;
             if (reader.result) {
               // @ts-ignore
               const contentJson = JSON.parse(reader.result);

bau-ui/select/index.d.ts

@@ -6,7 +6,9 @@ declare module "@grucloud/bau-ui/select" {
     options: object[];
     id?: string;
     label: string;
-    getOptionLabel?: (item: object | string) => string;
+    defaultOption?: any;
+    getOptionLabel: (item: object | string) => HTMLElement | string;
+    getOptionValue: (item: object | string) => string;
     Option: (props) => HTMLElement;
   } & DefaultDesignProps;