Merge pull request #738 from illacloud/feat/update-design-wtf

Feat/update design wtf
illacloud · Aug 3, 2023 · 0cb9aa3 · 0cb9aa3
2 parents a2b7cb9 + 5a4cd5d
commit 0cb9aa3
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 36 deletions.
diff --git a/packages/date-picker/src/input/rangeInput.tsx b/packages/date-picker/src/input/rangeInput.tsx
@@ -168,7 +168,10 @@ export const RangeDateInput = forwardRef<
             <ClearIcon />
           </span>
         )}
-        <span className="suffix-icon" css={suffixIconStyle}>
+        <span
+          className="suffix-icon"
+          css={suffixIconStyle(disabled1 && disabled2)}
+        >
           {suffixIcon}
         </span>
       </div>

diff --git a/packages/date-picker/src/input/singleInput.tsx b/packages/date-picker/src/input/singleInput.tsx
@@ -109,7 +109,7 @@ export const DateInput = forwardRef<DateInputHandler, DateInputProps>(
               <ClearIcon />
             </span>
           )}
-          <span className="suffix-icon" css={suffixIconStyle}>
+          <span className="suffix-icon" css={suffixIconStyle(disabled)}>
             {suffixIcon}
           </span>
         </div>

diff --git a/packages/date-picker/src/input/style.ts b/packages/date-picker/src/input/style.ts
@@ -192,8 +192,8 @@ export const clearIconStyle = css`
   cursor: pointer;
 `
 
