kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(prettier): format code style

Browse Source
This commit is contained in:
unix
2020-05-06 14:18:28 +08:00
parent cf8e277324
commit 112c826575
263 changed files with 4927 additions and 3992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/utils/__tests__/calculations.test.tsx
View File

@@ -10,38 +10,36 @@ describe('calculations', () => {
expect(getProportions(10, 11, 4)).toEqual(90.9091)
expect(getProportions(10, 11, 3)).toEqual(90.909)
})
it('should be return max or min when out of range', () => {
expect(getProportions(101, 100)).toEqual(100)
expect(getProportions(-1, 100)).toEqual(0)
expect(getProportions(-10, 10)).toEqual(0)
expect(getProportions(3, 2)).toEqual(100)
})
it('should be return min-value when value is not number', () => {
const mock = getProportions as any
expect(mock('test', 10)).toEqual(0)
expect(mock('-', 10)).toEqual(0)
expect(mock('', 10)).toEqual(0)
})
it('should be return original value when the length is reasonable', () => {
expect(getProportions(3, 10, 10)).toEqual(30)
expect(getProportions(3, 16, 10)).toEqual(18.75)
})
it('should work with hooks', () => {
type Params = { value: number, max: number, maxFixed?: number }
type Params = { value: number; max: number; maxFixed?: number }
const MockComponent: React.FC<Params> = ({ value, max, maxFixed }) => {
const val = useProportions(value, max, maxFixed)
return <span>{val}</span>
}
const wrapper = mount(<MockComponent value={1} max={10} />)
expect(wrapper.find('span').text())
.toEqual(`${getProportions(1, 10)}`)
expect(wrapper.find('span').text()).toEqual(`${getProportions(1, 10)}`)
wrapper.setProps({ value: 10, max: 5, maxFixed: 2 })
expect(wrapper.find('span').text())
.toEqual(`${getProportions(10, 5, 2)}`)
expect(wrapper.find('span').text()).toEqual(`${getProportions(10, 5, 2)}`)
})
})

16
components/utils/calculations.ts
View File

