Compare commits
7 Commits
| Author | SHA1 | Date |
|---|---|---|
github-actions[bot]
|
b90aac7d28 | 1 year ago |
MuxinFeng
|
084f234bc9 | 1 year ago |
红果汁
|
ecb36840bf | 1 year ago |
|
github-actions[bot]
|
b0d69a6878 | 1 year ago |
|
红果汁
|
c377457104 | 1 year ago |
|
github-actions[bot]
|
493b66b641 | 1 year ago |
二货爱吃白萝卜
|
b072d3a02c | 1 year ago |
58 changed files with 2159 additions and 653 deletions
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
禁用颜色透明度。 |
|||
|
|||
## en-US |
|||
|
|||
Disabled color alpha. |
|||
@ -0,0 +1,6 @@ |
|||
import { ColorPicker } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const Demo = () => <ColorPicker disabledAlpha />; |
|||
|
|||
export default Demo; |
|||
@ -1,16 +1,35 @@ |
|||
import React from 'react'; |
|||
import { Descriptions } from 'antd'; |
|||
import type { DescriptionsProps } from 'antd/es/descriptions'; |
|||
import React from 'react'; |
|||
|
|||
const items: DescriptionsProps['items'] = [ |
|||
{ |
|||
key: '1', |
|||
label: 'UserName', |
|||
children: 'Zhou Maomao', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
label: 'Telephone', |
|||
children: '1810000000', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
label: 'Live', |
|||
children: 'Hangzhou, Zhejiang', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
label: 'Remark', |
|||
children: 'empty', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
label: 'Address', |
|||
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China', |
|||
}, |
|||
]; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Descriptions title="User Info"> |
|||
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item> |
|||
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item> |
|||
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item> |
|||
<Descriptions.Item label="Remark">empty</Descriptions.Item> |
|||
<Descriptions.Item label="Address"> |
|||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
); |
|||
const App: React.FC = () => <Descriptions title="User Info" items={items} />; |
|||
|
|||
export default App; |
|||
|
|||
@ -1,36 +1,77 @@ |
|||
import React from 'react'; |
|||
import { Badge, Descriptions } from 'antd'; |
|||
import type { DescriptionsProps } from 'antd/es/descriptions'; |
|||
import React from 'react'; |
|||
|
|||
const items: DescriptionsProps['items'] = [ |
|||
{ |
|||
key: '1', |
|||
label: 'Product', |
|||
children: 'Cloud Database', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
label: 'Billing Mode', |
|||
children: 'Prepaid', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
label: 'Automatic Renewal', |
|||
children: 'YES', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
label: 'Order time', |
|||
children: '2018-04-24 18:00:00', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
label: 'Usage Time', |
|||
children: '2019-04-24 18:00:00', |
|||
span: 2, |
|||
}, |
|||
{ |
|||
key: '6', |
|||
label: 'Status', |
|||
children: <Badge status="processing" text="Running" />, |
|||
span: 3, |
|||
}, |
|||
{ |
|||
key: '7', |
|||
label: 'Negotiated Amount', |
|||
children: '$80.00', |
|||
}, |
|||
{ |
|||
key: '8', |
|||
label: 'Discount', |
|||
children: '$20.00', |
|||
}, |
|||
{ |
|||
key: '9', |
|||
label: 'Official Receipts', |
|||
children: '$60.00', |
|||
}, |
|||
{ |
|||
key: '10', |
|||
label: 'Config Info', |
|||
children: ( |
|||
<> |
|||
Data disk type: MongoDB |
|||
<br /> |
|||
Database version: 3.4 |
|||
<br /> |
|||
Package: dds.mongo.mid |
|||
<br /> |
|||
Storage space: 10 GB |
|||
<br /> |
|||
Replication factor: 3 |
|||
<br /> |
|||
Region: East China 1 |
|||
<br /> |
|||
</> |
|||
), |
|||
}, |
|||
]; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Descriptions title="User Info" bordered> |
|||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item> |
|||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item> |
|||
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item> |
|||
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item> |
|||
<Descriptions.Item label="Usage Time" span={2}> |
|||
2019-04-24 18:00:00 |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="Status" span={3}> |
|||
<Badge status="processing" text="Running" /> |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item> |
|||
<Descriptions.Item label="Discount">$20.00</Descriptions.Item> |
|||
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item> |
|||
<Descriptions.Item label="Config Info"> |
|||
Data disk type: MongoDB |
|||
<br /> |
|||
Database version: 3.4 |
|||
<br /> |
|||
Package: dds.mongo.mid |
|||
<br /> |
|||
Storage space: 10 GB |
|||
<br /> |
|||
Replication factor: 3 |
|||
<br /> |
|||
Region: East China 1 |
|||
<br /> |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
); |
|||
const App: React.FC = () => <Descriptions title="User Info" bordered items={items} />; |
|||
|
|||
export default App; |
|||
|
|||
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
JSX 风格演示。 |
|||
|
|||
## en-US |
|||
|
|||
JSX Style Demo. |
|||
@ -0,0 +1,16 @@ |
|||
import { Descriptions } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Descriptions title="User Info"> |
|||
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item> |
|||
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item> |
|||
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item> |
|||
<Descriptions.Item label="Remark">empty</Descriptions.Item> |
|||
<Descriptions.Item label="Address"> |
|||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
); |
|||
|
|||
export default App; |
|||
@ -1,36 +1,79 @@ |
|||
import React from 'react'; |
|||
import { Badge, Descriptions } from 'antd'; |
|||
import type { DescriptionsProps } from 'antd/es/descriptions'; |
|||
import React from 'react'; |
|||
|
|||
const items: DescriptionsProps['items'] = [ |
|||
{ |
|||
key: '1', |
|||
label: 'Product', |
|||
children: 'Cloud Database', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
label: 'Billing Mode', |
|||
children: 'Prepaid', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
label: 'Automatic Renewal', |
|||
children: 'YES', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
label: 'Order time', |
|||
children: '2018-04-24 18:00:00', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
label: 'Usage Time', |
|||
span: 2, |
|||
children: '2019-04-24 18:00:00', |
|||
}, |
|||
{ |
|||
key: '6', |
|||
label: 'Status', |
|||
span: 3, |
|||
children: <Badge status="processing" text="Running" />, |
|||
}, |
|||
{ |
|||
key: '7', |
|||
label: 'Negotiated Amount', |
|||
children: '$80.00', |
|||
}, |
|||
{ |
|||
key: '8', |
|||
label: 'Discount', |
|||
children: '$20.00', |
|||
}, |
|||
{ |
|||
key: '9', |
|||
label: 'Official Receipts', |
|||
children: '$60.00', |
|||
}, |
|||
{ |
|||
key: '10', |
|||
label: 'Config Info', |
|||
children: ( |
|||
<> |
|||
Data disk type: MongoDB |
|||
<br /> |
|||
Database version: 3.4 |
|||
<br /> |
|||
Package: dds.mongo.mid |
|||
<br /> |
|||
Storage space: 10 GB |
|||
<br /> |
|||
Replication factor: 3 |
|||
<br /> |
|||
Region: East China 1 |
|||
<br /> |
|||
</> |
|||
), |
|||
}, |
|||
]; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Descriptions title="User Info" layout="vertical" bordered> |
|||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item> |
|||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item> |
|||
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item> |
|||
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item> |
|||
<Descriptions.Item label="Usage Time" span={2}> |
|||
2019-04-24 18:00:00 |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="Status" span={3}> |
|||
<Badge status="processing" text="Running" /> |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item> |
|||
<Descriptions.Item label="Discount">$20.00</Descriptions.Item> |
|||
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item> |
|||
<Descriptions.Item label="Config Info"> |
|||
Data disk type: MongoDB |
|||
<br /> |
|||
Database version: 3.4 |
|||
<br /> |
|||
Package: dds.mongo.mid |
|||
<br /> |
|||
Storage space: 10 GB |
|||
<br /> |
|||
Replication factor: 3 |
|||
<br /> |
|||
Region: East China 1 |
|||
<br /> |
|||
</Descriptions.Item> |
|||
</Descriptions> |
|||
<Descriptions title="User Info" layout="vertical" bordered items={items} /> |
|||
); |
|||
|
|||
export default App; |
|||
|
|||
@ -1,16 +1,36 @@ |
|||
import React from 'react'; |
|||
import { Descriptions } from 'antd'; |
|||
import type { DescriptionsProps } from 'antd/es/descriptions'; |
|||
import React from 'react'; |
|||
|
|||
const items: DescriptionsProps['items'] = [ |
|||
{ |
|||
key: '1', |
|||
label: 'UserName', |
|||
children: 'Zhou Maomao', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
label: 'Telephone', |
|||
children: '1810000000', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
label: 'Live', |
|||
children: 'Hangzhou, Zhejiang', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
label: 'Address', |
|||
span: 2, |
|||
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
label: 'Remark', |
|||
children: 'empty', |
|||
}, |
|||
]; |
|||
|
|||
const App: React.FC = () => ( |
|||
<Descriptions title="User Info" layout="vertical"> |
|||
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item> |
|||
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item> |
|||
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item> |
|||
<Descriptions.Item label="Address" span={2}> |
|||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China |
|||
</Descriptions.Item> |
|||
<Descriptions.Item label="Remark">empty</Descriptions.Item> |
|||
</Descriptions> |
|||
); |
|||
const App: React.FC = () => <Descriptions title="User Info" layout="vertical" items={items} />; |
|||
|
|||
export default App; |
|||
|
|||
@ -0,0 +1,80 @@ |
|||
import toArray from 'rc-util/lib/Children/toArray'; |
|||
import type React from 'react'; |
|||
import { useMemo } from 'react'; |
|||
import type { DescriptionsItemType } from '..'; |
|||
import warning from '../../_util/warning'; |
|||
|
|||
function getFilledItem( |
|||
rowItem: DescriptionsItemType, |
|||
rowRestCol: number, |
|||
span?: number, |
|||
): DescriptionsItemType { |
|||
let clone = rowItem; |
|||
|
|||
if (span === undefined || span > rowRestCol) { |
|||
clone = { |
|||
...rowItem, |
|||
span: rowRestCol, |
|||
}; |
|||
warning( |
|||
span === undefined, |
|||
'Descriptions', |
|||
'Sum of column `span` in a line not match `column` of Descriptions.', |
|||
); |
|||
} |
|||
return clone; |
|||
} |
|||
|
|||
// Convert children into items
|
|||
const transChildren2Items = (childNodes?: React.ReactNode) => |
|||
toArray(childNodes).map((node) => node?.props); |
|||
|
|||
// Calculate the sum of span in a row
|
|||
function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) { |
|||
const rows: DescriptionsItemType[][] = []; |
|||
let tmpRow: DescriptionsItemType[] = []; |
|||
let rowRestCol = mergedColumn; |
|||
|
|||
rowItems |
|||
.filter((n) => n) |
|||
.forEach((rowItem, index) => { |
|||
const span = rowItem?.span; |
|||
const mergedSpan = span || 1; |
|||
|
|||
// Additional handle last one
|
|||
if (index === rowItems.length - 1) { |
|||
tmpRow.push(getFilledItem(rowItem, rowRestCol, span)); |
|||
rows.push(tmpRow); |
|||
return; |
|||
} |
|||
|
|||
if (mergedSpan < rowRestCol) { |
|||
rowRestCol -= mergedSpan; |
|||
tmpRow.push(rowItem); |
|||
} else { |
|||
tmpRow.push(getFilledItem(rowItem, rowRestCol, mergedSpan)); |
|||
rows.push(tmpRow); |
|||
rowRestCol = mergedColumn; |
|||
tmpRow = []; |
|||
} |
|||
}); |
|||
|
|||
return rows; |
|||
} |
|||
|
|||
const useRow = ( |
|||
mergedColumn: number, |
|||
items?: DescriptionsItemType[], |
|||
children?: React.ReactNode, |
|||
) => { |
|||
const rows = useMemo(() => { |
|||
if (Array.isArray(items)) { |
|||
return getCalcRows(items, mergedColumn); |
|||
} |
|||
return getCalcRows(transChildren2Items(children), mergedColumn); |
|||
}, [items, children, mergedColumn]); |
|||
|
|||
return rows; |
|||
}; |
|||
|
|||
export default useRow; |
|||
@ -1,7 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
通过 `Modal.useModal` 创建支持读取 context 的 `contextHolder`。 |
|||
通过 `Modal.useModal` 创建支持读取 context 的 `contextHolder`。其中仅有 hooks 方法支持 Promise `await` 操作。 |
|||
|
|||
## en-US |
|||
|
|||
Use `Modal.useModal` to get `contextHolder` with context accessible issue. |
|||
Use `Modal.useModal` to get `contextHolder` with context accessible issue. Only hooks method support Promise `await` operation. |
|||
|
|||
@ -1,9 +1,11 @@ |
|||
import type { ReactNode } from 'react'; |
|||
|
|||
/** |
|||
* Since Select, TreeSelect, Cascader is same Select like component. |
|||
* We just use same hook to handle this logic. |
|||
* |
|||
* If `showArrow` not configured, always show it. |
|||
* If `suffixIcon` is not equal to `null`, always show it. |
|||
*/ |
|||
export default function useShowArrow(showArrow?: boolean) { |
|||
return showArrow ?? true; |
|||
export default function useShowArrow(suffixIcon?: ReactNode, showArrow?: boolean) { |
|||
return showArrow !== undefined ? showArrow : suffixIcon !== null; |
|||
} |
|||
|
|||
Loading…
Reference in new issue