kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-24 04:15:54 +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

52
components/select/__tests__/index.test.tsx
View File

@@ -11,7 +11,7 @@ describe('Select', () => {
<Select size="mini" />
<Select size="small" />
<Select size="large" />
</div>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
@@ -31,27 +31,22 @@ describe('Select', () => {
<Select initialValue="2">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
</Select>,
)
expect(wrapper.find('.value').text())
.toContain('Option 2')
expect(wrapper.find('.value').text()).toContain('Option 2')
})
it('should trigger events when option changed', async () => {
let value = ''
const changeHandler = jest.fn()
.mockImplementation(val => value = val)
const changeHandler = jest.fn().mockImplementation((val) => (value = val))
const wrapper = mount(
<Select onChange={changeHandler}>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
</Select>,
)
wrapper.find('.select').simulate('click', nativeEvent)
wrapper.find('.select-dropdown')
.find('.option')
.at(0)
.simulate('click', nativeEvent)
wrapper.find('.select-dropdown').find('.option').at(0).simulate('click', nativeEvent)
await updateWrapper(wrapper, 350)
expect(changeHandler).toHaveBeenCalled()
expect(value).toEqual('1')
@@ -64,7 +59,7 @@ describe('Select', () => {
<Select onChange={changeHandler} disabled>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
</Select>,
)
wrapper.find('.select').simulate('click', nativeEvent)
expect(wrapper.find('.select-dropdown').length).toBe(0)
@@ -73,19 +68,17 @@ describe('Select', () => {
it('should ignore option when option disabled', async () => {
let value = ''
const changeHandler = jest.fn()
.mockImplementation(val => value = val)
const changeHandler = jest.fn().mockImplementation((val) => (value = val))
const wrapper = mount(
<Select onChange={changeHandler}>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2" disabled>Option 2</Select.Option>
</Select>
<Select.Option value="2" disabled>
Option 2
</Select.Option>
</Select>,
)
wrapper.find('.select').simulate('click', nativeEvent)
wrapper.find('.select-dropdown')
.find('.option')
.at(1)
.simulate('click', nativeEvent)
wrapper.find('.select-dropdown').find('.option').at(1).simulate('click', nativeEvent)
await updateWrapper(wrapper, 350)
expect(changeHandler).not.toHaveBeenCalled()
expect(value).not.toEqual('2')
@@ -97,28 +90,29 @@ describe('Select', () => {
<Select>
<Select.Option value="1">Option 1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select>
</Select>,
)
wrapper.setProps({ value: '2' })
await updateWrapper(wrapper, 300)
expect(wrapper.find('.value').text())
.toContain('Option 2')
expect(wrapper.find('.value').text()).toContain('Option 2')
wrapper.setProps({ value: '1' })
await updateWrapper(wrapper, 300)
expect(wrapper.find('.value').text())
.toContain('Option 1')
expect(wrapper.find('.value').text()).toContain('Option 1')
})
it('should be wraning when ident value missing', () => {
let errorMessage = ''
const errorSpy = jest.spyOn(console, 'error')
.mockImplementation(msg => errorMessage = msg)
const errorSpy = jest.spyOn(console, 'error').mockImplementation((msg) => (errorMessage = msg))
const SelectOption = Select.Option as any
const wrapper = mount(<Select><SelectOption>1</SelectOption></Select>)
const wrapper = mount(
<Select>
<SelectOption>1</SelectOption>
</Select>,
)
wrapper.find('.select').simulate('click', nativeEvent)
expect(errorMessage).toContain('required')
errorSpy.mockRestore()
})

25
components/select/select-dropdown.tsx
View File

@@ -19,7 +19,10 @@ type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type SelectDropdownProps = Props & typeof defaultProps & NativeAttrs
const SelectDropdown: React.FC<React.PropsWithChildren<SelectDropdownProps>> = ({
visible, children, className, dropdownStyle,
visible,
children,
className,
dropdownStyle,
}) => {
const theme = useTheme()
const { ref } = useSelectContext()
@@ -29,16 +32,16 @@ const SelectDropdown: React.FC<React.PropsWithChildren<SelectDropdownProps>> = (
<div className={`select-dropdown ${className}`} style={dropdownStyle}>
{children}
<style jsx>{`
.select-dropdown {
border-radius: ${theme.layout.radius};
box-shadow: ${theme.expressiveness.shadowLarge};
background-color: ${theme.palette.background};
max-height: 15rem;
overflow-y: auto;
overflow-anchor: none;
padding: ${theme.layout.gapQuarter} 0;
}
`}</style>
.select-dropdown {
border-radius: ${theme.layout.radius};
box-shadow: ${theme.expressiveness.shadowLarge};
background-color: ${theme.palette.background};
max-height: 15rem;
overflow-y: auto;
overflow-anchor: none;
padding: ${theme.layout.gapQuarter} 0;
}
`}</style>
</div>
</Dropdown>
)

19
components/select/select-icon.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react'
import React from 'react'
import withDefaults from '../utils/with-defaults'
interface Props {
@@ -6,17 +6,22 @@ interface Props {
}
const defaultProps = {
width: '1.25em'
width: '1.25em',
}
export type SelectIconProps = Props & typeof defaultProps
const SelectIcon: React.FC<SelectIconProps> = ({
width,
}) => {
const SelectIcon: React.FC<SelectIconProps> = ({ width }) => {
return (
<svg viewBox="0 0 24 24" width={width} height={width} strokeWidth="1" strokeLinecap="round"
strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
<svg
viewBox="0 0 24 24"
width={width}
height={width}
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision">
<path d="M6 9l6 6 6-6" />
<style jsx>{`
svg {

25
components/select/select-option.tsx
View File

@@ -21,7 +21,12 @@ type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type SelectOptionProps = Props & typeof defaultProps & NativeAttrs
const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
value: identValue, className, children, disabled, preventAllEvents, ...props
value: identValue,
className,
children,
disabled,
preventAllEvents,
...props
}) => {
const theme = useTheme()
const { updateValue, value, disableAll } = useSelectContext()
@@ -30,8 +35,8 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
useWarning('The props "value" is required.', 'Select Option')
}
const selected = useMemo(() => value ? identValue === value : false, [identValue, value])
const selected = useMemo(() => (value ? identValue === value : false), [identValue, value])
const bgColor = useMemo(() => {
if (isDisabled) return theme.palette.accents_1
return selected ? theme.palette.accents_1 : theme.palette.background
@@ -53,8 +58,10 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
return (
<>
<div className={`option ${className}`} onClick={clickHandler} {...props}>{children}</div>
<div className={`option ${className}`} onClick={clickHandler} {...props}>
{children}
</div>
<style jsx>{`
.option {
display: flex;
@@ -62,7 +69,7 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
align-items: center;
font-weight: normal;
white-space: pre;
font-size: .75rem;
font-size: 0.75rem;
height: calc(1.688 * ${theme.layout.gap});
padding: 0 ${theme.layout.gapHalf};
background-color: ${bgColor};
@@ -72,17 +79,17 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
}
.option:first-of-type {
border-top-left-radius: ${theme.layout.radius};
border-top-right-radius: ${theme.layout.radius};
}
.option:last-of-type {
border-bottom-left-radius: ${theme.layout.radius};
border-bottom-right-radius: ${theme.layout.radius};
}
.option:hover {
background-color: ${theme.palette.accents_1};
}

77
components/select/select.tsx
View File

@@ -35,16 +35,26 @@ type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type SelectProps = Props & typeof defaultProps & NativeAttrs
const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
children, size, disabled, initialValue: init, value: customValue,
icon: Icon, onChange, className, pure, placeholder, dropdownClassName,
dropdownStyle, ...props
children,
size,
disabled,
initialValue: init,
value: customValue,
icon: Icon,
onChange,
className,
pure,
placeholder,
dropdownClassName,
dropdownStyle,
...props
}) => {
const theme = useTheme()
const ref = useRef<HTMLDivElement>(null)
const [visible, setVisible] = useState<boolean>(false)
const [value, setValue] = useState<string | undefined>(init)
const sizes = useMemo(() => getSizes(theme, size), [theme, size])
const updateVisible = (next: boolean) => setVisible(next)
const updateValue = (next: string) => {
setValue(next)
@@ -52,10 +62,18 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
setVisible(false)
}
const initialValue: SelectConfig = useMemo(() => ({
value, visible, updateValue, updateVisible, size, ref,
disableAll: disabled,
}), [visible, size, disabled, ref])
const initialValue: SelectConfig = useMemo(
() => ({
value,
visible,
updateValue,
updateVisible,
size,
ref,
disableAll: disabled,
}),
[visible, size, disabled, ref],
)
const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation()
@@ -64,14 +82,14 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
if (disabled) return
setVisible(!visible)
}
useClickAway(ref, () => setVisible(false))
useEffect(() => {
if (customValue === undefined) return
setValue(customValue)
}, [customValue])
const selectedChild = useMemo(() => {
const [, optionChildren] = pickChildByProps(children, 'value', value)
const child = pickChildrenFirst(optionChildren)
@@ -84,10 +102,17 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
<div className={`select ${className}`} ref={ref} onClick={clickHandler} {...props}>
{!value && <span className="value placeholder">{placeholder}</span>}
{value && <span className="value">{selectedChild}</span>}
<SelectDropdown visible={visible}
<SelectDropdown
visible={visible}
className={dropdownClassName}
dropdownStyle={dropdownStyle}>{children}</SelectDropdown>
{!pure && <div className="icon"><Icon /></div>}
dropdownStyle={dropdownStyle}>
{children}
</SelectDropdown>
{!pure && (
<div className="icon">
<Icon />
</div>
)}
<style jsx>{`
.select {
display: inline-flex;
@@ -107,15 +132,15 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
min-width: ${sizes.minWidth};
background-color: ${disabled ? theme.palette.accents_1 : theme.palette.background};
}
.select:hover {
border-color: ${disabled ? theme.palette.border : theme.palette.foreground};
}
.select:hover .icon {
color: ${disabled ? theme.palette.accents_5 : theme.palette.foreground}
color: ${disabled ? theme.palette.accents_5 : theme.palette.foreground};
}
.value {
display: inline-flex;
flex: 1;
@@ -128,19 +153,20 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
color: ${disabled ? theme.palette.accents_4 : theme.palette.foreground};
width: calc(100% - 1.25rem);
}
.value > :global(div), .value > :global(div:hover) {
.value > :global(div),
.value > :global(div:hover) {
border-radius: 0;
background-color: transparent;
padding: 0;
margin: 0;
color: inherit;
}
.placeholder {
color: ${theme.palette.accents_3};
}
.icon {
position: absolute;
right: ${theme.layout.gapQuarter};
@@ -164,8 +190,9 @@ type SelectComponent<P = {}> = React.FC<P> & {
Option: typeof SelectOption
}
type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
(Select as SelectComponent<ComponentProps>).defaultProps = defaultProps
type ComponentProps = Partial<typeof defaultProps> &
Omit<Props, keyof typeof defaultProps> &
NativeAttrs
;(Select as SelectComponent<ComponentProps>).defaultProps = defaultProps
export default Select as SelectComponent<ComponentProps>

3
components/select/styles.ts
View File

@@ -30,7 +30,6 @@ export const getSizes = (theme: ZeitUIThemes, size?: NormalSizes) => {
minWidth: '12.5rem',
},
}
return size ? sizes[size] : sizes.medium
}