afc163
1 year ago
committed by
GitHub
GitHub
109 changed files with 1585 additions and 676 deletions
@ -1,17 +1,27 @@ |
|||
import React from 'react'; |
|||
|
|||
const NpmIcon: React.FC = () => ( |
|||
<svg |
|||
fill="#E53E3E" |
|||
focusable="false" |
|||
height="1em" |
|||
stroke="#E53E3E" |
|||
strokeWidth="0" |
|||
viewBox="0 0 16 16" |
|||
width="1em" |
|||
> |
|||
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" /> |
|||
</svg> |
|||
); |
|||
interface IconProps { |
|||
className?: string; |
|||
style?: React.CSSProperties; |
|||
} |
|||
|
|||
const NpmIcon: React.FC<IconProps> = (props) => { |
|||
const { className, style } = props; |
|||
return ( |
|||
<svg |
|||
className={className} |
|||
style={style} |
|||
fill="#E53E3E" |
|||
focusable="false" |
|||
height="1em" |
|||
stroke="#E53E3E" |
|||
strokeWidth="0" |
|||
viewBox="0 0 16 16" |
|||
width="1em" |
|||
> |
|||
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" /> |
|||
</svg> |
|||
); |
|||
}; |
|||
|
|||
export default NpmIcon; |
|||
|
|||
@ -1,19 +1,29 @@ |
|||
import React from 'react'; |
|||
|
|||
const PnpmIcon: React.FC = () => ( |
|||
<svg |
|||
aria-hidden="true" |
|||
fill="#F69220" |
|||
focusable="false" |
|||
height="1em" |
|||
role="img" |
|||
stroke="#F69220" |
|||
strokeWidth="0" |
|||
viewBox="0 0 24 24" |
|||
width="1em" |
|||
> |
|||
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" /> |
|||
</svg> |
|||
); |
|||
interface IconProps { |
|||
className?: string; |
|||
style?: React.CSSProperties; |
|||
} |
|||
|
|||
const PnpmIcon: React.FC<IconProps> = (props) => { |
|||
const { className, style } = props; |
|||
return ( |
|||
<svg |
|||
className={className} |
|||
style={style} |
|||
aria-hidden="true" |
|||
fill="#F69220" |
|||
focusable="false" |
|||
height="1em" |
|||
role="img" |
|||
stroke="#F69220" |
|||
strokeWidth="0" |
|||
viewBox="0 0 24 24" |
|||
width="1em" |
|||
> |
|||
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" /> |
|||
</svg> |
|||
); |
|||
}; |
|||
|
|||
export default PnpmIcon; |
|||
|
|||
@ -1,18 +1,28 @@ |
|||
import React from 'react'; |
|||
|
|||
const YarnIcon: React.FC = () => ( |
|||
<svg |
|||
aria-hidden="true" |
|||
fill="#2C8EBB" |
|||
focusable="false" |
|||
height="1em" |
|||
stroke="#2C8EBB" |
|||
strokeWidth="0" |
|||
viewBox="0 0 496 512" |
|||
width="1em" |
|||
> |
|||
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" /> |
|||
</svg> |
|||
); |
|||
interface IconProps { |
|||
className?: string; |
|||
style?: React.CSSProperties; |
|||
} |
|||
|
|||
const YarnIcon: React.FC<IconProps> = (props) => { |
|||
const { className, style } = props; |
|||
return ( |
|||
<svg |
|||
className={className} |
|||
style={style} |
|||
aria-hidden="true" |
|||
fill="#2C8EBB" |
|||
focusable="false" |
|||
height="1em" |
|||
stroke="#2C8EBB" |
|||
strokeWidth="0" |
|||
viewBox="0 0 496 512" |
|||
width="1em" |
|||
> |
|||
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" /> |
|||
</svg> |
|||
); |
|||
}; |
|||
|
|||
export default YarnIcon; |
|||
|
|||
@ -0,0 +1,188 @@ |
|||
import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons'; |
|||
import { css } from '@emotion/react'; |
|||
import { Button, Card, Divider } from 'antd'; |
|||
import React from 'react'; |
|||
import useLocale from '../../../hooks/useLocale'; |
|||
import useSiteToken from '../../../hooks/useSiteToken'; |
|||
|
|||
const ANTD_IMG_URL = |
|||
'https://picx.zhimg.com/v2-3b2bca09c2771e7a82a81562e806be4d.jpg?source=d16d100b'; |
|||
|
|||
const useStyle = () => { |
|||
const { token } = useSiteToken(); |
|||
return { |
|||
card: css` |
|||
width: 100%; |
|||
margin: 40px 0; |
|||
transition: all 0.2s; |
|||
background-color: ${token.colorFillQuaternary}; |
|||
`,
|
|||
bigTitle: css` |
|||
font-size: 16px; |
|||
color: #121212; |
|||
margin-bottom: 24px; |
|||
font-weight: 600; |
|||
`,
|
|||
cardBody: css` |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
`,
|
|||
left: css` |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
img { |
|||
width: 200px; |
|||
margin-right: 24px; |
|||
overflow: hidden; |
|||
border-radius: 8px; |
|||
} |
|||
`,
|
|||
title: css` |
|||
color: #444; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
`,
|
|||
subTitle: css` |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
color: #646464; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
margin-top: 8px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
.logo { |
|||
font-size: 24px; |
|||
&.zhihu-logo { |
|||
color: #056de8; |
|||
} |
|||
&.yuque-logo { |
|||
color: #00b96b; |
|||
} |
|||
} |
|||
.arrowIcon { |
|||
margin: 0 8px; |
|||
color: #8a8f8d; |
|||
font-size: 12px; |
|||
} |
|||
.zl-btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0; |
|||
color: #646464; |
|||
} |
|||
`,
|
|||
btn: css` |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
`,
|
|||
}; |
|||
}; |
|||
|
|||
const locales = { |
|||
cn: { |
|||
bigTitle: '文章被以下专栏收录：', |
|||
zhiHu: '一个 UI 设计体系', |
|||
yuQue: 'Ant Design 官方专栏', |
|||
buttonText: '我有想法，去参与讨论', |
|||
}, |
|||
en: { |
|||
bigTitle: 'Articles are included in the column:', |
|||
zhiHu: 'A UI design system', |
|||
yuQue: 'Ant Design official column', |
|||
buttonText: 'Go to discuss', |
|||
}, |
|||
}; |
|||
|
|||
interface Props { |
|||
zhihuLink?: string; |
|||
yuqueLink?: string; |
|||
} |
|||
|
|||
const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => { |
|||
const [locale] = useLocale(locales); |
|||
const { card, bigTitle, cardBody, left, title, subTitle, btn } = useStyle(); |
|||
if (!zhihuLink && !yuqueLink) { |
|||
return null; |
|||
} |
|||
return ( |
|||
<Card css={card} bordered={false}> |
|||
<h3 css={bigTitle}>{locale.bigTitle}</h3> |
|||
{zhihuLink && ( |
|||
<div css={cardBody}> |
|||
<div css={left}> |
|||
<img src={ANTD_IMG_URL} alt="antd" /> |
|||
<div> |
|||
<p css={title}>Ant Design</p> |
|||
<div css={subTitle}> |
|||
<ZhihuOutlined className="logo zhihu-logo" /> |
|||
<RightOutlined className="arrowIcon" /> |
|||
<Button |
|||
target="_blank" |
|||
href="https://www.zhihu.com/column/c_1564262000561106944" |
|||
className="zl-btn" |
|||
type="link" |
|||
> |
|||
{locale.zhiHu} |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Button |
|||
type="primary" |
|||
css={btn} |
|||
icon={<ZhihuOutlined style={{ fontSize: 15 }} />} |
|||
ghost |
|||
target="_blank" |
|||
href={zhihuLink} |
|||
> |
|||
{locale.buttonText} |
|||
</Button> |
|||
</div> |
|||
)} |
|||
{yuqueLink && ( |
|||
<> |
|||
<Divider /> |
|||
<div css={cardBody}> |
|||
<div css={left}> |
|||
<img src={ANTD_IMG_URL} alt="antd" /> |
|||
<div> |
|||
<p css={title}>Ant Design</p> |
|||
<div css={subTitle}> |
|||
<YuqueOutlined className="logo yuque-logo" /> |
|||
<RightOutlined className="arrowIcon" /> |
|||
<Button |
|||
target="_blank" |
|||
href="https://www.yuque.com/ant-design/ant-design" |
|||
className="zl-btn" |
|||
type="link" |
|||
> |
|||
{locale.yuQue} |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Button |
|||
type="primary" |
|||
css={btn} |
|||
icon={<YuqueOutlined style={{ fontSize: 15 }} />} |
|||
ghost |
|||
target="_blank" |
|||
href={yuqueLink} |
|||
> |
|||
{locale.buttonText} |
|||
</Button> |
|||
</div> |
|||
</> |
|||
)} |
|||
</Card> |
|||
); |
|||
}; |
|||
|
|||
export default ColumnCard; |
|||
@ -0,0 +1,7 @@ |
|||
import type { ValidateMessages } from 'rc-field-form/lib/interface'; |
|||
import { createContext } from 'react'; |
|||
|
|||
// ZombieJ: We export single file here since
|
|||
// ConfigProvider use this which will make loop deps
|
|||
// to import whole `rc-field-form`
|
|||
export default createContext<ValidateMessages | undefined>(undefined); |
|||
@ -0,0 +1,39 @@ |
|||
import React from 'react'; |
|||
import InputNumber from '..'; |
|||
import { render } from '../../../tests/utils'; |
|||
|
|||
describe('addon', () => { |
|||
it('disabled status when prefix is active', () => { |
|||
const { container } = render(<InputNumber prefix="¥" defaultValue={100} disabled controls />); |
|||
expect(container.querySelector('.ant-input-number-affix-wrapper-disabled')).toBeInTheDocument(); |
|||
}); |
|||
|
|||
it('disabled status when addon is active', () => { |
|||
const { container } = render( |
|||
<InputNumber |
|||
prefix="¥" |
|||
addonBefore="Before" |
|||
addonAfter="After" |
|||
defaultValue={100} |
|||
disabled |
|||
controls |
|||
/>, |
|||
); |
|||
expect(container.querySelector('.ant-input-number-wrapper-disabled')).toBeInTheDocument(); |
|||
}); |
|||
|
|||
it('disabled status when prefix and addon is active', () => { |
|||
const { container } = render( |
|||
<InputNumber |
|||
prefix="¥" |
|||
addonBefore="Before" |
|||
addonAfter="After" |
|||
defaultValue={100} |
|||
disabled |
|||
controls |
|||
/>, |
|||
); |
|||
expect(container.querySelector('.ant-input-number-wrapper-disabled')).toBeInTheDocument(); |
|||
expect(container.querySelector('.ant-input-number-affix-wrapper-disabled')).toBeInTheDocument(); |
|||
}); |
|||
}); |
|||
@ -1,7 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
标准的进度条。`type="circle|dashboard"` 时不支持分段颜色。 |
|||
分段展示进度，可以用于细化进度语义。 |
|||
|
|||
## en-US |
|||
|
|||
A standard progress bar. Doesn't support trail color when `type="circle|dashboard"`. |
|||
Show several parts of progress with different status. |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue