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

Merge pull request #252 from unix/button

Browse Source 
fix: fix loading is not display under auto width
This commit is contained in:
witt
2020-05-29 14:53:12 +08:00
committed by GitHub
parent 4bb32c699f 8dc3bd5f3f
commit a0362fe559
7 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/button-group/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -32,6 +32,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
--zeit-ui-button-padding: 1.25rem;
--zeit-ui-button-height: 2.5rem;
--zeit-ui-button-color: #666;
--zeit-ui-button-bg: #fff;
}
.btn:hover {
@@ -92,6 +93,7 @@ exports[`ButtonGroup buttons should be displayed vertically 1`] = `
--zeit-ui-button-padding: 1.25rem;
--zeit-ui-button-height: 2.5rem;
--zeit-ui-button-color: #666;
--zeit-ui-button-bg: #fff;
}
.btn:hover {
@@ -200,6 +202,7 @@ exports[`ButtonGroup props should be passed to each button 1`] = `
--zeit-ui-button-padding: 0.625rem;
--zeit-ui-button-height: 1.5rem;
--zeit-ui-button-color: #fff;
--zeit-ui-button-bg: #0070f3;
}
.btn:hover {
@@ -308,6 +311,7 @@ exports[`ButtonGroup props should be passed to each button 2`] = `
--zeit-ui-button-padding: 0.625rem;
--zeit-ui-button-height: 1.5rem;
--zeit-ui-button-color: #fff;
--zeit-ui-button-bg: #0070f3;
}
.btn:hover {
@@ -416,6 +420,7 @@ exports[`ButtonGroup should render correctly 1`] = `
--zeit-ui-button-padding: 1.25rem;
--zeit-ui-button-height: 2.5rem;
--zeit-ui-button-color: #666;
--zeit-ui-button-bg: #fff;
}
.btn:hover {

2
components/button/__tests__/__snapshots__/icon.test.tsx.snap
View File

@@ -63,6 +63,7 @@ exports[`ButtonIcon should render correctly 1`] = `
--zeit-ui-button-padding: 1.375rem;
--zeit-ui-button-height: 2.5rem;
--zeit-ui-button-color: #666;
--zeit-ui-button-bg: #fff;
}
.btn:hover {
@@ -158,6 +159,7 @@ exports[`ButtonIcon should work with right 1`] = `
--zeit-ui-button-padding: 1.375rem;
--zeit-ui-button-height: 2.5rem;
--zeit-ui-button-color: #666;
--zeit-ui-button-bg: #fff;
}
.btn:hover {

27
components/button/button-loading.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react'
import Loading from '../loading'
interface Props {
color: string
}
const ButtonLoading: React.FC<React.PropsWithChildren<Props>> = ({ color }) => {
return (
<div className="btn-loading">
<Loading color={color} />
<style jsx>{`
.btn-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: var(--zeit-ui-button-bg);
}
`}</style>
</div>
)
}
export default React.memo(ButtonLoading)

6
components/button/button.tsx
View File

@@ -9,7 +9,7 @@ import React, {
} from 'react'
import useTheme from '../styles/use-theme'
import ButtonDrip from './button.drip'
import ButtonLoading from '../loading'
import ButtonLoading from './button-loading'
import { ButtonTypes, NormalSizes } from '../utils/prop-types'
import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils'
import { useButtonGroupContext } from '../button-group/button-group-context'
@@ -141,7 +141,8 @@ const Button = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<Butto
disabled={disabled}
onClick={clickHandler}
{...props}>
{loading ? <ButtonLoading /> : childrenWithIcon}
{loading && <ButtonLoading color={color} />}
{childrenWithIcon}
{dripShow && (
<ButtonDrip x={dripX} y={dripY} color={dripColor} onCompleted={dripCompletedHandle} />
)}
@@ -176,6 +177,7 @@ const Button = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<Butto
--zeit-ui-button-padding: ${padding};
--zeit-ui-button-height: ${height};
--zeit-ui-button-color: ${color};
--zeit-ui-button-bg: ${bg};
}
.btn:hover {

2
components/use-toasts/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -32,6 +32,7 @@ exports[`UseToast should render different actions 1`] = `
--zeit-ui-button-padding: 0.625rem;
--zeit-ui-button-height: 1.5rem;
--zeit-ui-button-color: #fff;
--zeit-ui-button-bg: #000;
}
.btn:hover {
@@ -92,6 +93,7 @@ exports[`UseToast should render different actions 1`] = `
--zeit-ui-button-padding: 0.625rem;
--zeit-ui-button-height: 1.5rem;
--zeit-ui-button-color: #666;
--zeit-ui-button-bg: #fff;
}
.btn:hover {

10
pages/en-us/components/button.mdx
View File

@@ -26,9 +26,15 @@ Used to trigger an operation.
<Playground
title="Loading"
desc="Show running status."
scope={{ Button }}
scope={{ Button, Spacer }}
code={`
<Button loading>Action</Button>
<>
<Button loading>Action</Button>
<Spacer y={.5} />
<Button loading auto>Action</Button>
<Spacer y={.5} />
<Button loading auto type="success" size="small">Action</Button>
</>
`} />
<Playground

10
pages/zh-cn/components/button.mdx
View File

@@ -25,9 +25,15 @@ export const meta = {
<Playground
title="加载中"
desc="表示正在运行或加载中的状态。"
scope={{ Button }}
scope={{ Button, Spacer }}
code={`
<Button loading>动作</Button>
<>
<Button loading>Action</Button>
<Spacer y={.5} />
<Button loading auto>Action</Button>
<Spacer y={.5} />
<Button loading auto type="success" size="small">Action</Button>
</>
`} />
<Playground