Add buffet LoadingIndicator

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
This commit is contained in:
HichamELBSI 2020-12-11 14:27:03 +01:00
parent d1de45acb8
commit f09e4e0b56
11 changed files with 85 additions and 178 deletions

View File

@ -23,12 +23,12 @@
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/runtime": "^7.9.2",
"@buffetjs/core": "3.3.2-next.1",
"@buffetjs/custom": "3.3.2-next.1",
"@buffetjs/hooks": "3.3.2-next.1",
"@buffetjs/icons": "3.3.2-next.1",
"@buffetjs/styles": "3.3.2-next.1",
"@buffetjs/utils": "3.3.2-next.1",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"@casl/ability": "^4.1.5",
"@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.32",

View File

@ -21,51 +21,27 @@ const Loader = styled.div`
justify-content: space-around;
width: 100%;
> div {
${({ size }) => {
switch (size) {
case 'small': {
return `
border-top: 3px solid #555555 !important;
border: 3px solid #f3f3f3;
width: 11px;
height: 11px;
`;
}
case 'medium': {
return `
border-top: 3px solid #555555 !important;
border: 3px solid #f3f3f3;
width: 20px;
height: 20px;
`;
}
default: {
return `
border-top: 4px solid #555555 !important;
border: 4px solid #f3f3f3;
width: 26px;
height: 26px;
`;
}
}
}}
width: ${({ small }) => (small ? '11px' : '26px')};
height: ${({ small }) => (small ? '11px' : '26px')};
border: 4px solid #f3f3f3;
border-top: 4px solid #555555 !important;
border-radius: 50%;
animation: ${spin} 2s linear infinite;
}
`;
const LoadingIndicator = ({ size }) => (
<Loader size={size}>
const LoadingIndicator = ({ small }) => (
<Loader small={small}>
<div />
</Loader>
);
LoadingIndicator.propTypes = {
size: PropTypes.string,
small: PropTypes.bool,
};
LoadingIndicator.defaultProps = {
size: 'standard',
small: false,
};
export default LoadingIndicator;

View File

@ -50,12 +50,12 @@
"rollup-plugin-terser": "^4.0.4"
},
"dependencies": {
"@buffetjs/core": "3.3.2-next.1",
"@buffetjs/custom": "3.3.2-next.1",
"@buffetjs/hooks": "3.3.2-next.1",
"@buffetjs/icons": "3.3.2-next.1",
"@buffetjs/styles": "3.3.2-next.1",
"@buffetjs/utils": "3.3.2-next.1",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"bootstrap": "^4.5.3",
"classnames": "^2.2.5",
"immutable": "^3.8.2",

View File

@ -237,7 +237,7 @@ const InputUID = ({
onClick={() => generateUid.current()}
>
{isLoading ? (
<LoadingIndicator size="small" />
<LoadingIndicator small />
) : (
<Sync fill={label ? '#007EFF' : '#B5B7BB'} width="11px" height="11px" />
)}

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
import { Text, Padded } from '@buffetjs/core';
import { LoadingIndicator, request } from 'strapi-helper-plugin';
import { request } from 'strapi-helper-plugin';
import { LoadingIndicator } from '@buffetjs/styles';
import PropTypes from 'prop-types';
import { getDisplayedValue, getRequestUrl } from '../../utils';
import Tooltip from '../Tooltip';
@ -75,7 +76,7 @@ const RelationPreviewTooltip = ({
<div>
{isLoading ? (
<Padded left right size="sm">
<LoadingIndicator size="medium" />
<LoadingIndicator borderWidth="3px" size="2rem" />
</Padded>
) : (
<>

View File

@ -9,12 +9,12 @@
"required": true
},
"dependencies": {
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"@sindresorhus/slugify": "1.1.0",
"classnames": "^2.2.6",
"codemirror": "^5.46.0",

View File

@ -8,12 +8,12 @@
"description": "content-type-builder.plugin.description"
},
"dependencies": {
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"@sindresorhus/slugify": "1.1.0",
"fs-extra": "^9.0.1",
"immutable": "^3.8.2",

View File

@ -11,12 +11,12 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"cheerio": "^1.0.0-rc.3",
"fs-extra": "^9.0.1",
"immutable": "^3.8.2",

View File

@ -12,12 +12,12 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"byte-size": "^6.2.0",
"cropperjs": "^1.5.6",
"immer": "^7.0.14",

View File

@ -12,12 +12,12 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@buffetjs/core": "3.3.1-next.2",
"@buffetjs/custom": "3.3.1-next.2",
"@buffetjs/hooks": "3.3.1-next.2",
"@buffetjs/icons": "3.3.1-next.2",
"@buffetjs/styles": "3.3.1-next.2",
"@buffetjs/utils": "3.3.1-next.2",
"@buffetjs/core": "3.3.2-next.2",
"@buffetjs/custom": "3.3.2-next.2",
"@buffetjs/hooks": "3.3.2-next.2",
"@buffetjs/icons": "3.3.2-next.2",
"@buffetjs/styles": "3.3.2-next.2",
"@buffetjs/utils": "3.3.2-next.2",
"@purest/providers": "^1.0.1",
"bcryptjs": "^2.4.3",
"grant-koa": "5.2.0",

132
yarn.lock
View File

@ -1036,15 +1036,15 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@buffetjs/core@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.3.1-next.2.tgz#a10eb10bcc8c729c41f2aec268d4aa42b1ba3442"
integrity sha512-6BCuHqW74X8MW11l3USh7iQHmytRUOsPpiO4vcbqTOzNXvJftu3yaXS+fvXrRES5N48sY4TZ2HpLl2fSW541Hg==
"@buffetjs/core@3.3.2-next.2":
version "3.3.2-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.3.2-next.2.tgz#440494812416e459abe07074fceb9207f4da9223"
integrity sha512-JyUBypuy4i6+sb2qki/bija2m3xEaucHdSEFFvDVtAKKicDZ70wrEbN09eGDGms27GKBJhdMSXLzs5ywGaFmgw==
dependencies:
"@buffetjs/hooks" "3.3.1-next.2"
"@buffetjs/icons" "3.3.1-next.2"
"@buffetjs/styles" "3.3.1-next.2"
"@buffetjs/utils" "3.3.1-next.2"
"@buffetjs/hooks" "3.3.2-next.2"
"@buffetjs/icons" "3.3.2-next.2"
"@buffetjs/styles" "3.3.2-next.2"
"@buffetjs/utils" "3.3.2-next.2"
"@fortawesome/fontawesome-svg-core" "^1.2.25"
"@fortawesome/free-regular-svg-icons" "^5.11.2"
"@fortawesome/free-solid-svg-icons" "^5.11.2"
@ -1060,84 +1060,35 @@
react-with-direction "^1.3.1"
reactstrap "^8.5.1"
"@buffetjs/core@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.3.2-next.1.tgz#ec1e6ce9d90ec9ecf0d0c7279adcec76ee1dfe07"
integrity sha512-qZ2lx0ihopa60a95ikpQaKy5OCK04SYQvSmmRDSs319yU/t9S6/UqX7MqiORraY/ghTXrM95OeJawtPuo7LtzQ==
"@buffetjs/custom@3.3.2-next.2":
version "3.3.2-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.2-next.2.tgz#9a1db1ad2875c40ed338f529760989fb6b20f121"
integrity sha512-cFxuThd7cKwBXC7Xy0GPZlrCCCML4I7ElhJ0aM8gFQ5NsJM+LSwsV4R8mzEH7frKRloxasF26FELsTFDfJg+0A==
dependencies:
"@buffetjs/hooks" "3.3.2-next.1"
"@buffetjs/icons" "3.3.2-next.1"
"@buffetjs/styles" "3.3.2-next.1"
"@buffetjs/utils" "3.3.2-next.1"
"@fortawesome/fontawesome-svg-core" "^1.2.25"
"@fortawesome/free-regular-svg-icons" "^5.11.2"
"@fortawesome/free-solid-svg-icons" "^5.11.2"
"@fortawesome/react-fontawesome" "^0.1.4"
invariant "^2.2.4"
lodash "4.17.19"
moment "^2.24.0"
prop-types "^15.7.2"
rc-input-number "^4.5.0"
react-dates "^21.5.1"
react-moment-proptypes "^1.7.0"
react-router-dom "^5.2.0"
react-with-direction "^1.3.1"
reactstrap "^8.5.1"
"@buffetjs/custom@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.1-next.2.tgz#9c8291ee24222e305c16824d14d78a36e68e38a6"
integrity sha512-qiqzVM6A7Cofy0W+OU5rcmz4hkcP/V2i8QQQiPsaRcOnmhtfriCwi5eGiae45f7RL77faMRwsZYxefrmTTr2Hg==
dependencies:
"@buffetjs/core" "3.3.1-next.2"
"@buffetjs/styles" "3.3.1-next.2"
"@buffetjs/utils" "3.3.1-next.2"
"@buffetjs/core" "3.3.2-next.2"
"@buffetjs/styles" "3.3.2-next.2"
"@buffetjs/utils" "3.3.2-next.2"
lodash "4.17.19"
moment "^2.24.0"
prop-types "^15.5.10"
react-moment-proptypes "^1.7.0"
"@buffetjs/custom@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.2-next.1.tgz#f2484826323dcc63717ea993c9975a6a3519d6e1"
integrity sha512-osBfXQSjq3LLuVP6EfcnB5pa4DofpOKSraxDOPY0qdVH4DaGTiQpfZ9fhWl3yPe8gBx6qi/zAmHO7Ucl3e9T/Q==
dependencies:
"@buffetjs/core" "3.3.2-next.1"
"@buffetjs/styles" "3.3.2-next.1"
"@buffetjs/utils" "3.3.2-next.1"
lodash "4.17.19"
moment "^2.24.0"
prop-types "^15.5.10"
react-moment-proptypes "^1.7.0"
"@buffetjs/hooks@3.3.2-next.2":
version "3.3.2-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.2-next.2.tgz#a1b630338f394fd2585fee04575c0f355e787cca"
integrity sha512-h9wbjriwcF16qgro4VBYYvompOiVsn9gOStAoZomfexGlJEfaqp3fzTFs3g0Mpx4bjgZVLrD5Lu2tZVFD6MNYQ==
"@buffetjs/hooks@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.1-next.2.tgz#32db4c2d4c61ed2de3a01569a6cb204d67ef2766"
integrity sha512-C5vNPTmDlriJwXARYuR9UuvCMq9/2f7y9kNzKmDLeCjEtpmvVP6gzvwQnmG+SjvN7eyDyFKOx0HBAu+dj7dfbg==
"@buffetjs/hooks@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.2-next.1.tgz#d1ab0ac653b8ad026c082b76da42a5368e93e80b"
integrity sha512-B69PTWiqfyYup8UTHPy1THc0KwSUyujewwKZFhXNfbKYj4KiBQ5P1aXrPvYp81cG17Eu5uyGywBjxDaPrskP9Q==
"@buffetjs/icons@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.1-next.2.tgz#f7d0c51a7463db8571b70ba96121944866fa3137"
integrity sha512-lcmi3l7pazrykcf8akpLxAha+Ic7uEpmsLowwR7mUX51u0akVqrSzG6FShk/AaN+UNsGo6Gs3UlBldakrQO9QA==
"@buffetjs/icons@3.3.2-next.2":
version "3.3.2-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.2-next.2.tgz#ad52c58a42a2dd354014e57fe33f889809118392"
integrity sha512-agWYLovmWgl61tU+zpTqJGU5hNGmeYkeeKA9j9ZeSgGcjPHTQKRGZdQ2WPXvabiuDvoJqLM1NmklYcGdKbIUHA==
dependencies:
prop-types "^15.5.10"
"@buffetjs/icons@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.2-next.1.tgz#b8efce9a4dfb90a816df2a3633d0158b930d2fe1"
integrity sha512-h3GdAmK9zpbj0e97tosYVTMyShvlaVDKMfzhzeDf+lG3E63LneAuNmY0gAF3r9nraOTN4MaVNykVcIz443+KXw==
dependencies:
prop-types "^15.5.10"
"@buffetjs/styles@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.1-next.2.tgz#7165ae1f2f2c66d56b3fbc228e4a5517a974e878"
integrity sha512-udG1L1BIQcGCc8bmW0Q2gvtEg281HcA2WYr9Tr/n5UE6z8jk828eqvJQpjtfMxNquo9yRBR/zz4z52G7mYt2Dg==
"@buffetjs/styles@3.3.2-next.2":
version "3.3.2-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.2-next.2.tgz#033d6d0c639eb71bd382e1a02e3812bfabdbd9a1"
integrity sha512-kY16rtx4OkvO0meigMC602cByodMVSKAIpZTWjvZdNqvEDAASap2nGEbTJXNayskrkPrBEED4tiAaEU3VtQgIg==
dependencies:
"@fortawesome/fontawesome-free" "^5.12.0"
"@fortawesome/fontawesome-svg-core" "^1.2.22"
@ -1147,31 +1098,10 @@
prop-types "^15.7.2"
react-dates "^21.1.0"
"@buffetjs/styles@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.2-next.1.tgz#c3461f62a5df610d17fd68bdb9487c15f3a4c607"
integrity sha512-6BT/0AiV41otyIWN4gdYnYZeMmVwiLhKXJgl863IoE0JXGJoUV1fBurT57v0JqiOfi4hxcM+gygh423p0hcdDw==
dependencies:
"@fortawesome/fontawesome-free" "^5.12.0"
"@fortawesome/fontawesome-svg-core" "^1.2.22"
"@fortawesome/free-regular-svg-icons" "^5.10.2"
"@fortawesome/free-solid-svg-icons" "^5.10.2"
"@fortawesome/react-fontawesome" "^0.1.4"
prop-types "^15.7.2"
react-dates "^21.1.0"
"@buffetjs/utils@3.3.1-next.2":
version "3.3.1-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.1-next.2.tgz#da72b8d4e47df60b5debc5e066380745d5908ff0"
integrity sha512-9+lWadHP75sTO0GLwgdrK6AEDA8a4MIQnTqAsIDnIbSutdUZSC8ieJdHX+YzN5T4DuMXrMW//AO264h46zXyvQ==
dependencies:
lodash "4.17.19"
yup "^0.27.0"
"@buffetjs/utils@3.3.2-next.1":
version "3.3.2-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.2-next.1.tgz#67ca29993ef0b68ea65bec7a9c11f8a9c9b49137"
integrity sha512-D6JvC5j7nWFCeIHLH7hbZmiVXgALai/wvlOXFXNL6/QhGBd4703lSIV9hY16cV9vWbIgi5zXyaPwYWvnHceiAw==
"@buffetjs/utils@3.3.2-next.2":
version "3.3.2-next.2"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.2-next.2.tgz#0417432c444029a9a49f8ea8e72daaa89a68ab9c"
integrity sha512-eppigKnXLnKdiIN5fqyP3tsvvM+UilbbGPY2K919qfXUwOd8HjNsggkBr5CJ8JQE7WIDjDEBWi0PHFECKFvdsw==
dependencies:
lodash "4.17.19"
yup "^0.27.0"