@reactivers/generic-ui 0.1.0

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.
Files changed (37) hide show
  1. package/.babelrc +3 -0
  2. package/README.md +36 -0
  3. package/dist/bundle.css +1 -0
  4. package/dist/index.cjs.js +1566 -0
  5. package/dist/index.esm.js +1510 -0
  6. package/package.json +68 -0
  7. package/rollup.config.js +36 -0
  8. package/src/components/Badge/index.js +19 -0
  9. package/src/components/Button/index.js +63 -0
  10. package/src/components/Card/index.js +51 -0
  11. package/src/components/ColorPicker/index.js +44 -0
  12. package/src/components/EmptyResult/index.js +30 -0
  13. package/src/components/FadeAnimation/index.js +35 -0
  14. package/src/components/Form/index.js +25 -0
  15. package/src/components/Grid/index.js +1 -0
  16. package/src/components/Header/index.js +20 -0
  17. package/src/components/Image/index.js +63 -0
  18. package/src/components/IncDecField/index.js +35 -0
  19. package/src/components/InfiniteScroll/index.js +150 -0
  20. package/src/components/ListItem/index.js +81 -0
  21. package/src/components/Mapper/index.js +12 -0
  22. package/src/components/Modal/index.js +87 -0
  23. package/src/components/Notification/index.js +69 -0
  24. package/src/components/OverflowImages/index.js +38 -0
  25. package/src/components/Popover/index.js +109 -0
  26. package/src/components/Rate/index.js +33 -0
  27. package/src/components/Section/index.js +26 -0
  28. package/src/components/Selectfield/index.js +63 -0
  29. package/src/components/Show/index.js +15 -0
  30. package/src/components/Tag/index.js +67 -0
  31. package/src/components/TextListField/index.js +85 -0
  32. package/src/components/Textfield/index.js +51 -0
  33. package/src/components/ThreeDot/index.js +22 -0
  34. package/src/components/Upload/index.js +14 -0
  35. package/src/css/index.css +110 -0
  36. package/src/index.js +32 -0
  37. package/src/utils/styles.js +116 -0
