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

fix(modal): fix typography and alignment on mobile (#382)

Browse Source 
* fix(modal): fix layout of modal actions on safari mobile

* fix(modal): fix vertical alignment on safari mobile

* test(modal): update snapshots

* docs: hide menu when modal active

* docs(modal): add overlong case
This commit is contained in:
witt
2020-09-03 09:52:42 +08:00
committed by GitHub
parent dd8c95d561
commit 43efed8e79
11 changed files with 116 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,36 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Backdrop should render correctly 1`] = `
"<div class=\\"backdrop backdrop-wrapper-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><style>
.backdrop {
position: fixed;
top: 0;
left: 0;
display: flex;
align-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
width: 100vw;
right: 0;
bottom: 0;
overflow: auto;
z-index: 1000;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
text-align: center;
}
.content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1001;
outline: none;
max-width: 90%;
width: undefined;
margin: 20px auto;
vertical-align: middle;
display: inline-block;
}
.offset {
height: 0;
opacity: 0;
display: flex;
background-color: transparent;
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {

1
components/shared/__tests__/backdrop.test.tsx
View File

@@ -56,7 +56,6 @@ describe('Backdrop', () => {
</Backdrop>,
)
wrapper.find('.content').simulate('click', nativeEvent)
wrapper.find('.offset').simulate('click', nativeEvent)
expect(handler).not.toHaveBeenCalled()
handler.mockRestore()
})

35
components/shared/backdrop.tsx
View File

@@ -7,6 +7,7 @@ import useCurrentState from '../utils/use-current-state'
interface Props {
onClick?: (event: MouseEvent<HTMLElement>) => void
visible?: boolean
width?: string
}
const defaultProps = {
@@ -18,7 +19,7 @@ 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, ...props }) => {
({ children, onClick, visible, width, ...props }) => {
const theme = useTheme()
const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false)
const clickHandler = (event: MouseEvent<HTMLElement>) => {
@@ -46,37 +47,37 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
onMouseDown={() => setIsContentMouseDown(true)}>
{children}
</div>
<div onClick={childrenClickHandler} className="offset" />
<style jsx>{`
.backdrop {
position: fixed;
top: 0;
left: 0;
display: flex;
align-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
width: 100vw;
right: 0;
bottom: 0;
overflow: auto;
z-index: 1000;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
text-align: center;
}
.content {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1001;
outline: none;
max-width: 90%;
width: ${width};
margin: 20px auto;
vertical-align: middle;
display: inline-block;
}
.offset {
height: 0;
opacity: 0;
display: flex;
background-color: transparent;
.backdrop:before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.layer {