@platformatic/ui-components 0.5.2 → 0.6.1
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/.nvmrc +1 -1
- package/dist/assets/{index-DEil0rCS.css → index-CeMo0DvI.css} +1 -1
- package/dist/assets/{index-CVTXNiNM.js → index-U_mYeUt8.js} +8 -8
- package/dist/index.html +2 -2
- package/dist/main.css +7 -1
- package/package.json +3 -4
- package/src/components/CopyAndPaste.jsx +7 -2
- package/src/components/Loadable.jsx +2 -2
- package/src/components/Loadable.module.css +1 -1
- package/src/components/LoadingSpinner.jsx +2 -2
- package/src/components/LoadingSpinnerV2.jsx +10 -5
- package/src/components/icons/AddEnvVariableIcon.jsx +97 -0
- package/src/components/icons/DownloadIcon.jsx +93 -0
- package/src/components/icons/index.js +4 -0
- package/src/components/loaders/SpinnerCircular.jsx +52 -0
- package/src/components/loaders/SpinnerCircular.module.css +34 -0
- package/src/stories/CopyAndPaste.stories.jsx +2 -1
- package/src/stories/LoadingSpinner.stories.jsx +11 -8
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-U_mYeUt8.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
! tailwindcss v3.4.
|
|
2
|
+
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -768,6 +768,12 @@ video {
|
|
|
768
768
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
769
769
|
}
|
|
770
770
|
|
|
771
|
+
.ring {
|
|
772
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
773
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
774
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
775
|
+
}
|
|
776
|
+
|
|
771
777
|
.blur {
|
|
772
778
|
--tw-blur: blur(8px);
|
|
773
779
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@platformatic/ui-components",
|
|
3
3
|
"description": "Platformatic UI Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -27,8 +27,7 @@
|
|
|
27
27
|
"postcss": "^8.4.17",
|
|
28
28
|
"react": "^18.2.0",
|
|
29
29
|
"react-dom": "^18.2.0",
|
|
30
|
-
"react-tooltip": "^4.5.1"
|
|
31
|
-
"spinners-react": "^1.0.7"
|
|
30
|
+
"react-tooltip": "^4.5.1"
|
|
32
31
|
},
|
|
33
32
|
"devDependencies": {
|
|
34
33
|
"@babel/core": "^7.19.3",
|
|
@@ -41,7 +40,7 @@
|
|
|
41
40
|
"@storybook/react": "^8.0.8",
|
|
42
41
|
"@storybook/react-vite": "^8.0.8",
|
|
43
42
|
"@testing-library/jest-dom": "^6.0.0",
|
|
44
|
-
"@testing-library/react": "^
|
|
43
|
+
"@testing-library/react": "^16.0.0",
|
|
45
44
|
"@types/react": "^18.0.17",
|
|
46
45
|
"@types/react-dom": "^18.0.6",
|
|
47
46
|
"@vitejs/plugin-react": "^4.0.0",
|
|
@@ -12,7 +12,8 @@ function CopyAndPaste ({
|
|
|
12
12
|
timeout = 1500,
|
|
13
13
|
size = MEDIUM,
|
|
14
14
|
tooltipClassName = '',
|
|
15
|
-
position = POSITION_CENTER
|
|
15
|
+
position = POSITION_CENTER,
|
|
16
|
+
internalOverHandling = false
|
|
16
17
|
}) {
|
|
17
18
|
const [copied, setCopied] = useState(false)
|
|
18
19
|
|
|
@@ -25,7 +26,7 @@ function CopyAndPaste ({
|
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
return !copied
|
|
28
|
-
? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} />)
|
|
29
|
+
? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} internalOverHandling={internalOverHandling} />)
|
|
29
30
|
: (
|
|
30
31
|
<TooltipAbsolute
|
|
31
32
|
tooltipClassName={tooltipClassName}
|
|
@@ -63,6 +64,10 @@ CopyAndPaste.propTypes = {
|
|
|
63
64
|
* timeout
|
|
64
65
|
*/
|
|
65
66
|
timeout: PropTypes.number,
|
|
67
|
+
/**
|
|
68
|
+
* internalOverHandling
|
|
69
|
+
*/
|
|
70
|
+
internalOverHandling: PropTypes.bool,
|
|
66
71
|
/**
|
|
67
72
|
* timeout
|
|
68
73
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState, cloneElement, Children } from 'react'
|
|
2
2
|
import styles from './Loadable.module.css'
|
|
3
|
-
import
|
|
3
|
+
import SpinnerCircular from './loaders/SpinnerCircular'
|
|
4
4
|
|
|
5
5
|
export default function Loadable ({ ...props }) {
|
|
6
6
|
// If null then loading not started, if true then loading, if false then done loading
|
|
@@ -22,7 +22,7 @@ export default function Loadable ({ ...props }) {
|
|
|
22
22
|
? (
|
|
23
23
|
<>
|
|
24
24
|
<div data-testid='loadable-content' className={styles.relative}>
|
|
25
|
-
<SpinnerCircular className={styles.spinner}
|
|
25
|
+
<SpinnerCircular className={styles.spinner} size={60} />
|
|
26
26
|
<div className={styles.blurred}>{children}</div>
|
|
27
27
|
</div>
|
|
28
28
|
</>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './LoadingSpinner.module.css'
|
|
4
|
-
import
|
|
4
|
+
import SpinnerCircular from './loaders/SpinnerCircular'
|
|
5
5
|
|
|
6
6
|
function LoadingSpinner ({ loading = false }) {
|
|
7
7
|
// If null then loading not started, if true then loading, if false then done loading
|
|
@@ -9,7 +9,7 @@ function LoadingSpinner ({ loading = false }) {
|
|
|
9
9
|
? (
|
|
10
10
|
<div className={styles.container} data-testid='loading-spinner'>
|
|
11
11
|
<div data-testid='loading-spinner-content' className={styles.relative}>
|
|
12
|
-
<SpinnerCircular className={styles.spinner}
|
|
12
|
+
<SpinnerCircular className={styles.spinner} size={60} />
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
15
|
)
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import styles from './LoadingSpinnerV2.module.css'
|
|
5
|
-
import
|
|
5
|
+
import SpinnerCircular from './loaders/SpinnerCircular'
|
|
6
6
|
|
|
7
7
|
function LoadingSpinnerV2 ({
|
|
8
8
|
loading = false,
|
|
9
9
|
applySentences = {},
|
|
10
|
-
|
|
10
|
+
spinnerProps = {},
|
|
11
11
|
containerClassName = ''
|
|
12
12
|
}) {
|
|
13
13
|
const defaultContainerClassName = containerClassName || `${styles.container}`
|
|
@@ -16,7 +16,7 @@ function LoadingSpinnerV2 ({
|
|
|
16
16
|
? (
|
|
17
17
|
<div className={defaultContainerClassName} data-testid='loading-spinner'>
|
|
18
18
|
<div className={styles.content}>
|
|
19
|
-
<SpinnerCircular
|
|
19
|
+
<SpinnerCircular {...spinnerProps} />
|
|
20
20
|
{applySentences?.sentences.length > 0 && (
|
|
21
21
|
<div className={applySentences.containerClassName}>
|
|
22
22
|
{applySentences.sentences.map((sentence, index) => (<p key={index} className={sentence.style}>{sentence.text}</p>))}
|
|
@@ -37,9 +37,14 @@ LoadingSpinnerV2.propTypes = {
|
|
|
37
37
|
*/
|
|
38
38
|
applySentences: PropTypes.object,
|
|
39
39
|
/**
|
|
40
|
-
*
|
|
40
|
+
* spinnerProps
|
|
41
41
|
*/
|
|
42
|
-
|
|
42
|
+
spinnerProps: PropTypes.shape({
|
|
43
|
+
className: PropTypes.string,
|
|
44
|
+
color: PropTypes.string,
|
|
45
|
+
size: PropTypes.number,
|
|
46
|
+
thickness: PropTypes.number
|
|
47
|
+
}),
|
|
43
48
|
/**
|
|
44
49
|
* containerClassName
|
|
45
50
|
*/
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const AddEnvVariableIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
tip = '',
|
|
10
|
+
disabled = false,
|
|
11
|
+
inactive = false
|
|
12
|
+
}) => {
|
|
13
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
14
|
+
if (disabled) {
|
|
15
|
+
className += ` ${styles.iconDisabled}`
|
|
16
|
+
}
|
|
17
|
+
if (inactive) {
|
|
18
|
+
className += ` ${styles.iconInactive}`
|
|
19
|
+
}
|
|
20
|
+
const filledClassName = styles[`filled-${color}`]
|
|
21
|
+
let icon = <></>
|
|
22
|
+
|
|
23
|
+
switch (size) {
|
|
24
|
+
case SMALL:
|
|
25
|
+
icon = (
|
|
26
|
+
<svg
|
|
27
|
+
width={16}
|
|
28
|
+
height={16}
|
|
29
|
+
viewBox='0 0 16 16'
|
|
30
|
+
fill='none'
|
|
31
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
32
|
+
data-tip={tip}
|
|
33
|
+
className={className}
|
|
34
|
+
>
|
|
35
|
+
<path d='M10 5.35553C9.67562 3.45026 8.0211 2 6.02882 2C3.80376 2 2 3.80895 2 6.04041C2 7.99513 3.38411 9.62564 5.22306 10M6.02882 4V8M4 6L8 6.04041' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M8 9.5V14H14V9.5M8 9.5V8H14V9.5M8 9.5H14' stroke='none' strokeLinejoin='round' />
|
|
37
|
+
<path d='M10.6505 10.75L10.9899 11.332H11.0061L11.3495 10.75H11.9758L11.3576 11.75L12 12.75H11.3576L11.0061 12.1562H10.9899L10.6384 12.75H10L10.6343 11.75L10.0202 10.75H10.6505Z' fill='none' className={filledClassName} />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
data-tip={tip}
|
|
51
|
+
>
|
|
52
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C5.70565 3 3 5.71343 3 9.06062C3 11.9927 5.07616 14.4385 7.83459 15M9.04323 6V12M6 9L12 9.06062' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
53
|
+
<path d='M12 14.25V21H21V14.25M12 14.25V12H21V14.25M12 14.25H21' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
54
|
+
<path d='M15.9758 16.125L16.4848 16.998H16.5091L17.0242 16.125H17.9636L17.0364 17.625L18 19.125H17.0364L16.5091 18.2344H16.4848L15.9576 19.125H15L15.9515 17.625L15.0303 16.125H15.9758Z' fill='none' className={filledClassName} />
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
case LARGE:
|
|
59
|
+
icon = (
|
|
60
|
+
<svg
|
|
61
|
+
width={40}
|
|
62
|
+
height={40}
|
|
63
|
+
viewBox='0 0 40 40'
|
|
64
|
+
fill='none'
|
|
65
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
66
|
+
className={className}
|
|
67
|
+
data-tip={tip}
|
|
68
|
+
>
|
|
69
|
+
<path d='M25 13.3888C24.1891 8.62565 20.0527 5 15.0721 5C9.50941 5 5 9.52239 5 15.101C5 19.9878 8.46027 24.0641 13.0576 25M15.0721 10V20M10 15L20 15.101' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
70
|
+
<path d='M20 23.75V35H35V23.75M20 23.75V20H35V23.75M20 23.75H35' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M26.6263 26.875L27.4747 28.3301H27.5152L28.3737 26.875H29.9394L28.3939 29.375L30 31.875H28.3939L27.5152 30.3906H27.4747L26.596 31.875H25L26.5859 29.375L25.0505 26.875H26.6263Z' fill='none' className={filledClassName} />
|
|
72
|
+
</svg>
|
|
73
|
+
)
|
|
74
|
+
break
|
|
75
|
+
|
|
76
|
+
default:
|
|
77
|
+
break
|
|
78
|
+
}
|
|
79
|
+
return icon
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
AddEnvVariableIcon.propTypes = {
|
|
83
|
+
/**
|
|
84
|
+
* color of text, icon and borders
|
|
85
|
+
*/
|
|
86
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
87
|
+
/**
|
|
88
|
+
* Size
|
|
89
|
+
*/
|
|
90
|
+
size: PropTypes.oneOf(SIZES),
|
|
91
|
+
/**
|
|
92
|
+
* tip
|
|
93
|
+
*/
|
|
94
|
+
tip: PropTypes.string
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default AddEnvVariableIcon
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const DownloadIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<path d='M8 12L12 8M8 12L4 8M8 12V2.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<path d='M14 12V14H2V12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M12 18L18 12M12 18L6 12M12 18V3.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
48
|
+
<path d='M21 18V21H3V18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
</svg>
|
|
50
|
+
)
|
|
51
|
+
break
|
|
52
|
+
case LARGE:
|
|
53
|
+
icon = (
|
|
54
|
+
<svg
|
|
55
|
+
width={40}
|
|
56
|
+
height={40}
|
|
57
|
+
viewBox='0 0 40 40'
|
|
58
|
+
fill='none'
|
|
59
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
60
|
+
className={className}
|
|
61
|
+
>
|
|
62
|
+
<path d='M20 30L30 20M20 30L10 20M20 30V6.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
63
|
+
<path d='M35 30V35H5V30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
|
|
68
|
+
default:
|
|
69
|
+
break
|
|
70
|
+
}
|
|
71
|
+
return icon
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
DownloadIcon.propTypes = {
|
|
75
|
+
/**
|
|
76
|
+
* color of text, icon and borders
|
|
77
|
+
*/
|
|
78
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
79
|
+
/**
|
|
80
|
+
* Size
|
|
81
|
+
*/
|
|
82
|
+
size: PropTypes.oneOf(SIZES),
|
|
83
|
+
/**
|
|
84
|
+
* disabled
|
|
85
|
+
*/
|
|
86
|
+
disabled: PropTypes.bool,
|
|
87
|
+
/**
|
|
88
|
+
* inactive
|
|
89
|
+
*/
|
|
90
|
+
inactive: PropTypes.bool
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export default DownloadIcon
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import AddIcon from './AddIcon'
|
|
2
|
+
import AddEnvVariableIcon from './AddEnvVariableIcon'
|
|
2
3
|
import AlertIcon from './AlertIcon'
|
|
3
4
|
import AllAppsIcon from './AllAppsIcon'
|
|
4
5
|
import AllInOneIcon from './AllInOneIcon'
|
|
@@ -66,6 +67,7 @@ import DatabaseIcon from './DatabaseIcon'
|
|
|
66
67
|
import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
67
68
|
import DepencenciesReloadIcon from './DepencenciesReloadIcon'
|
|
68
69
|
import DeploymentHistoryIcon from './DeploymentHistoryIcon'
|
|
70
|
+
import DownloadIcon from './DownloadIcon'
|
|
69
71
|
import EditDocumentIcon from './EditDocumentIcon'
|
|
70
72
|
import EditIcon from './EditIcon'
|
|
71
73
|
import EntrypointIcon from './EntrypointIcon'
|
|
@@ -163,6 +165,7 @@ import ZoomOutIcon from './ZoomOutIcon'
|
|
|
163
165
|
|
|
164
166
|
export default {
|
|
165
167
|
AddIcon,
|
|
168
|
+
AddEnvVariableIcon,
|
|
166
169
|
AlertIcon,
|
|
167
170
|
AllAppsIcon,
|
|
168
171
|
AllInOneIcon,
|
|
@@ -230,6 +233,7 @@ export default {
|
|
|
230
233
|
DatabaseMigrationIcon,
|
|
231
234
|
DepencenciesReloadIcon,
|
|
232
235
|
DeploymentHistoryIcon,
|
|
236
|
+
DownloadIcon,
|
|
233
237
|
EditDocumentIcon,
|
|
234
238
|
EditIcon,
|
|
235
239
|
EntrypointIcon,
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
// https://loading.io/css/
|
|
3
|
+
import React from 'react'
|
|
4
|
+
import PropTypes from 'prop-types'
|
|
5
|
+
import styles from './SpinnerCircular.module.css'
|
|
6
|
+
import { COLORS_BUTTON, WHITE } from '../constants'
|
|
7
|
+
|
|
8
|
+
function SpinnerCircular ({
|
|
9
|
+
className = '',
|
|
10
|
+
color = WHITE,
|
|
11
|
+
size = 60,
|
|
12
|
+
thickness = 4
|
|
13
|
+
}) {
|
|
14
|
+
const styleRing = { width: `${size}px`, height: `${size}px` }
|
|
15
|
+
const styleDiv = {
|
|
16
|
+
width: `${size - 16}px`,
|
|
17
|
+
height: `${size - 16}px`,
|
|
18
|
+
margin: `${thickness}px`,
|
|
19
|
+
borderWidth: `${thickness}px`
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const spinnerClassName = styles[`ring${color}`] + ` ${styles.ring} ${className}`
|
|
23
|
+
return (
|
|
24
|
+
<div className={spinnerClassName} style={styleRing}>
|
|
25
|
+
<div style={styleDiv} />
|
|
26
|
+
<div style={styleDiv} />
|
|
27
|
+
<div style={styleDiv} />
|
|
28
|
+
<div style={styleDiv} />
|
|
29
|
+
</div>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
SpinnerCircular.propTypes = {
|
|
34
|
+
/**
|
|
35
|
+
* className
|
|
36
|
+
*/
|
|
37
|
+
className: PropTypes.string,
|
|
38
|
+
/**
|
|
39
|
+
* color
|
|
40
|
+
*/
|
|
41
|
+
color: PropTypes.oneOf(COLORS_BUTTON),
|
|
42
|
+
/**
|
|
43
|
+
* size
|
|
44
|
+
*/
|
|
45
|
+
size: PropTypes.number,
|
|
46
|
+
/**
|
|
47
|
+
* thickness
|
|
48
|
+
*/
|
|
49
|
+
thickness: PropTypes.number
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export default SpinnerCircular
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.ringwhite {
|
|
2
|
+
color: white;
|
|
3
|
+
}
|
|
4
|
+
.ring,
|
|
5
|
+
.ring div {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
}
|
|
8
|
+
.ring div {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
display: block;
|
|
11
|
+
position: absolute;
|
|
12
|
+
border-style: solid;
|
|
13
|
+
border-color: currentColor;
|
|
14
|
+
border-radius: 50%;
|
|
15
|
+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
16
|
+
border-color: currentColor transparent transparent transparent;
|
|
17
|
+
}
|
|
18
|
+
.ring div:nth-child(1) {
|
|
19
|
+
animation-delay: -0.45s;
|
|
20
|
+
}
|
|
21
|
+
.ring div:nth-child(2) {
|
|
22
|
+
animation-delay: -0.3s;
|
|
23
|
+
}
|
|
24
|
+
.ring div:nth-child(3) {
|
|
25
|
+
animation-delay: -0.15s;
|
|
26
|
+
}
|
|
27
|
+
@keyframes lds-ring {
|
|
28
|
+
0% {
|
|
29
|
+
transform: rotate(0deg);
|
|
30
|
+
}
|
|
31
|
+
100% {
|
|
32
|
+
transform: rotate(360deg);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -12,19 +12,20 @@ export default {
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export const Loading = (args) => (
|
|
15
|
-
|
|
15
|
+
<>
|
|
16
|
+
<LoadingSpinner {...args} />
|
|
16
17
|
<BorderedBox>{loremIpsum}</BorderedBox>
|
|
17
|
-
|
|
18
|
+
</>
|
|
18
19
|
)
|
|
19
20
|
|
|
20
21
|
Loading.args = {
|
|
21
22
|
loading: true
|
|
22
23
|
}
|
|
23
24
|
|
|
24
|
-
export const LoadsAndStops = ({ loading
|
|
25
|
-
const [
|
|
26
|
-
const show = () =>
|
|
27
|
-
const hide = () =>
|
|
25
|
+
export const LoadsAndStops = ({ loading }) => {
|
|
26
|
+
const [showLoadingSoinner, setShowLoadingSpinner] = useState(loading)
|
|
27
|
+
const show = () => setShowLoadingSpinner(true)
|
|
28
|
+
const hide = () => setShowLoadingSpinner(false)
|
|
28
29
|
|
|
29
30
|
function load () {
|
|
30
31
|
show()
|
|
@@ -35,10 +36,12 @@ export const LoadsAndStops = ({ loading, ...args }) => {
|
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
return (
|
|
38
|
-
|
|
39
|
+
<>
|
|
40
|
+
<LoadingSpinner loading={showLoadingSoinner} />
|
|
39
41
|
<Button label='Start Loading' color='error-red' onClick={() => load()} />
|
|
40
42
|
<BorderedBox>{loremIpsum}</BorderedBox>
|
|
41
|
-
|
|
43
|
+
</>
|
|
44
|
+
|
|
42
45
|
)
|
|
43
46
|
}
|
|
44
47
|
LoadsAndStops.args = {
|