-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #923 from oceanbase/dengfuping-dev
improve(design): Table padding when ProCard bodyStyle.padding is 0
- Loading branch information
Showing
12 changed files
with
326 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Form, Switch, Table, theme } from '@oceanbase/design'; | ||
| import { ProCard } from '@oceanbase/ui'; | ||
|
|
||
| const App: React.FC = () => { | ||
| const { token } = theme.useToken(); | ||
|
|
||
| const [hasBorder, setHasBorder] = useState(true); | ||
| const [hasTitle, setHasTitle] = useState(true); | ||
| const [hasPadding, setHasPadding] = useState(false); | ||
| const [expandable, setExpandable] = useState(true); | ||
| const [selectable, setSelectable] = useState(true); | ||
| const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); | ||
|
|
||
| const columns = [ | ||
| { | ||
| title: '姓名', | ||
| dataIndex: 'name', | ||
| key: 'name', | ||
| }, | ||
| { | ||
| title: '年龄', | ||
| dataIndex: 'age', | ||
| key: 'age', | ||
| }, | ||
| { | ||
| title: '住址', | ||
| dataIndex: 'address', | ||
| key: 'address', | ||
| }, | ||
| ]; | ||
|
|
||
| const dataSource = []; | ||
| for (let i = 1; i < 100; i++) { | ||
| dataSource.push({ | ||
| key: i, | ||
| name: '胡彦斌' + i, | ||
| age: 32, | ||
| address: `西湖区湖底公园${i}号`, | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| style={ | ||
| hasBorder | ||
| ? {} | ||
| : { | ||
| backgroundColor: token.colorFillContent, | ||
| padding: '40px 24px', | ||
| margin: '-40px -24px', | ||
| } | ||
| } | ||
| > | ||
| <Form layout="inline"> | ||
| <Form.Item label="Card bordered" required={true}> | ||
| <Switch | ||
| size="small" | ||
| value={hasBorder} | ||
| onChange={value => { | ||
| setHasBorder(value); | ||
| }} | ||
| /> | ||
| </Form.Item> | ||
| <Form.Item label="Card title" required={true}> | ||
| <Switch | ||
| size="small" | ||
| value={hasTitle} | ||
| onChange={value => { | ||
| setHasTitle(value); | ||
| }} | ||
| /> | ||
| </Form.Item> | ||
| <Form.Item label="Card body padding" required={true}> | ||
| <Switch | ||
| size="small" | ||
| value={hasPadding} | ||
| onChange={value => { | ||
| setHasPadding(value); | ||
| }} | ||
| /> | ||
| </Form.Item> | ||
| </Form> | ||
| <Form layout="inline" style={{ marginBottom: 16 }}> | ||
| <Form.Item label="Table expandable" required={true}> | ||
| <Switch | ||
| size="small" | ||
| value={expandable} | ||
| onChange={value => { | ||
| setExpandable(value); | ||
| }} | ||
| /> | ||
| </Form.Item> | ||
| <Form.Item label="Table selectable" required={true}> | ||
| <Switch | ||
| size="small" | ||
| value={selectable} | ||
| onChange={value => { | ||
| setSelectable(value); | ||
| }} | ||
| /> | ||
| </Form.Item> | ||
| </Form> | ||
| <ProCard | ||
| bordered={hasBorder} | ||
| title={hasTitle ? 'Title' : ''} | ||
| bodyStyle={hasPadding ? { padding: 24 } : { padding: 0 }} | ||
| > | ||
| <Table | ||
| columns={columns} | ||
| dataSource={dataSource} | ||
| rowKey={record => record.key} | ||
| expandable={ | ||
| expandable | ||
| ? { | ||
| expandedRowRender: () => <div>This is expanded content</div>, | ||
| } | ||
| : undefined | ||
| } | ||
| rowSelection={ | ||
| selectable | ||
| ? { | ||
| selectedRowKeys: selectedRowKeys, | ||
| onChange: (keys: React.Key[]) => { | ||
| setSelectedRowKeys(keys); | ||
| }, | ||
| } | ||
| : undefined | ||
| } | ||
| pagination={{ | ||
| pageSize: 5, | ||
| }} | ||
| /> | ||
| </ProCard> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Form, Switch } from '@oceanbase/design'; | ||
| import { ProCard } from '@oceanbase/ui'; | ||
|
|
||
| export default () => { | ||
| const [hasPadding, setHasPadding] = useState(true); | ||
| const bodyStyle: React.CSSProperties = hasPadding ? {} : { padding: 0 }; | ||
| return ( | ||
| <> | ||
| <Form layout="inline" style={{ marginBottom: 16 }}> | ||
| <Form.Item label="ProCard has padding" required={true}> | ||
| <Switch | ||
| size="small" | ||
| value={hasPadding} | ||
| onChange={value => { | ||
| setHasPadding(value); | ||
| }} | ||
| /> | ||
| </Form.Item> | ||
| </Form> | ||
| <ProCard | ||
| title="默认尺寸" | ||
| bordered | ||
| extra="extra" | ||
| tooltip="这是提示" | ||
| style={{ width: 300 }} | ||
| bodyStyle={bodyStyle} | ||
| > | ||
| <div>Card content</div> | ||
| <div>Card content</div> | ||
| <div>Card content</div> | ||
| </ProCard> | ||
| <ProCard | ||
| title="带卡片阴影" | ||
| extra="extra" | ||
| tooltip="这是提示" | ||
| style={{ width: 300, marginBlockStart: 24 }} | ||
| bodyStyle={bodyStyle} | ||
| boxShadow | ||
| > | ||
| <div>Card content</div> | ||
| <div>Card content</div> | ||
| <div>Card content</div> | ||
| </ProCard> | ||
| <ProCard | ||
| title="小尺寸卡片" | ||
| extra="extra" | ||
| tooltip="这是提示" | ||
| style={{ width: 300, marginBlockStart: 24 }} | ||
| bodyStyle={bodyStyle} | ||
| size="small" | ||
| > | ||
| <div>Card content</div> | ||
| <div>Card content</div> | ||
| <div>Card content</div> | ||
| </ProCard> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| title: ProCard 高级卡片 | ||
| nav: | ||
| title: 业务组件 | ||
| path: /biz-components | ||
| --- | ||
|
|
||
| - 🔥 完全继承 pro-components [ProCard](https://procomponents.ant.design/components/pro-card) 的能力和 API，可无缝切换。 | ||
| - 💄 定制主题和样式，符合 OceanBase Design 设计规范。 | ||
|
|
||
| ## 代码演示 | ||
|
|
||
| <!-- prettier-ignore --> | ||
| <code src="./demo/basic.tsx" title="基本"></code> | ||
|
|
||
| ## API | ||
|
|
||
| - 详见 pro-components ProCard 文档: https://procomponents.ant.design/components/pro-card |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React, { useContext } from 'react'; | ||
| import { ProCard as AntProCard } from '@ant-design/pro-components'; | ||
| import type { ProCardProps } from '@ant-design/pro-components'; | ||
| import { ConfigProvider } from '@oceanbase/design'; | ||
| import classNames from 'classnames'; | ||
| import useStyle from './style'; | ||
|
|
||
| export { ProCardProps }; | ||
|
|
||
| // @ts-ignore | ||
| const ProCard: typeof AntProCard = ({ | ||
| bodyStyle, | ||
| prefixCls: customizePrefixCls, | ||
| className, | ||
| ...restProps | ||
| }) => { | ||
| const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); | ||
|
|
||
| const prefixCls = getPrefixCls('pro-card', customizePrefixCls); | ||
| const { wrapSSR } = useStyle(prefixCls); | ||
|
|
||
| const zeroPaddingList = [0, '0', '0px']; | ||
| // ProCard body has no padding | ||
| const noBodyPadding = zeroPaddingList.includes(bodyStyle?.padding as string | number); | ||
|
|
||
| const proCardCls = classNames( | ||
| { | ||
| [`${prefixCls}-no-body-padding`]: noBodyPadding, | ||
| }, | ||
| className | ||
| ); | ||
|
|
||
| return wrapSSR( | ||
| <AntProCard | ||
| prefixCls={customizePrefixCls} | ||
| bodyStyle={bodyStyle} | ||
| className={proCardCls} | ||
| {...restProps} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| if (process.env.NODE_ENV !== 'production') { | ||
| ProCard.displayName = AntProCard.displayName; | ||
| } | ||
|
|
||
| ProCard.isProCard = AntProCard.isProCard; | ||
| ProCard.Divider = AntProCard.Divider; | ||
| ProCard.TabPane = AntProCard.TabPane; | ||
| ProCard.Group = AntProCard.Group; | ||
|
|
||
| export default ProCard; |
Oops, something went wrong.