-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9f35f67
commit b37084a
Showing
5 changed files
with
100 additions
and
116 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 |
|---|---|---|
| @@ -1,88 +1,67 @@ | ||
| /** @jsx jsx */ | ||
| import { FC, useMemo } from 'react'; | ||
| import { transparentize } from 'polished'; | ||
| import { Theme, Box, Flex, Button, jsx } from 'theme-ui'; | ||
| import { Box, Button, jsx } from 'theme-ui'; | ||
| import { getSortedActions, ActionItems } from './utils'; | ||
| import { useTheme } from '../ThemeContext'; | ||
| import { Link } from '../Link'; | ||
|
|
||
| export interface ActionBarProps { | ||
| /** | ||
| * collection of action items | ||
| */ | ||
| actions?: ActionItems; | ||
| } | ||
|
|
||
| const ActionColors = ({ | ||
| theme, | ||
| disabled, | ||
| }: { | ||
| theme: Theme; | ||
| disabled: boolean | undefined; | ||
| }) => ({ | ||
| backgroundColor: theme.colors?.['action'], | ||
| color: disabled ? '#ddd' : 'background', | ||
| //safari fix: | ||
| WebkitTextFillColor: 'initial', | ||
| cursor: disabled ? 'not-allowed' : undefined, | ||
| px: 2, | ||
| py: 1, | ||
| lineHeight: 1, | ||
| borderRadius: 1, | ||
| display: 'inline-block', | ||
| boxShadow: `${transparentize( | ||
| 0.9, | ||
| theme.colors?.text as string, | ||
| )} 0 1px 3px 1px, ${transparentize( | ||
| 0.35, | ||
| theme.colors?.text as string, | ||
| )} 0 0 0 1px`, | ||
| border: `1px solid ${theme.colors?.['action'] as string}`, | ||
| }); | ||
| /** | ||
| * two possible layouts from the theme | ||
| */ | ||
| themeKey?: 'actionbar' | 'toolbar'; | ||
| } | ||
|
|
||
| /** | ||
| * a strip of actions to be attached to a container | ||
| * the action items contain the labels and click event handler | ||
| * actions can accept an order prop, and can also be superimposed | ||
| * | ||
| */ | ||
| export const ActionBar: FC<ActionBarProps> = ({ actions = [] }) => { | ||
| const theme = useTheme(); | ||
| export const ActionBar: FC<ActionBarProps> = ({ | ||
| actions = [], | ||
| themeKey = 'actionbar', | ||
| }) => { | ||
| const items = useMemo(() => { | ||
| const sortedItems = getSortedActions(actions); | ||
| return sortedItems.map( | ||
| ({ title, onClick, disabled, 'aria-label': ariaLabel, group }, index) => { | ||
| ({ title, onClick, 'aria-label': ariaLabel, group, href }, index) => { | ||
| const nextGroup = | ||
| index < sortedItems.length - 1 ? sortedItems[index + 1].group : group; | ||
| return ( | ||
| <Box | ||
| key={`${typeof title === 'string' ? title : 'item'}_${index}`} | ||
| variant="actionbar.item" | ||
| variant={`${themeKey}.item`} | ||
| sx={{ | ||
| mr: index === 0 ? 1 : 0, | ||
| ml: nextGroup !== group || group === undefined ? 2 : 1, | ||
| a: ActionColors({ theme, disabled }), | ||
| button: ActionColors({ theme, disabled }), | ||
| }} | ||
| > | ||
| {typeof title === 'string' ? ( | ||
| <Button | ||
| onClick={onClick} | ||
| disabled={disabled} | ||
| aria-label={ariaLabel} | ||
| > | ||
| {title} | ||
| </Button> | ||
| href ? ( | ||
| <Link href={href} aria-label={ariaLabel}> | ||
| {title} | ||
| </Link> | ||
| ) : ( | ||
| <Button onClick={onClick} aria-label={ariaLabel}> | ||
| {title} | ||
| </Button> | ||
| ) | ||
| ) : ( | ||
| title | ||
| )} | ||
| </Box> | ||
| ); | ||
| }, | ||
| ); | ||
| }, [theme, actions]); | ||
| }, [actions, themeKey]); | ||
| return ( | ||
| <Box variant="actionbar.container"> | ||
| <Flex variant="actionbar.inner">{items}</Flex> | ||
| <Box variant={`${themeKey}.container`}> | ||
| <Box variant={`${themeKey}.inner`}>{items}</Box> | ||
| </Box> | ||
| ); | ||
| }; |
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