Merge pull request #463 from illa-family/develop

Develop
illacloud · May 19, 2022 · 3e1ffd2 · 3e1ffd2
2 parents 34119bb + 29e487f
commit 3e1ffd2
Show file tree

Hide file tree

Showing 19 changed files with 128 additions and 96 deletions.
diff --git a/packages/button/src/button.tsx b/packages/button/src/button.tsx
@@ -54,76 +54,60 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           const hasLoadingText =
             loadingText != undefined && loadingText.length > 0
           const hasChild = Children.count(props.children) >= 1
+          const hasPropContent = hasChild || (hasLoadingText && loading)
+          const finalContainer = css`
+            ${applyTagContainer(fullWidth)};
+            ${applyCursor(loading ?? false, disabled ?? false)}
+            ${hasPropContent
+              ? applyPaddingStyle(size, variant)
+              : applyWithoutTextSize(size, fullWidth)};
+            ${applyShape(
+              shape,
+              attached ?? false,
+              first ?? false,
+              last ?? false,
+            )};
+            ${applyElementColor(variant, colorScheme, textColor)};
+            ${applyBg(variant, colorScheme, backgroundColor, borderColor)};
+            ${buttonRadius ? `border-radius: ${buttonRadius};` : ""}
+          `
 
-          if (hasChild || (hasLoadingText && loading)) {
-            const finalContainer = css`
-              ${applyTagContainer(fullWidth ?? false)};
-              ${applyCursor(loading ?? false, disabled ?? false)}
-              ${applyPaddingStyle(size, variant)};
-              ${applyShape(
-                shape,
-                attached ?? false,
-                first ?? false,
-                last ?? false,
-              )};
-              ${applyElementColor(variant, colorScheme, textColor)};
-              ${applyBg(variant, colorScheme, backgroundColor, borderColor)};
-            `
-
-            return (
-              <button
-                ref={ref}
-                css={css(finalContainer, sizeCss)}
-                disabled={disabled || loading}
-                {...otherProps}
-              >
-                {(loading || leftIcon) && (
-                  <span css={applyLeftIconStyle(size)}>
-                    {loading ? <LoadingIcon spin={true} /> : leftIcon}
-                  </span>
-                )}
+          return (
+            <button
+              ref={ref}
+              css={[finalContainer, sizeCss]}
+              disabled={disabled || loading}
+              {...otherProps}
+            >
+              {(loading || leftIcon) && (
+                <span
+                  css={
+                    hasPropContent
+                      ? applyLeftIconStyle(size)
+                      : applyIconWithoutText(size)
+                  }
+                >
+                  {loading ? <LoadingIcon spin={true} /> : leftIcon}
+                </span>
+              )}
+              {hasPropContent && (
                 <span css={applyFontStyle(size)}>
                   {loading && loadingText ? loadingText : props.children}
                 </span>
-                {rightIcon && (
-                  <span css={applyRightIconStyle(size)}>{rightIcon}</span>
-                )}
-              </button>
-            )
-          } else {
-            const finalContainer = css`
-              ${applyTagContainer(fullWidth)};
-              ${applyCursor(loading ?? false, disabled ?? false)}
-              ${applyWithoutTextSize(size, fullWidth)};
-              ${applyShape(
-                shape,
-                attached ?? false,
-                first ?? false,
-                last ?? false,
-              )};
-              ${applyElementColor(variant, colorScheme, textColor)};
-              ${applyBg(variant, colorScheme, backgroundColor, borderColor)};
-              ${buttonRadius ? `border-radius: ${buttonRadius};` : ""}
-            `
-
-            return (
-              <button
-                ref={ref}
-                css={finalContainer}
-                disabled={disabled || loading}
-                {...otherProps}
-              >
-                {(loading || leftIcon) && (
-                  <span css={applyIconWithoutText(size)}>
-                    {loading ? <LoadingIcon spin={true} /> : leftIcon}
-                  </span>
-                )}
-                {rightIcon && (
-                  <span css={applyIconWithoutText(size)}>{rightIcon}</span>
-                )}
-              </button>
-            )
-          }
+              )}
+              {rightIcon && (
+                <span
+                  css={
+                    hasPropContent
+                      ? applyRightIconStyle(size)
+                      : applyIconWithoutText(size)
+                  }
+                >
+                  {rightIcon}
+                </span>
+              )}
+            </button>
+          )
         }}
       </ButtonGroupContext.Consumer>
     )

