1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import deprecatedPropType from '../utils/deprecatedPropType';
|
8 | export const styles = theme => ({
|
9 |
|
10 | root: {
|
11 | position: 'absolute',
|
12 | left: 0,
|
13 | right: 0,
|
14 | height: 48,
|
15 | background: 'rgba(0, 0, 0, 0.5)',
|
16 | display: 'flex',
|
17 | alignItems: 'center',
|
18 | fontFamily: theme.typography.fontFamily
|
19 | },
|
20 |
|
21 |
|
22 | positionBottom: {
|
23 | bottom: 0
|
24 | },
|
25 |
|
26 |
|
27 | positionTop: {
|
28 | top: 0
|
29 | },
|
30 |
|
31 |
|
32 | rootSubtitle: {
|
33 | height: 68
|
34 | },
|
35 |
|
36 |
|
37 | titleWrap: {
|
38 | flexGrow: 1,
|
39 | marginLeft: 16,
|
40 | marginRight: 16,
|
41 | color: theme.palette.common.white,
|
42 | overflow: 'hidden'
|
43 | },
|
44 |
|
45 |
|
46 | titleWrapActionPosLeft: {
|
47 | marginLeft: 0
|
48 | },
|
49 |
|
50 |
|
51 | titleWrapActionPosRight: {
|
52 | marginRight: 0
|
53 | },
|
54 |
|
55 |
|
56 | title: {
|
57 | fontSize: theme.typography.pxToRem(16),
|
58 | lineHeight: '24px',
|
59 | textOverflow: 'ellipsis',
|
60 | overflow: 'hidden',
|
61 | whiteSpace: 'nowrap'
|
62 | },
|
63 |
|
64 |
|
65 | subtitle: {
|
66 | fontSize: theme.typography.pxToRem(12),
|
67 | lineHeight: 1,
|
68 | textOverflow: 'ellipsis',
|
69 | overflow: 'hidden',
|
70 | whiteSpace: 'nowrap'
|
71 | },
|
72 |
|
73 |
|
74 | actionIcon: {},
|
75 |
|
76 |
|
77 | actionIconActionPosLeft: {
|
78 | order: -1
|
79 | }
|
80 | });
|
81 | const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) {
|
82 | const {
|
83 | actionIcon,
|
84 | actionPosition = 'right',
|
85 | classes,
|
86 | className,
|
87 | subtitle,
|
88 | title,
|
89 | position: positionProp = 'bottom',
|
90 | titlePosition
|
91 | } = props,
|
92 | other = _objectWithoutPropertiesLoose(props, ["actionIcon", "actionPosition", "classes", "className", "subtitle", "title", "position", "titlePosition"]);
|
93 |
|
94 | const position = titlePosition || positionProp;
|
95 | const actionPos = actionIcon && actionPosition;
|
96 | return React.createElement("div", _extends({
|
97 | className: clsx(classes.root, className, subtitle && classes.rootSubtitle, {
|
98 | 'bottom': classes.positionBottom,
|
99 | 'top': classes.positionTop
|
100 | }[position]),
|
101 | ref: ref
|
102 | }, other), React.createElement("div", {
|
103 | className: clsx(classes.titleWrap, {
|
104 | 'left': classes.titleWrapActionPosLeft,
|
105 | 'right': classes.titleWrapActionPosRight
|
106 | }[actionPos])
|
107 | }, React.createElement("div", {
|
108 | className: classes.title
|
109 | }, title), subtitle ? React.createElement("div", {
|
110 | className: classes.subtitle
|
111 | }, subtitle) : null), actionIcon ? React.createElement("div", {
|
112 | className: clsx(classes.actionIcon, actionPos === 'left' && classes.actionIconActionPosLeft)
|
113 | }, actionIcon) : null);
|
114 | });
|
115 | process.env.NODE_ENV !== "production" ? ImageListItemBar.propTypes = {
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 | |
122 |
|
123 |
|
124 |
|
125 | actionIcon: PropTypes.node,
|
126 |
|
127 | |
128 |
|
129 |
|
130 | actionPosition: PropTypes.oneOf(['left', 'right']),
|
131 |
|
132 | |
133 |
|
134 |
|
135 |
|
136 | classes: PropTypes.object,
|
137 |
|
138 | |
139 |
|
140 |
|
141 | className: PropTypes.string,
|
142 |
|
143 | |
144 |
|
145 |
|
146 | position: PropTypes.oneOf(['bottom', 'top']),
|
147 |
|
148 | |
149 |
|
150 |
|
151 | subtitle: PropTypes.node,
|
152 |
|
153 | |
154 |
|
155 |
|
156 | title: PropTypes.node,
|
157 |
|
158 | |
159 |
|
160 |
|
161 |
|
162 | titlePosition: deprecatedPropType(PropTypes.oneOf(['bottom', 'top']), 'Use the `position` prop instead.')
|
163 | } : void 0;
|
164 | export default withStyles(styles, {
|
165 | name: 'MuiImageListItemBar'
|
166 | })(ImageListItemBar); |
\ | No newline at end of file |