feat(search-input): 選択した要素のアイテムの親階層がわかるようにする

Wizleap-Inc · Jun 20, 2024 · 91e5add · 91e5add
1 parent dd5a11b
commit 91e5add
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 12 deletions.
diff --git a/.changeset/itchy-carrots-design.md b/.changeset/itchy-carrots-design.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+- feat(search-input): 選択したアイテムに親階層のラベルを含める
+- feat(search-input): 選択時に指定されたアイテムのラベルを表示できるようにする
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue b/packages/wiz-ui-next/src/components/base/inputs/search-input/search-input.vue
@@ -15,7 +15,11 @@
             <div v-for="item in checkValues" :key="item">
               <span :class="styles.searchInputInnerBoxSelectedItemStyle">
                 <span :class="styles.searchInputInnerBoxSelectedLabelStyle">
-                  {{ valueToOption.get(item)?.label }}
+                  {{
+                    valueToOption.get(item)?.selectedItemLabel
+                      ? valueToOption.get(item)?.selectedItemLabel
+                      : valueToOption.get(item)?.label
+                  }}
                 </span>
                 <button
                   type="button"
@@ -289,10 +293,15 @@ const valueToOption = computed(() => {
 
   const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
     return options.flatMap((option) => {
-      if (option.children) {
-        return [option, ...flatten(option.children)];
-      }
-      return [option];
+      if (!option.children) return [option];
+
+      const children = option.children.map((child) => ({
+        ...child,
+        // 要件上、全角空白のため無視
+        // eslint-disable-next-line no-irregular-whitespace
+        label: `${option.label}　${child.label}`,
+      }));
+      return [option, ...flatten(children)];
     });
   };
 

diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/options.ts b/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/options.ts
@@ -8,6 +8,7 @@ export const defaultOption: SearchInputOption[] = [
       {
         label: "保険商品1",
         value: 2,
+        selectedItemLabel: "保険商品1 / プランA",
       },
       {
         label: "保険商品2",
@@ -471,6 +472,7 @@ export const simpleOption: SearchInputOption[] = [
   {
     label: "選択肢3",
     value: 3,
+    selectedItemLabel: "選択肢3 / サンプル",
   },
 ];
 

diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/search-input.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/search-input/stories/search-input.stories.ts
@@ -63,7 +63,7 @@ const Template =
   (args) => ({
     components: { WizSearchInput },
     setup() {
-      const values = ref<number[]>([]);
+      const values = ref<number[]>(args.modelValue ? args.modelValue : []);
       const openPopup = ref(open);
       const toggle = (value: boolean) => {
         openPopup.value = value;
@@ -177,3 +177,13 @@ ShowSelectedItemTag.args = {
   options: simpleOption,
   showSelectedItem: true,
 };
+
+export const SelectedItemLabel = Template(true).bind({});
+SelectedItemLabel.args = {
+  placeholder: "氏名・ID・電話番号で検索",
+  singleSelect: true,
+  inputWidth: "15rem",
+  options: simpleOption,
+  showSelectedItem: true,
+  modelValue: [3],
+};
diff --git a/packages/wiz-ui-next/src/components/base/inputs/search-input/types.ts b/packages/wiz-ui-next/src/components/base/inputs/search-input/types.ts
@@ -5,6 +5,7 @@ export type Tag = {
 export type SearchInputOption = {
   label: string;
   value: number;
+  selectedItemLabel?: string;
   children?: SearchInputOption[];
   tag?: Tag;
 };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/search-input.tsx
@@ -88,10 +88,15 @@ const SearchInput: FC<Props> = ({
 
     const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
       return options.flatMap((option) => {
-        if (option.children) {
-          return [option, ...flatten(option.children)];
-        }
-        return [option];
+        if (!option.children) return [option];
+
+        const children = option.children.map((child) => ({
+          ...child,
+          // 要件上、全角空白のため無視
+          // eslint-disable-next-line no-irregular-whitespace
+          label: `${option.label}　${child.label}`,
+        }));
+        return [option, ...flatten(children)];
       });
     };
 
@@ -143,7 +148,9 @@ const SearchInput: FC<Props> = ({
                   <span
                     className={styles.searchInputInnerBoxSelectedLabelStyle}
                   >
-                    {valueToOptions.get(value)?.label}
+                    {valueToOptions.get(value)?.selectedItemLabel
+                      ? valueToOptions.get(value)?.selectedItemLabel
+                      : valueToOptions.get(value)?.label}
                   </span>
                   <button
                     type="button"

diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts b/packages/wiz-ui-react/src/components/base/inputs/search-input/components/types.ts
@@ -5,6 +5,7 @@ export type Tag = {
 export type SearchInputOption = {
   label: string;
   value: number;
+  selectedItemLabel?: string;
   children?: SearchInputOption[];
   tag?: Tag;
 };
diff --git a/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts b/packages/wiz-ui-react/src/components/base/inputs/search-input/stories/dummy-data.ts
@@ -12,6 +12,7 @@ export const normalOptions: SearchInputOption[] = [
       {
         label: "保険商品1",
         value: 2,
+        selectedItemLabel: "保険商品1 / プランA",
       },
       {
         label: "保険商品2",

diff --git a/...ges/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx b/...ges/wiz-ui-react/src/components/base/inputs/search-input/stories/search-input.stories.tsx
@@ -25,7 +25,9 @@ type Story = StoryObj<typeof WizSearchInput>;
 
 const Template: Story = {
   render: (args) => {
-    const [values, setValues] = useState<number[]>([]);
+    const [values, setValues] = useState<number[]>(
+      args.values ? args.values : []
+    );
     return (
       <div>
         <div>values:[{values.join(", ")}]</div>
@@ -156,3 +158,15 @@ export const ShowSelectedItemTag: Story = {
     showSelectedItem: true,
   },
 };
+
+export const SelectedItemLabel: Story = {
+  ...Template,
+  args: {
+    options: normalOptions,
+    placeholder: "氏名・ID・電話番号で検索",
+    singleSelect: true,
+    inputWidth: "15rem",
+    showSelectedItem: true,
+    values: [2],
+  },
+};