@lowdefy/blocks-loaders 4.0.0-alpha.7 → 4.0.0-alpha.8
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/blocks/IconSpinner/IconSpinner.js +15 -18
- package/dist/blocks/LogoSpinner/LogoSpinner.js +26 -34
- package/dist/blocks/Skeleton/Skeleton.js +1 -2
- package/dist/blocks/SkeletonAvatar/SkeletonAvatar.js +1 -2
- package/dist/blocks/SkeletonButton/SkeletonButton.js +1 -2
- package/dist/blocks/SkeletonInput/SkeletonInput.js +20 -26
- package/dist/blocks/SkeletonParagraph/SkeletonParagraph.js +17 -18
- package/dist/blocks/Spinner/Spinner.js +19 -26
- package/package.json +7 -7
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -30,7 +29,7 @@ const IconSpinner = ({ properties , methods })=>{
|
|
|
30
29
|
size = 24;
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
|
-
return(/*#__PURE__*/
|
|
32
|
+
return(/*#__PURE__*/ React.createElement("span", {
|
|
34
33
|
className: methods.makeCssClass([
|
|
35
34
|
{
|
|
36
35
|
height: size,
|
|
@@ -39,22 +38,20 @@ const IconSpinner = ({ properties , methods })=>{
|
|
|
39
38
|
justifyContent: 'center'
|
|
40
39
|
},
|
|
41
40
|
properties.style,
|
|
42
|
-
])
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
})
|
|
57
|
-
}));
|
|
41
|
+
])
|
|
42
|
+
}, /*#__PURE__*/ React.createElement("svg", {
|
|
43
|
+
viewBox: "0 0 1024 1024",
|
|
44
|
+
focusable: "false",
|
|
45
|
+
"data-icon": "loading-3-quarters",
|
|
46
|
+
width: size,
|
|
47
|
+
height: size,
|
|
48
|
+
fill: "currentColor",
|
|
49
|
+
"aria-hidden": "true",
|
|
50
|
+
className: "icon-spinner"
|
|
51
|
+
}, /*#__PURE__*/ React.createElement("path", {
|
|
52
|
+
fill: "#bfbfbf",
|
|
53
|
+
d: "M512 1024c-69.1 0-136.2-13.5-199.3-40.2C251.7 958 197 921 150 874c-47-47-84-101.7-109.8-162.7C13.5 648.2 0 581.1 0 512c0-19.9 16.1-36 36-36s36 16.1 36 36c0 59.4 11.6 117 34.6 171.3 22.2 52.4 53.9 99.5 94.3 139.9 40.4 40.4 87.5 72.2 139.9 94.3C395 940.4 452.6 952 512 952c59.4 0 117-11.6 171.3-34.6 52.4-22.2 99.5-53.9 139.9-94.3 40.4-40.4 72.2-87.5 94.3-139.9C940.4 629 952 571.4 952 512c0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.2C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3s-13.5 136.2-40.2 199.3C958 772.3 921 827 874 874c-47 47-101.8 83.9-162.7 109.7-63.1 26.8-130.2 40.3-199.3 40.3z"
|
|
54
|
+
}))));
|
|
58
55
|
};
|
|
59
56
|
IconSpinner.defaultProps = blockDefaultProps;
|
|
60
57
|
IconSpinner.meta = {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -14,42 +13,35 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
14
13
|
See the License for the specific language governing permissions and
|
|
15
14
|
limitations under the License.
|
|
16
15
|
*/ import React from 'react';
|
|
17
|
-
const LogoSpinner = ({ color , barColor })=>/*#__PURE__*/
|
|
16
|
+
const LogoSpinner = ({ color , barColor })=>/*#__PURE__*/ React.createElement("svg", {
|
|
18
17
|
width: "100%",
|
|
19
18
|
height: "100%",
|
|
20
19
|
viewBox: "0 0 94 91",
|
|
21
|
-
version: "1.1"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
style: {
|
|
47
|
-
fill: barColor || '#f1f1f1'
|
|
48
|
-
}
|
|
49
|
-
})
|
|
50
|
-
]
|
|
51
|
-
})
|
|
52
|
-
})
|
|
20
|
+
version: "1.1"
|
|
21
|
+
}, /*#__PURE__*/ React.createElement("g", null, /*#__PURE__*/ React.createElement("path", {
|
|
22
|
+
d: "M94,18.634c0,-10.284 -8.35,-18.634 -18.634,-18.634l-56.732,0c-10.284,0 -18.634,8.35 -18.634,18.634l0,53.732c0,10.284 8.35,18.634 18.634,18.634l56.732,0c10.284,0 18.634,-8.35 18.634,-18.634l0,-53.732Z",
|
|
23
|
+
style: {
|
|
24
|
+
fill: color || '#bfbfbf'
|
|
25
|
+
}
|
|
26
|
+
}), /*#__PURE__*/ React.createElement("rect", {
|
|
27
|
+
className: "loading-bar",
|
|
28
|
+
x: 16,
|
|
29
|
+
y: 15,
|
|
30
|
+
width: 30,
|
|
31
|
+
height: 59,
|
|
32
|
+
style: {
|
|
33
|
+
fill: barColor || '#f1f1f1'
|
|
34
|
+
}
|
|
35
|
+
}), /*#__PURE__*/ React.createElement("rect", {
|
|
36
|
+
className: "loading-bar-sm",
|
|
37
|
+
x: 53,
|
|
38
|
+
y: 52,
|
|
39
|
+
width: 25,
|
|
40
|
+
height: 25,
|
|
41
|
+
style: {
|
|
42
|
+
fill: barColor || '#f1f1f1'
|
|
43
|
+
}
|
|
44
|
+
})))
|
|
53
45
|
;
|
|
54
46
|
LogoSpinner.meta = {
|
|
55
47
|
icons: [],
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -16,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
16
15
|
*/ import React from 'react';
|
|
17
16
|
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
18
17
|
const Skeleton = ({ properties , methods })=>{
|
|
19
|
-
return(/*#__PURE__*/
|
|
18
|
+
return(/*#__PURE__*/ React.createElement("div", {
|
|
20
19
|
className: 'skeleton ' + methods.makeCssClass(properties.style),
|
|
21
20
|
style: {
|
|
22
21
|
width: properties.width || '100%',
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -31,7 +30,7 @@ const SkeletonAvatar = ({ properties , methods })=>{
|
|
|
31
30
|
size = 32;
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
|
-
return(/*#__PURE__*/
|
|
33
|
+
return(/*#__PURE__*/ React.createElement(Skeleton, {
|
|
35
34
|
methods: methods,
|
|
36
35
|
properties: {
|
|
37
36
|
style: {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -28,7 +27,7 @@ const SkeletonButton = ({ properties , methods })=>{
|
|
|
28
27
|
default:
|
|
29
28
|
height = 32;
|
|
30
29
|
}
|
|
31
|
-
return(/*#__PURE__*/
|
|
30
|
+
return(/*#__PURE__*/ React.createElement(Skeleton, {
|
|
32
31
|
methods: methods,
|
|
33
32
|
properties: {
|
|
34
33
|
style: {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -28,31 +27,26 @@ const SkeletonInput = ({ properties , methods })=>{
|
|
|
28
27
|
default:
|
|
29
28
|
inputHeight = 32;
|
|
30
29
|
}
|
|
31
|
-
return(/*#__PURE__*/
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
style: properties.inputStyle || {}
|
|
52
|
-
}
|
|
53
|
-
})
|
|
54
|
-
]
|
|
55
|
-
}));
|
|
30
|
+
return(/*#__PURE__*/ React.createElement("div", null, properties.label !== false && /*#__PURE__*/ React.createElement(Skeleton, {
|
|
31
|
+
methods: methods,
|
|
32
|
+
properties: {
|
|
33
|
+
width: properties.labelWidth || properties.width || '30%',
|
|
34
|
+
height: properties.labelHeight || 20,
|
|
35
|
+
style: {
|
|
36
|
+
...{
|
|
37
|
+
marginBottom: 10
|
|
38
|
+
},
|
|
39
|
+
...properties.labelStyle || {}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}), /*#__PURE__*/ React.createElement(Skeleton, {
|
|
43
|
+
methods: methods,
|
|
44
|
+
properties: {
|
|
45
|
+
width: properties.width || '100%',
|
|
46
|
+
height: properties.inputHeight || inputHeight,
|
|
47
|
+
style: properties.inputStyle || {}
|
|
48
|
+
}
|
|
49
|
+
})));
|
|
56
50
|
};
|
|
57
51
|
SkeletonInput.defaultProps = blockDefaultProps;
|
|
58
52
|
SkeletonInput.meta = {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -20,25 +19,25 @@ const SkeletonParagraph = ({ properties , methods })=>{
|
|
|
20
19
|
const lines = [
|
|
21
20
|
...Array(properties.lines || 4).keys()
|
|
22
21
|
];
|
|
23
|
-
return(/*#__PURE__*/
|
|
22
|
+
return(/*#__PURE__*/ React.createElement("div", {
|
|
24
23
|
style: {
|
|
25
24
|
width: properties.width || '100%'
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
)
|
|
41
|
-
|
|
25
|
+
}
|
|
26
|
+
}, lines.map((key)=>/*#__PURE__*/ React.createElement(Skeleton, {
|
|
27
|
+
key: key,
|
|
28
|
+
methods: methods,
|
|
29
|
+
properties: {
|
|
30
|
+
...{
|
|
31
|
+
height: '1.25rem',
|
|
32
|
+
width: key === lines.length - 1 && key !== 0 ? '40%' : '100%',
|
|
33
|
+
style: {
|
|
34
|
+
marginBottom: '1rem'
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
...properties.style || {}
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
)));
|
|
42
41
|
};
|
|
43
42
|
SkeletonParagraph.defaultProps = blockDefaultProps;
|
|
44
43
|
SkeletonParagraph.meta = {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
1
|
/*
|
|
3
2
|
Copyright 2020-2021 Lowdefy, Inc
|
|
4
3
|
|
|
@@ -17,38 +16,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
17
16
|
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
18
17
|
import LogoSpinner from '../LogoSpinner/LogoSpinner.js';
|
|
19
18
|
const Spinner = ({ properties , methods })=>{
|
|
20
|
-
return(/*#__PURE__*/
|
|
19
|
+
return(/*#__PURE__*/ React.createElement("div", {
|
|
21
20
|
className: methods.makeCssClass({
|
|
22
21
|
height: properties.height || '100%',
|
|
23
22
|
display: 'flex',
|
|
24
23
|
alignItems: 'center',
|
|
25
24
|
justifyContent: 'center',
|
|
26
25
|
background: properties.shaded === true && '#f1f1f1'
|
|
27
|
-
}),
|
|
28
|
-
children: /*#__PURE__*/ _jsxs("div", {
|
|
29
|
-
style: {
|
|
30
|
-
width: properties.size || 50,
|
|
31
|
-
margin: 'auto',
|
|
32
|
-
height: properties.size || 50
|
|
33
|
-
},
|
|
34
|
-
children: [
|
|
35
|
-
/*#__PURE__*/ _jsx(LogoSpinner, {
|
|
36
|
-
color: properties.color,
|
|
37
|
-
barColor: properties.barColor || (properties.shaded === true ? '#f1f1f1' : '#fff')
|
|
38
|
-
}),
|
|
39
|
-
/*#__PURE__*/ _jsx("div", {
|
|
40
|
-
className: methods.makeCssClass({
|
|
41
|
-
textAlign: 'center',
|
|
42
|
-
color: '#bfbfbf',
|
|
43
|
-
fontSize: 12,
|
|
44
|
-
paddingTop: 2,
|
|
45
|
-
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'
|
|
46
|
-
}),
|
|
47
|
-
children: "Lowdefy"
|
|
48
|
-
})
|
|
49
|
-
]
|
|
50
26
|
})
|
|
51
|
-
}
|
|
27
|
+
}, /*#__PURE__*/ React.createElement("div", {
|
|
28
|
+
style: {
|
|
29
|
+
width: properties.size || 50,
|
|
30
|
+
margin: 'auto',
|
|
31
|
+
height: properties.size || 50
|
|
32
|
+
}
|
|
33
|
+
}, /*#__PURE__*/ React.createElement(LogoSpinner, {
|
|
34
|
+
color: properties.color,
|
|
35
|
+
barColor: properties.barColor || (properties.shaded === true ? '#f1f1f1' : '#fff')
|
|
36
|
+
}), /*#__PURE__*/ React.createElement("div", {
|
|
37
|
+
className: methods.makeCssClass({
|
|
38
|
+
textAlign: 'center',
|
|
39
|
+
color: '#bfbfbf',
|
|
40
|
+
fontSize: 12,
|
|
41
|
+
paddingTop: 2,
|
|
42
|
+
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"'
|
|
43
|
+
})
|
|
44
|
+
}, "Lowdefy"))));
|
|
52
45
|
};
|
|
53
46
|
Spinner.defaultProps = blockDefaultProps;
|
|
54
47
|
Spinner.meta = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-loaders",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.8",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Lowdefy loader blocks.",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -49,14 +49,14 @@
|
|
|
49
49
|
"test": "jest --coverage"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@lowdefy/block-utils": "4.0.0-alpha.
|
|
53
|
-
"@lowdefy/helpers": "4.0.0-alpha.
|
|
54
|
-
"react": "
|
|
55
|
-
"react-dom": "
|
|
52
|
+
"@lowdefy/block-utils": "4.0.0-alpha.8",
|
|
53
|
+
"@lowdefy/helpers": "4.0.0-alpha.8",
|
|
54
|
+
"react": "17.0.2",
|
|
55
|
+
"react-dom": "17.0.2"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@emotion/jest": "11.7.1",
|
|
59
|
-
"@lowdefy/block-dev": "4.0.0-alpha.
|
|
59
|
+
"@lowdefy/block-dev": "4.0.0-alpha.8",
|
|
60
60
|
"@swc/cli": "0.1.55",
|
|
61
61
|
"@swc/core": "1.2.135",
|
|
62
62
|
"@swc/jest": "0.2.17",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"publishConfig": {
|
|
72
72
|
"access": "public"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "9d56b83cf45e868afe3a1eeba750fe826eb74c8c"
|
|
75
75
|
}
|