From c73c8d8bd890da71a0ea65c5157381e9b9dcd541 Mon Sep 17 00:00:00 2001
From: Gypsophyllite <Gypsophyllite@outlook.com>
Date: Thu, 18 May 2023 21:21:30 +0800
Subject: [PATCH] feat(select): select style

---
 .../components/Select/Select.stories.tsx      | 12 ++++----
 .../__snapshots__/Select.spec.tsx.snap        | 13 --------
 packages/design/components/Select/index.tsx   | 30 +++++++++++--------
 .../design/components/Select/style/index.less | 12 +++++++-
 4 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/packages/design/components/Select/Select.stories.tsx b/packages/design/components/Select/Select.stories.tsx
index 807691c63..4ef8351e3 100644
--- a/packages/design/components/Select/Select.stories.tsx
+++ b/packages/design/components/Select/Select.stories.tsx
@@ -1,17 +1,17 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import Select from '.';
 
-const componentMeta: ComponentMeta<typeof Select> = {
+const componentMeta: Meta<typeof Select> = {
   title: 'Modern/Select',
   component: Select,
 };
 
 export default componentMeta;
 
-const Template: ComponentStory<typeof Select> = () => {
-  return (
+export const Template: StoryObj<typeof Select> = {
+  render: () => (
     <Select
       style={{
         width: 400,
@@ -23,7 +23,5 @@ const Template: ComponentStory<typeof Select> = () => {
       ]}
       defaultValue='age'
     />
-  );
+  ),
 };
-
-export const Default = Template.bind({});
diff --git a/packages/design/components/Select/__test__/__snapshots__/Select.spec.tsx.snap b/packages/design/components/Select/__test__/__snapshots__/Select.spec.tsx.snap
index 1021b7f30..1dd809d71 100644
--- a/packages/design/components/Select/__test__/__snapshots__/Select.spec.tsx.snap
+++ b/packages/design/components/Select/__test__/__snapshots__/Select.spec.tsx.snap
@@ -15,19 +15,6 @@ exports[`Select Component > render properly 1`] = `
         class="bgm-select-arrow"
       />
     </div>
-    <select>
-      <option
-        selected=""
-        value="name"
-      >
-        name
-      </option>
-      <option
-        value="age"
-      >
-        age
-      </option>
-    </select>
   </div>
 </div>
 `;
diff --git a/packages/design/components/Select/index.tsx b/packages/design/components/Select/index.tsx
index 9bbae1496..9291e31ce 100644
--- a/packages/design/components/Select/index.tsx
+++ b/packages/design/components/Select/index.tsx
@@ -39,18 +39,24 @@ const Select = ({ options, style, defaultValue, className, onChange }: SelectPro
         <span>{optionsMap[active]?.label}</span>
         <ArrowDown className='bgm-select-arrow' />
       </div>
-      <select
-        defaultValue={defaultValue}
-        onChange={(e) => {
-          handleOptionClick(e.target.value);
-        }}
-      >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+      {open ? (
+        <ul className={cn('bgm-select__dropdown')} defaultValue={defaultValue}>
+          {options.map((option) => (
+            <li
+              className={cn('bgm-select__dropdown-item')}
+              key={option.value}
+              value={option.value}
+              onClick={() => {
+                handleOptionClick(option.value);
+              }}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };
diff --git a/packages/design/components/Select/style/index.less b/packages/design/components/Select/style/index.less
index 64c0c2092..cd136936c 100644
--- a/packages/design/components/Select/style/index.less
+++ b/packages/design/components/Select/style/index.less
@@ -18,7 +18,7 @@
     top: 100%;
     border: 2px solid @gray-10;
     box-sizing: border-box;
-    padding: 8px 12px;
+    padding: 10px 0;
     width: 100%;
     left: 0;
     border-radius: 19px;
@@ -27,6 +27,16 @@
     > div {
       padding: 9px 0;
     }
+
+    &-item {
+      height: 1em;
+      padding: 10px;
+      // padding: 0.5em 0;
+
+      &:hover {
+        background-color: @gray-10;
+      }
+    }
   }
 
   select {