-
Notifications
You must be signed in to change notification settings - Fork 20
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 #893 from oceanbase/master
[Feature Branch] chore(merge): Merge master branch of v0.4.3 and v0.4.4
- Loading branch information
Showing
54 changed files
with
762 additions
and
329 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
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
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,34 @@ | ||
| import React from 'react'; | ||
| import type { CollapseProps } from '@oceanbase/design'; | ||
| import { Collapse } from '@oceanbase/design'; | ||
|
|
||
| const text = | ||
| 'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.'; | ||
|
|
||
| const items: CollapseProps['items'] = [ | ||
| { | ||
| key: '1', | ||
| label: 'This is panel header 1', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| { | ||
| key: '2', | ||
| label: 'This is panel header 2', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| { | ||
| key: '3', | ||
| label: 'This is panel header 3', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| ]; | ||
|
|
||
| const App: React.FC = () => { | ||
| const onChange = (key: string | string[]) => { | ||
| console.log(key); | ||
| }; | ||
|
|
||
| return <Collapse accordion items={items} onChange={onChange} />; | ||
| }; | ||
|
|
||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import type { CollapseProps } from '@oceanbase/design'; | ||
| import { Collapse } from '@oceanbase/design'; | ||
| import { SettingOutlined } from '@oceanbase/icons'; | ||
|
|
||
| const text = | ||
| 'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.'; | ||
|
|
||
| const genExtra = () => ( | ||
| <SettingOutlined | ||
| onClick={e => { | ||
| // If you don't want click extra trigger collapse, you can prevent this: | ||
| e.stopPropagation(); | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| const items: CollapseProps['items'] = [ | ||
| { | ||
| key: '1', | ||
| label: 'This is panel header 1', | ||
| children: <p>{text}</p>, | ||
| extra: genExtra(), | ||
| }, | ||
| { | ||
| key: '2', | ||
| label: 'This is panel header 2', | ||
| children: <p>{text}</p>, | ||
| extra: genExtra(), | ||
| }, | ||
| { | ||
| key: '3', | ||
| label: 'This is panel header 3', | ||
| children: <p>{text}</p>, | ||
| extra: genExtra(), | ||
| }, | ||
| ]; | ||
|
|
||
| const App: React.FC = () => { | ||
| const onChange = (key: string | string[]) => { | ||
| console.log(key); | ||
| }; | ||
|
|
||
| return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />; | ||
| }; | ||
|
|
||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import type { CollapseProps } from '@oceanbase/design'; | ||
| import { Collapse } from '@oceanbase/design'; | ||
|
|
||
| const text = | ||
| 'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.'; | ||
|
|
||
| const items: CollapseProps['items'] = [ | ||
| { | ||
| key: '1', | ||
| label: 'This is panel header 1', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| { | ||
| key: '2', | ||
| label: 'This is panel header 2', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| { | ||
| key: '3', | ||
| label: 'This is panel header 3', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| ]; | ||
|
|
||
| const App: React.FC = () => { | ||
| const onChange = (key: string | string[]) => { | ||
| console.log(key); | ||
| }; | ||
|
|
||
| return <Collapse bordered={false} items={items} onChange={onChange} />; | ||
| }; | ||
|
|
||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import type { CSSProperties } from 'react'; | ||
| import React from 'react'; | ||
| import { RightOutlined } from '@oceanbase/icons'; | ||
| import type { CollapseProps } from '@oceanbase/design'; | ||
| import { Collapse, theme } from '@oceanbase/design'; | ||
|
|
||
| const text = | ||
| 'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.'; | ||
|
|
||
| const getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = panelStyle => [ | ||
| { | ||
| key: '1', | ||
| label: 'This is panel header 1', | ||
| children: <p>{text}</p>, | ||
| style: panelStyle, | ||
| }, | ||
| { | ||
| key: '2', | ||
| label: 'This is panel header 2', | ||
| children: <p>{text}</p>, | ||
| style: panelStyle, | ||
| }, | ||
| { | ||
| key: '3', | ||
| label: 'This is panel header 3', | ||
| children: <p>{text}</p>, | ||
| style: panelStyle, | ||
| }, | ||
| ]; | ||
|
|
||
| const App: React.FC = () => { | ||
| const { token } = theme.useToken(); | ||
|
|
||
| const panelStyle: React.CSSProperties = { | ||
| marginBottom: 16, | ||
| background: token.colorFillAlter, | ||
| borderRadius: token.borderRadiusLG, | ||
| border: `1px solid ${token.colorBorderSecondary}`, | ||
| }; | ||
|
|
||
| return ( | ||
| <Collapse | ||
| bordered={false} | ||
| expandIcon={({ isActive }) => <RightOutlined rotate={isActive ? 90 : 0} />} | ||
| style={{ background: token.colorBgContainer }} | ||
| items={getItems(panelStyle)} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; |
34 changes: 34 additions & 0 deletions
34
packages/design/src/collapse/demo/expand-icon-position.tsx
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,34 @@ | ||
| import React from 'react'; | ||
| import type { CollapseProps } from '@oceanbase/design'; | ||
| import { Collapse } from '@oceanbase/design'; | ||
|
|
||
| const text = | ||
| 'This is long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long panel content.'; | ||
|
|
||
| const items: CollapseProps['items'] = [ | ||
| { | ||
| key: '1', | ||
| label: 'This is panel header 1', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| { | ||
| key: '2', | ||
| label: 'This is panel header 2', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| { | ||
| key: '3', | ||
| label: 'This is panel header 3', | ||
| children: <p>{text}</p>, | ||
| }, | ||
| ]; | ||
|
|
||
| const App: React.FC = () => { | ||
| const onChange = (key: string | string[]) => { | ||
| console.log(key); | ||
| }; | ||
|
|
||
| return <Collapse expandIconPosition="end" items={items} onChange={onChange} />; | ||
| }; | ||
|
|
||
| export default App; |
Oops, something went wrong.