1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import { forbidExtraProps } from 'airbnb-prop-types';
|
4 | import { withStyles, withStylesPropTypes } from 'react-with-styles';
|
5 |
|
6 | const propTypes = forbidExtraProps({
|
7 | ...withStylesPropTypes,
|
8 | unicode: PropTypes.string.isRequired,
|
9 | label: PropTypes.string.isRequired,
|
10 | action: PropTypes.string.isRequired,
|
11 | block: PropTypes.bool,
|
12 | });
|
13 |
|
14 | const defaultProps = {
|
15 | block: false,
|
16 | };
|
17 |
|
18 | function KeyboardShortcutRow({
|
19 | css,
|
20 | unicode,
|
21 | label,
|
22 | action,
|
23 | block,
|
24 | styles,
|
25 | }) {
|
26 | return (
|
27 | <li
|
28 | {...css(
|
29 | styles.KeyboardShortcutRow,
|
30 | block && styles.KeyboardShortcutRow__block,
|
31 | )}
|
32 | >
|
33 | <div
|
34 | {...css(
|
35 | styles.KeyboardShortcutRow_keyContainer,
|
36 | block && styles.KeyboardShortcutRow_keyContainer__block,
|
37 | )}
|
38 | >
|
39 | <span
|
40 | {...css(styles.KeyboardShortcutRow_key)}
|
41 | role="img"
|
42 | aria-label={`${label},`}
|
43 | >
|
44 | {unicode}
|
45 | </span>
|
46 | </div>
|
47 |
|
48 | <div {...css(styles.KeyboardShortcutRow_action)}>
|
49 | {action}
|
50 | </div>
|
51 | </li>
|
52 | );
|
53 | }
|
54 |
|
55 | KeyboardShortcutRow.propTypes = propTypes;
|
56 | KeyboardShortcutRow.defaultProps = defaultProps;
|
57 |
|
58 | export default withStyles(({ reactDates: { color } }) => ({
|
59 | KeyboardShortcutRow: {
|
60 | listStyle: 'none',
|
61 | margin: '6px 0',
|
62 | },
|
63 |
|
64 | KeyboardShortcutRow__block: {
|
65 | marginBottom: 16,
|
66 | },
|
67 |
|
68 | KeyboardShortcutRow_keyContainer: {
|
69 | display: 'inline-block',
|
70 | whiteSpace: 'nowrap',
|
71 | textAlign: 'right',
|
72 | marginRight: 6,
|
73 | },
|
74 |
|
75 | KeyboardShortcutRow_keyContainer__block: {
|
76 | textAlign: 'left',
|
77 | display: 'inline',
|
78 | },
|
79 |
|
80 | KeyboardShortcutRow_key: {
|
81 | fontFamily: 'monospace',
|
82 | fontSize: 12,
|
83 | textTransform: 'uppercase',
|
84 | background: color.core.grayLightest,
|
85 | padding: '2px 6px',
|
86 | },
|
87 |
|
88 | KeyboardShortcutRow_action: {
|
89 | display: 'inline',
|
90 | wordBreak: 'break-word',
|
91 | marginLeft: 8,
|
92 | },
|
93 | }), { pureComponent: typeof React.PureComponent !== 'undefined' })(KeyboardShortcutRow);
|