@ntbjs/react-components 0.0.1-beta.45 → 0.0.1-beta.46
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.
|
@@ -6,7 +6,7 @@ var lodash = require('lodash');
|
|
|
6
6
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
7
7
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
8
8
|
var ActionButton = require('./ActionButton-9e502e55.js');
|
|
9
|
-
require('./Button-
|
|
9
|
+
require('./Button-88652184.js');
|
|
10
10
|
require('./Checkbox-25c75a7c.js');
|
|
11
11
|
require('./Radio-1521b33c.js');
|
|
12
12
|
require('./TextArea-a73b1729.js');
|
|
@@ -122,7 +122,7 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
|
|
|
122
122
|
var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n opacity: 1;\n transition: opacity .3s;\n}\n";
|
|
123
123
|
defaultTheme.styleInject(css_248z);
|
|
124
124
|
|
|
125
|
-
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
|
|
125
|
+
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
|
|
126
126
|
var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 100%;\n svg {\n width: 25%;\n }\n }\n"])), function (props) {
|
|
127
127
|
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
128
128
|
}, function (props) {
|
|
@@ -154,7 +154,7 @@ var OverlayInfoTopNote = styled__default["default"].div.attrs(defaultTheme.apply
|
|
|
154
154
|
});
|
|
155
155
|
var OverlayInfoTopFileTypeTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
|
|
156
156
|
var _props$assetTitle2;
|
|
157
|
-
return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
157
|
+
return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
|
|
158
158
|
});
|
|
159
159
|
var OverlayInfoTopNoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
160
160
|
return props.theme.primaryFontFamily;
|
|
@@ -528,47 +528,49 @@ var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(Re
|
|
|
528
528
|
});
|
|
529
529
|
}));
|
|
530
530
|
|
|
531
|
-
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
532
|
-
var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n margin: 0;\n ", "\n border: 1px solid;\n ", ";\n ", "\n box-sizing: border-box;\n text-decoration: none;\n"])), function (props) {
|
|
531
|
+
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
532
|
+
var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n margin: 0;\n ", "\n border: 1px solid;\n ", ";\n ", ";\n ", "\n box-sizing: border-box;\n text-decoration: none;\n"])), function (props) {
|
|
533
533
|
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
|
|
534
534
|
}, function (props) {
|
|
535
535
|
return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
|
|
536
536
|
}, function (props) {
|
|
537
|
-
return props.
|
|
537
|
+
return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
|
|
538
|
+
}, function (props) {
|
|
539
|
+
return props.extendedSelectMode && styled.css(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
|
|
538
540
|
});
|
|
539
|
-
var ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
541
|
+
var ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: ", "px;\n"])), function (props) {
|
|
540
542
|
return props.layout.height;
|
|
541
543
|
});
|
|
542
|
-
var Note = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
543
|
-
var NoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
544
|
+
var Note = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 9px 15px 7px;\n\n svg {\n max-width: 18px;\n max-height: 18px;\n width: auto;\n flex-shrink: 0;\n }\n"])));
|
|
545
|
+
var NoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n"])), function (props) {
|
|
544
546
|
return props.theme.secondaryFontFamily;
|
|
545
547
|
});
|
|
546
|
-
var Asset = styled__default["default"].div(
|
|
547
|
-
var AssetFigure = styled__default["default"].figure(
|
|
548
|
-
var Info = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
548
|
+
var Asset = styled__default["default"].div(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n padding-top: 35px;\n padding-left: 8px;\n padding-right: 8px;\n\n video {\n display: block;\n width: 100%;\n height: 200px;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 200px;\n svg {\n width: 25%;\n }\n }\n"])));
|
|
549
|
+
var AssetFigure = styled__default["default"].figure(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 200px;\n\n img {\n object-fit: contain;\n height: 100%;\n width: 100%;\n }\n"])));
|
|
550
|
+
var Info = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.7;\n padding: 15px 15px 5px;\n"])), function (props) {
|
|
549
551
|
return props.theme.primaryFontFamily;
|
|
550
552
|
});
|
|
551
|
-
var InfoTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
552
|
-
var InfoFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
553
|
-
var InfoDescription = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
554
|
-
var Bottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
555
|
-
var BottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
553
|
+
var InfoTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n margin-bottom: 4px;\n"])));
|
|
554
|
+
var InfoFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 18px;\n max-height: 18px;\n"])));
|
|
555
|
+
var InfoDescription = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
|
|
556
|
+
var Bottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-top: auto;\n padding: 0 10px 10px;\n"])));
|
|
557
|
+
var BottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
|
|
556
558
|
return props.selected ? 1 : 0;
|
|
557
559
|
}, function (props) {
|
|
558
560
|
return props.selected ? props.theme.getColor('orange-500') : 'inherit';
|
|
559
561
|
}, AssetGalleryGridCard$2);
|
|
560
|
-
var BottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
561
|
-
var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
562
|
+
var BottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), AssetGalleryGridCard$2);
|
|
563
|
+
var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
562
564
|
return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
|
|
563
565
|
});
|
|
564
|
-
var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
566
|
+
var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
|
|
565
567
|
return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
|
|
566
568
|
});
|
|
567
|
-
var OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
569
|
+
var OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
|
|
568
570
|
return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
|
|
569
571
|
});
|
|
570
|
-
var ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(
|
|
571
|
-
var Fragment = styled__default["default"].div(
|
|
572
|
+
var ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
|
|
573
|
+
var Fragment = styled__default["default"].div(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral([""])));
|
|
572
574
|
|
|
573
575
|
var _excluded$2 = ["component", "asset"],
|
|
574
576
|
_excluded2 = ["component", "className"];
|
|
@@ -40,10 +40,10 @@ var Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefault
|
|
|
40
40
|
var ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 7px;\n\n ", ";\n }\n\n ", "\n"])), function (props) {
|
|
41
41
|
return props.size === 'small' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
|
|
42
42
|
}, function (props) {
|
|
43
|
-
return props
|
|
43
|
+
return props.$loading && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
|
|
44
44
|
});
|
|
45
45
|
var LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
|
|
46
|
-
return props
|
|
46
|
+
return props.$loading && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
|
|
47
47
|
});
|
|
48
48
|
var LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
|
|
49
49
|
var LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
|
|
@@ -106,12 +106,13 @@ var Button = React__default["default"].forwardRef(function Button(_ref, forwarde
|
|
|
106
106
|
block: block,
|
|
107
107
|
size: size,
|
|
108
108
|
disabled: disabled,
|
|
109
|
-
className: className
|
|
109
|
+
className: className,
|
|
110
|
+
"aria-busy": disabled
|
|
110
111
|
}, props), React__default["default"].createElement(ButtonContent, {
|
|
111
|
-
loading: loadingState,
|
|
112
|
+
$loading: loadingState,
|
|
112
113
|
size: size
|
|
113
114
|
}, icon, children), React__default["default"].createElement(LoadingIndicator, {
|
|
114
|
-
loading: loadingState,
|
|
115
|
+
$loading: loadingState,
|
|
115
116
|
style: {
|
|
116
117
|
opacity: loadingState ? 1 : 0
|
|
117
118
|
}
|
package/inputs/Button/index.js
CHANGED
package/inputs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var ActionButton = require('../ActionButton-9e502e55.js');
|
|
6
|
-
var Button = require('../Button-
|
|
6
|
+
var Button = require('../Button-88652184.js');
|
|
7
7
|
var Checkbox = require('../Checkbox-25c75a7c.js');
|
|
8
8
|
var Radio = require('../Radio-1521b33c.js');
|
|
9
9
|
var TextArea = require('../TextArea-a73b1729.js');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var AssetGallery = require('../../AssetGallery-
|
|
3
|
+
var AssetGallery = require('../../AssetGallery-247242ac.js');
|
|
4
4
|
require('../../defaultTheme-d8298500.js');
|
|
5
5
|
require('styled-components');
|
|
6
6
|
require('react');
|
|
@@ -8,7 +8,7 @@ require('lodash');
|
|
|
8
8
|
require('resize-observer-polyfill');
|
|
9
9
|
require('react-lazy-load-image-component');
|
|
10
10
|
require('../../ActionButton-9e502e55.js');
|
|
11
|
-
require('../../Button-
|
|
11
|
+
require('../../Button-88652184.js');
|
|
12
12
|
require('../../Checkbox-25c75a7c.js');
|
|
13
13
|
require('nanoid');
|
|
14
14
|
require('../../Radio-1521b33c.js');
|
package/widgets/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var AssetGallery = require('../AssetGallery-
|
|
5
|
+
var AssetGallery = require('../AssetGallery-247242ac.js');
|
|
6
6
|
require('../defaultTheme-d8298500.js');
|
|
7
7
|
require('styled-components');
|
|
8
8
|
require('react');
|
|
@@ -10,7 +10,7 @@ require('lodash');
|
|
|
10
10
|
require('resize-observer-polyfill');
|
|
11
11
|
require('react-lazy-load-image-component');
|
|
12
12
|
require('../ActionButton-9e502e55.js');
|
|
13
|
-
require('../Button-
|
|
13
|
+
require('../Button-88652184.js');
|
|
14
14
|
require('../Checkbox-25c75a7c.js');
|
|
15
15
|
require('nanoid');
|
|
16
16
|
require('../Radio-1521b33c.js');
|