-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add section styles v0.6.0 Inc WIP v0.6.1 WIP v0.6.2
- Loading branch information
1 parent
f105db2
commit 6952c65
Showing
22 changed files
with
2,372 additions
and
2,823 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Button } from '../button'; | ||
| import { filterDOMProps } from '@react-aria/utils'; | ||
| import { FocusableRef } from '@react-types/shared'; | ||
| import { Menu } from './Menu'; | ||
| import { MenuTrigger } from './MenuTrigger'; | ||
| import { Icon, MoreHorizontalOutline } from '../icon'; | ||
| import React, { forwardRef, ReactElement } from 'react'; | ||
| import { ActionMenuProps } from '../types'; | ||
|
|
||
| function ActionMenu<T extends object>( | ||
| props: ActionMenuProps<T>, | ||
| ref: FocusableRef<HTMLButtonElement> | ||
| ) { | ||
| const { children, buttonText, icon } = props; | ||
| const buttonProps = filterDOMProps(props, { labelable: true }); | ||
| if (buttonProps['aria-label'] === undefined) { | ||
| buttonProps['aria-label'] = 'actions'; | ||
| } | ||
|
|
||
| return ( | ||
| <MenuTrigger | ||
| isOpen={props.isOpen} | ||
| defaultOpen={props.defaultOpen} | ||
| onOpenChange={props.onOpenChange} | ||
| align={props.align} | ||
| direction={props.direction} | ||
| shouldFlip={props.shouldFlip} | ||
| > | ||
| <Button | ||
| variant="default" | ||
| icon={icon ?? <Icon svg={<MoreHorizontalOutline />} />} | ||
| ref={ref} | ||
| {...buttonProps} | ||
| children={buttonText} | ||
| /> | ||
| <Menu | ||
| children={children} | ||
| items={props.items} | ||
| disabledKeys={props.disabledKeys} | ||
| onAction={props.onAction} | ||
| /> | ||
| </MenuTrigger> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases. | ||
| */ | ||
| const _ActionMenu = forwardRef(ActionMenu) as <T>( | ||
| props: ActionMenuProps<T> & { ref?: FocusableRef<HTMLButtonElement> } | ||
| ) => ReactElement; | ||
| export { _ActionMenu as ActionMenu }; |
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,105 @@ | ||
| import { useDOMRef } from '../utils'; | ||
| import { | ||
| AriaLabelingProps, | ||
| CollectionBase, | ||
| DOMProps, | ||
| DOMRef, | ||
| FocusStrategy, | ||
| MultipleSelection, | ||
| } from '../types'; | ||
| import { MenuContext } from './context'; | ||
| import { MenuItem } from './MenuItem'; | ||
| import { MenuSection } from './MenuSection'; | ||
| import { mergeProps, useSyncRef } from '@react-aria/utils'; | ||
| import React, { Key, ReactElement, useContext } from 'react'; | ||
| import { useMenu } from '@react-aria/menu'; | ||
| import { useTreeState } from '@react-stately/tree'; | ||
| import theme from '../theme'; | ||
| import { css } from '@emotion/core'; | ||
|
|
||
| export interface MenuProps<T> extends CollectionBase<T>, MultipleSelection { | ||
| /** Where the focus should be set. */ | ||
| autoFocus?: boolean | FocusStrategy; | ||
| /** Whether keyboard navigation is circular. */ | ||
| shouldFocusWrap?: boolean; | ||
| /** Handler that is called when an item is selected. */ | ||
| onAction?: (key: Key) => void; | ||
| /** Handler that is called when the menu should close after selecting an item. */ | ||
| onClose?: () => void; | ||
| } | ||
|
|
||
| export interface AriaMenuProps<T> | ||
| extends MenuProps<T>, | ||
| DOMProps, | ||
| AriaLabelingProps {} | ||
|
|
||
| export interface MenuComponentProps<T> extends AriaMenuProps<T> {} | ||
|
|
||
| const menuULCSS = css` | ||
| background-color: ${theme.colors.gray500}; | ||
| border-radius: 4px; | ||
| color: ${theme.textColors.white90}; | ||
| box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); | ||
| outline: none; | ||
| border: 1px solid ${theme.components.dropdown.borderColor}; | ||
| max-height: inherit; | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: ${theme.spacing.padding4}px 0; | ||
| `; | ||
| function Menu<T extends object>( | ||
| props: MenuComponentProps<T>, | ||
| ref: DOMRef<HTMLUListElement> | ||
| ) { | ||
| let contextProps = useContext(MenuContext); | ||
| let completeProps = { | ||
| ...mergeProps(contextProps, props), | ||
| }; | ||
|
|
||
| let domRef = useDOMRef(ref); | ||
| let state = useTreeState(completeProps); | ||
| let { menuProps } = useMenu(completeProps, state, domRef); | ||
| useSyncRef(contextProps, domRef); | ||
|
|
||
| return ( | ||
| <ul {...menuProps} ref={domRef} className={'ac-menu'} css={menuULCSS}> | ||
| {[...state.collection].map(item => { | ||
| if (item.type === 'section') { | ||
| return ( | ||
| <MenuSection | ||
| key={item.key} | ||
| item={item} | ||
| state={state} | ||
| onAction={completeProps.onAction} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| let menuItem = ( | ||
| <MenuItem | ||
| key={item.key} | ||
| item={item} | ||
| state={state} | ||
| onAction={completeProps.onAction} | ||
| /> | ||
| ); | ||
|
|
||
| if (item.wrapper) { | ||
| menuItem = item.wrapper(menuItem); | ||
| } | ||
|
|
||
| return menuItem; | ||
| })} | ||
| </ul> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Menus display a list of actions or options that a user can choose. | ||
| */ | ||
| // forwardRef doesn't support generic parameters, so cast the result to the correct type | ||
| // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref | ||
| const _Menu = React.forwardRef(Menu) as <T>( | ||
| props: MenuComponentProps<T> & { ref?: DOMRef<HTMLUListElement> } | ||
| ) => ReactElement; | ||
| export { _Menu as Menu }; |
Oops, something went wrong.