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

Wizleap-Inc · Jun 20, 2024 · 91f8924 · 91f8924
1 parent 187ae02
commit 91f8924
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 64 deletions.
diff --git a/.changeset/itchy-carrots-design.md b/.changeset/itchy-carrots-design.md
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,11 +15,7 @@
             <div v-for="item in checkValues" :key="item">
               <span :class="styles.searchInputInnerBoxSelectedItemStyle">
                 <span :class="styles.searchInputInnerBoxSelectedLabelStyle">
-                  {{
-                    valueToOption.get(item)?.selectedItemLabel
-                      ? valueToOption.get(item)?.selectedItemLabel
-                      : valueToOption.get(item)?.label
-                  }}
+                  {{ valueToOption.get(item)?.label }}
                 </span>
                 <button
                   type="button"
@@ -293,15 +289,10 @@ const valueToOption = computed(() => {
 
   const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
     return options.flatMap((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)];
+      if (option.children) {
+        return [option, ...flatten(option.children)];
+      }
+      return [option];
     });
   };
 

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,7 +8,6 @@ export const defaultOption: SearchInputOption[] = [
       {
         label: "保険商品1",
         value: 2,
-        selectedItemLabel: "保険商品1 / プランA",
       },
       {
         label: "保険商品2",
@@ -472,7 +471,6 @@ 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[]>(args.modelValue ? args.modelValue : []);
+      const values = ref<number[]>([]);
       const openPopup = ref(open);
       const toggle = (value: boolean) => {
         openPopup.value = value;
@@ -177,13 +177,3 @@ 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,7 +5,6 @@ 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,15 +88,10 @@ const SearchInput: FC<Props> = ({
 
     const flatten = (options: SearchInputOption[]): SearchInputOption[] => {
       return options.flatMap((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)];
+        if (option.children) {
+          return [option, ...flatten(option.children)];
+        }
+        return [option];
       });
     };
 
@@ -148,9 +143,7 @@ const SearchInput: FC<Props> = ({
                   <span
                     className={styles.searchInputInnerBoxSelectedLabelStyle}
                   >
-                    {valueToOptions.get(value)?.selectedItemLabel
-                      ? valueToOptions.get(value)?.selectedItemLabel
-                      : valueToOptions.get(value)?.label}
+                    {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,7 +5,6 @@ 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,7 +12,6 @@ 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,9 +25,7 @@ type Story = StoryObj<typeof WizSearchInput>;
 
 const Template: Story = {
   render: (args) => {
-    const [values, setValues] = useState<number[]>(
-      args.values ? args.values : []
-    );
+    const [values, setValues] = useState<number[]>([]);
     return (
       <div>
         <div>values:[{values.join(", ")}]</div>
@@ -158,15 +156,3 @@ export const ShowSelectedItemTag: Story = {
     showSelectedItem: true,
   },
 };
-
-export const SelectedItemLabel: Story = {
-  ...Template,
-  args: {
-    options: normalOptions,
-    placeholder: "氏名・ID・電話番号で検索",
-    singleSelect: true,
-    inputWidth: "15rem",
-    showSelectedItem: true,
-    values: [2],
-  },
-};