/
ButtonIconStyled.js
67 lines (57 loc) · 1.58 KB
/
ButtonIconStyled.js
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
63
64
65
66
67
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import {
extractThemeOrDefault,
getValueString,
iconSizeMixin,
} from 'reactackle-core';
const propTypes = {
/** Define button's size */
size: PropTypes.oneOf(['inline', 'small', 'normal', 'large']),
/** Swap icon and text position */
iconPositionRight: PropTypes.bool,
};
const defaultProps = {
size: 'normal',
iconPositionRight: false,
};
// PROP RECEIVERS
const iconStyleProps = ({
theme: themeFromProvider,
}) => {
const theme = extractThemeOrDefault(themeFromProvider);
const path = theme.reactackle.components.button;
const opacityAmount = path.iconOpacity;
return css`
opacity: ${opacityAmount};
svg {
fill: currentColor;
}
`;
};
const iconSizeProps = ({ size, theme: themeFromProvider }) => {
const theme = extractThemeOrDefault(themeFromProvider);
const path = theme.reactackle.components.button.size[size].icon;
return css`
${iconSizeMixin(
getValueString(path.width),
getValueString(path.imgSize || path.width),
getValueString(path.height || path.width),
)}
${size === 'inline' && `
display: inline-flex;
align-self: center;
`}
`;
};
export const ButtonIconBoxStyled = styled.div`
order: ${props => (props.iconPositionRight ? '2' : '1')};
display: flex;
align-items: center;
justify-content: center;
${iconStyleProps};
${iconSizeProps};
`;
ButtonIconBoxStyled.propTypes = propTypes;
ButtonIconBoxStyled.defaultProps = defaultProps;
ButtonIconBoxStyled.displayName = 'ButtonIconBoxStyled';