mirror/lowdefy
2
0
Fork 0
mirror of https://github.com/lowdefy/lowdefy.git synced 2025-02-23 14:39:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: init loadings

Browse Source
This commit is contained in:
Gervwyk 2020-10-14 16:10:07 +02:00
parent 13de81a17d
commit 137df72506
10 changed files with 138 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.pnp.js generated
View File

@ -3549,6 +3549,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["react-syntax-highlight", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:15.3.1"],
["react-test-renderer", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:17.0.0-rc.3"],
["style-loader", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:1.3.0"],
["svg-inline-loader", "npm:0.8.2"],
["webpack", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:5.1.0"],
["webpack-cli", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:3.3.12"],
["webpack-dev-server", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:3.11.0"],
@ -18796,6 +18797,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD",
}]
]],
["simple-html-tokenizer", [
["npm:0.1.1", {
"packageLocation": "./.yarn/cache/simple-html-tokenizer-npm-0.1.1-f6bfb99d29-46969af412.zip/node_modules/simple-html-tokenizer/",
"packageDependencies": [
["simple-html-tokenizer", "npm:0.1.1"]
],
"linkType": "HARD",
}]
]],
["sisteransi", [
["npm:1.0.5", {
"packageLocation": "./.yarn/cache/sisteransi-npm-1.0.5-af60cc0cfa-6554debe10.zip/node_modules/sisteransi/",
@ -19634,6 +19644,18 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD",
}]
]],
["svg-inline-loader", [
["npm:0.8.2", {
"packageLocation": "./.yarn/cache/svg-inline-loader-npm-0.8.2-8c6a22c261-8ead7f04e3.zip/node_modules/svg-inline-loader/",
"packageDependencies": [
["svg-inline-loader", "npm:0.8.2"],
["loader-utils", "npm:1.4.0"],
["object-assign", "npm:4.1.1"],
["simple-html-tokenizer", "npm:0.1.1"]
],
"linkType": "HARD",
}]
]],
["symbol-observable", [
["npm:1.2.0", {
"packageLocation": "./.yarn/cache/symbol-observable-npm-1.2.0-9e812a0a39-268834a1d4.zip/node_modules/symbol-observable/",

BIN
.yarn/cache/simple-html-tokenizer-npm-0.1.1-f6bfb99d29-46969af412.zip vendored Normal file
View File

Binary file not shown.

BIN
.yarn/cache/svg-inline-loader-npm-0.8.2-8c6a22c261-8ead7f04e3.zip vendored Normal file
View File

Binary file not shown.

5
packages/blockTools/demo/index.js
View File

@ -17,7 +17,7 @@
import React from 'react';
import { render } from 'react-dom';
import { makeCssClass, ErrorBoundary } from '../src';
import { makeCssClass, ErrorBoundary, Loading } from '../src';
// eslint-disable-next-line no-undef
const documentCtx = document;
@ -49,6 +49,9 @@ const Demo = () => (
<div className={makeCssClass({ color: 'red' })}>Red text</div>
<h4>Loading component :</h4>
<div style={{ height: 200 }}>
<Loading />
</div>
</div>
);

23
packages/blockTools/src/Loading/Loading.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import LogoSpinner from './LogoSpinner';
import connectBlock from '../connectBlock';
const Loading = ({ properties, methods }) => {
return (
<div
className={methods.makeCssClass({
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
})}
>
<div style={{ width: properties.size || 50, margin: 'auto', height: properties.size || 50 }}>
<LogoSpinner color={properties.color} colorBar={properties.colorBar} />
<div className={methods.makeCssClass(properties.style)}>{properties.message}</div>
</div>
</div>
);
};
export default connectBlock(Loading);

27
packages/blockTools/src/Loading/LogoSpinner.css Normal file
View File

@ -0,0 +1,27 @@
.loading-bar {
animation: loading-bar-morph 0.5s linear alternate 0s infinite;
transform-origin: bottom;
}
@keyframes loading-bar-morph {
0% {
transform: scaleY(0.6);
}
100% {
transform: scaleY(0.95) translateY(5%);
}
}
.loading-bar-sm {
animation: loading-bar-morph-sm 0.5s linear alternate 0s infinite;
transform-origin: bottom;
}
@keyframes loading-bar-morph-sm {
0% {
transform: scaleY(1.4) translateY(5%);
}
100% {
transform: scaleY(0.9);
}
}

33
packages/blockTools/src/Loading/LogoSpinner.js Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import './LogoSpinner.css';
const LogoSpinner = ({ color, barColor }) => (
<div>
<svg width="100%" height="100%" viewBox="0 0 94 91" version="1.1">
<g>
<path
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"
style={{ fill: color || '#697a8c' }}
/>
<rect
className="loading-bar"
x={16}
y={15}
width={30}
height={59}
style={{ fill: barColor || '#fff' }}
/>
<rect
className="loading-bar-sm"
x={53}
y={52}
width={25}
height={25}
style={{ fill: barColor || '#fff' }}
/>
</g>
</svg>
</div>
);
export default LogoSpinner;

8
packages/blockTools/src/Skeleton/Skeleton.js Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import connectBlock from '../connectBlock';
const Skeleton = ({}) => {
return <div>Skeleton</div>;
};
export default connectBlock(Skeleton);

2
packages/blockTools/src/index.js
View File

@ -17,6 +17,7 @@
import connectBlock from './connectBlock';
import getEmotionCss from './getEmotionCss';
import ErrorBoundary from './ErrorBoundary';
import Loading from './Loading/Loading';
import makeCssClass from './makeCssClass.js';
import mediaToCssObject from './mediaToCssObject.js';
import useRunAfterUpdate from './useRunAfterUpdate';
@ -24,6 +25,7 @@ import useRunAfterUpdate from './useRunAfterUpdate';
export {
connectBlock,
ErrorBoundary,
Loading,
getEmotionCss,
makeCssClass,
mediaToCssObject,

19
yarn.lock
View File

@ -2770,6 +2770,7 @@ __metadata:
react-syntax-highlight: 15.3.1
react-test-renderer: 17.0.0-rc.3
style-loader: 1.3.0
svg-inline-loader: ^0.8.2
webpack: 5.1.0
webpack-cli: 3.3.12
webpack-dev-server: 3.11.0
@ -15993,6 +15994,13 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"simple-html-tokenizer@npm:^0.1.1":
version: 0.1.1
resolution: "simple-html-tokenizer@npm:0.1.1"
checksum: 46969af412ee26ae4b549888ce67b868059607855ad2696f8c81e11fde37301c7d9b4346071d12136b8b8c2038f384cba5ff242bfc943119b05e72ea24203cc2
languageName: node
linkType: hard
"sisteransi@npm:^1.0.4":
version: 1.0.5
resolution: "sisteransi@npm:1.0.5"
@ -16741,6 +16749,17 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
"svg-inline-loader@npm:^0.8.2":
version: 0.8.2
resolution: "svg-inline-loader@npm:0.8.2"
dependencies:
loader-utils: ^1.1.0
object-assign: ^4.0.1
simple-html-tokenizer: ^0.1.1
checksum: 8ead7f04e354c02aab7563ebeeecc4cfa2fea0c4efd04475f2b1731a5a576f46c7d596e2cb3f456ce01d9739ed537d779baba0045c96c1213027a68d5ce58e0e
languageName: node
linkType: hard
"symbol-observable@npm:^1.0.4":
version: 1.2.0
resolution: "symbol-observable@npm:1.2.0"