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

Merge pull request #57 from lowdefy/loadings

Browse Source 
⏳ Loadings
This commit is contained in:
Sam 2020-10-15 15:02:18 +02:00 committed by GitHub
commit f5156004b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 837 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.pnp.js generated
View File

@ -3650,6 +3650,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@babel/preset-env", "virtual:73f25cc0d3f57943fa9b1d737e4809af7a52a784e0ac5fed74b4e1e083308ab7ae2fd45a5424a8bc7ff7caab067690c9357630d657cbd636d6037acc1557fdc2#npm:7.11.5"],
["@babel/preset-react", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:7.10.4"],
["@lowdefy/helpers", "workspace:packages/helpers"],
["@lowdefy/type", "workspace:packages/type"],
["babel-jest", "virtual:60db6f885fdb292d52f611575208c6b51b9a272733d90fe8edc7853309da56cfe1d45553d3d82ff571709e87d3dd377b35bef19a5ed1bf366956f0c695b30f9d#npm:26.5.2"],
["babel-loader", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:8.1.0"],
["babel-plugin-import", "npm:1.13.1"],

38
packages/blockTools/demo/IconSpinner.js Normal file
View File

@ -0,0 +1,38 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { IconSpinner } from '../src';
import Wrapper from './Wrapper';
const Examples = () => (
<>
<Wrapper title="IconSpinner :">
<IconSpinner />
</Wrapper>
<Wrapper title="IconSpinner size default:">
<IconSpinner properties={{ size: 'default' }} />
</Wrapper>
<Wrapper title="IconSpinner size small:">
<IconSpinner properties={{ size: 'small' }} />
</Wrapper>
<Wrapper title="IconSpinner size large:">
<IconSpinner properties={{ size: 'large' }} />
</Wrapper>
</>
);
export default Examples;

35
packages/blockTools/demo/Skeleton.js Normal file
View File

@ -0,0 +1,35 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import Wrapper from './Wrapper';
import { Skeleton } from '../src';
const Examples = () => (
<>
<Wrapper title={'Skeleton'}>
<Skeleton />
</Wrapper>
<Wrapper title={'Skeleton container height=20'} style={{ height: 20 }}>
<Skeleton />
</Wrapper>
<Wrapper title={'Skeleton container height=40 width=100'} style={{ height: 40, width: 100 }}>
<Skeleton />
</Wrapper>
</>
);
export default Examples;

41
packages/blockTools/demo/SkeletonAvatar.js Normal file
View File

@ -0,0 +1,41 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { SkeletonAvatar } from '../src';
import Wrapper from './Wrapper';
const Examples = () => (
<>
<Wrapper title="SkeletonAvatar :">
<SkeletonAvatar />
</Wrapper>
<Wrapper title="SkeletonAvatar size default:">
<SkeletonAvatar properties={{ size: 'default' }} />
</Wrapper>
<Wrapper title="SkeletonAvatar size small:">
<SkeletonAvatar properties={{ size: 'small' }} />
</Wrapper>
<Wrapper title="SkeletonAvatar size large:">
<SkeletonAvatar properties={{ size: 'large' }} />
</Wrapper>
<Wrapper title="SkeletonAvatar shape square:">
<SkeletonAvatar properties={{ shape: 'square' }} />
</Wrapper>
</>
);
export default Examples;

41
packages/blockTools/demo/SkeletonButton.js Normal file
View File

@ -0,0 +1,41 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { SkeletonButton } from '../src';
import Wrapper from './Wrapper';
const Examples = () => (
<>
<Wrapper title="SkeletonButton :">
<SkeletonButton />
</Wrapper>
<Wrapper title="SkeletonButton size default:">
<SkeletonButton properties={{ size: 'default' }} />
</Wrapper>
<Wrapper title="SkeletonButton size small:">
<SkeletonButton properties={{ size: 'small' }} />
</Wrapper>
<Wrapper title="SkeletonButton size large:">
<SkeletonButton properties={{ size: 'large' }} />
</Wrapper>
<Wrapper title="SkeletonButton shape round:">
<SkeletonButton properties={{ shape: 'round' }} />
</Wrapper>
</>
);
export default Examples;

50
packages/blockTools/demo/SkeletonInput.js Normal file
View File

@ -0,0 +1,50 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { SkeletonInput } from '../src';
import Wrapper from './Wrapper';
const Examples = () => (
<>
<Wrapper title="SkeletonInput">
<SkeletonInput />
</Wrapper>
<Wrapper title="SkeletonInput properties.label = false :">
<SkeletonInput properties={{ label: false }} />
</Wrapper>
<Wrapper title="SkeletonInput properties.labelHeight = 40 :">
<SkeletonInput properties={{ labelHeight: 40 }} />
</Wrapper>
<Wrapper title="SkeletonInput properties.inputHeight = 80 :">
<SkeletonInput properties={{ inputHeight: 80 }} />
</Wrapper>
<Wrapper title="SkeletonInput properties.size = small :">
<SkeletonInput properties={{ size: 'small' }} />
</Wrapper>
<Wrapper title="SkeletonInput properties.size = default :">
<SkeletonInput properties={{ size: 'default' }} />
</Wrapper>
<Wrapper title="SkeletonInput properties.size = large :">
<SkeletonInput properties={{ size: 'large' }} />
</Wrapper>
<Wrapper title="SkeletonInput properties.labelWidth = 70 :">
<SkeletonInput properties={{ labelWidth: 70 }} />
</Wrapper>
</>
);
export default Examples;

38
packages/blockTools/demo/SkeletonParagraph.js Normal file
View File

@ -0,0 +1,38 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { SkeletonParagraph } from '../src';
import Wrapper from './Wrapper';
const Examples = () => (
<>
<Wrapper title="SkeletonParagraph">
<SkeletonParagraph />
</Wrapper>
<Wrapper title="SkeletonParagraph properties.lines = 1 :">
<SkeletonParagraph properties={{ lines: 1 }} />
</Wrapper>
<Wrapper title="SkeletonParagraph properties.lines = 7 :">
<SkeletonParagraph properties={{ lines: 7 }} />
</Wrapper>
<Wrapper title="SkeletonParagraph properties.width = 200 :">
<SkeletonParagraph properties={{ width: 200 }} />
</Wrapper>
</>
);
export default Examples;

41
packages/blockTools/demo/Spinner.js Normal file
View File

@ -0,0 +1,41 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { Spinner } from '../src';
import Wrapper from './Wrapper';
const Examples = () => (
<>
<Wrapper title="Spinner">
<Spinner />
</Wrapper>
<Wrapper title="Spinner properties.height: 100 :">
<Spinner properties={{ height: 100 }} />
</Wrapper>
<Wrapper title="Spinner container style= height: 200 :" style={{ height: 200 }}>
<Spinner />
</Wrapper>
<Wrapper title="Spinner properties.message = loading">
<Spinner properties={{ height: 100, message: 'loading' }} />
</Wrapper>
<Wrapper title="Spinner shaded = true:">
<Spinner properties={{ shaded: true }} />
</Wrapper>
</>
);
export default Examples;

26
packages/blockTools/demo/Wrapper.js Normal file
View File

@ -0,0 +1,26 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
const Wrapper = ({ children, title, style }) => (
<>
<h4>{title}</h4>
<div style={{ ...{ padding: 20 }, ...style }}>{children}</div>
</>
);
export default Wrapper;

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

@ -14,14 +14,18 @@
limitations under the License.
*/
import React from 'react';
import { render } from 'react-dom';
import IconSpinner from './IconSpinner';
import React from 'react';
import Skeleton from './Skeleton';
import SkeletonAvatar from './SkeletonAvatar';
import SkeletonButton from './SkeletonButton';
import SkeletonInput from './SkeletonInput';
import SkeletonParagraph from './SkeletonParagraph';
import Spinner from './Spinner';
import { makeCssClass, ErrorBoundary } from '../src';
// eslint-disable-next-line no-undef
const documentCtx = document;
const ErrorComp = () => <div>{this.unknown}</div>;
const FallbackComp = ({ name, error }) => (
<div>
@ -43,15 +47,19 @@ const Demo = () => (
<ErrorBoundary fallback={(error) => <FallbackComp name="Fallback test" error={error} />}>
<ErrorComp />
</ErrorBoundary>
<div id="emotion" />
<h4>{"makeCssClass({ color: 'red' })"} :</h4>
<div className={makeCssClass({ color: 'red' })}>Red text</div>
<h4>Loading component :</h4>
<IconSpinner />
<Spinner />
<Skeleton />
<SkeletonAvatar />
<SkeletonButton />
<SkeletonInput />
<SkeletonParagraph />
</div>
);
export default Demo;
render(<Demo />, documentCtx.querySelector('#root'));
render(<Demo />, document.querySelector('#root'));

3
packages/blockTools/package.json
View File

@ -27,7 +27,7 @@
],
"scripts": {
"start": "webpack serve",
"build": "babel src --out-dir dist",
"build": "babel src --copy-files --out-dir dist",
"test": "jest --coverage",
"prepare": "yarn build",
"prepublishOnly": "yarn build",
@ -35,6 +35,7 @@
},
"dependencies": {
"@lowdefy/helpers": "1.0.0",
"@lowdefy/type": "1.0.1",
"create-emotion": "10.0.27",
"react": "17.0.0-rc.2",
"react-dom": "17.0.0-rc.2"

44
packages/blockTools/src/Skeleton/Skeleton.css Normal file
View File

@ -0,0 +1,44 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.skeleton {
position: relative;
overflow: hidden;
background: #f1f1f1;
}
.skeleton::before {
content: '';
display: block;
position: absolute;
left: -100%;
max-width: 600px;
top: 0;
height: 200%;
width: 100%;
background: linear-gradient(to right, transparent 0%, #eaeaea 50%, transparent 100%);
animation: load 1.8s infinite;
/* transform: rotate(45deg); */
}
@keyframes load {
from {
left: -100%;
}
to {
left: 100%;
}
}

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

@ -0,0 +1,30 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import blockDefaults from '../blockDefaults';
import './Skeleton.css';
const Skeleton = ({ properties, methods }) => {
return (
<div
className={'skeleton ' + methods.makeCssClass(properties.style)}
style={{ width: properties.width || '100%', height: properties.height || '100%' }}
></div>
);
};
export default blockDefaults(Skeleton);

48
packages/blockTools/src/Skeleton/SkeletonAvatar.js Normal file
View File

@ -0,0 +1,48 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import type from '@lowdefy/type';
import blockDefaults from '../blockDefaults';
import Skeleton from './Skeleton';
const SkeletonAvatar = ({ properties, methods }) => {
let size = properties.size || 32;
if (type.isString(size)) {
switch (properties.size) {
case 'small':
size = 24;
break;
case 'large':
size = 40;
break;
default:
size = 32;
}
}
return (
<Skeleton
methods={methods}
properties={{
style: { borderRadius: properties.shape === 'square' ? '0' : size / 2 },
width: size,
height: size,
}}
/>
);
};
export default blockDefaults(SkeletonAvatar);

45
packages/blockTools/src/Skeleton/SkeletonButton.js Normal file
View File

@ -0,0 +1,45 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import blockDefaults from '../blockDefaults';
import Skeleton from './Skeleton';
const SkeletonButton = ({ properties, methods }) => {
let height = properties.height || 32;
switch (properties.size) {
case 'small':
height = 24;
break;
case 'large':
height = 40;
break;
default:
height = 32;
}
return (
<Skeleton
methods={methods}
properties={{
style: { borderRadius: properties.shape === 'round' && height / 2 },
width: properties.width || '100%',
height: height,
}}
/>
);
};
export default blockDefaults(SkeletonButton);

56
packages/blockTools/src/Skeleton/SkeletonInput.js Normal file
View File

@ -0,0 +1,56 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import blockDefaults from '../blockDefaults';
import Skeleton from './Skeleton';
const SkeletonInput = ({ properties, methods }) => {
let inputHeight;
switch (properties.size) {
case 'small':
inputHeight = 24;
break;
case 'large':
inputHeight = 40;
break;
default:
inputHeight = 32;
}
return (
<div>
{properties.label !== false && (
<Skeleton
methods={methods}
properties={{
width: properties.labelWidth || properties.width || '30%',
height: properties.labelHeight || 20,
style: { ...{ marginBottom: 10 }, ...properties.style },
}}
/>
)}
<Skeleton
methods={methods}
properties={{
width: properties.width || '100%',
height: properties.inputHeight || inputHeight || 32,
}}
/>
</div>
);
};
export default blockDefaults(SkeletonInput);

40
packages/blockTools/src/Skeleton/SkeletonParagraph.js Normal file
View File

@ -0,0 +1,40 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import blockDefaults from '../blockDefaults';
import Skeleton from './Skeleton';
const SkeletonParagraph = ({ properties, methods }) => {
const lines = [...Array(properties.lines || 4).keys()];
return (
<div style={{ width: properties.width || '100%' }}>
{lines.map((key) => (
<Skeleton
key={key}
methods={methods}
properties={{
height: '1.25rem',
width: key === lines.length - 1 && key !== 0 ? '40%' : '100%',
style: { marginBottom: '1rem' },
}}
/>
))}
</div>
);
};
export default blockDefaults(SkeletonParagraph);

29
packages/blockTools/src/Spinner/IconSpinner.css Normal file
View File

@ -0,0 +1,29 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.icon-spinner {
animation: spin-animation 1s infinite linear;
display: inline-block;
}
@keyframes spin-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

64
packages/blockTools/src/Spinner/IconSpinner.js Normal file
View File

@ -0,0 +1,64 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import type from '@lowdefy/type';
import blockDefaults from '../blockDefaults';
import './IconSpinner.css';
const IconSpinner = ({ properties, methods }) => {
let size = properties.size || 20;
if (type.isString(size)) {
switch (properties.size) {
case 'small':
size = 20;
break;
case 'large':
size = 32;
break;
default:
size = 24;
}
}
return (
<span
className={methods.makeCssClass({
height: size,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
})}
>
<svg
viewBox="0 0 1024 1024"
focusable="false"
data-icon="loading-3-quarters"
width={size}
height={size}
fill="currentColor"
ariaHidden="true"
className="icon-spinner"
>
<path
fill="#bfbfbf"
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"
></path>
</svg>
</span>
);
};
export default blockDefaults(IconSpinner);

43
packages/blockTools/src/Spinner/LogoSpinner.css Normal file
View File

@ -0,0 +1,43 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.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);
}
}

49
packages/blockTools/src/Spinner/LogoSpinner.js Normal file
View File

@ -0,0 +1,49 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
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 || '#bfbfbf' }}
/>
<rect
className="loading-bar"
x={16}
y={15}
width={30}
height={59}
style={{ fill: barColor || '#f1f1f1' }}
/>
<rect
className="loading-bar-sm"
x={53}
y={52}
width={25}
height={25}
style={{ fill: barColor || '#f1f1f1' }}
/>
</g>
</svg>
</div>
);
export default LogoSpinner;

