fix(ui): fix input and select

NJUPT-SAST · Feb 7, 2024 · 2cfe018 · 2cfe018
1 parent 5c7b531
commit 2cfe018
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 160 deletions.
diff --git a/packages/competition/src/App.tsx b/packages/competition/src/App.tsx
@@ -1,10 +1,11 @@
-import { Button, showToast } from "../../ui/dist";
+import { Button, Input, showToast } from "../../ui/dist";
 import "./App.css";
 
 function App() {
   return (
     <>
       <Button onClick={() => showToast()}>showToast</Button>
+      <Input></Input>
     </>
   );
 }

diff --git a/packages/ui/lib/Accordion/Accordion.module.scss b/packages/ui/lib/Accordion/Accordion.module.scss
@@ -18,6 +18,8 @@
     transition: all 0.1s ease-in-out;
     &:hover:not(.disabled) {
       background-color: #fcfcfc;
+      text-decoration: underline;
+      transition: all 0.1s ease-in-out;
     }
     .icon {
       transition: all 0.2s ease-in-out;

diff --git a/packages/ui/lib/Carousel/Carousel.tsx b/packages/ui/lib/Carousel/Carousel.tsx
@@ -158,7 +158,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
         >
           <Button
             onClick={pre}
-            color="tertiary"
+            color="ghost"
           >
             Pre
           </Button>
@@ -180,7 +180,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           </div>
           <Button
             onClick={next}
-            color="tertiary"
+            color="ghost"
           >
             Next
           </Button>

diff --git a/packages/ui/lib/Input/Input.module.scss b/packages/ui/lib/Input/Input.module.scss
@@ -1,3 +1,4 @@
+@use '../variables' as *;
 .base {
   width: fit-content;
   border: 2px solid var(--shadow-color) !important;
@@ -7,6 +8,7 @@
   position: relative;
   transition: all 0.2s ease-in-out;
   font-weight: 500;
+  background-color: var(--white-color);
   cursor: text;
   &:hover:not(&.disabled) {
     border: 2px solid var(--primary-color) !important;
@@ -37,11 +39,15 @@
   .input {
     all: unset;
     padding: 23px 12px 13px 12px;
+    width: -webkit-fill-available;
     position: relative;
     top: 0;
     bottom: 0;
     color: var(--black-color);
     box-sizing: border-box;
+    &:focus {
+      box-shadow: $shadow;
+    }
   }
   &.disabled {
     cursor: not-allowed;

diff --git a/packages/ui/lib/Input/Input.stories.tsx b/packages/ui/lib/Input/Input.stories.tsx
@@ -3,6 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Input, type InputProps } from './Input';
 
+const test = (value: string) => {
+  console.log('change input value', value);
+};
+
 const meta = {
   title: 'Components/Input',
   component: Input,
@@ -25,6 +29,8 @@ type Story = StoryObj<typeof meta>;
 const defaultProps: InputProps = {
   width: 280,
   disabled: false,
+  onchange: test,
+  defaultValue: 'hello world!',
 };
 
 export const DefaultInput: Story = {

diff --git a/packages/ui/lib/Input/Input.tsx b/packages/ui/lib/Input/Input.tsx
@@ -2,7 +2,7 @@ import React, { useState, type ChangeEvent, useEffect } from 'react';
 import styles from './Input.module.scss';
 import classnames from 'classnames';
 
-export interface InputProps {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   /**
    * The width of the Input.
    */
@@ -34,7 +34,15 @@ export interface InputProps {
   /**
    * function(value:string, e:event) 输入框内容变化时的回调
    */
-  onChange: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+  onchange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * value ,the value of the input
+   */
+  value?: string;
+  /**
+   * defaultValue, the defaultValue of the input
+   */
+  defaultValue?: string;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -46,15 +54,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       mode = 'text',
       placeholder = '',
       fontsize = 16,
-      onChange,
+      onchange,
       isFillFather = false,
+      value,
+      defaultValue,
       ...rest
     },
     ref,
   ) => {
     //设置isUpLabel来调节Label上浮状态
     const [isUpInputLabel, setIsUpInputLabel] = useState<boolean>(false);
-    const [inputValue, setInputValue] = useState<string>('');
+    const [inputValue, setInputValue] = useState<string | undefined>(defaultValue);
     const InputClass = classnames(
       styles['base'],
       styles[disabled ? 'disabled' : ''],
@@ -67,20 +77,24 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     }, [placeholder]);
     //设置，当input框里面没有内容时，placeHolder也没有内容时，将label框拉下
     const blurInput = () => {
-      if (!inputValue && !placeholder) {
+      if (!inputValue && !placeholder && isUpInputLabel) {
         setIsUpInputLabel(false);
       }
     };
     const changeValue = (e: ChangeEvent<HTMLInputElement>) => {
       setInputValue(e.target.value);
-      onChange(e.target.value, e);
+      onchange && onchange(e.target.value, e);
     };
 
+    useEffect(() => {
+      value && setInputValue(value);
+    }, [value]);
+
     return (
       <>
         <div
-          style={{ fontSize: `${fontsize}px` }}
           className={InputClass}
+          style={{ width: `${width}px`, fontSize: `${fontsize}px` }}
           onClick={() => !disabled && setIsUpInputLabel(true)}
         >
           <input
@@ -90,14 +104,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             placeholder={placeholder}
             type={mode}
             disabled={disabled}
-            style={{ width: `${width}px` }}
-            {...rest}
             onChange={changeValue}
             onBlur={blurInput}
+            autoComplete="off"
+            value={inputValue}
+            {...rest}
           />
           <label
             htmlFor="input"
-            className={`${styles['inputLabel']} ${isUpInputLabel ? styles['isUpInputLabel'] : ''}`}
+            className={`${styles['inputLabel']} ${inputValue ? styles['isUpInputLabel'] : ''}`}
           >
             {label}
           </label>

diff --git a/packages/ui/lib/Select/Select.module.scss b/packages/ui/lib/Select/Select.module.scss
@@ -1,96 +1,38 @@
-.base {
-  position: relative;
-  all: unset;
-  background-color: var(--white-color);
-  height: 50px;
-  padding: 15px;
-  box-sizing: border-box;
-  font-size: 14px;
-  border: 0.5px solid var(--shadow-color);
-  border-radius: 8px;
-  width: 280px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  z-index: 2;
-  cursor: pointer;
-  transition: all 0.4s ease-in-out;
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-    background-color: var(--shadow-color);
-  }
-  &:hover:not(.disabled) {
-    border: 0.5px solid var(--primary-color);
-    .up {
-      color: var(--primary-color);
-    }
-  }
-  &:focus-within:not(.disabled) {
-    box-shadow: 0px 0px 3px 0px var(--primary-color);
-    .up {
-      color: var(--primary-color);
-    }
-  }
-  .selectDefaultSpan {
-    z-index: 2;
-    transition: all 0.2s ease-in-out;
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    border-color: var(--white-color);
-    left: 15px;
-    &.up {
-      transform: translate(0, 0);
-      background-color: var(--white-color);
-      border-width: 0px 2px;
-      border-style: solid;
-      border-color: var(--white-color);
-      top: -7px;
-      left: 14px;
-      font-size: 11px;
-      position: absolute;
-    }
-  }
-  .icon {
-    position: absolute;
-    right: 8px;
-    transition: all 0.2s ease-in-out;
-    &.rotate {
-      transform: rotate(180deg);
-    }
-  }
-}
-
 .options {
   position: absolute;
   width: 280px;
-  box-shadow: 0px 0px 3px 0px var(--primary-color);
-  padding: 2px;
+  box-sizing: border-box;
   z-index: 1;
   margin-top: 3px;
-  display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 7px 8px;
   font-size: 14px;
-  max-height: 200px;
+  max-height: 250px;
   overflow-y: scroll;
-  border: 1px solid var(--shadow-color);
-  box-sizing: border-box;
+  border: 2px solid var(--primary-color);
   border-radius: 8px;
   transform-origin: top;
   opacity: 0;
   transform: scaleY(0);
-  overflow-y: scroll;
   background-color: var(--white-color);
   transition: all 0.2s ease-in-out;
+  display: flex;
+  .nothing-img-container {
+    margin: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    img {
+      width: 160px;
+    }
+  }
   &.show {
     opacity: 1;
     transform: scaleY(1);
   }
-  .optionItem {
+  .option-item {
     flex-shrink: 0;
     height: 35px;
     display: flex;
@@ -103,7 +45,7 @@
       cursor: pointer;
       color: var(--primary-color);
     }
-    .optionItemSpan {
+    .option-item-span {
       padding: 0 7px;
     }
   }
@@ -119,12 +61,3 @@
     transform-origin: bottom;
   }
 }
-
-.background {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-}
diff --git a/packages/ui/lib/Select/Select.stories.tsx b/packages/ui/lib/Select/Select.stories.tsx
@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Select, type SelectProps } from './Select';
+import { OptionProps, Select, type SelectProps } from './Select';
+
+const test = (option: OptionProps) => {
+  console.log('selectOption', option);
+};
 
 const meta = {
   title: 'Components/Select',
@@ -20,19 +24,23 @@ const defaultProps: SelectProps = {
   optionsList: [
     { value: 'nextjs', label: 'nextjs', key: 1 },
     { value: 'nuxtjs', label: 'nuxtjs', key: 2 },
+    { value: 'nodejs', label: 'nodejs', key: 3 },
+    { value: 'vuejs', label: 'vuejs', key: 5 },
+    { value: 'react', label: 'react', key: 4 },
   ],
-  title: 'which framwork?',
-  onChange: function () {},
+  onchange: test,
   disabled: false,
+  defaultSelectKey: 2,
+  selectKey: 2,
 };
 
-export const DefaultButton: Story = {
+export const DefaultSelect: Story = {
   args: {
     ...defaultProps,
   },
 };
 
-export const DisabledButton: Story = {
+export const DisabledSelect: Story = {
   args: {
     ...defaultProps,
   },