-
Notifications
You must be signed in to change notification settings - Fork 209
/
ActionBar.tsx
62 lines (57 loc) · 1.46 KB
/
ActionBar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import * as React from 'react';
import styled from '@emotion/styled';
import {colors, commonColors, spacing} from '@workday/canvas-kit-react-core';
export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* If the actionBar is fixed to the bottom of the screen
*/
fixed?: boolean;
}
const ActionBarContainer = styled('div')(
{
borderTop: `solid 1px ${colors.soap400}`,
background: commonColors.background,
padding: spacing.s,
boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
'@media (max-width: 575px)': {
padding: spacing.xxs,
},
},
({fixed}: ActionBarProps) =>
fixed && {
position: 'fixed',
left: 0,
bottom: 0,
right: 0,
}
);
const ChildrenContainer = styled('div')({
display: 'inline-block',
padding: `0 ${spacing.m}`,
'*:not(:first-child)': {
marginLeft: spacing.s,
},
'@media (max-width: 575px)': {
display: 'flex',
padding: spacing.xxs,
justifyContent: 'center',
flexDirection: 'row-reverse',
'> *': {
flex: 1,
'&:not(:first-child)': {
marginRight: spacing.s,
marginLeft: 0,
},
},
},
});
export default class ActionBar extends React.Component<ActionBarProps> {
public render() {
const {fixed, children, ...elemProps} = this.props;
return (
<ActionBarContainer {...elemProps} fixed={fixed}>
<ChildrenContainer>{children}</ChildrenContainer>
</ActionBarContainer>
);
}
}