style(prettier): format code style

2026-04-24 04:15:54 +08:00 · 2020-05-06 14:18:28 +08:00
parent cf8e277324
commit 112c826575
263 changed files with 4927 additions and 3992 deletions
--- a/components/button-dropdown/tests/index.test.tsx
+++ b/components/button-dropdown/tests/index.test.tsx
@@ -10,11 +10,11 @@ describe('Button Dropdown', () => {
        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
-      </ButtonDropdown>
+      </ButtonDropdown>,
    )
    expect(() => wrapper.unmount()).not.toThrow()
  })
-  
+
  it('should support types and sizes', () => {
    const wrapper = render(
      <div>
@@ -27,15 +27,15 @@ describe('Button Dropdown', () => {
        <ButtonDropdown type="secondary">
          <ButtonDropdown.Item main>Secondary Action</ButtonDropdown.Item>
        </ButtonDropdown>
-      </div>
+      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })
-  
+
  it('should trigger callback function', () => {
    const Wrapper = () => {
      const [state, setState] = React.useState<string>('state1')
-      
+
      return (
        <ButtonDropdown type="secondary">
          <ButtonDropdown.Item main onClick={() => setState('state2')}>
@@ -49,22 +49,21 @@ describe('Button Dropdown', () => {
    wrapper.find('button').simulate('click', nativeEvent)
    expect(wrapper.text()).toContain('state2')
  })
-  
+
  it('should work correctly when callback missing', () => {
    const wrapper = mount(
      <ButtonDropdown type="secondary">
-        <ButtonDropdown.Item main>
-        </ButtonDropdown.Item>
-      </ButtonDropdown>
+        <ButtonDropdown.Item main></ButtonDropdown.Item>
+      </ButtonDropdown>,
    )
    wrapper.find('button').simulate('click', nativeEvent)
    expect(() => wrapper.unmount()).not.toThrow()
  })
-  
+
  it('should ignore all events when loading', () => {
    const Wrapper = () => {
      const [state, setState] = React.useState<string>('state1')
-    
+
      return (
        <ButtonDropdown type="secondary" loading>
          <ButtonDropdown.Item main onClick={() => setState('state2')}>
@@ -77,11 +76,11 @@ describe('Button Dropdown', () => {
    wrapper.find('button').simulate('click', nativeEvent)
    expect(wrapper.text()).not.toContain('state2')
  })
-  
+
  it('should ignore all events when disabled', () => {
    const Wrapper = () => {
      const [state, setState] = React.useState<string>('state1')
-      
+
      return (
        <ButtonDropdown type="secondary" disabled>
          <ButtonDropdown.Item main onClick={() => setState('state2')}>
@@ -95,43 +94,45 @@ describe('Button Dropdown', () => {
    wrapper.find('button').simulate('click', nativeEvent)
    expect(wrapper.text()).not.toContain('state2')
  })
-  
+
  it('should render multiple types', () => {
    const wrapper = render(
      <ButtonDropdown size="medium" auto>
-        <ButtonDropdown.Item main type="success">Auto Mini</ButtonDropdown.Item>
+        <ButtonDropdown.Item main type="success">
+          Auto Mini
+        </ButtonDropdown.Item>
        <ButtonDropdown.Item type="warning">Auto Mini</ButtonDropdown.Item>
        <ButtonDropdown.Item type="error">Auto Mini</ButtonDropdown.Item>
-      </ButtonDropdown>
+      </ButtonDropdown>,
    )
    expect(wrapper).toMatchSnapshot()
  })
-  
+
  it('should expand after click', () => {
    const wrapper = mount(
      <ButtonDropdown>
        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
-      </ButtonDropdown>
+      </ButtonDropdown>,
    )
-    
+
    wrapper.find('summary').simulate('click', nativeEvent)
    const open = wrapper.find('details').prop('open')
    expect(open).toBeTruthy()
  })
-  
+
  it('should stop propagation', () => {
    let stopped = false
-    const nativeEvent = mockNativeEvent(() => stopped = true)
+    const nativeEvent = mockNativeEvent(() => (stopped = true))
    const wrapper = mount(
      <ButtonDropdown>
        <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
        <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
        <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
-      </ButtonDropdown>
+      </ButtonDropdown>,
    )
-    
+
    wrapper.find('summary').simulate('click', nativeEvent)
    expect(stopped).toBeTruthy()
  })
--- a/components/button-dropdown/button-dropdown-context.ts
+++ b/components/button-dropdown/button-dropdown-context.ts
@@ -19,4 +19,5 @@ const defaultContext = {

 export const ButtonDropdownContext = React.createContext<ButtonDropdownConfig>(defaultContext)

-export const useButtonDropdown = (): ButtonDropdownConfig => React.useContext<ButtonDropdownConfig>(ButtonDropdownContext)
+export const useButtonDropdown = (): ButtonDropdownConfig =>
+  React.useContext<ButtonDropdownConfig>(ButtonDropdownContext)
--- a/components/button-dropdown/button-dropdown-item.tsx
+++ b/components/button-dropdown/button-dropdown-item.tsx
@@ -25,7 +25,12 @@ type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ButtonDropdownItemProps = Props & typeof defaultProps & NativeAttrs

 const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = ({
-  children, onClick, className, main, type: selfType, ...props
+  children,
+  onClick,
+  className,
+  main,
+  type: selfType,
+  ...props
 }) => {
  const theme = useTheme()
  const { size, type: parentType, auto, disabled, loading } = useButtonDropdown()
@@ -36,12 +41,12 @@ const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemPro
    if (disabled || loading) return
    onClick && onClick(event)
  }
-  
+
  const cursor = useMemo(() => {
    if (loading) return 'default'
    return disabled ? 'not-allowed' : 'pointer'
-  },[loading, disabled])
-  
+  }, [loading, disabled])
+
  return (
    <button className={className} onClick={clickHandler} {...props}>
      {loading ? <Loading /> : children}
@@ -68,7 +73,7 @@ const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemPro
          padding: 0 ${sizes.padding};
          font-size: ${sizes.fontSize};
        }
-        
+
        button:hover {
          border-color: ${colors.hoverBorder};
          background-color: ${colors.hoverBgColor};
--- a/components/button-dropdown/button-dropdown.tsx
+++ b/components/button-dropdown/button-dropdown.tsx
@@ -36,7 +36,14 @@ const stopPropagation = (event: MouseEvent<HTMLElement>) => {
 }

 const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = ({
-  children, type, size, auto, className, disabled, loading, ...props
+  children,
+  type,
+  size,
+  auto,
+  className,
+  disabled,
+  loading,
+  ...props
 }) => {
  const ref = useRef<HTMLDivElement>(null)
  const theme = useTheme()
@@ -44,23 +51,33 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
  const sizes = getButtonSize(size, auto)
  const itemChildren = pickChild(children, ButtonDropdownItem)[1]
  const [itemChildrenWithoutMain, mainItemChildren] = pickChildByProps(itemChildren, 'main', true)
-  
+
  const [visible, setVisible] = useState<boolean>(false)
-  const clickHandler = useCallback((event: MouseEvent<HTMLDetailsElement>) => {
-    event.preventDefault()
-    stopPropagation(event)
-    if (disabled || loading) return
-    setVisible(!visible)
-  }, [visible])
-  
-  const initialValue = useMemo(() => ({
-    type, size, auto, disabled, loading,
-  }), [type, size])
+  const clickHandler = useCallback(
+    (event: MouseEvent<HTMLDetailsElement>) => {
+      event.preventDefault()
+      stopPropagation(event)
+      if (disabled || loading) return
+      setVisible(!visible)
+    },
+    [visible],
+  )
+
+  const initialValue = useMemo(
+    () => ({
+      type,
+      size,
+      auto,
+      disabled,
+      loading,
+    }),
+    [type, size],
+  )
  const bgColor = useMemo(() => {
    if (disabled || loading) return theme.palette.accents_1
    return visible ? colors.hoverBgColor : colors.bgColor
  }, [visible, colors, theme.palette])
-  
+
  useClickAway(ref, () => setVisible(false))

  return (
@@ -74,66 +91,66 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
          <div className="content">{itemChildrenWithoutMain}</div>
        </details>
        <style jsx>{`
-        .btn-dropdown {
-          display: inline-flex;
-          position: relative;
-          box-sizing: border-box;
-          border: 1px solid ${theme.palette.border};
-          border-radius: ${theme.layout.radius};
-        }
-        
-        .btn-dropdown > :global(button) {
-          border-top-left-radius: ${theme.layout.radius};
-          border-bottom-left-radius: ${theme.layout.radius};
-        }
-        
-        summary {
-          box-sizing: border-box;
-          -webkit-tap-highlight-color: transparent;
-          list-style: none;
-          outline: none;
-          color: ${colors.color};
-          background-color: ${bgColor};
-          height: ${sizes.height};
-          border-left: 1px solid ${colors.borderLeftColor};
-          border-top-right-radius: ${theme.layout.radius};
-          border-bottom-right-radius: ${theme.layout.radius};
-          cursor: ${(disabled || loading) ? 'not-allowed' : 'pointer'};
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: auto;
-          padding: 0 1px;
-          transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
-        }
-        
-        summary:hover {
-          border-color: ${colors.hoverBorder};
-          background-color: ${colors.hoverBgColor};
-        }
-        
-        .content {
-          position: absolute;
-          right: 0;
-          left: 0;
-          z-index: 90;
-          width: 100%;
-          border-radius: ${theme.layout.radius};
-          box-shadow: ${theme.expressiveness.shadowLarge};
-          transform: translateY(${theme.layout.gapHalf});
-          background-color: ${theme.palette.background};
-        }
-        
-        .content > :global(button:first-of-type) {
-          border-top-left-radius: ${theme.layout.radius};
-          border-top-right-radius: ${theme.layout.radius};
-        }
-        
-        .content > :global(button:last-of-type) {
-          border-bottom-left-radius: ${theme.layout.radius};
-          border-bottom-right-radius: ${theme.layout.radius};
-        }
-      `}</style>
+          .btn-dropdown {
+            display: inline-flex;
+            position: relative;
+            box-sizing: border-box;
+            border: 1px solid ${theme.palette.border};
+            border-radius: ${theme.layout.radius};
+          }
+
+          .btn-dropdown > :global(button) {
+            border-top-left-radius: ${theme.layout.radius};
+            border-bottom-left-radius: ${theme.layout.radius};
+          }
+
+          summary {
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            list-style: none;
+            outline: none;
+            color: ${colors.color};
+            background-color: ${bgColor};
+            height: ${sizes.height};
+            border-left: 1px solid ${colors.borderLeftColor};
+            border-top-right-radius: ${theme.layout.radius};
+            border-bottom-right-radius: ${theme.layout.radius};
+            cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: auto;
+            padding: 0 1px;
+            transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
+          }
+
+          summary:hover {
+            border-color: ${colors.hoverBorder};
+            background-color: ${colors.hoverBgColor};
+          }
+
+          .content {
+            position: absolute;
+            right: 0;
+            left: 0;
+            z-index: 90;
+            width: 100%;
+            border-radius: ${theme.layout.radius};
+            box-shadow: ${theme.expressiveness.shadowLarge};
+            transform: translateY(${theme.layout.gapHalf});
+            background-color: ${theme.palette.background};
+          }
+
+          .content > :global(button:first-of-type) {
+            border-top-left-radius: ${theme.layout.radius};
+            border-top-right-radius: ${theme.layout.radius};
+          }
+
+          .content > :global(button:last-of-type) {
+            border-bottom-left-radius: ${theme.layout.radius};
+            border-bottom-right-radius: ${theme.layout.radius};
+          }
+        `}</style>
      </div>
    </ButtonDropdownContext.Provider>
  )
@@ -142,9 +159,10 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = (
 type MemoButtonDropdownComponent<P = {}> = React.NamedExoticComponent<P> & {
  Item: typeof ButtonDropdownItem
 }
-type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
+type ComponentProps = Partial<typeof defaultProps> &
+  Omit<Props, keyof typeof defaultProps> &
+  NativeAttrs

 ButtonDropdown.defaultProps = defaultProps

 export default React.memo(ButtonDropdown) as MemoButtonDropdownComponent<ComponentProps>
-
--- a/components/button-dropdown/icon.tsx
+++ b/components/button-dropdown/icon.tsx
@@ -5,17 +5,24 @@ interface Props {
  height?: string
 }

-const ButtonDropdownIcon: React.FC<Props> = ({
-  color, height,
-}) => {
+const ButtonDropdownIcon: React.FC<Props> = ({ color, height }) => {
  return (
-    <svg stroke={color} style={{ color }} viewBox="0 0 24 24" width={height} height={height}  strokeWidth="1" strokeLinecap="round"
-      strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" >
+    <svg
+      stroke={color}
+      style={{ color }}
+      viewBox="0 0 24 24"
+      width={height}
+      height={height}
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision">
      <path d="M6 9l6 6 6-6" />
-  
+
      <style jsx>{`
        svg {
-          transform: scale(.6);
+          transform: scale(0.6);
        }
      `}</style>
    </svg>
--- a/components/button-dropdown/styles.ts
+++ b/components/button-dropdown/styles.ts
@@ -14,7 +14,7 @@ export const getColor = (
  type: NormalTypes | undefined,
  disabled: boolean = false,
 ) => {
-  const colors: { [key in  NormalTypes ]: ButtonDropdownColors } = {
+  const colors: { [key in NormalTypes]: ButtonDropdownColors } = {
    default: {
      color: palette.accents_5,
      bgColor: palette.background,
@@ -49,13 +49,14 @@ export const getColor = (
      borderLeftColor: palette.errorDark,
      hoverBgColor: palette.errorDark,
      hoverBorder: palette.errorDark,
+    },
+  }
+
+  if (disabled)
+    return {
+      ...colors.default,
+      bgColor: palette.accents_1,
+      color: palette.accents_4,
    }
-  }
-  
-  if (disabled) return {
-    ...colors.default,
-    bgColor: palette.accents_1,
-    color: palette.accents_4,
-  }
  return type ? colors[type] : colors.default
 }