-export const suffixIconStyle = css`
-  color: ${getColor("grayBlue", "01")};
+export const suffixIconStyle = (disabled?: boolean) => css`
+  color: ${getColor("grayBlue", disabled ? "05" : "01")};
   height: 100%;
   svg {
     vertical-align: unset;

diff --git a/packages/date-picker/src/panels/date/index.tsx b/packages/date-picker/src/panels/date/index.tsx
@@ -153,6 +153,7 @@ export const DatePickerPanel: FC<DatePickerPanelProps> = (props) => {
       <MonthPickerPanel
         {...getHeaderOperations?.(panelMode)}
         setPageShowDate={setPageShowDate}
+        pageShowDate={pageShowDate}
         panelMode={panelMode}
         getHeaderOperations={getHeaderOperations as GetHeaderOperationsFun}
         onSelect={onSelectAtMonthPanel}

diff --git a/packages/select/src/interface.ts b/packages/select/src/interface.ts
@@ -58,7 +58,9 @@ export interface SelectProps<T extends SelectValue = SelectValue>
   defaultValue?: T
   showSearch?: boolean
   value?: T
-  filterOption?: boolean | ((inputValue: string | number) => boolean)
+  filterOption?:
+    | boolean
+    | ((inputValue: string | number, option: SelectOptionObject) => boolean)
   onChange?: (value?: T) => void
   onClear?: () => void
   readOnly?: boolean

diff --git a/packages/select/src/multiple-select.tsx b/packages/select/src/multiple-select.tsx
@@ -89,7 +89,7 @@ export const MultipleSelect = forwardRef<HTMLDivElement, SelectProps>(
       ) {
         newOptions = newOptions.filter((option) => {
           if (typeof filterOption === "function") {
-            return filterOption(finalInputValue)
+            return filterOption(finalInputValue, option)
           }
           return (
             typeof option.label === "string" &&

diff --git a/packages/select/src/single-select.tsx b/packages/select/src/single-select.tsx
@@ -178,17 +178,19 @@ export const SingleSelect = forwardRef<HTMLInputElement, SelectProps>(
       ) {
         newOptions = newOptions.filter((option) => {
           if (typeof filterOption === "function") {
-            return filterOption(finalInputValue)
+            return filterOption(finalInputValue, option)
           }
           return (
             typeof option.label === "string" &&
-            option.label.includes(finalInputValue.toString())
+            option.label
+              .toLowerCase()
+              .includes(finalInputValue.toString().toLowerCase())
           )
         })
       }
 
       return newOptions
-    }, [filterOption, finalInputValue, options])
+    }, [filterOption, finalInputValue, options, showSearch])
 
     return (
       <Dropdown

diff --git a/packages/upload/src/list/uploadProgress.tsx b/packages/upload/src/list/uploadProgress.tsx
@@ -1,7 +1,7 @@
 import { FC, useContext } from "react"
 import { STATUS, UploadProgressProps } from "../interface"
 import { Progress } from "@illa-design/progress"
-import { UploadIcon, SuccessIcon, VideoPlayIcon } from "@illa-design/icon"
+import { UploadIcon, SuccessIcon } from "@illa-design/icon"
 import { isFunction } from "@illa-design/system"
 import {
   ConfigProviderContext,
@@ -12,7 +12,6 @@ import {
   successIconStyle,
   uploadProgressFailStyle,
   uploadProgressStatus,
-  uploadProgressStyle,
 } from "../style"
 import { handleKeyDown } from "../utils"
 import { globalColor, illaPrefix } from "@illa-design/theme"
@@ -35,23 +34,6 @@ const UploadProgress: FC<UploadProgressProps> = (props) => {
     onReupload && onReupload(file)
   }
 
-  const handleFileUpload = () => {
-    onUpload && onUpload(file)
-  }
-
-  const startIcon = status === STATUS.INIT && props.startIcon !== null && (
-    <span
-      css={uploadProgressStyle}
-      tabIndex={0}
-      role="button"
-      aria-label={locale.start}
-      onClick={handleFileUpload}
-      onKeyDown={(e) => handleKeyDown(e, handleFileUpload)}
-    >
-      {props.startIcon || <VideoPlayIcon />}
-    </span>
-  )
-
   const dom = (
     <>
       {status === STATUS.FAIL && props.reuploadIcon !== null && (
@@ -87,7 +69,6 @@ const UploadProgress: FC<UploadProgressProps> = (props) => {
             trailColor={globalColor(`--${illaPrefix}-blue-06`)}
             {...progressProps}
           />
-          {startIcon}
         </div>
       )}
     </>

diff --git a/packages/upload/src/style.ts b/packages/upload/src/style.ts
@@ -92,7 +92,13 @@ export const textItemImageStyle = css`
   width: 40px;
   height: 40px;
   flex-shrink: 0;
+  display: flex;
   border-radius: 4px;
+  & span {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
   & img,
   & svg {
     width: 100%;
@@ -214,7 +220,9 @@ export const getPictureCardContainerStyle = (disabled: boolean) => {
     width: 100px;
     height: 100px;
     border-radius: 2px;
-    padding: 32px 28px 22px 28px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     box-sizing: border-box;
   `
   if (disabled) {

diff --git a/packages/upload/src/trigger-node.tsx b/packages/upload/src/trigger-node.tsx
@@ -157,7 +157,9 @@ const TriggerNode = (props: PropsWithChildren<TriggerNodeProps>) => {
           aria-label={locale.upload}
         >
           <div css={pictureCardContentStyle}>
-            <AddIcon css={pictureCardIconStyle} />
+            <span css={pictureCardIconStyle}>
+              <AddIcon />
+            </span>
             <div css={pictureCardTextStyle}>{text ?? locale.upload}</div>
           </div>
         </div>

diff --git a/packages/upload/stories/upload.stories.tsx b/packages/upload/stories/upload.stories.tsx
@@ -59,15 +59,11 @@ const Template: Story<UploadProps> = (props) => {
               name: "image.png",
               status: "error",
             },
-            {
-              uid: "-3",
-              name: "image.png",
-              status: "uploading",
-            },
             {
               uid: "-1",
               name: "image.png",
               status: "init",
+              percent: 50,
             },
             {
               uid: "-2",