UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

28 lines (27 loc) 1.32 kB
import * as React from 'react'; import { commonColors, colors, space } from '@workday/canvas-kit-react/tokens'; import { createSubcomponent, getTheme, styled, } from '@workday/canvas-kit-react/common'; import { Flex } from '@workday/canvas-kit-react/layout'; import { useOverflowListMeasure, useListRenderItems } from '@workday/canvas-kit-react/collection'; import { useActionBarModel } from './useActionBarModel'; const ResponsiveList = styled(Flex)(({ theme }) => { const { canvas: canvasTheme } = getTheme(theme); return { [canvasTheme.breakpoints.down('s')]: { padding: space.s, '> *': { flex: 1, }, }, }; }); export const useActionBarList = useOverflowListMeasure; export const ActionBarList = createSubcomponent('div')({ displayName: 'ActionBar.List', modelHook: useActionBarModel, elemPropsHook: useActionBarList, })(({ children, overflowButton, ...elemProps }, Element, model) => { return (React.createElement(ResponsiveList, { as: Element, gap: "s", depth: 1, background: commonColors.background, borderTop: `solid 1px ${colors.soap400}`, padding: `${space.s} ${space.xl} `, position: "fixed", bottom: 0, left: 0, right: 0, ...elemProps }, useListRenderItems(model, children), overflowButton)); });