@@ -0,0 +1,1566 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React$1 = require('react');
6
+ var useUtils = require('@reactivers/use-utils');
7
+ var reactColor = require('react-color');
8
+ var rcFieldForm = require('rc-field-form');
9
+ var reactFlexboxGrid = require('react-flexbox-grid');
10
+ var reactDom = require('react-dom');
11
+ require('rc-notification/assets/index.css');
12
+ var Notification = require('rc-notification');
13
+ var UUpload = require('rc-upload');
14
+
15
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
+
17
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
18
+ var rcFieldForm__default = /*#__PURE__*/_interopDefaultLegacy(rcFieldForm);
19
+ var Notification__default = /*#__PURE__*/_interopDefaultLegacy(Notification);
20
+ var UUpload__default = /*#__PURE__*/_interopDefaultLegacy(UUpload);
21
+
22
+ const Badge = props => {
23
+ const {
24
+ title,
25
+ children
26
+ } = props;
27
+ return /*#__PURE__*/React__default["default"].createElement("div", {
28
+ style: {
29
+ position: 'relative'
30
+ }
31
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
32
+ style: {
33
+ position: 'absolute',
34
+ right: 0,
35
+ top: 0,
36
+ borderRadius: 10,
37
+ backgroundColor: '#eee'
38
+ }
39
+ }, title), children);
40
+ };
41
+
42
+ const appStyles = {
43
+ stretchRow: {
44
+ display: 'flex',
45
+ alignItems: 'stretch',
46
+ flexFlow: 'row wrap'
47
+ },
48
+ defaultShadow: {
49
+ boxShadow: "0 0 5px -2.75px black"
50
+ },
51
+ cardBorderRadius: {
52
+ borderBottomLeftRadius: 20,
53
+ borderTopRightRadius: 20,
54
+ borderBottomRightRadius: 20
55
+ },
56
+ borderBottom: {
57
+ borderBottomWidth: 1,
58
+ borderBottomColor: '#eee'
59
+ },
60
+ center: {
61
+ display: "flex",
62
+ justifyContent: "center",
63
+ alignItems: 'center',
64
+ flexShrink: 0
65
+ },
66
+ centerInColumn: {
67
+ display: "flex",
68
+ justifyContent: "center",
69
+ alignItems: 'center',
70
+ flexDirection: 'column'
71
+ },
72
+ secondaryText: {
73
+ color: '#aaa'
74
+ },
75
+ imageStyle: {
76
+ height: "100%",
77
+ width: '100%',
78
+ borderRadius: 20,
79
+ resizeMode: 'contain'
80
+ },
81
+ listHeader: {
82
+ fontSize: 18,
83
+ fontWeight: 'bold'
84
+ },
85
+ spreadHorizontally: {
86
+ display: 'flex',
87
+ flexDirection: 'row',
88
+ justifyContent: 'space-between',
89
+ alignItems: 'center'
90
+ },
91
+ paddingHorizontal: value => ({
92
+ paddingLeft: value,
93
+ paddingRight: value
94
+ }),
95
+ paddingVertical: value => ({
96
+ paddingTop: value,
97
+ paddingBottom: value
98
+ }),
99
+ marginHorizontal: value => ({
100
+ marginLeft: value,
101
+ marginRight: value
102
+ }),
103
+ marginVertical: value => ({
104
+ marginTop: value,
105
+ marginBottom: value
106
+ }),
107
+ row: {
108
+ display: 'flex',
109
+ flexDirection: 'row'
110
+ },
111
+ card: {
112
+ backgroundColor: 'white'
113
+ },
114
+ grid: {
115
+ display: 'flex',
116
+ flexDirection: 'row',
117
+ flexWrap: 'wrap',
118
+ flexShrink: 'initial'
119
+ },
120
+ cardTitle: {
121
+ fontSize: 24,
122
+ fontWeight: 'bold',
123
+ color: 'black'
124
+ },
125
+ cardSubtitle: {
126
+ marginTop: 8,
127
+ marginBottom: 8,
128
+ fontSize: 14,
129
+ fontWeight: '300'
130
+ },
131
+ rounded: size => ({
132
+ width: size,
133
+ height: size,
134
+ borderRadius: size * 2
135
+ }),
136
+ roundedImage: {
137
+ width: '100%',
138
+ objectFit: "cover",
139
+ borderRadius: "50%"
140
+ },
141
+ threeDot: {
142
+ whiteSpace: 'nowrap',
143
+ width: '100%',
144
+ display: 'inline-block',
145
+ textOverflow: 'ellipsis',
146
+ overflow: 'hidden'
147
+ },
148
+ toolTip: {
149
+ backgroundColor: 'rgba(0,0,0,0.7)',
150
+ color: 'white',
151
+ padding: "2px 6px",
152
+ borderRadius: 10
153
+ }
154
+ };
155
+
156
+ const Show = props => {
157
+ const {
158
+ condition,
159
+ willUnmount,
160
+ children
161
+ } = props;
162
+ React$1.useEffect(() => {
163
+ return willUnmount;
164
+ }, [willUnmount]);
165
+ if (condition) return children;
166
+ return null;
167
+ };
168
+
169
+ const Button = props => {
170
+ const {
171
+ style,
172
+ icon,
173
+ title,
174
+ className: _className,
175
+ iconSize: _iconSize,
176
+ onClick: _onClick,
177
+ htmlType: _htmlType,
178
+ children
179
+ } = props;
180
+ const iconSize = useUtils.coalasce(_iconSize, 32);
181
+ const htmlType = useUtils.coalasce(_htmlType, "button");
182
+ const iconButton = !children && !title;
183
+ let className = `no-select `;
184
+ const onClick = React$1.useCallback(e => {
185
+ if (htmlType !== 'submit') e.preventDefault();
186
+ if (_onClick) _onClick(e);
187
+ }, [htmlType, _onClick]);
188
+ if (_className) className += ` ${_className || ""}`;
189
+ return /*#__PURE__*/React.createElement("button", {
190
+ style: {
191
+ justifyContent: 'center',
192
+ alignItems: 'center',
193
+ width: useUtils.takeIf(iconButton, iconSize),
194
+ minWidth: useUtils.takeIf(iconButton, iconSize),
195
+ height: useUtils.takeIf(iconButton, iconSize),
196
+ minHeight: useUtils.takeIf(iconButton, iconSize),
197
+ borderRadius: useUtils.takeIf(iconButton, "50%"),
198
+ ...(style || {})
199
+ },
200
+ type: htmlType,
201
+ onClick: onClick,
202
+ className: className
203
+ }, /*#__PURE__*/React.createElement(Show, {
204
+ condition: icon
205
+ }, /*#__PURE__*/React.createElement("div", {
206
+ style: {
207
+ marginRight: useUtils.takeIf(!iconButton, 8),
208
+ fontSize: useUtils.takeIf(iconButton, 18, 12),
209
+ width: useUtils.takeIf(iconButton, "100%", 12),
210
+ height: useUtils.takeIf(iconButton, "100%", 12),
211
+ ...appStyles.center
212
+ }
213
+ }, icon)), /*#__PURE__*/React.createElement("div", null, children || title));
214
+ };
215
+
216
+ const ListItem = props => {
217
+ const {
218
+ style,
219
+ avatar,
220
+ title,
221
+ lastItem,
222
+ titleRenderer,
223
+ description,
224
+ className,
225
+ titleStyle,
226
+ subtitleStyle,
227
+ titleContainerStyle,
228
+ onClick,
229
+ onTitleClick,
230
+ subtitle,
231
+ subtitleRenderer,
232
+ headerContainerStyle,
233
+ avatarContainerStyle,
234
+ selected,
235
+ children
236
+ } = props;
237
+ const borderBottom = useUtils.takeIf(lastItem, '1px solid #eee');
238
+ const titleContainerClassName = useUtils.takeIf(onTitleClick, "clickable", "");
239
+ return /*#__PURE__*/React.createElement("div", {
240
+ style: {
241
+ borderBottom,
242
+ padding: 4,
243
+ ...(style || {})
244
+ },
245
+ className: className,
246
+ onClick: onClick
247
+ }, /*#__PURE__*/React.createElement("div", {
248
+ style: {
249
+ display: "flex",
250
+ alignItems: 'center',
251
+ ...(headerContainerStyle || {})
252
+ }
253
+ }, /*#__PURE__*/React.createElement(Show, {
254
+ condition: avatar
255
+ }, /*#__PURE__*/React.createElement("div", {
256
+ style: {
257
+ display: 'flex',
258
+ justifyContent: 'center',
259
+ marginRight: useUtils.takeIf(!!title || !!titleRenderer, 8, 0),
260
+ ...(avatarContainerStyle || {})
261
+ }
262
+ }, avatar)), /*#__PURE__*/React.createElement("div", {
263
+ style: {
264
+ width: '100%',
265
+ padding: 4,
266
+ ...(titleContainerStyle || {})
267
+ },
268
+ onClick: onTitleClick,
269
+ className: titleContainerClassName
270
+ }, /*#__PURE__*/React.createElement(Show, {
271
+ condition: titleRenderer
272
+ }, titleRenderer), /*#__PURE__*/React.createElement(Show, {
273
+ condition: title
274
+ }, /*#__PURE__*/React.createElement("div", {
275
+ style: {
276
+ margin: 0,
277
+ color: useUtils.takeIf(selected, "#1890ff"),
278
+ ...(titleStyle || {})
279
+ }
280
+ }, title)), /*#__PURE__*/React.createElement(Show, {
281
+ condition: subtitle
282
+ }, /*#__PURE__*/React.createElement("div", {
283
+ style: {
284
+ margin: 0,
285
+ fontSize: 10,
286
+ color: 'black',
287
+ ...(subtitleStyle || {})
288
+ }
289
+ }, subtitle)), /*#__PURE__*/React.createElement(Show, {
290
+ condition: subtitleRenderer
291
+ }, subtitleRenderer)), /*#__PURE__*/React.createElement(Show, {
292
+ condition: description
293
+ }, description)), children);
294
+ };
295
+
296
+ const Card = props => {
297
+ const {
298
+ style,
299
+ avatar,
300
+ title,
301
+ titleRenderer,
302
+ titleStyle,
303
+ headerStyle,
304
+ titleContainerStyle,
305
+ description,
306
+ onHeaderClick,
307
+ subtitle,
308
+ onTitleClick,
309
+ className,
310
+ cardStyle,
311
+ childrenContainerStyle,
312
+ children
313
+ } = props;
314
+ return /*#__PURE__*/React__default["default"].createElement("div", {
315
+ style: {
316
+ borderRadius: 10,
317
+ padding: 16,
318
+ ...(style || {})
319
+ },
320
+ className: className
321
+ }, /*#__PURE__*/React__default["default"].createElement(Show, {
322
+ condition: avatar || title || titleRenderer || description || subtitle
323
+ }, /*#__PURE__*/React__default["default"].createElement(ListItem, {
324
+ avatar: avatar,
325
+ title: title,
326
+ titleRenderer: titleRenderer,
327
+ style: {
328
+ margin: 0,
329
+ padding: 0,
330
+ ...(titleContainerStyle || {})
331
+ },
332
+ titleContainerStyle: headerStyle,
333
+ titleStyle: {
334
+ fontSize: 18,
335
+ ...(titleStyle || {})
336
+ },
337
+ description: description,
338
+ subtitle: subtitle,
339
+ onTitleClick: onTitleClick,
340
+ onClick: onHeaderClick
341
+ })), /*#__PURE__*/React__default["default"].createElement(Show, {
342
+ condition: children
343
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
344
+ style: { ...appStyles.card,
345
+ ...(cardStyle || {})
346
+ }
347
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
348
+ style: { ...(childrenContainerStyle || {})
349
+ }
350
+ }, children))));
351
+ };
352
+
353
+ const styles = {
354
+ popover: {
355
+ position: 'absolute',
356
+ zIndex: '2'
357
+ },
358
+ cover: {
359
+ position: 'fixed',
360
+ top: '0px',
361
+ right: '0px',
362
+ bottom: '0px',
363
+ left: '0px',
364
+ zIndex: 1
365
+ }
366
+ };
367
+
368
+ const Popover = props => {
369
+ const {
370
+ overlay,
371
+ trigger: _trigger,
372
+ alignment: _alignment,
373
+ children
374
+ } = props;
375
+ const trigger = useUtils.coalasce(_trigger, "click");
376
+ const alignment = useUtils.coalasce(_alignment, "bottom");
377
+ const target = React$1.useRef(null);
378
+ const [displayColorPicker, setDisplayColorPicker] = React$1.useState(false);
379
+ const [position, setPosition] = React$1.useState({});
380
+ const showPopover = React$1.useCallback(() => {
381
+ setDisplayColorPicker(true);
382
+
383
+ if (target.current) {
384
+ const {
385
+ left,
386
+ top,
387
+ bottom,
388
+ right,
389
+ height
390
+ } = target.current.getBoundingClientRect() || {};
391
+
392
+ switch (alignment) {
393
+ case "bottom":
394
+ setPosition({
395
+ left,
396
+ top: bottom
397
+ });
398
+ break;
399
+
400
+ case "top":
401
+ setPosition({
402
+ left,
403
+ bottom: top
404
+ });
405
+ break;
406
+
407
+ case "left":
408
+ setPosition({
409
+ right: left,
410
+ top: top
411
+ });
412
+ break;
413
+
414
+ case "right":
415
+ setPosition({
416
+ left: right,
417
+ top: top
418
+ });
419
+ break;
420
+ }
421
+ }
422
+ }, [target]);
423
+ const showPopoverClick = React$1.useCallback(e => {
424
+ if (trigger === "click") showPopover();
425
+ }, [showPopover, trigger]);
426
+ const showPopoverMouseEnter = React$1.useCallback(e => {
427
+ if (trigger === "mouse") showPopover();
428
+ }, [showPopover, trigger]);
429
+ const stopPropagation = React$1.useCallback(e => {
430
+ e.stopPropagation();
431
+ }, []);
432
+ const closePopover = React$1.useCallback(() => {
433
+ setDisplayColorPicker(false);
434
+ }, []);
435
+ const closePopoverClick = React$1.useCallback(() => {
436
+ if (trigger === "click") closePopover();
437
+ }, [target, closePopover]);
438
+ const closePopoverMouseEnter = React$1.useCallback(() => {
439
+ if (trigger === "mouse") closePopover();
440
+ }, [target, closePopover]);
441
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
442
+ onClick: showPopoverClick,
443
+ onMouseEnter: showPopoverMouseEnter,
444
+ ref: target
445
+ }, children), /*#__PURE__*/React.createElement(Show, {
446
+ condition: displayColorPicker
447
+ }, /*#__PURE__*/React.createElement("div", {
448
+ style: styles.cover,
449
+ onClick: closePopoverClick,
450
+ onMouseEnter: closePopoverMouseEnter
451
+ }, /*#__PURE__*/React.createElement("div", {
452
+ style: { ...styles.popover,
453
+ ...position
454
+ },
455
+ onClick: stopPropagation,
456
+ onMouseEnter: stopPropagation
457
+ }, overlay))));
458
+ };
459
+
460
+ const ColorPicker = props => {
461
+ const {
462
+ label,
463
+ value: _value,
464
+ onChange: _onChange,
465
+ title,
466
+ inputClassName,
467
+ colorClassName,
468
+ children
469
+ } = props;
470
+ const onChange = React$1.useCallback(_ref => {
471
+ let {
472
+ hex
473
+ } = _ref;
474
+
475
+ _onChange(hex);
476
+ }, [_onChange]);
477
+ return /*#__PURE__*/React__default["default"].createElement(Popover, {
478
+ overlay: /*#__PURE__*/React__default["default"].createElement("div", {
479
+ style: {
480
+ backgroundColor: 'white',
481
+ padding: 16
482
+ }
483
+ }, /*#__PURE__*/React__default["default"].createElement("h3", null, title || "Renk"), /*#__PURE__*/React__default["default"].createElement(reactColor.SwatchesPicker, {
484
+ onChange: onChange
485
+ }))
486
+ }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Show, {
487
+ condition: children
488
+ }, children), /*#__PURE__*/React__default["default"].createElement(Show, {
489
+ condition: !children
490
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
491
+ className: inputClassName
492
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
493
+ style: {
494
+ fontWeight: 500
495
+ }
496
+ }, label), /*#__PURE__*/React__default["default"].createElement("div", {
497
+ className: colorClassName,
498
+ style: {
499
+ backgroundColor: _value,
500
+ height: 32,
501
+ width: '100%'
502
+ }
503
+ })))));
504
+ };
505
+
506
+ const EmptyResult = props => {
507
+ const {
508
+ icon,
509
+ title,
510
+ style,
511
+ iconClassName,
512
+ size: _size
513
+ } = props;
514
+ const size = _size || 120;
515
+ return /*#__PURE__*/React__default["default"].createElement("div", {
516
+ style: { ...(style || {})
517
+ }
518
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
519
+ style: {
520
+ width: '100%',
521
+ ...appStyles.centerInColumn
522
+ }
523
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
524
+ className: iconClassName,
525
+ style: { ...appStyles.center,
526
+ ...appStyles.rounded(size)
527
+ }
528
+ }, icon)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
529
+ style: {
530
+ textAlign: 'center',
531
+ fontWeight: '100',
532
+ fontSize: 24,
533
+ whiteSpace: 'pre-wrap',
534
+ color: 'black',
535
+ marginTop: 16
536
+ }
537
+ }, title)));
538
+ };
539
+
540
+ const FadeAnimation = props => {
541
+ const {
542
+ style,
543
+ type: _type,
544
+ duration: _duration,
545
+ delay: _delay,
546
+ onAnimationComplete,
547
+ children
548
+ } = props;
549
+ const duration = _duration || 100;
550
+ const delay = _delay || 0;
551
+ const type = _type || "in";
552
+ const [opacity, setOpacity] = React$1.useState(type === "in" ? 0 : 1);
553
+ const toValue = type === "in" ? 1 : 0;
554
+ React$1.useEffect(() => {
555
+ if (opacity === toValue && onAnimationComplete) {
556
+ setTimeout(() => {
557
+ onAnimationComplete();
558
+ }, duration + delay);
559
+ }
560
+ }, [opacity]);
561
+ React$1.useEffect(() => {
562
+ if (type === "in") {
563
+ setOpacity(toValue);
564
+ } else {
565
+ setOpacity(toValue);
566
+ }
567
+ }, [type]);
568
+ return /*#__PURE__*/React__default["default"].createElement("div", {
569
+ style: {
570
+ opacity: opacity,
571
+ transition: `${duration}`,
572
+ transitionDelay: delay,
573
+ ...(style || {})
574
+ }
575
+ }, children);
576
+ };
577
+
578
+ const Field = props => {
579
+ const {
580
+ style,
581
+ name,
582
+ children
583
+ } = props;
584
+ return /*#__PURE__*/React.createElement("div", {
585
+ style: {
586
+ width: '100%',
587
+ margin: '16px 0',
588
+ ...(style || {})
589
+ }
590
+ }, /*#__PURE__*/React.createElement(FieldOrChildren, {
591
+ name: name,
592
+ parentProps: props
593
+ }, children));
594
+ };
595
+
596
+ const FieldOrChildren = props => {
597
+ const {
598
+ name,
599
+ parentProps,
600
+ children
601
+ } = props;
602
+
603
+ if (useUtils.isNullOrUndefined(name)) {
604
+ return children;
605
+ }
606
+
607
+ return /*#__PURE__*/React.createElement(rcFieldForm.Field, parentProps);
608
+ };
609
+
610
+ const Header = props => {
611
+ const {
612
+ title,
613
+ titleRenderer,
614
+ style,
615
+ titleStyle,
616
+ rightContent
617
+ } = props;
618
+ return /*#__PURE__*/React__default["default"].createElement("div", {
619
+ style: { ...appStyles.row,
620
+ alignItems: 'center',
621
+ minHeight: 48,
622
+ ...(style || {})
623
+ }
624
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
625
+ style: {
626
+ flex: 1,
627
+ ...(titleStyle || {})
628
+ }
629
+ }, /*#__PURE__*/React__default["default"].createElement(Show, {
630
+ condition: titleRenderer
631
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
632
+ style: {
633
+ margin: 0,
634
+ ...appStyles.cardTitle
635
+ }
636
+ }, title))), rightContent);
637
+ };
638
+
639
+ function _extends() {
640
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
641
+ for (var i = 1; i < arguments.length; i++) {
642
+ var source = arguments[i];
643
+
644
+ for (var key in source) {
645
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
646
+ target[key] = source[key];
647
+ }
648
+ }
649
+ }
650
+
651
+ return target;
652
+ };
653
+ return _extends.apply(this, arguments);
654
+ }
655
+
656
+ const Image = props => {
657
+ const {
658
+ style,
659
+ className,
660
+ hidePlaceholder,
661
+ src,
662
+ alt,
663
+ onLoad: _onLoad,
664
+ placeholder: _placheholder,
665
+ size: _size,
666
+ ...rest
667
+ } = props;
668
+ const [loaded, setLoaded] = React$1.useState(false);
669
+ const size = useUtils.takeIf(_size, {
670
+ width: _size,
671
+ height: _size,
672
+ borderRadius: '50%'
673
+ }, {});
674
+ const placeholder = useUtils.coalasce(_placheholder, "P");
675
+ const fontSize = useUtils.takeIf(isNaN(_size / 2), 24, _size / 2);
676
+ const displayImage = useUtils.takeIf(loaded, undefined, 'none');
677
+ const onLoad = React$1.useCallback(() => {
678
+ setLoaded(true);
679
+ if (_onLoad) _onLoad();
680
+ }, [_onLoad]);
681
+ return /*#__PURE__*/React.createElement("div", {
682
+ style: { ...size,
683
+ ...appStyles.defaultShadow,
684
+ ...appStyles.center,
685
+ backgroundColor: "#eee",
686
+ overflow: "hidden",
687
+ ...style
688
+ },
689
+ className: className
690
+ }, /*#__PURE__*/React.createElement(Show, {
691
+ condition: src
692
+ }, /*#__PURE__*/React.createElement("img", _extends({
693
+ onLoad: onLoad,
694
+ src: src,
695
+ alt: alt,
696
+ style: { ...appStyles.roundedImage,
697
+ ...style,
698
+ display: displayImage
699
+ }
700
+ }, rest))), /*#__PURE__*/React.createElement(Show, {
701
+ condition: !loaded && !hidePlaceholder
702
+ }, /*#__PURE__*/React.createElement("div", {
703
+ style: {
704
+ width: '100%',
705
+ height: '100%',
706
+ ...appStyles.center
707
+ }
708
+ }, /*#__PURE__*/React.createElement("p", {
709
+ style: {
710
+ margin: 0,
711
+ fontSize,
712
+ fontWeight: 'bold',
713
+ padding: 4
714
+ }
715
+ }, placeholder))));
716
+ };
717
+
718
+ const IncDecField = props => {
719
+ const {
720
+ value,
721
+ onChange,
722
+ minusIcon,
723
+ plusIcon,
724
+ size: _size,
725
+ style,
726
+ minusDisabled,
727
+ plusDisabled,
728
+ children
729
+ } = props;
730
+ return /*#__PURE__*/React__default["default"].createElement("div", {
731
+ style: {
732
+ marginVertical: 16,
733
+ ...appStyles.row,
734
+ ...appStyles.spreadHorizontally,
735
+ ...(style || {})
736
+ }
737
+ }, /*#__PURE__*/React__default["default"].createElement(Button, {
738
+ icon: minusIcon,
739
+ disabled: minusDisabled,
740
+ type: "primary",
741
+ style: {
742
+ borderRadius: 10
743
+ },
744
+ onClick: () => onChange(value - 1)
745
+ }), children, /*#__PURE__*/React__default["default"].createElement(Button, {
746
+ icon: plusIcon,
747
+ disabled: plusDisabled,
748
+ type: "primary",
749
+ style: {
750
+ borderRadius: 10
751
+ },
752
+ onClick: () => onChange(value + 1)
753
+ }));
754
+ };
755
+
756
+ const Mapper = props => {
757
+ const {
758
+ items,
759
+ map,
760
+ children
761
+ } = props;
762
+ if (children) return (items || []).map((item, index) => {
763
+ return /*#__PURE__*/React$1.cloneElement(children, { ...item,
764
+ key: index
765
+ });
766
+ });
767
+ return (items || []).map(map);
768
+ };
769
+
770
+ const InfiniteScrollView = /*#__PURE__*/React$1.forwardRef((props, ref) => {
771
+ const {
772
+ style,
773
+ endpoint,
774
+ apiOptions: _apiOptions,
775
+ shimmer,
776
+ onDataChange,
777
+ render,
778
+ pageSize: _pageSize,
779
+ empty,
780
+ reload,
781
+ filterOptions,
782
+ onReload,
783
+ loadingRenderer
784
+ } = props;
785
+ const apiOptions = _apiOptions || {};
786
+ const {
787
+ method,
788
+ params,
789
+ onSuccess: apiOptionsOnSuccess
790
+ } = apiOptions;
791
+ const pageSize = _pageSize || 5;
792
+ const [page, setPage] = React$1.useState(1);
793
+ const [data, setData] = React$1.useState([]);
794
+ const [filter, setFilter] = React$1.useState({});
795
+ const reloaderRef = React$1.useRef(null);
796
+
797
+ const updateDataByIndex = (index, item) => {
798
+ setData(oldData => {
799
+ oldData[index] = item;
800
+ return oldData;
801
+ });
802
+ };
803
+
804
+ React$1.useImperativeHandle(ref, () => ({
805
+ updateDataByIndex
806
+ }));
807
+ const containerView = React$1.useRef(null);
808
+
809
+ const onSuccess = response => {
810
+ if (apiOptionsOnSuccess) {
811
+ apiOptionsOnSuccess(response);
812
+ }
813
+
814
+ setData(oldData => {
815
+ const newData = response.data.currentPage === 1 ? response.data.results || [] : [...oldData, ...(response.data.results || [])];
816
+ if (onDataChange) onDataChange(newData);
817
+ return newData;
818
+ });
819
+ };
820
+
821
+ const {
822
+ fetched,
823
+ firstTimeFetched,
824
+ load: apiLoad,
825
+ response
826
+ } = useUtils.useApi({
827
+ onSuccess
828
+ });
829
+ const {
830
+ pageCount
831
+ } = response.data || {};
832
+ const hasNextPage = (page || 1) < (pageCount || 2);
833
+ const load = React$1.useCallback(() => {
834
+ const hasNextPage = (page || 1) <= (pageCount || 2);
835
+ if (!hasNextPage) return;
836
+ const _endpoint = `${endpoint}/${page}/${pageSize}`;
837
+
838
+ const _method = method || (filterOptions ? "POST" : "GET");
839
+
840
+ const _params = params || (filterOptions ? filter : undefined);
841
+
842
+ apiLoad({
843
+ endpoint: _endpoint,
844
+ method: _method,
845
+ params: _params
846
+ });
847
+ }, [page, pageCount, endpoint, pageSize, method, params, filterOptions, apiLoad, filter]);
848
+ const nextPage = React$1.useCallback(() => {
849
+ if (fetched && hasNextPage) {
850
+ setPage(oldPage => oldPage + 1);
851
+ }
852
+ }, [fetched, hasNextPage]);
853
+ const onRefresh = React$1.useCallback(() => {
854
+ if (page === 1) {
855
+ load();
856
+ } else {
857
+ setPage(1);
858
+ }
859
+ }, [load, page]);
860
+ const shouldFetchNextPage = React$1.useCallback(() => {
861
+ if (!reloaderRef.current) return false;
862
+ const reloaderRects = reloaderRef.current.getClientRects();
863
+ const reloaderOffsetY = reloaderRects[0].top;
864
+ const shouldFetch = reloaderOffsetY - 20 <= window.innerHeight;
865
+ return shouldFetch;
866
+ }, [reloaderRef]);
867
+ const onScroll = React$1.useCallback(event => {
868
+ if (shouldFetchNextPage()) {
869
+ nextPage();
870
+ }
871
+ }, [shouldFetchNextPage, nextPage]);
872
+ React$1.useEffect(() => {
873
+ if (shouldFetchNextPage()) nextPage();
874
+ }, [shouldFetchNextPage, nextPage]);
875
+ React$1.useEffect(() => {
876
+ load();
877
+ }, [load]);
878
+ React$1.useEffect(() => {
879
+ const appLayout = document.getElementsByTagName("body")[0];
880
+ appLayout.onscroll = onScroll;
881
+ }, [onScroll]);
882
+ React$1.useEffect(() => {
883
+ if (reload) {
884
+ onRefresh();
885
+ onReload();
886
+ }
887
+ }, [onRefresh, onReload, reload]);
888
+
889
+ if (!firstTimeFetched) {
890
+ return shimmer ? /*#__PURE__*/React.createElement(props.shimmer, null) : /*#__PURE__*/React.createElement(props.loadingRenderer, null);
891
+ }
892
+
893
+ const hasData = !!data.length;
894
+ return /*#__PURE__*/React.createElement("div", {
895
+ style: {
896
+ padding: 16,
897
+ ...(style || {})
898
+ },
899
+ ref: containerView
900
+ }, /*#__PURE__*/React.createElement(Show, {
901
+ condition: hasData
902
+ }, /*#__PURE__*/React.createElement(Mapper, {
903
+ items: data,
904
+ map: (item, index) => render(item, index, {
905
+ page,
906
+ pageSize
907
+ })
908
+ }), /*#__PURE__*/React.createElement(Show, {
909
+ condition: hasNextPage
910
+ }, /*#__PURE__*/React.createElement("div", {
911
+ ref: reloaderRef
912
+ }, /*#__PURE__*/React.createElement(Show, {
913
+ condition: shimmer
914
+ }, /*#__PURE__*/React.createElement(props.shimmer, null)), /*#__PURE__*/React.createElement(Show, {
915
+ condition: loadingRenderer
916
+ }, /*#__PURE__*/React.createElement(props.loadingRenderer, {
917
+ style: {
918
+ marginTop: 16
919
+ }
920
+ }))))), /*#__PURE__*/React.createElement(Show, {
921
+ condition: !hasData
922
+ }, empty));
923
+ });
924
+
925
+ const ModalRenderer = props => {
926
+ const {
927
+ title,
928
+ children,
929
+ footer
930
+ } = props;
931
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
932
+ style: {
933
+ borderBottom: '1px solid #eee'
934
+ }
935
+ }, /*#__PURE__*/React.createElement("div", {
936
+ style: {
937
+ margin: 0,
938
+ padding: 16,
939
+ fontSize: "1.2em",
940
+ fontWeight: 500
941
+ }
942
+ }, title)), /*#__PURE__*/React.createElement("div", {
943
+ style: {
944
+ padding: 16
945
+ }
946
+ }, children), /*#__PURE__*/React.createElement(Show, {
947
+ condition: footer
948
+ }, /*#__PURE__*/React.createElement("div", {
949
+ style: {
950
+ borderTop: '1px solid #eee'
951
+ }
952
+ }, footer)));
953
+ };
954
+
955
+ const Overlay = props => {
956
+ const {
957
+ visible: _visible,
958
+ onClick: _onClick,
959
+ children
960
+ } = props;
961
+ const [visible, setVisible] = React$1.useState(_visible);
962
+ React$1.useEffect(() => {
963
+ setTimeout(() => {
964
+ setVisible(_visible);
965
+ }, 1);
966
+ }, [_visible]);
967
+ const onClick = React$1.useCallback(e => {
968
+ setVisible(false);
969
+ setTimeout(() => {
970
+ _onClick(e);
971
+ }, 400);
972
+ }, [_onClick]);
973
+ if (!_visible) return null;
974
+ return /*#__PURE__*/React.createElement("div", {
975
+ onClick: onClick,
976
+ style: {
977
+ position: 'fixed',
978
+ zIndex: 1,
979
+ backgroundColor: 'rgba(0,0,0,0.5)',
980
+ inset: 0,
981
+ width: '100%',
982
+ height: '100%',
983
+ transition: "0.4s",
984
+ opacity: useUtils.takeIf(visible, 1, 0),
985
+ display: useUtils.takeIf(visible, 'block', 'none'),
986
+ overflow: 'auto',
987
+ pointerEvents: useUtils.takeIf(visible, "initial", "none"),
988
+ ...appStyles.center
989
+ }
990
+ }, /*#__PURE__*/React.createElement(reactFlexboxGrid.Col, {
991
+ onClick: e => e.stopPropagation(),
992
+ xs: 10,
993
+ sm: 10,
994
+ md: 8,
995
+ lg: 8,
996
+ xl: 6,
997
+ style: {
998
+ backgroundColor: 'white',
999
+ position: 'absolute',
1000
+ width: useUtils.takeIf(visible, "100%", "0%"),
1001
+ overflow: 'auto',
1002
+ transition: '0.4s',
1003
+ maxHeight: useUtils.takeIf(visible, "90%", "0%")
1004
+ }
1005
+ }, children));
1006
+ };
1007
+
1008
+ const Modal = props => {
1009
+ const {
1010
+ visible,
1011
+ destroyOnClose,
1012
+ onClose,
1013
+ ...rest
1014
+ } = props;
1015
+ return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(Overlay, {
1016
+ onClick: onClose,
1017
+ visible: visible
1018
+ }, /*#__PURE__*/React.createElement(ModalRenderer, rest)), document.body);
1019
+ };
1020
+
1021
+ let notification = null;
1022
+ Notification__default["default"].newInstance({
1023
+ style: {
1024
+ right: 32,
1025
+ top: 32
1026
+ }
1027
+ }, _notification => {
1028
+ notification = _notification;
1029
+ });
1030
+ const notificationColors = {
1031
+ success: 'green',
1032
+ error: 'red',
1033
+ warning: 'orange',
1034
+ info: 'blue'
1035
+ };
1036
+
1037
+ const NotificationRenderer = props => {
1038
+ const {
1039
+ type,
1040
+ title,
1041
+ message,
1042
+ icon
1043
+ } = props;
1044
+ const color = notificationColors[type];
1045
+ return /*#__PURE__*/React__default["default"].createElement(ListItem, {
1046
+ style: {
1047
+ borderLeft: `5px solid ${color}`,
1048
+ minWidth: 250,
1049
+ padding: 8
1050
+ },
1051
+ avatar: icon,
1052
+ avatarContainerStyle: {
1053
+ color: notificationColors[type],
1054
+ fontSize: 20,
1055
+ marginRight: 4
1056
+ },
1057
+ titleStyle: {
1058
+ fontWeight: 'bold'
1059
+ },
1060
+ title: title
1061
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
1062
+ style: {
1063
+ marginLeft: 28,
1064
+ fontSize: 12
1065
+ }
1066
+ }, message));
1067
+ };
1068
+
1069
+ const notificationPusher = props => {
1070
+ const {
1071
+ duration,
1072
+ title,
1073
+ message,
1074
+ icon,
1075
+ type,
1076
+ ...rest
1077
+ } = props;
1078
+ notification.notice({
1079
+ duration: duration || 5,
1080
+ content: /*#__PURE__*/React__default["default"].createElement(NotificationRenderer, {
1081
+ title: title,
1082
+ message: message,
1083
+ type: type,
1084
+ icon: icon
1085
+ }),
1086
+ style: {
1087
+ padding: 0
1088
+ },
1089
+ ...rest
1090
+ });
1091
+ };
1092
+
1093
+ notification.success = props => {
1094
+ notificationPusher({ ...props,
1095
+ type: "success"
1096
+ });
1097
+ };
1098
+
1099
+ notification.error = props => {
1100
+ notificationPusher({ ...props,
1101
+ type: "error"
1102
+ });
1103
+ };
1104
+
1105
+ notification.warning = props => {
1106
+ notificationPusher({ ...props,
1107
+ type: "warning"
1108
+ });
1109
+ };
1110
+
1111
+ notification.info = props => {
1112
+ notificationPusher({ ...props,
1113
+ type: "info"
1114
+ });
1115
+ };
1116
+
1117
+ var notification$1 = notification;
1118
+
1119
+ const OverflowImages = props => {
1120
+ const {
1121
+ images,
1122
+ maxCount: _maxCount,
1123
+ size
1124
+ } = props;
1125
+ const maxCount = _maxCount || 3;
1126
+ const overflowItemsCount = images.length - maxCount;
1127
+ const count = useUtils.takeIf(overflowItemsCount > 0, `+${overflowItemsCount}`);
1128
+ return /*#__PURE__*/React.createElement("div", {
1129
+ style: { ...appStyles.center,
1130
+ flexDirection: 'column',
1131
+ marginRight: 8
1132
+ }
1133
+ }, /*#__PURE__*/React.createElement(Badge, {
1134
+ title: count
1135
+ }, /*#__PURE__*/React.createElement("div", {
1136
+ style: { ...appStyles.center
1137
+ }
1138
+ }, /*#__PURE__*/React.createElement(Mapper, {
1139
+ items: images.filter((_, index) => index < maxCount)
1140
+ }, /*#__PURE__*/React.createElement(OverflowImage, {
1141
+ size: size
1142
+ })))));
1143
+ };
1144
+
1145
+ const OverflowImage = props => {
1146
+ const {
1147
+ src,
1148
+ index,
1149
+ size
1150
+ } = props;
1151
+ return /*#__PURE__*/React.createElement("div", {
1152
+ style: {
1153
+ border: '1px solid white',
1154
+ marginLeft: useUtils.takeIf(index, -32),
1155
+ borderRadius: size
1156
+ },
1157
+ key: index
1158
+ }, /*#__PURE__*/React.createElement(Image, {
1159
+ src: src,
1160
+ key: index,
1161
+ size: size
1162
+ }));
1163
+ };
1164
+
1165
+ const Rate = props => {
1166
+ const {
1167
+ value,
1168
+ total,
1169
+ size: _size,
1170
+ style
1171
+ } = props;
1172
+ const [stars, setStars] = React$1.useState([]);
1173
+ const size = _size || 24;
1174
+ React$1.useEffect(() => {
1175
+ const _stars = Array(total || 5).fill(0).map((i, index) => index < value ? 1 : 0);
1176
+
1177
+ setStars(_stars);
1178
+ }, [total, value]);
1179
+ return /*#__PURE__*/React__default["default"].createElement("div", {
1180
+ style: { ...appStyles.center,
1181
+ ...appStyles.grid,
1182
+ ...(style || {})
1183
+ }
1184
+ }, stars.map((i, index) => {
1185
+ return /*#__PURE__*/React__default["default"].createElement("div", {
1186
+ style: {
1187
+ margin: 4
1188
+ },
1189
+ key: index
1190
+ }, /*#__PURE__*/React__default["default"].createElement(Show, {
1191
+ condition: i
1192
+ }, /*#__PURE__*/React__default["default"].createElement(props.filledStarIcon, {
1193
+ style: {
1194
+ color: 'orange',
1195
+ fontSize: size
1196
+ }
1197
+ })), /*#__PURE__*/React__default["default"].createElement(Show, {
1198
+ condition: !i
1199
+ }, /*#__PURE__*/React__default["default"].createElement(props.emptyStarIcon, {
1200
+ style: {
1201
+ color: "orange",
1202
+ fontSize: size
1203
+ }
1204
+ })));
1205
+ }));
1206
+ };
1207
+
1208
+ const Section = props => {
1209
+ const {
1210
+ title,
1211
+ extra,
1212
+ className,
1213
+ style,
1214
+ children
1215
+ } = props;
1216
+ return /*#__PURE__*/React__default["default"].createElement("div", {
1217
+ className: className,
1218
+ style: {
1219
+ border: '1px solid #ddd',
1220
+ borderRadius: 20,
1221
+ padding: 16,
1222
+ margin: 8,
1223
+ height: '100%',
1224
+ ...(style || {})
1225
+ }
1226
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
1227
+ style: {
1228
+ display: 'flex',
1229
+ alignItems: 'center',
1230
+ justifyContent: 'space-between'
1231
+ }
1232
+ }, title ? /*#__PURE__*/React__default["default"].createElement("div", {
1233
+ style: {
1234
+ fontWeight: 'bold',
1235
+ fontSize: 18
1236
+ }
1237
+ }, title) : null, extra), children);
1238
+ };
1239
+
1240
+ const Selectfield = props => {
1241
+ const {
1242
+ className,
1243
+ label,
1244
+ items,
1245
+ value,
1246
+ descriptionKey: _descriptionKey,
1247
+ valueKey: _valueKey,
1248
+ onChange: _onChange,
1249
+ selectFieldClassName: _selectFieldClassName
1250
+ } = props;
1251
+ let selectFieldClassName = "select-field ";
1252
+ if (_selectFieldClassName) selectFieldClassName += _selectFieldClassName;
1253
+ const valueKey = useUtils.coalasce(_valueKey, "value");
1254
+ const descriptionKey = useUtils.coalasce(_descriptionKey, "title");
1255
+ const onChange = React$1.useCallback(e => {
1256
+ const selectedValueKey = e.target.value;
1257
+ const [selectedValue] = items.filter(i => i[valueKey] === selectedValueKey);
1258
+
1259
+ _onChange(selectedValue);
1260
+ }, [_onChange, items, valueKey]);
1261
+ return /*#__PURE__*/React.createElement("div", {
1262
+ className: className
1263
+ }, /*#__PURE__*/React.createElement(Show, {
1264
+ condition: label
1265
+ }, /*#__PURE__*/React.createElement("p", {
1266
+ style: {
1267
+ fontWeight: 'bold'
1268
+ }
1269
+ }, label)), /*#__PURE__*/React.createElement("select", {
1270
+ name: label,
1271
+ value: value || "",
1272
+ onChange: onChange,
1273
+ className: selectFieldClassName
1274
+ }, /*#__PURE__*/React.createElement(Mapper, {
1275
+ items: items
1276
+ }, /*#__PURE__*/React.createElement(SelectfieldOption, {
1277
+ valueKey: valueKey,
1278
+ descriptionKey: descriptionKey,
1279
+ value: value
1280
+ }))));
1281
+ };
1282
+
1283
+ const SelectfieldOption = props => {
1284
+ const {
1285
+ valueKey,
1286
+ value: _value,
1287
+ descriptionKey,
1288
+ ...rest
1289
+ } = props;
1290
+ const value = rest[valueKey];
1291
+ const description = rest[descriptionKey];
1292
+ return /*#__PURE__*/React.createElement("option", {
1293
+ value: value,
1294
+ selected: value === _value,
1295
+ className: "select-field-option"
1296
+ }, description);
1297
+ };
1298
+
1299
+ const Tag = props => {
1300
+ const {
1301
+ color: _color,
1302
+ className,
1303
+ description,
1304
+ generatedColor,
1305
+ type: _type,
1306
+ textStyle,
1307
+ style,
1308
+ onClick,
1309
+ onTextClick,
1310
+ closeIcon,
1311
+ onClear,
1312
+ closeButtonClassName,
1313
+ closeButtonStyle,
1314
+ children
1315
+ } = props;
1316
+ const type = _type || "outlined";
1317
+ const color = _color || (generatedColor ? useUtils.generatedColorFromString(description) : "#cccccc");
1318
+ const textColor = type === "filled" ? '#ffffff' : color || "";
1319
+ const backgroundColor = type === "filled" ? color : `${useUtils.changeColor(color, 150)}`;
1320
+ return /*#__PURE__*/React.createElement("div", {
1321
+ style: {
1322
+ padding: "8px 16px",
1323
+ borderRadius: 8,
1324
+ backgroundColor,
1325
+ maxWidth: 'calc(100% - 16px)',
1326
+ ...appStyles.center,
1327
+ ...(style || {})
1328
+ },
1329
+ className: `
1330
+ ${useUtils.takeIf(onClick, "clickable", "")}
1331
+ ${className || ""}
1332
+ `,
1333
+ onClick: onClick
1334
+ }, /*#__PURE__*/React.createElement("div", {
1335
+ className: useUtils.takeIf(onTextClick, "clickable", ""),
1336
+ style: {
1337
+ color: textColor,
1338
+ margin: 0,
1339
+ lineHeight: 1,
1340
+ width: '100%',
1341
+ ...(textStyle || {})
1342
+ },
1343
+ onClick: onTextClick
1344
+ }, children), /*#__PURE__*/React.createElement(Show, {
1345
+ condition: onClear
1346
+ }, /*#__PURE__*/React.createElement(Button, {
1347
+ icon: closeIcon,
1348
+ onClick: onClear,
1349
+ className: closeButtonClassName,
1350
+ style: {
1351
+ color: 'white',
1352
+ marginLeft: 8,
1353
+ ...(closeButtonStyle || {})
1354
+ }
1355
+ })));
1356
+ };
1357
+
1358
+ const Textfield = props => {
1359
+ const {
1360
+ containerClassName,
1361
+ className,
1362
+ label,
1363
+ prefix,
1364
+ suffix,
1365
+ value,
1366
+ onChange,
1367
+ onBlur,
1368
+ onPressEnter,
1369
+ ...rest
1370
+ } = props;
1371
+ const input = React$1.useRef(null);
1372
+ const focusInput = React$1.useCallback(() => {
1373
+ if (input.current) input.current.focus();
1374
+ }, [input]);
1375
+ const onKeyPress = React$1.useCallback(e => {
1376
+ if (["enter", "Enter"].indexOf(e.key) > -1) if (onPressEnter) onPressEnter(e);
1377
+ }, [onPressEnter]);
1378
+ return /*#__PURE__*/React__default["default"].createElement("div", {
1379
+ className: containerClassName,
1380
+ style: {
1381
+ width: '100%'
1382
+ }
1383
+ }, /*#__PURE__*/React__default["default"].createElement(Show, {
1384
+ condition: label
1385
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
1386
+ className: "no-select",
1387
+ style: {
1388
+ fontWeight: 500
1389
+ },
1390
+ onClick: focusInput
1391
+ }, label)), /*#__PURE__*/React__default["default"].createElement("div", {
1392
+ style: { ...appStyles.row,
1393
+ alignItems: 'center'
1394
+ }
1395
+ }, prefix, /*#__PURE__*/React__default["default"].createElement("input", _extends({
1396
+ className: `${className || ""} input`,
1397
+ style: {
1398
+ width: '100%'
1399
+ },
1400
+ value: value || "",
1401
+ ref: input,
1402
+ onChange: onChange,
1403
+ onBlur: onBlur,
1404
+ onKeyPress: onKeyPress
1405
+ }, rest)), suffix));
1406
+ };
1407
+
1408
+ const TextListField = props => {
1409
+ const {
1410
+ value: _value,
1411
+ onChange: _onChange,
1412
+ listContainerStyle,
1413
+ descriptionKey: _descriptionKey,
1414
+ valuesRenderer,
1415
+ textfieldContainerClassName,
1416
+ checkButton,
1417
+ label,
1418
+ checkIcon,
1419
+ valueTransformer
1420
+ } = props;
1421
+ const descriptionKey = React$1.useMemo(() => _descriptionKey || "name", [_descriptionKey]);
1422
+ const [value, setValue] = React$1.useState({});
1423
+ const values = React$1.useMemo(() => _value || [], [_value]);
1424
+ const onSave = React$1.useCallback(e => {
1425
+ if (e) e.preventDefault();
1426
+ const newValue = valueTransformer ? valueTransformer(value) : value;
1427
+ if (!newValue[descriptionKey]) return;
1428
+
1429
+ if (newValue.index !== undefined) {
1430
+ const {
1431
+ index
1432
+ } = newValue;
1433
+ delete newValue.index;
1434
+ values[index] = newValue;
1435
+
1436
+ _onChange([...values]);
1437
+ } else {
1438
+ _onChange([...values, newValue]);
1439
+ }
1440
+
1441
+ setValue({});
1442
+ }, [value, valueTransformer, values, _onChange, descriptionKey]);
1443
+ const onClear = React$1.useCallback(index => {
1444
+ values.splice(index, 1);
1445
+
1446
+ _onChange([...values]);
1447
+ }, [values, _onChange]);
1448
+ const commitChange = React$1.useCallback((index, _newValue) => {
1449
+ values[index] = valueTransformer ? valueTransformer(_newValue) : _newValue;
1450
+
1451
+ _onChange([...values]);
1452
+ }, [values, valueTransformer, _onChange]);
1453
+ const suffix = useUtils.takeIf(checkButton, checkButton({
1454
+ disabled: !value[descriptionKey],
1455
+ onClick: onSave
1456
+ }), /*#__PURE__*/React.createElement(Button, {
1457
+ icon: checkIcon,
1458
+ type: "primary",
1459
+ disabled: !value[descriptionKey],
1460
+ onClick: onSave
1461
+ }));
1462
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1463
+ style: { ...appStyles.grid,
1464
+ ...(listContainerStyle || {})
1465
+ }
1466
+ }, values.map((item, index) => valuesRenderer({
1467
+ item,
1468
+ index,
1469
+ onClear,
1470
+ setValue,
1471
+ onSave,
1472
+ onChange: commitChange
1473
+ }))), /*#__PURE__*/React.createElement("div", {
1474
+ style: { ...appStyles.row,
1475
+ marginTop: 8
1476
+ }
1477
+ }, /*#__PURE__*/React.createElement(Textfield, {
1478
+ value: value[descriptionKey],
1479
+ containerClassName: textfieldContainerClassName,
1480
+ label: label,
1481
+ onChange: e => setValue({ ...value,
1482
+ [descriptionKey]: e.target.value
1483
+ }),
1484
+ onPressEnter: onSave,
1485
+ onBlur: onSave,
1486
+ suffix: suffix
1487
+ })));
1488
+ };
1489
+
1490
+ const ThreeDot = props => {
1491
+ const {
1492
+ title,
1493
+ children
1494
+ } = props;
1495
+ return /*#__PURE__*/React__default["default"].createElement(Popover, {
1496
+ trigger: "mouse",
1497
+ alignment: "top",
1498
+ overlay: /*#__PURE__*/React__default["default"].createElement("div", {
1499
+ style: appStyles.toolTip
1500
+ }, title || children)
1501
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
1502
+ style: appStyles.threeDot
1503
+ }, children));
1504
+ };
1505
+
1506
+ const Upload = props => {
1507
+ const {
1508
+ style,
1509
+ ...rest
1510
+ } = props;
1511
+ return /*#__PURE__*/React__default["default"].createElement(UUpload__default["default"], _extends({
1512
+ style: {
1513
+ outline: 'none',
1514
+ ...(style || {})
1515
+ }
1516
+ }, rest));
1517
+ };
1518
+
1519
+ Object.defineProperty(exports, 'Form', {
1520
+ enumerable: true,
1521
+ get: function () { return rcFieldForm__default["default"]; }
1522
+ });
1523
+ Object.defineProperty(exports, 'useForm', {
1524
+ enumerable: true,
1525
+ get: function () { return rcFieldForm.useForm; }
1526
+ });
1527
+ Object.defineProperty(exports, 'Col', {
1528
+ enumerable: true,
1529
+ get: function () { return reactFlexboxGrid.Col; }
1530
+ });
1531
+ Object.defineProperty(exports, 'Grid', {
1532
+ enumerable: true,
1533
+ get: function () { return reactFlexboxGrid.Grid; }
1534
+ });
1535
+ Object.defineProperty(exports, 'Row', {
1536
+ enumerable: true,
1537
+ get: function () { return reactFlexboxGrid.Row; }
1538
+ });
1539
+ exports.Badge = Badge;
1540
+ exports.Button = Button;
1541
+ exports.Card = Card;
1542
+ exports.ColorPicker = ColorPicker;
1543
+ exports.EmptyResult = EmptyResult;
1544
+ exports.FadeAnimation = FadeAnimation;
1545
+ exports.Field = Field;
1546
+ exports.Header = Header;
1547
+ exports.Image = Image;
1548
+ exports.IncDecField = IncDecField;
1549
+ exports.InfiniteScroll = InfiniteScrollView;
1550
+ exports.ListItem = ListItem;
1551
+ exports.Mapper = Mapper;
1552
+ exports.Modal = Modal;
1553
+ exports.OverflowImages = OverflowImages;
1554
+ exports.Popover = Popover;
1555
+ exports.Rate = Rate;
1556
+ exports.Section = Section;
1557
+ exports.Selectfield = Selectfield;
1558
+ exports.Show = Show;
1559
+ exports.Tag = Tag;
1560
+ exports.TextListField = TextListField;
1561
+ exports.Textfield = Textfield;
1562
+ exports.ThreeDot = ThreeDot;
1563
+ exports.Upload = Upload;
1564
+ exports.appStyles = appStyles;
1565
+ exports.notification = notification$1;
1566
+ exports.notificationPusher = notificationPusher;