kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-27 19:25:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: release v1.8.0 (#367)

Browse Source 
* feat(snippet): add custom symbol and toast

* docs(snippet): add docs for custom symbol and toast

* fix(snippet): default toast type as normal type

* test(snippet): add custom symbol and toast

* docs(snippet): add enum type of APIs

* docs(toast): add normal-types

* chore: release v1.8.0-canary.1

* feat(modal): optimize the animation of layer

* test: update snapshots

* chore: release v1.8.0-canary.2

* docs: format import statement

* feat(modal): optimize the max width, height and alignment of layer

* test: update snapshots

* chore: release v1.8.0-canary.3

* Button (#319)

* feat(button): center the icon if the button is empty

* test(button): add testcase for icon only

* docs(button): add example for icon only

* chore: release v1.8.0-canary.4

* fix(snippet): remove space when the symbol is empty (#325)

* fix(snippet): remove space when the symbol is empty

style(snippet): remove unnecessary escape symbols

* fix(snippet): ignore spaces in symbol

style: fix lint warning

* chore: release v1.8.0-canary.5

* feat(tabs): sync the label and set value to required (#334)

* feat(tabs): sync the label and set value to required

* test(tabs): add testcase for label sync

* docs(tabs): update value to required

* feat(modal): use Button to reconstrust Modal.Action (#332)

* feat(modal): use Button to reconstrust Modal.Action

* docs(modal): add example for action loading

* test: update snapshots

* chore: release v1.8.0-canary.6

* fix(input): always synchronize external value and ignore changes (#336)

* fix(input): always synchronize external value and ignore changes

* feat(input): support imperative API to update

* fix(textarea): imperative api same as input (#341)

* feat(dropdown): allow dropdown to set the specified container (#344)

* feat(dropdown): allow dropdown to set the specified container

* test(modal): update snapshots

* docs(select): add example for custom popup container

* fix(dropdown): fix type of getPopupContainer

* test(dropdown): add testcase for specified container rendering

* chore: release v1.8.0-canary.7

* fix(link): fix hard-coded background color (#347)

* style(description): fix title font-weight (#348)

* docs(link): fix duplicate examples (#346)

* style(popover-item): the whole item should be clickable when using with link (#345)

* fix(modal): fix type of Modal.Action (#351)

* chore: release v1.8.0-canary.8

* feat(modal): lock tab action inside modal (#354)

* feat(button): add style to focus buttons

* feat(collections): add util function

* feat(modal): lock tab action inside modal

* test(modal): add tests for modal focus

* test: update style of button

* fix(table): fix column's props are not tracked (#362)

* chore: release v1.8.0-canary.9

* fix(table): children of column should be kept in sync (#364)

* chore: release v1.8.0-canary.10

Co-authored-by: Augusto <augustoconti10@gmail.com>
Co-authored-by: yqrashawn <namy.19@gmail.com>
Co-authored-by: Zhao Lei <firede@firede.us>
This commit is contained in:
witt
2020-08-14 16:59:49 +08:00
committed by GitHub
parent 3c0fa081aa
commit bb575498fe
60 changed files with 1507 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/shared/__tests__/__snapshots__/backdrop.test.tsx.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Backdrop should render correctly 1`] = `
"<div class=\\"backdrop transition-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><span>test-value</span></div><div class=\\"offset\\"></div><style>
"<div class=\\"backdrop backdrop-wrapper-enter\\"><div class=\\"layer\\"></div><div class=\\"content\\"><span>test-value</span></div><div class=\\"offset\\"></div><style>
.backdrop {
position: fixed;
top: 0;
@@ -10,7 +10,7 @@ exports[`Backdrop should render correctly 1`] = `
align-content: center;
align-items: center;
flex-direction: column;
justify-content: space-around;
justify-content: center;
height: 100vh;
width: 100vw;
overflow: auto;
@@ -47,5 +47,21 @@ exports[`Backdrop should render correctly 1`] = `
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave .layer {
opacity: 0.25;
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
</style></div>"
`;

20
components/shared/__tests__/dropdown.test.tsx
View File

@@ -164,4 +164,24 @@ describe('Dropdown', () => {
expect(() => wrapper.unmount()).not.toThrow()
})
it('should render to specified container', () => {
const Mock: React.FC<{}> = () => {
const ref = useRef<HTMLDivElement>(null)
const customContainer = useRef<HTMLDivElement>(null)
return (
<div>
<div ref={customContainer} id="custom" />
<div ref={ref}>
<Dropdown parent={ref} visible getPopupContainer={() => customContainer.current}>
<span>test-value</span>
</Dropdown>
</div>
</div>
)
}
const wrapper = mount(<Mock />)
const customContainer = wrapper.find('#custom')
expect(customContainer.html()).toContain('dropdown')
})
})

28
components/shared/backdrop.tsx
View File

@@ -12,13 +12,13 @@ interface Props {
const defaultProps = {
onClick: () => {},
visible: false,
offsetY: 0,
}
export type BackdropProps = Props & typeof defaultProps
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type BackdropProps = Props & typeof defaultProps & NativeAttrs
const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
({ children, onClick, visible }) => {
({ children, onClick, visible, ...props }) => {
const theme = useTheme()
const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false)
const clickHandler = (event: MouseEvent<HTMLElement>) => {
@@ -37,8 +37,8 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
}
return (
<CSSTransition visible={visible} clearTime={300}>
<div className="backdrop" onClick={clickHandler} onMouseUp={mouseUpHandler}>
<CSSTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
<div className="backdrop" onClick={clickHandler} onMouseUp={mouseUpHandler} {...props}>
<div className="layer" />
<div
onClick={childrenClickHandler}
@@ -56,7 +56,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
align-content: center;
align-items: center;
flex-direction: column;
justify-content: space-around;
justify-content: center;
height: 100vh;
width: 100vw;
overflow: auto;
@@ -93,6 +93,22 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: ${theme.expressiveness.portalOpacity};
}
.backdrop-wrapper-leave .layer {
opacity: ${theme.expressiveness.portalOpacity};
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
`}</style>
</div>
</CSSTransition>

32
components/shared/dropdown.tsx
View File

@@ -10,6 +10,7 @@ interface Props {
parent?: MutableRefObject<HTMLElement | null> | undefined
visible: boolean
disableMatchWidth?: boolean
getPopupContainer?: () => HTMLElement | null
}
interface ReactiveDomReact {
@@ -26,31 +27,48 @@ const defaultRect: ReactiveDomReact = {
width: 0,
}
const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact => {
const getOffset = (el?: HTMLElement | null | undefined) => {
if (!el)
return {
top: 0,
left: 0,
}
const { top, left } = el.getBoundingClientRect()
return { top, left }
}
const getRect = (
ref: MutableRefObject<HTMLElement | null>,
getContainer?: () => HTMLElement | null,
): ReactiveDomReact => {
if (!ref || !ref.current) return defaultRect
const rect = ref.current.getBoundingClientRect()
const container = getContainer ? getContainer() : null
const scrollElement = container || document.documentElement
const { top: offsetTop, left: offsetLeft } = getOffset(container)
return {
...rect,
width: rect.width || rect.right - rect.left,
top: rect.bottom + document.documentElement.scrollTop,
left: rect.left + document.documentElement.scrollLeft,
top: rect.bottom + scrollElement.scrollTop - offsetTop,
left: rect.left + scrollElement.scrollLeft - offsetLeft,
}
}
const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(
({ children, parent, visible, disableMatchWidth }) => {
const el = usePortal('dropdown')
({ children, parent, visible, disableMatchWidth, getPopupContainer }) => {
const el = usePortal('dropdown', getPopupContainer)
const [rect, setRect] = useState<ReactiveDomReact>(defaultRect)
if (!parent) return null
const updateRect = () => {
const { top, left, right, width: nativeWidth } = getRect(parent)
const { top, left, right, width: nativeWidth } = getRect(parent, getPopupContainer)
setRect({ top, left, right, width: nativeWidth })
}
useResize(updateRect)
useClickAnyWhere(() => {
const { top, left } = getRect(parent)
const { top, left } = getRect(parent, getPopupContainer)
const shouldUpdatePosition = top !== rect.top || left !== rect.left
if (!shouldUpdatePosition) return
updateRect()