diff --git a/packages/button/src/style.tsx b/packages/button/src/style.tsx
@@ -39,8 +39,6 @@ export function getDifferentStatusColor(
   colorScheme: ButtonColorScheme,
   variant: ButtonVariant,
   state: State,
-  backgroundColor?: string,
-  borderColor?: string,
 ): string[] {
   switch (state) {
     case State.DEFAULT:

diff --git a/packages/button/tests/__snapshots__/button-group.test.tsx.snap b/packages/button/tests/__snapshots__/button-group.test.tsx.snap
@@ -343,6 +343,8 @@ exports[`Button Group renders attached with round shape 1`] = `
   border-radius: 0;
   color: #fff;
   background-color: #134ae0;
+  width: auto;
+  height: auto;
 }
 
 .emotion-26:hover {
@@ -997,6 +999,8 @@ exports[`Button Group renders attached with square shape 1`] = `
   border-radius: 0;
   color: #fff;
   background-color: #134ae0;
+  width: auto;
+  height: auto;
 }
 
 .emotion-26:hover {
@@ -1594,6 +1598,8 @@ exports[`Button Group renders with spacing 1`] = `
   border-radius: 4px;
   color: #fff;
   background-color: #134ae0;
+  width: auto;
+  height: auto;
 }
 
 .emotion-26:hover {

diff --git a/packages/date-picker/tests/date-picker.e2e.tsx b/packages/date-picker/tests/date-picker.e2e.tsx
@@ -50,20 +50,28 @@ it("show time picker, typeof showTime is Object, extends of TimePickerProps", ()
   unmount()
 })
 
-it("clear data", () => {
-  mount(<DatePicker placeholder={"clear data"} value="2021-01-01" />)
+/*it("clear data", () => {
+  const clearEvent = cy.stub().as("clearEvent")
+  mount(
+    <DatePicker
+      placeholder={"clear data"}
+      value="2021-01-01"
+      onClear={clearEvent}
+    />,
+  )
   cy.findByDisplayValue("2021-01-01")
     .parent()
     .trigger("mouseenter")
     .then(() => {
       cy.findByTitle("InputClearIcon")
         .click()
         .then(() => {
-          cy.findByDisplayValue("").should("exist")
+          cy.get("@clearEvent").should("be.calledOnce")
+          cy.get("input").should("not.have.value", "2021-01-01")
         })
     })
   unmount()
-})
+})*/
 
 it("click Today button", () => {
   mount(

diff --git a/packages/modal/src/interface.tsx b/packages/modal/src/interface.tsx
@@ -25,6 +25,7 @@ export interface ModalProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
   visible?: boolean
   _css?: SerializedStyles
+  withoutPadding?: boolean
   confirmLoading?: boolean
   mask?: boolean
   title?: ReactNode

diff --git a/packages/modal/src/modal.tsx b/packages/modal/src/modal.tsx
@@ -41,6 +41,7 @@ export const Modal: ModalComponent = forwardRef<HTMLDivElement, ModalProps>(
       style,
       className,
       _css,
+      withoutPadding,
       children,
       visible,
       mask = true,
@@ -119,16 +120,17 @@ export const Modal: ModalComponent = forwardRef<HTMLDivElement, ModalProps>(
               <div css={applyModalTitle(simple)}>{title}</div>
             </div>
           )}
-          <div css={applyModalContent(simple)}>{children}</div>
+          <div css={applyModalContent(simple, withoutPadding)}>{children}</div>
           {renderFooter()}
-          {showCloseIcon &&
-            (closeElement ? (
-              closeElement
-            ) : (
-              <div css={applyModalCloseIcon} onClick={onCancel}>
-                <CloseIcon />
-              </div>
-            ))}
+          {showCloseIcon && (
+            <>
+              {closeElement || (
+                <div css={applyModalCloseIcon} onClick={onCancel}>
+                  <CloseIcon />
+                </div>
+              )}
+            </>
+          )}
         </div>
       )
       return (

diff --git a/packages/modal/src/style.tsx b/packages/modal/src/style.tsx
@@ -103,7 +103,15 @@ export function applyModalTitle(isSimple?: boolean): SerializedStyles {
   `
 }
 
-export function applyModalContent(isSimple?: boolean): SerializedStyles {
+export function applyModalContent(
+  isSimple?: boolean,
+  withoutPadding?: boolean,
+): SerializedStyles {
+  const paddingCSS = withoutPadding
+    ? css`
+        padding: 0;
+      `
+    : ""
   const simpleCss = isSimple
     ? css`
         padding: 0 24px 8px;
@@ -115,7 +123,8 @@ export function applyModalContent(isSimple?: boolean): SerializedStyles {
     font-size: 14px;
     overflow: auto;
     color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-    ${simpleCss}
+    ${simpleCss};
+    ${paddingCSS}
   `
 }
 

diff --git a/packages/modal/tests/modal.test.tsx b/packages/modal/tests/modal.test.tsx
@@ -48,3 +48,14 @@ test("Modal api renders with config", () => {
   Modal.config({ simple: true })
   Modal.destroyAll()
 })
+
+test("Modal renders with withoutPadding ", () => {
+  render(
+    <Modal visible={true} title={"Modal Title"} withoutPadding>
+      Modal Content
+    </Modal>,
+  )
+  expect(screen.getByText("Modal Content")).toHaveStyle({
+    padding: "0px",
+  })
+})
diff --git a/packages/select/src/interface.tsx b/packages/select/src/interface.tsx
@@ -130,7 +130,7 @@ export interface SelectProps
 export interface SelectViewProps
   extends Omit<
     SelectProps,
-    "options" | "filterOption" | "onChange" | "onClear"
+    "options" | "filterOption" | "onChange" | "onClear" | "triggerProps"
   > {
   value?: any
   defaultValue?: any

diff --git a/packages/select/src/select-view.tsx b/packages/select/src/select-view.tsx
@@ -1,11 +1,4 @@
-import {
-  forwardRef,
-  SyntheticEvent,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from "react"
+import { forwardRef, SyntheticEvent, useEffect, useRef, useState } from "react"
 import { InputElement, InputElementProps } from "@illa-design/input"
 import { isNumber, isObject, omit } from "@illa-design/system"
 import {

diff --git a/packages/select/src/select.tsx b/packages/select/src/select.tsx
@@ -7,7 +7,7 @@ import {
   ReactText,
   SyntheticEvent,
 } from "react"
-import { useMergeValue, isArray, isObject } from "@illa-design/system"
+import { useMergeValue, isArray, isObject, omit } from "@illa-design/system"
 import { Trigger } from "@illa-design/trigger"
 import { SelectView } from "./select-view"
 import {
@@ -373,7 +373,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
       {...triggerProps}
     >
       <SelectView
-        {...props}
+        {...omit(props, ["triggerProps"])}
         {...selectViewEventHandlers}
         ref={ref}
         value={currentValue}

diff --git a/packages/system/src/use-merge-value.ts b/packages/system/src/use-merge-value.ts
@@ -9,7 +9,7 @@ export function useMergeValue<T>(
   },
 ): [T, React.Dispatch<React.SetStateAction<T>>, T] {
   const { defaultValue, value } = props || {}
-  const firstRenderRef = useRef(true)
+  const firstRenderRef = useRef<boolean>()
 
   const [stateValue, setStateValue] = useState<T>(
     value !== undefined
@@ -19,6 +19,15 @@ export function useMergeValue<T>(
       : defaultStateValue,
   )
 
+  // fix：When StrictMode is enabled, React-18 intentionally double-invokes effects for newly mounted components
+  // link：https://github.com/reactwg/react-18/discussions/19
+  useEffect(() => {
+    firstRenderRef.current = true
+    return () => {
+      firstRenderRef.current = undefined
+    }
+  }, [])
+
   useEffect(() => {
     if (firstRenderRef.current) {
       firstRenderRef.current = false

diff --git a/packages/system/tests/system.test.tsx b/packages/system/tests/system.test.tsx
@@ -125,7 +125,7 @@ test("System test padStart function", () => {
 
 // test style.ts
 test("GetStyle should work", () => {
-  render(<div style={{ color: "red" }} data-testid={"test"}></div>)
+  render(<div style={{ color: "red" }} data-testid={"test"} />)
   expect(getStyle(screen.getByTestId("test"), "color")).toBe("red")
   expect(getStyle(screen.getByTestId("test"), "")).toBe("")
 })

diff --git a/packages/upload/package.json b/packages/upload/package.json
@@ -41,6 +41,7 @@
   "dependencies": {
     "@illa-design/icon": "0.0.4",
     "@illa-design/image": "0.0.4",
+    "@illa-design/button": "0.0.4",
     "@illa-design/list": "0.0.4",
     "@illa-design/progress": "0.0.4",
     "@illa-design/theme": "0.0.4",

diff --git a/packages/upload/src/file-list-pic-item.tsx b/packages/upload/src/file-list-pic-item.tsx
@@ -51,3 +51,5 @@ export const FileListPicItem = forwardRef<HTMLDivElement, FileListItemProps>(
     )
   },
 )
+
+FileListPicItem.displayName = "FileListPicItem"
diff --git a/packages/upload/src/file-list-text-item.tsx b/packages/upload/src/file-list-text-item.tsx
@@ -107,3 +107,5 @@ export const FileListTextItem = forwardRef<HTMLDivElement, FileListItemProps>(
     )
   },
 )
+
+FileListTextItem.displayName = "FileListTextItem"
diff --git a/packages/upload/src/upload-element.tsx b/packages/upload/src/upload-element.tsx
@@ -292,3 +292,5 @@ export const UploadElement = forwardRef<UploadRefType, UploadInputElementProps>(
     )
   },
 )
+
+UploadElement.displayName = "UploadElement"
diff --git a/packages/upload/src/upload-input.tsx b/packages/upload/src/upload-input.tsx
@@ -144,3 +144,5 @@ export const UploadInput: FC<ChildrenNodeProps> = (props) => {
   }
   return autoUploadButton
 }
+
+UploadInput.displayName = "UploadInput"
diff --git a/packages/upload/src/upload.tsx b/packages/upload/src/upload.tsx
@@ -212,3 +212,5 @@ export const Upload = forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
     </div>
   )
 })
+
+Upload.displayName = "Upload"
-Original file line number
+Diff line change
@@ Expand Up @@
         )
       },
     )
+    FileListPicItem.displayName = "FileListPicItem"