-
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.
feat(ui): Action support indirect nesting children
- Loading branch information
1 parent
bec040e
commit ad9bfe7
Showing
6 changed files
with
178 additions
and
7 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Action } from '@oceanbase/ui'; | ||
| import { Drawer, Space } from '@oceanbase/design'; | ||
|
|
||
| const ActionButton4 = () => { | ||
| const [open, setOpen] = useState(false); | ||
| return ( | ||
| <> | ||
| <Action.Button | ||
| onClick={() => { | ||
| setOpen(true); | ||
| }} | ||
| > | ||
| action4 | ||
| </Action.Button> | ||
| <Drawer | ||
| open={open} | ||
| title="Drawer Title" | ||
| onOk={() => { | ||
| setOpen(false); | ||
| }} | ||
| onCancel={() => { | ||
| setOpen(false); | ||
| }} | ||
| > | ||
| Drawer Content | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ActionButton5 = () => <Action.Button disabled>action5</Action.Button>; | ||
|
|
||
| const ActionLink4 = () => { | ||
| const [open, setOpen] = useState(false); | ||
| return ( | ||
| <> | ||
| <Action.Link | ||
| onClick={() => { | ||
| setOpen(true); | ||
| }} | ||
| > | ||
| action4 | ||
| </Action.Link> | ||
| <Drawer | ||
| open={open} | ||
| title="Drawer Title" | ||
| onOk={() => { | ||
| setOpen(false); | ||
| }} | ||
| onCancel={() => { | ||
| setOpen(false); | ||
| }} | ||
| > | ||
| Drawer Content | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ActionLink5 = () => <Action.Link disabled>action5</Action.Link>; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <Space direction="vertical"> | ||
| <Action.Group> | ||
| <Action.Button>action1</Action.Button> | ||
| <Action.Button disabled tooltip={'禁用展示tooltip'}> | ||
| 禁用提示 | ||
| </Action.Button> | ||
| <Action.Button | ||
| onClick={() => { | ||
| console.log('hello~~'); | ||
| }} | ||
| > | ||
| action3 | ||
| </Action.Button> | ||
| <ActionButton4 /> | ||
| <ActionButton5 /> | ||
| </Action.Group> | ||
| <Action.Group> | ||
| <Action.Link>action1</Action.Link> | ||
| <Action.Link disabled tooltip={'禁用展示tooltip'}> | ||
| 禁用提示 | ||
| </Action.Link> | ||
| <Action.Link | ||
| onClick={() => { | ||
| console.log('hello~~'); | ||
| }} | ||
| > | ||
| action3 | ||
| </Action.Link> | ||
| <ActionLink4 /> | ||
| <ActionLink5 /> | ||
| </Action.Group> | ||
| </Space> | ||
| ); | ||
| }; |
File renamed without changes.
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,54 @@ | ||
| import type { CSSObject } from '@ant-design/cssinjs'; | ||
| import type { GenerateStyle } from '@oceanbase/design/es/theme'; | ||
| import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; | ||
| import type { OBToken } from '../../_util/genComponentStyleHook'; | ||
|
|
||
| export const genActionStyle: GenerateStyle<OBToken> = (token: OBToken): CSSObject => { | ||
| const { componentCls, antCls } = token; | ||
| const paddingVertical = (token.controlHeight - token.fontSize * token.lineHeight) / 2; | ||
| const paddingHorizontal = token.paddingSM; | ||
| const padding = `${paddingVertical}px ${paddingHorizontal}px`; | ||
| const margin = `-${paddingVertical}px -${paddingHorizontal}px`; | ||
| return { | ||
| [`${componentCls}-more-menu`]: { | ||
| background: 'red', | ||
| [`${antCls}-dropdown-menu-item`]: { | ||
| [`${antCls}-typography`]: { | ||
| display: 'block', | ||
| margin, | ||
| padding: `${padding} !important`, | ||
| [`&:not(${antCls}-typography-disabled)`]: { | ||
| color: token.colorText, | ||
| }, | ||
| }, | ||
| [`${antCls}-btn`]: { | ||
| padding, | ||
| margin, | ||
| border: 'none', | ||
| display: 'block', | ||
| width: `calc(100% + ${paddingHorizontal * 2}px)`, | ||
| textAlign: 'left', | ||
| height: 'inherit', | ||
| background: 'transparent', | ||
| [`&:not(:disabled):not(${antCls}-btn-disabled)`]: { | ||
| color: token.colorText, | ||
| [`&:hover`]: { | ||
| background: 'transparent', | ||
| }, | ||
| }, | ||
| // remove button click animation | ||
| [`${antCls}-wave`]: { | ||
| display: 'none', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| }; | ||
|
|
||
| export default (prefixCls: string) => { | ||
| const useStyle = genComponentStyleHook('Action', token => { | ||
| return [genActionStyle(token as OBToken)]; | ||
| }); | ||
| return useStyle(prefixCls); | ||
| }; |