@meduza/ui-kit-2 0.8.627 → 0.8.628
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-kit-2.cjs.development.js +130 -118
- package/dist/ui-kit-2.cjs.development.js.map +1 -1
- package/dist/ui-kit-2.cjs.production.min.js +1 -1
- package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
- package/dist/ui-kit-2.esm.js +130 -118
- package/dist/ui-kit-2.esm.js.map +1 -1
- package/dist/ui-kit-game.css +5 -8
- package/dist/ui-kit.css +5 -8
- package/package.json +1 -1
- package/src/Meta/Meta.module.css +4 -4
- package/src/Meta/MetaContainer.tsx +145 -145
package/dist/ui-kit-game.css
CHANGED
|
@@ -2345,24 +2345,21 @@
|
|
|
2345
2345
|
background-color: #4f4f4f;
|
|
2346
2346
|
}
|
|
2347
2347
|
|
|
2348
|
-
.
|
|
2348
|
+
/* .containerInDynamicBlock {
|
|
2349
2349
|
position: absolute;
|
|
2350
2350
|
bottom: 20px;
|
|
2351
2351
|
left: 57px;
|
|
2352
2352
|
width: auto;
|
|
2353
|
-
}
|
|
2353
|
+
} */
|
|
2354
2354
|
|
|
2355
|
-
.
|
|
2355
|
+
/* .containerInDynamicBlockAndMaterial {
|
|
2356
2356
|
left: 65px;
|
|
2357
|
-
}
|
|
2358
2357
|
|
|
2359
|
-
@media
|
|
2360
|
-
|
|
2361
|
-
.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
|
|
2358
|
+
@media $landscapeTablet {
|
|
2362
2359
|
left: auto;
|
|
2363
2360
|
bottom: 35px;
|
|
2364
|
-
}
|
|
2365
2361
|
}
|
|
2362
|
+
} */
|
|
2366
2363
|
|
|
2367
2364
|
.Meta-module_root__H-Q4d {
|
|
2368
2365
|
font-size: 12px;
|
package/dist/ui-kit.css
CHANGED
|
@@ -2345,24 +2345,21 @@
|
|
|
2345
2345
|
background-color: #4f4f4f;
|
|
2346
2346
|
}
|
|
2347
2347
|
|
|
2348
|
-
.
|
|
2348
|
+
/* .containerInDynamicBlock {
|
|
2349
2349
|
position: absolute;
|
|
2350
2350
|
bottom: 20px;
|
|
2351
2351
|
left: 57px;
|
|
2352
2352
|
width: auto;
|
|
2353
|
-
}
|
|
2353
|
+
} */
|
|
2354
2354
|
|
|
2355
|
-
.
|
|
2355
|
+
/* .containerInDynamicBlockAndMaterial {
|
|
2356
2356
|
left: 65px;
|
|
2357
|
-
}
|
|
2358
2357
|
|
|
2359
|
-
@media
|
|
2360
|
-
|
|
2361
|
-
.Meta-module_containerInDynamicBlockAndMaterial__4v4A9 {
|
|
2358
|
+
@media $landscapeTablet {
|
|
2362
2359
|
left: auto;
|
|
2363
2360
|
bottom: 35px;
|
|
2364
|
-
}
|
|
2365
2361
|
}
|
|
2362
|
+
} */
|
|
2366
2363
|
|
|
2367
2364
|
.Meta-module_root__H-Q4d {
|
|
2368
2365
|
font-size: 12px;
|
package/package.json
CHANGED
package/src/Meta/Meta.module.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
.containerInDynamicBlock {
|
|
1
|
+
/* .containerInDynamicBlock {
|
|
2
2
|
position: absolute;
|
|
3
3
|
bottom: 20px;
|
|
4
4
|
left: 57px;
|
|
5
5
|
width: auto;
|
|
6
|
-
}
|
|
6
|
+
} */
|
|
7
7
|
|
|
8
|
-
.containerInDynamicBlockAndMaterial {
|
|
8
|
+
/* .containerInDynamicBlockAndMaterial {
|
|
9
9
|
left: 65px;
|
|
10
10
|
|
|
11
11
|
@media $landscapeTablet {
|
|
12
12
|
left: auto;
|
|
13
13
|
bottom: 35px;
|
|
14
14
|
}
|
|
15
|
-
}
|
|
15
|
+
} */
|
|
16
16
|
|
|
17
17
|
.root {
|
|
18
18
|
font-size: 12px;
|
|
@@ -9,7 +9,7 @@ import { DocumentItemsCount } from '../DocumentItemsCount'
|
|
|
9
9
|
import { BookmarkButton } from '../BookmarkButton'
|
|
10
10
|
import { Timestamp } from '../Timestamp'
|
|
11
11
|
import { SvgSymbol } from '../SvgSymbol'
|
|
12
|
-
import { makeClassName, ClassNames } from '../utils/makeClassName'
|
|
12
|
+
// import { makeClassName, ClassNames } from '../utils/makeClassName'
|
|
13
13
|
|
|
14
14
|
import { TimestampProps } from '../Timestamp/Timestamp.types'
|
|
15
15
|
|
|
@@ -25,8 +25,8 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
|
|
|
25
25
|
block: {
|
|
26
26
|
data: { components, theme }
|
|
27
27
|
},
|
|
28
|
-
styleContext
|
|
29
|
-
type
|
|
28
|
+
styleContext
|
|
29
|
+
// type
|
|
30
30
|
}) => {
|
|
31
31
|
const themeColor =
|
|
32
32
|
styleContext && styleContext.indexOf('dark') !== -1 ? 'light' : 'unset'
|
|
@@ -43,155 +43,155 @@ export const MetaContainer: React.FC<MetaContainerProps> = ({
|
|
|
43
43
|
|
|
44
44
|
const hasSource = !!components.find((item) => item.type === 'source_name')
|
|
45
45
|
|
|
46
|
-
const classNames: ClassNames = [
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
]
|
|
46
|
+
// const classNames: ClassNames = [
|
|
47
|
+
// [
|
|
48
|
+
// styles.containerInDynamicBlock,
|
|
49
|
+
// styleContext === 'isInDynamicBlock' || styleContext.includes('episode')
|
|
50
|
+
// ],
|
|
51
|
+
// [
|
|
52
|
+
// styles.containerInDynamicBlockAndMaterial,
|
|
53
|
+
// styleContext === 'isInDynamicBlock' && type === 'isInMaterial'
|
|
54
|
+
// ]
|
|
55
|
+
// ]
|
|
56
56
|
|
|
57
57
|
return (
|
|
58
|
-
<div className={makeClassName(classNames)}>
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
58
|
+
// <div className={makeClassName(classNames)}>
|
|
59
|
+
<Meta
|
|
60
|
+
styleContext={context}
|
|
61
|
+
theme={theme || themeColor}
|
|
62
|
+
onlyOn={block.only_on}
|
|
63
|
+
hasSource={hasSource}
|
|
64
|
+
>
|
|
65
|
+
{components.map((component) => {
|
|
66
|
+
switch (component.type) {
|
|
67
|
+
case 'source_name': {
|
|
68
|
+
return (
|
|
69
|
+
<MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
70
|
+
<>
|
|
71
|
+
{lang === 'ru' ? 'Источник: ' : 'Source: '}
|
|
72
|
+
{component.url && (
|
|
73
|
+
<a
|
|
74
|
+
href={component.url}
|
|
75
|
+
rel="noopener noreferrer"
|
|
76
|
+
target="_blank"
|
|
77
|
+
>
|
|
78
|
+
{component.text}
|
|
79
|
+
</a>
|
|
80
|
+
)}
|
|
81
|
+
{!component.url && component.text}
|
|
82
|
+
</>
|
|
83
|
+
</MetaItem>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
case 'duration': {
|
|
87
|
+
// if (styleContext === 'isInDynamicBlock') {
|
|
88
|
+
// return (
|
|
89
|
+
// <MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
90
|
+
// {component.text}
|
|
91
|
+
// </MetaItem>
|
|
92
|
+
// )
|
|
93
|
+
// }
|
|
94
|
+
return (
|
|
95
|
+
<MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
96
|
+
<>
|
|
97
|
+
{styleContext !== 'isInDynamicBlock' && (
|
|
98
|
+
<SvgSymbol icon="podcast" size="small" />
|
|
99
|
+
)}
|
|
100
|
+
{component.text}
|
|
101
|
+
</>
|
|
102
|
+
</MetaItem>
|
|
103
|
+
)
|
|
104
|
+
}
|
|
105
|
+
case 'datetime': {
|
|
106
|
+
const format = ((component.format && toCamel(component.format)) ||
|
|
107
|
+
'date') as TimestampProps['type']
|
|
108
108
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
109
|
+
return (
|
|
110
|
+
<MetaItem
|
|
111
|
+
hasSource={hasSource}
|
|
112
|
+
bullets
|
|
113
|
+
key={component.id}
|
|
114
|
+
type="datetime"
|
|
115
|
+
>
|
|
116
|
+
<Timestamp
|
|
117
|
+
publishedAt={component.datetime}
|
|
118
|
+
// type={
|
|
119
|
+
// styleContext === 'isInDynamicBlock'
|
|
120
|
+
// ? 'fromNow'
|
|
121
|
+
// : format || 'date'
|
|
122
|
+
// }
|
|
123
|
+
type={format || 'date'}
|
|
124
|
+
locale={lang}
|
|
125
|
+
/>
|
|
126
|
+
</MetaItem>
|
|
127
|
+
)
|
|
128
|
+
}
|
|
129
129
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
130
|
+
case 'items_count': {
|
|
131
|
+
return (
|
|
132
|
+
<MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
133
|
+
<DocumentItemsCount
|
|
134
|
+
items={component.count}
|
|
135
|
+
type={isPodcast ? 'podcast' : 'card'}
|
|
136
|
+
lang={lang}
|
|
137
|
+
>
|
|
138
|
+
<SvgSymbol icon="card" size="unset" />
|
|
139
|
+
</DocumentItemsCount>
|
|
140
|
+
</MetaItem>
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
case 'broadcast_active': {
|
|
144
|
+
return (
|
|
145
|
+
<MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
146
|
+
<>
|
|
147
|
+
<MetaItemLive /> Прямой эфир
|
|
148
|
+
</>
|
|
149
|
+
</MetaItem>
|
|
150
|
+
)
|
|
151
|
+
}
|
|
152
|
+
case 'broadcast': {
|
|
153
|
+
return (
|
|
154
|
+
<MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
155
|
+
<>
|
|
156
|
+
{component.with_icon && <MetaItemLive />}
|
|
157
157
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
158
|
+
{component.label}
|
|
159
|
+
</>
|
|
160
|
+
</MetaItem>
|
|
161
|
+
)
|
|
162
|
+
}
|
|
163
|
+
case 'string': {
|
|
164
|
+
return (
|
|
165
|
+
<MetaItem hasSource={hasSource} bullets key={component.id}>
|
|
166
|
+
{component.text}
|
|
167
|
+
</MetaItem>
|
|
168
|
+
)
|
|
169
|
+
}
|
|
170
170
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
}
|
|
171
|
+
default: {
|
|
172
|
+
return null
|
|
174
173
|
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
174
|
+
}
|
|
175
|
+
})}
|
|
176
|
+
{(isRead || isListened) && (
|
|
177
|
+
<MetaItem
|
|
178
|
+
hasSource={hasSource}
|
|
179
|
+
bullets
|
|
180
|
+
type={isListened ? 'listened' : 'read'}
|
|
181
|
+
>
|
|
182
|
+
<SvgSymbol icon={isListened ? 'listened' : 'read'} size="unset" />
|
|
183
|
+
</MetaItem>
|
|
184
|
+
)}
|
|
185
185
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
</div>
|
|
186
|
+
{isSlides && lang === 'ru' && (
|
|
187
|
+
<div className={styles.bookmark}>
|
|
188
|
+
<BookmarkButton
|
|
189
|
+
isInBookmarks={isInBookmarks}
|
|
190
|
+
onClick={(): void => bookmarkAction('bookmark', 'top')}
|
|
191
|
+
/>
|
|
192
|
+
</div>
|
|
193
|
+
)}
|
|
194
|
+
</Meta>
|
|
195
|
+
// </div>
|
|
196
196
|
)
|
|
197
197
|
}
|