@@ -8,11 +8,7 @@ import { useMemo } from 'react'
* (11.22, 100) => 11.22
* (11.22, 100, 4) => 11.2200
*/
export const getProportions = (
value: number,
max: number,
maxFixed: number = 2,
): number => {
export const getProportions = (value: number, max: number, maxFixed: number = 2): number => {
const val = value / max
const couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100
if (couldBeDecimalValue > 100) return 100
@@ -25,11 +21,5 @@ export const getProportions = (
return +couldBeDecimalValue.toFixed(maxFixed)
}
export const useProportions = (
value: number,
max: number,
maxFixed: number = 2,
) => useMemo(
() => getProportions(value, max, maxFixed),
[value, max, maxFixed],
)
export const useProportions = (value: number, max: number, maxFixed: number = 2) =>
useMemo(() => getProportions(value, max, maxFixed), [value, max, maxFixed])

45
components/utils/collections.ts
View File

@@ -4,24 +4,21 @@ export const getId = () => {
return Math.random().toString(32).slice(2, 10)
}
export const hasChild = (
children: ReactNode | undefined,
child: React.ElementType
): boolean => {
const types = React.Children.map(children, item => {
export const hasChild = (children: ReactNode | undefined, child: React.ElementType): boolean => {
const types = React.Children.map(children, (item) => {
if (!React.isValidElement(item)) return null
return item.type
})
return (types || []).includes(child)
}
export const pickChild = (
children: ReactNode | undefined,
targetChild: React.ElementType
targetChild: React.ElementType,
): [ReactNode | undefined, ReactNode | undefined] => {
let target: ReactNode[] = []
const withoutTargetChildren = React.Children.map(children, item => {
const withoutTargetChildren = React.Children.map(children, (item) => {
if (!React.isValidElement(item)) return item
if (item.type === targetChild) {
target.push(item)
@@ -29,9 +26,9 @@ export const pickChild = (
}
return item
})
const targetChildren = target.length >= 0 ? target : undefined
return [withoutTargetChildren, targetChildren]
}
@@ -41,7 +38,7 @@ export const pickChildByProps = (
value: any,
): [ReactNode | undefined, ReactNode | undefined] => {
let target: ReactNode[] = []
const withoutPropChildren = React.Children.map(children, item => {
const withoutPropChildren = React.Children.map(children, (item) => {
if (!React.isValidElement(item)) return null
if (!item.props) return item
if (item.props[key] === value) {
@@ -50,15 +47,13 @@ export const pickChildByProps = (
}
return item
})
const targetChildren = target.length >= 0 ? target : undefined
return [withoutPropChildren, targetChildren]
}
export const pickChildrenFirst = (
children: ReactNode | undefined,
): ReactNode | undefined => {
export const pickChildrenFirst = (children: ReactNode | undefined): ReactNode | undefined => {
return React.Children.toArray(children)[0]
}
@@ -71,11 +66,11 @@ export const setChildrenProps = (
const allowAll = targetComponents.length === 0
const clone = (child: React.ReactElement, props = {}) => React.cloneElement(child, props)
return React.Children.map(children, item => {
return React.Children.map(children, (item) => {
if (!React.isValidElement(item)) return item
if (allowAll) return clone(item, props)
const isAllowed = targetComponents.find(child => child === item.type)
const isAllowed = targetComponents.find((child) => child === item.type)
if (isAllowed) return clone(item, props)
return item
})
@@ -89,24 +84,22 @@ export const setChildrenIndex = (
const allowAll = targetComponents.length === 0
const clone = (child: React.ReactElement, props = {}) => React.cloneElement(child, props)
let index = 0
return React.Children.map(children, item => {
return React.Children.map(children, (item) => {
if (!React.isValidElement(item)) return item
index = index + 1
if (allowAll) return clone(item, { index })
const isAllowed = targetComponents.find(child => child === item.type)
const isAllowed = targetComponents.find((child) => child === item.type)
if (isAllowed) return clone(item, { index })
index = index - 1
return item
})
}
export const getReactNode = (
node?: React.ReactNode | (() => React.ReactNode),
): React.ReactNode => {
export const getReactNode = (node?: React.ReactNode | (() => React.ReactNode)): React.ReactNode => {
if (!node) return null
if (typeof node !== 'function') return node
return (node as () => React.ReactNode)()
}

59
components/utils/prop-types.ts
View File

@@ -1,44 +1,14 @@
export const tuple = <T extends string[]>(...args: T) => args
const buttonTypes = tuple(
'default',
'secondary',
'success',
'warning',
'error',
'abort',
)
const buttonTypes = tuple('default', 'secondary', 'success', 'warning', 'error', 'abort')
const normalSizes = tuple(
'mini',
'small',
'medium',
'large',
)
const normalSizes = tuple('mini', 'small', 'medium', 'large')
const normalTypes = tuple(
'default',
'secondary',
'success',
'warning',
'error',
)
const normalTypes = tuple('default', 'secondary', 'success', 'warning', 'error')
const themeTypes = tuple(
'dark',
'light',
)
const themeTypes = tuple('dark', 'light')
const snippetTypes = tuple(
'default',
'secondary',
'success',
'warning',
'error',
'dark',
'lite',
)
const snippetTypes = tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite')
const cardTypes = tuple(
'default',
@@ -54,16 +24,9 @@ const cardTypes = tuple(
'cyan',
)
const copyTypes = tuple(
'default',
'slient',
'prevent',
)
const copyTypes = tuple('default', 'slient', 'prevent')
const triggerTypes = tuple(
'hover',
'click',
)
const triggerTypes = tuple('hover', 'click')
const placement = tuple(
'top',
@@ -80,13 +43,7 @@ const placement = tuple(
'rightEnd',
)
const dividerAlign = tuple(
'start',
'center',
'end',
'left',
'right',
)
const dividerAlign = tuple('start', 'center', 'end', 'left', 'right')
export type ButtonTypes = typeof buttonTypes[number]

6
components/utils/use-click-anywhere.ts
View File

@@ -1,11 +1,9 @@
import { useEffect } from 'react'
const useClickAnyWhere = (
handler: (event: Event) => void,
) => {
const useClickAnyWhere = (handler: (event: Event) => void) => {
useEffect(() => {
const callback = (event: Event) => handler(event)
document.addEventListener('click', callback)
return () => document.removeEventListener('click', callback)
}, [handler])

11
components/utils/use-drag.ts
View File

@@ -17,12 +17,12 @@ const useDrag = (
const onDragging = useRef<boolean>(false)
const [, setStartX, startXRef] = useCurrentState<number>(0)
const [, setCurrentX, currentXRef] = useCurrentState<number>(0)
const getCustomEvent = () => ({
startX: startXRef.current,
currentX: currentXRef.current,
})
const elementMouseDownHandler = (event: MouseEvent) => {
event.stopPropagation()
event.stopImmediatePropagation()
@@ -45,12 +45,12 @@ const useDrag = (
onDragging.current = false
dragEndHandler(getCustomEvent())
}
useEffect(() => {
if (!elementRef || !elementRef.current) return
elementRef.current.addEventListener('mousedown', elementMouseDownHandler)
elementRef.current.addEventListener('touchstart', elementMouseDownHandler)
window.addEventListener('mousemove', globalDraggingHandler)
window.addEventListener('touchmove', globalDraggingHandler)
window.addEventListener('mouseup', globalDragEndHandler)
@@ -61,13 +61,12 @@ const useDrag = (
window.removeEventListener('touchmove', globalDraggingHandler)
window.removeEventListener('mouseup', globalDragEndHandler)
window.removeEventListener('touchend', globalDragEndHandler)
if (!elementRef || !elementRef.current) return
elementRef.current.removeEventListener('mousedown', elementMouseDownHandler)
elementRef.current.removeEventListener('touchstart', elementMouseDownHandler)
}
}, [elementRef])
}
export default useDrag

6
components/utils/use-portal.ts
View File

@@ -11,8 +11,10 @@ const createElement = (id: string): HTMLElement => {
const usePortal = (selectId: string = getId()): HTMLElement | null => {
const id = `zeit-ui-${selectId}`
const { isBrowser } = useSSR()
const [elSnapshot, setElSnapshot] = useState<HTMLElement | null>(isBrowser ? createElement(id) : null)
const [elSnapshot, setElSnapshot] = useState<HTMLElement | null>(
isBrowser ? createElement(id) : null,
)
useEffect(() => {
const hasElement = document.querySelector<HTMLElement>(`#${id}`)
const el = hasElement || createElement(id)

17
components/utils/use-real-shape.ts
View File

@@ -8,18 +8,21 @@ export type ShapeType = {
export const getRealShape = (el: HTMLElement | null): ShapeType => {
const defaultShape: ShapeType = { width: 0, height: 0 }
if (!el || typeof window === 'undefined') return defaultShape
const rect = el.getBoundingClientRect()
const { width, height } = window.getComputedStyle(el)
const getCSSStyleVal = (str: string, parentNum: number) => {
if (!str) return 0
const strVal = str.includes('px') ? +str.split('px')[0]
: str.includes('%') ? +str.split('%')[0] * parentNum * 0.01 : str
const strVal = str.includes('px')
? +str.split('px')[0]
: str.includes('%')
? +str.split('%')[0] * parentNum * 0.01
: str
return Number.isNaN(+strVal) ? 0 : +strVal
}
return {
width: getCSSStyleVal(`${width}`, rect.width),
height: getCSSStyleVal(`${height}`, rect.height),
@@ -38,7 +41,7 @@ const useRealShape = <T extends HTMLElement>(ref: MutableRefObject<T | null>): S
setState({ width, height })
}
useEffect(() => update(), [ref.current])
return [state, update]
}

4
components/utils/use-ssr.ts
View File

@@ -1,9 +1,7 @@
import { useEffect, useState } from 'react'
const isBrowser = (): boolean => {
return Boolean(typeof window !== 'undefined' &&
window.document &&
window.document.createElement)
return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement)
}
export type SSRState = {

6
components/utils/use-warning.ts
View File

@@ -3,15 +3,15 @@ const warningStack: { [key: string]: boolean } = {}
const useWarning = (message: string, component?: string) => {
const tag = component ? ` [${component}]` : ' '
const log = `[Zeit UI]${tag}: ${message}`
if (typeof console === 'undefined') return
if (warningStack[log]) return
warningStack[log] = true
if (process.env.NODE_ENV !== 'production') {
return console.error(log)
}
console.warn(log)
}

11
components/utils/use-zeit-ui-context.ts
View File

@@ -13,10 +13,13 @@ export interface ZeitUiContextParams {
const defaultParams: ZeitUiContextParams = {
toasts: [],
toastHovering: false,
updateToasts: t => t,
updateToastHoverStatus: () => {}
updateToasts: (t) => t,
updateToastHoverStatus: () => {},
}
export const ZEITUIContent:React.Context<ZeitUiContextParams> = React.createContext<ZeitUiContextParams>(defaultParams)
export const ZEITUIContent: React.Context<ZeitUiContextParams> = React.createContext<
ZeitUiContextParams
>(defaultParams)
export const useZEITUIContext = (): ZeitUiContextParams => React.useContext<ZeitUiContextParams>(ZEITUIContent)
export const useZEITUIContext = (): ZeitUiContextParams =>
React.useContext<ZeitUiContextParams>(ZEITUIContent)

5
components/utils/with-defaults.ts
View File

@@ -1,9 +1,6 @@
import React from 'react'
const withDefaults = <P, DP>(
component: React.ComponentType<P>,
defaultProps: DP,
) => {
const withDefaults = <P, DP>(component: React.ComponentType<P>, defaultProps: DP) => {
type Props = Partial<DP> & Omit<P, keyof DP>
component.defaultProps = defaultProps
return component as React.ComponentType<Props>