@xaypay/tui 0.0.111 → 0.0.113
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/index.es.js +184 -82
- package/dist/index.js +184 -82
- package/package.json +1 -1
- package/src/components/input/index.js +24 -0
- package/src/components/input/input.stories.js +0 -2
- package/src/components/modal/index.js +2 -3
- package/src/components/newAutocomplete/index.js +2 -3
- package/src/components/newFile/fileItem.js +1 -0
- package/src/components/newFile/index.js +84 -12
- package/src/components/newFile/newFile.stories.js +2 -1
- package/src/components/select/index.js +2 -3
- package/src/components/table/index.js +30 -20
- package/src/components/table/table.stories.js +1 -10
- package/src/components/table/td.js +61 -50
- package/src/components/table/th.js +12 -8
- package/src/components/textarea/index.js +4 -6
- package/src/components/typography/index.js +1 -1
- package/src/utils/index.js +4 -0
|
@@ -2,6 +2,8 @@ import React from 'react'
|
|
|
2
2
|
|
|
3
3
|
import { SingleCheckbox } from './../singleCheckbox'
|
|
4
4
|
|
|
5
|
+
import { hasOwnerProperty } from './../../utils'
|
|
6
|
+
|
|
5
7
|
import styles from './table.module.css'
|
|
6
8
|
|
|
7
9
|
const TD = ({
|
|
@@ -35,6 +37,37 @@ const TD = ({
|
|
|
35
37
|
handleBodyActionClick(e, actionData)
|
|
36
38
|
}
|
|
37
39
|
|
|
40
|
+
const handleCheckActions = (e, object, property, objectIndex) => {
|
|
41
|
+
if (hasOwnerProperty(object, property)) {
|
|
42
|
+
handleBodyAction(e, {
|
|
43
|
+
item: object,
|
|
44
|
+
itemIndex: objectIndex,
|
|
45
|
+
})
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const handleMoreOptions = (item, index, optionItem, innerIndex, optionIndex, options) => {
|
|
50
|
+
handleMoreOptionsClick({
|
|
51
|
+
item,
|
|
52
|
+
index,
|
|
53
|
+
options,
|
|
54
|
+
optionItem,
|
|
55
|
+
innerIndex,
|
|
56
|
+
optionIndex,
|
|
57
|
+
})
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
|
|
61
|
+
handleContentListClick(e, {
|
|
62
|
+
item,
|
|
63
|
+
index,
|
|
64
|
+
innerIndex,
|
|
65
|
+
listContentId,
|
|
66
|
+
listContent,
|
|
67
|
+
listContentIndex,
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
|
|
38
71
|
return (
|
|
39
72
|
<td
|
|
40
73
|
style={{
|
|
@@ -48,9 +81,7 @@ const TD = ({
|
|
|
48
81
|
textAlign: tBodyTextAlign,
|
|
49
82
|
fontFamily: tBodyFontFamily,
|
|
50
83
|
fontWeight: tBodyFontWeight,
|
|
51
|
-
boxShadow:
|
|
52
|
-
? `inset 3px 0px 0px 0px ${item.colorStatus}`
|
|
53
|
-
: '',
|
|
84
|
+
boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
|
|
54
85
|
}}
|
|
55
86
|
>
|
|
56
87
|
{Array.isArray(item) ? (
|
|
@@ -63,23 +94,13 @@ const TD = ({
|
|
|
63
94
|
width: '32px',
|
|
64
95
|
height: '32px',
|
|
65
96
|
marginRight: '10px',
|
|
66
|
-
cursor:
|
|
67
|
-
? 'pointer'
|
|
68
|
-
: 'auto',
|
|
97
|
+
cursor: hasOwnerProperty(newItem, 'type') ? 'pointer' : 'auto',
|
|
69
98
|
}}
|
|
70
99
|
id={newItem.id}
|
|
71
100
|
type={newItem.type}
|
|
72
101
|
className={styles['td-span']}
|
|
73
102
|
key={`${newItem.id}_${newIndex}`}
|
|
74
|
-
onClick={
|
|
75
|
-
Object.prototype.hasOwnProperty.call(newItem, 'type')
|
|
76
|
-
? (e) =>
|
|
77
|
-
handleBodyAction(e, {
|
|
78
|
-
item: newItem,
|
|
79
|
-
itemIndex: newIndex,
|
|
80
|
-
})
|
|
81
|
-
: (_) => _
|
|
82
|
-
}
|
|
103
|
+
onClick={(e) => handleCheckActions(e, newItem, 'type', newIndex)}
|
|
83
104
|
>
|
|
84
105
|
{newItem.content}
|
|
85
106
|
</span>
|
|
@@ -102,22 +123,12 @@ const TD = ({
|
|
|
102
123
|
width: '32px',
|
|
103
124
|
height: '32px',
|
|
104
125
|
marginRight: '10px',
|
|
105
|
-
cursor:
|
|
106
|
-
? 'pointer'
|
|
107
|
-
: 'auto',
|
|
126
|
+
cursor: hasOwnerProperty(iT, 'type') ? 'pointer' : 'auto',
|
|
108
127
|
}}
|
|
109
128
|
id={iT.id ? iT.id : ''}
|
|
110
129
|
type={iT.type ? iT.type : ''}
|
|
111
130
|
className={styles['td-span']}
|
|
112
|
-
onClick={
|
|
113
|
-
Object.prototype.hasOwnProperty.call(iT, 'type')
|
|
114
|
-
? (e) =>
|
|
115
|
-
handleBodyAction(e, {
|
|
116
|
-
item: iT,
|
|
117
|
-
itemIndex: iN,
|
|
118
|
-
})
|
|
119
|
-
: (_) => _
|
|
120
|
-
}
|
|
131
|
+
onClick={(e) => handleCheckActions(e, iT, 'type', iN)}
|
|
121
132
|
key={`${iT.id || iT.content}_${iN}`}
|
|
122
133
|
>
|
|
123
134
|
{iT.content}
|
|
@@ -139,13 +150,12 @@ const TD = ({
|
|
|
139
150
|
display: 'flex',
|
|
140
151
|
alignItems: 'flex-start',
|
|
141
152
|
justifyContent:
|
|
142
|
-
|
|
143
|
-
Object.prototype.hasOwnProperty.call(item, 'checkBox')
|
|
153
|
+
hasOwnerProperty(item, 'contentList') || hasOwnerProperty(item, 'checkBox')
|
|
144
154
|
? 'space-between'
|
|
145
155
|
: 'center',
|
|
146
156
|
}}
|
|
147
157
|
>
|
|
148
|
-
{
|
|
158
|
+
{hasOwnerProperty(item, 'contentList') && (
|
|
149
159
|
<div
|
|
150
160
|
id={item.id}
|
|
151
161
|
style={{
|
|
@@ -160,7 +170,7 @@ const TD = ({
|
|
|
160
170
|
</div>
|
|
161
171
|
)}
|
|
162
172
|
|
|
163
|
-
{
|
|
173
|
+
{hasOwnerProperty(item, 'checkBox') && (
|
|
164
174
|
<SingleCheckbox
|
|
165
175
|
data={item}
|
|
166
176
|
index={index}
|
|
@@ -182,28 +192,27 @@ const TD = ({
|
|
|
182
192
|
style={{
|
|
183
193
|
margin: '0px',
|
|
184
194
|
cursor:
|
|
185
|
-
|
|
186
|
-
Object.prototype.hasOwnProperty.call(item, 'dots')
|
|
195
|
+
hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots')
|
|
187
196
|
? 'pointer'
|
|
188
197
|
: 'auto',
|
|
189
198
|
}}
|
|
190
199
|
onClick={
|
|
191
|
-
|
|
200
|
+
hasOwnerProperty(item, 'arrowComponent')
|
|
192
201
|
? () => handleCheckArrowAction(item, item.checkIndex)
|
|
193
|
-
:
|
|
202
|
+
: hasOwnerProperty(item, 'dots')
|
|
194
203
|
? (e) => handleCheckDots(e, item, index, innerIndex)
|
|
195
204
|
: (_) => _
|
|
196
205
|
}
|
|
197
206
|
>
|
|
198
207
|
{item.content ? (
|
|
199
208
|
item.content
|
|
200
|
-
) :
|
|
209
|
+
) : hasOwnerProperty(item, 'arrowComponent') ? (
|
|
201
210
|
item.status === 'close' ? (
|
|
202
211
|
item.closeArrow
|
|
203
212
|
) : (
|
|
204
213
|
item.openArrow
|
|
205
214
|
)
|
|
206
|
-
) :
|
|
215
|
+
) : hasOwnerProperty(item, 'dots') ? (
|
|
207
216
|
<span
|
|
208
217
|
style={{
|
|
209
218
|
display: 'block',
|
|
@@ -228,7 +237,7 @@ const TD = ({
|
|
|
228
237
|
boxShadow: '0px 0px 20px 0px #3C393E4D',
|
|
229
238
|
}}
|
|
230
239
|
>
|
|
231
|
-
{
|
|
240
|
+
{hasOwnerProperty(item, 'options') &&
|
|
232
241
|
item.options.map((optionItem, optionIndex) => {
|
|
233
242
|
return (
|
|
234
243
|
<span
|
|
@@ -240,14 +249,14 @@ const TD = ({
|
|
|
240
249
|
fontFamily: 'Noto Sans Armenian',
|
|
241
250
|
}}
|
|
242
251
|
onClick={() =>
|
|
243
|
-
|
|
252
|
+
handleMoreOptions(
|
|
244
253
|
item,
|
|
245
254
|
index,
|
|
246
255
|
optionItem,
|
|
247
256
|
innerIndex,
|
|
248
257
|
optionIndex,
|
|
249
|
-
|
|
250
|
-
|
|
258
|
+
item.options
|
|
259
|
+
)
|
|
251
260
|
}
|
|
252
261
|
>
|
|
253
262
|
<span
|
|
@@ -278,7 +287,7 @@ const TD = ({
|
|
|
278
287
|
''
|
|
279
288
|
)}
|
|
280
289
|
</p>
|
|
281
|
-
{
|
|
290
|
+
{hasOwnerProperty(item, 'contentList') && (
|
|
282
291
|
<div
|
|
283
292
|
style={{
|
|
284
293
|
overflow: 'auto',
|
|
@@ -295,21 +304,23 @@ const TD = ({
|
|
|
295
304
|
className={styles['list-text']}
|
|
296
305
|
style={{
|
|
297
306
|
color: openListColor,
|
|
307
|
+
maxWidth:
|
|
308
|
+
(item.content.length * 9 <= 100 ? 100 : item.content.length * 9) +
|
|
309
|
+
'px',
|
|
298
310
|
}}
|
|
299
311
|
onClick={(e) =>
|
|
300
|
-
|
|
312
|
+
handleContentList(
|
|
313
|
+
e,
|
|
301
314
|
item,
|
|
302
315
|
index,
|
|
303
316
|
innerIndex,
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
317
|
+
innerItem.id,
|
|
318
|
+
innerItem.content,
|
|
319
|
+
innerItemIndex
|
|
320
|
+
)
|
|
308
321
|
}
|
|
309
322
|
>
|
|
310
|
-
{innerItem.content
|
|
311
|
-
? innerItem.content.substr(0, item.content.length - 4) + '...'
|
|
312
|
-
: innerItem.content}
|
|
323
|
+
{innerItem.content}
|
|
313
324
|
</p>
|
|
314
325
|
)
|
|
315
326
|
})}
|
|
@@ -3,6 +3,8 @@ import React from 'react'
|
|
|
3
3
|
|
|
4
4
|
import { SingleCheckbox } from './../singleCheckbox'
|
|
5
5
|
|
|
6
|
+
import { hasOwnerProperty } from './../../utils'
|
|
7
|
+
|
|
6
8
|
import styles from './table.module.css'
|
|
7
9
|
|
|
8
10
|
const TH = ({
|
|
@@ -17,6 +19,12 @@ const TH = ({
|
|
|
17
19
|
handleHeaderItemClick,
|
|
18
20
|
handleCheckArrowActionHeader,
|
|
19
21
|
}) => {
|
|
22
|
+
const handleCheckArrowAction = (e, object, property) => {
|
|
23
|
+
if (hasOwnerProperty(object, property)) {
|
|
24
|
+
handleCheckArrowActionHeader(e, object)
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
20
28
|
return (
|
|
21
29
|
<th
|
|
22
30
|
style={{
|
|
@@ -38,10 +46,10 @@ const TH = ({
|
|
|
38
46
|
style={{
|
|
39
47
|
display: 'flex',
|
|
40
48
|
alignItems: 'flex-start',
|
|
41
|
-
justifyContent:
|
|
49
|
+
justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center',
|
|
42
50
|
}}
|
|
43
51
|
>
|
|
44
|
-
{item
|
|
52
|
+
{hasOwnerProperty(item, 'checkBox') ? (
|
|
45
53
|
<SingleCheckbox
|
|
46
54
|
data={item}
|
|
47
55
|
float="left"
|
|
@@ -58,15 +66,11 @@ const TH = ({
|
|
|
58
66
|
style={{
|
|
59
67
|
margin: '0px',
|
|
60
68
|
}}
|
|
61
|
-
onClick={
|
|
62
|
-
Object.prototype.hasOwnProperty.call(item, 'arrowComponent')
|
|
63
|
-
? (e) => handleCheckArrowActionHeader(e, item)
|
|
64
|
-
: (_) => _
|
|
65
|
-
}
|
|
69
|
+
onClick={(e) => handleCheckArrowAction(e, item, 'arrowComponent')}
|
|
66
70
|
>
|
|
67
71
|
{item.type === 'show'
|
|
68
72
|
? item.content
|
|
69
|
-
:
|
|
73
|
+
: hasOwnerProperty(item, 'arrowComponent')
|
|
70
74
|
? item.status === 'close'
|
|
71
75
|
? item.closeArrow
|
|
72
76
|
: item.openArrow
|
|
@@ -70,16 +70,10 @@ export const Textarea = ({
|
|
|
70
70
|
if (maxLength) {
|
|
71
71
|
if (value.length > maxLength) {
|
|
72
72
|
onChange(value.substr(0, maxLength))
|
|
73
|
-
setError('Նիշերի քանակը գերազանցում է')
|
|
74
|
-
} else {
|
|
75
|
-
setError('')
|
|
76
73
|
}
|
|
77
74
|
} else {
|
|
78
75
|
if (value.length > configStyles.TEXTAREA.maxLength) {
|
|
79
|
-
setError('Նիշերի քանակը գերազանցում է')
|
|
80
76
|
onChange(value.substr(0, configStyles.TEXTAREA.maxLength))
|
|
81
|
-
} else {
|
|
82
|
-
setError('')
|
|
83
77
|
}
|
|
84
78
|
}
|
|
85
79
|
}
|
|
@@ -93,6 +87,10 @@ export const Textarea = ({
|
|
|
93
87
|
alert('Please add onChange function on Textarea component')
|
|
94
88
|
}
|
|
95
89
|
|
|
90
|
+
if (value === '') {
|
|
91
|
+
setError('')
|
|
92
|
+
}
|
|
93
|
+
|
|
96
94
|
setInnerValue(value)
|
|
97
95
|
}, [value, onChange])
|
|
98
96
|
|
|
@@ -116,7 +116,7 @@ Typography.propTypes = {
|
|
|
116
116
|
textDecoration: PropTypes.string,
|
|
117
117
|
backgroundColor: PropTypes.string,
|
|
118
118
|
variant: PropTypes.oneOf(Object.values(TypographyType)),
|
|
119
|
-
size: PropTypes.
|
|
119
|
+
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
Typography.defaultProps = {
|