45
packages/blockTools/src/Spinner/Spinner.js Normal file
View File

@ -0,0 +1,45 @@
/*
Copyright 2020 Lowdefy, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import LogoSpinner from './LogoSpinner';
import blockDefaults from '../blockDefaults';
const Loading = ({ properties, methods }) => {
return (
<div
className={methods.makeCssClass({
height: properties.height || '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: properties.shaded === true && '#f1f1f1',
})}
>
<div style={{ width: properties.size || 50, margin: 'auto', height: properties.size || 50 }}>
<LogoSpinner
color={properties.color}
barColor={properties.barColor || (properties.shaded === true ? '#f1f1f1' : '#fff')}
/>
<div className={methods.makeCssClass([{ textAlign: 'center' }, properties.style])}>
{properties.message}
</div>
</div>
</div>
);
};
export default blockDefaults(Loading);

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

@ -16,18 +16,28 @@
import blockDefaults from './blockDefaults';
import ErrorBoundary from './ErrorBoundary';
import getEmotionCss from './getEmotionCss';
import Loading from './Loading';
import makeCssClass from './makeCssClass.js';
import mediaToCssObject from './mediaToCssObject.js';
import IconSpinner from './Spinner/IconSpinner';
import Skeleton from './Skeleton/Skeleton';
import SkeletonAvatar from './Skeleton/SkeletonAvatar';
import SkeletonButton from './Skeleton/SkeletonButton';
import SkeletonInput from './Skeleton/SkeletonInput';
import SkeletonParagraph from './Skeleton/SkeletonParagraph';
import Spinner from './Spinner/Spinner';
import useRunAfterUpdate from './useRunAfterUpdate';
export {
blockDefaults,
ErrorBoundary,
getEmotionCss,
Loading,
IconSpinner,
makeCssClass,
mediaToCssObject,
Skeleton,
SkeletonAvatar,
SkeletonButton,
SkeletonInput,
SkeletonParagraph,
Spinner,
useRunAfterUpdate,
};

1
yarn.lock
View File

@ -2836,6 +2836,7 @@ __metadata:
"@babel/preset-env": 7.11.5
"@babel/preset-react": 7.10.4
"@lowdefy/helpers": 1.0.0
"@lowdefy/type": 1.0.1
babel-jest: 26.5.2
babel-loader: 8.1.0
babel-plugin-import: 1.13.1