forstok-ui-lib 1.0.13 → 1.0.15
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/index.d.ts +25 -1
- package/dist/index.js +100 -20
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +113 -33
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/icons/edit.svg +3 -0
- package/src/components/icon/icon.styles.ts +84 -0
- package/src/components/icon/icon.tsx +16 -0
- package/src/components/index.ts +4 -1
- package/src/components/label/label.styles.ts +53 -0
- package/src/components/label/label.tsx +12 -0
- package/src/components/loading/loading.styles.ts +156 -0
- package/src/components/loading/loading.tsx +24 -0
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components'
|
|
2
|
+
|
|
3
|
+
import type { TLoading } from './loading'
|
|
4
|
+
|
|
5
|
+
type TLoadingChild = Omit<TLoading, 'shape' | 'extendClass'>
|
|
6
|
+
|
|
7
|
+
const getLoadingContainerStyled = ({ $mode, $position, $color }: TLoadingChild) => {
|
|
8
|
+
let style = ''
|
|
9
|
+
switch ($mode) {
|
|
10
|
+
case 'small' :
|
|
11
|
+
style += `
|
|
12
|
+
border-top: 2px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
13
|
+
border-right: 2px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
14
|
+
border-bottom: 2px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
15
|
+
border-left: 2px solid transparent;
|
|
16
|
+
&,
|
|
17
|
+
&:after {
|
|
18
|
+
width: 12px;
|
|
19
|
+
height: 12px;
|
|
20
|
+
}
|
|
21
|
+
`
|
|
22
|
+
break
|
|
23
|
+
case 'smallclear' :
|
|
24
|
+
style += `
|
|
25
|
+
border-top: 2px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
26
|
+
border-right: 2px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
27
|
+
border-bottom: 2px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
28
|
+
border-left: 2px solid transparent;
|
|
29
|
+
margin: 0;
|
|
30
|
+
&,
|
|
31
|
+
&:after {
|
|
32
|
+
width: 12px;
|
|
33
|
+
height: 12px;
|
|
34
|
+
}
|
|
35
|
+
`
|
|
36
|
+
break
|
|
37
|
+
case 'medium' :
|
|
38
|
+
style += `
|
|
39
|
+
border-top: 3px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
40
|
+
border-right: 3px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
41
|
+
border-bottom: 3px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
42
|
+
border-left: 3px solid transparent;
|
|
43
|
+
&,
|
|
44
|
+
&:after {
|
|
45
|
+
width: 20px;
|
|
46
|
+
height: 20px;
|
|
47
|
+
}
|
|
48
|
+
`
|
|
49
|
+
break
|
|
50
|
+
case 'mediumclear' :
|
|
51
|
+
style += `
|
|
52
|
+
border-top: 3px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
53
|
+
border-right: 3px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
54
|
+
border-bottom: 3px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
55
|
+
border-left: 3px solid transparent;
|
|
56
|
+
margin: 20px;
|
|
57
|
+
&,
|
|
58
|
+
&:after {
|
|
59
|
+
width: 20px;
|
|
60
|
+
height: 20px;
|
|
61
|
+
}
|
|
62
|
+
`
|
|
63
|
+
break
|
|
64
|
+
case 'large' :
|
|
65
|
+
style += `
|
|
66
|
+
border-top: 4px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
67
|
+
border-right: 4px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
68
|
+
border-bottom: 4px solid ${$color? $color : 'var(--err-clr-ln)'};
|
|
69
|
+
border-left: 4px solid transparent;
|
|
70
|
+
&,
|
|
71
|
+
&:after {
|
|
72
|
+
width: 25px;
|
|
73
|
+
height: 25px;
|
|
74
|
+
}
|
|
75
|
+
`
|
|
76
|
+
break
|
|
77
|
+
default:
|
|
78
|
+
break
|
|
79
|
+
}
|
|
80
|
+
if ($position === 'left') {
|
|
81
|
+
style += `
|
|
82
|
+
margin-left: 0;
|
|
83
|
+
margin-right: 0;
|
|
84
|
+
`
|
|
85
|
+
}
|
|
86
|
+
return style
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export const LoadingContainer = styled.div<{ $mode?: string, $position?: string, $color?: string }>`
|
|
90
|
+
@keyframes load8 {
|
|
91
|
+
0% {
|
|
92
|
+
-webkit-transform: rotate(0deg);
|
|
93
|
+
transform: rotate(0deg);
|
|
94
|
+
}
|
|
95
|
+
100% {
|
|
96
|
+
-webkit-transform: rotate(360deg);
|
|
97
|
+
transform: rotate(360deg);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
display: block;
|
|
101
|
+
position: relative;
|
|
102
|
+
text-indent: -9999px;
|
|
103
|
+
margin: 10px auto;
|
|
104
|
+
transform: translateZ(0);
|
|
105
|
+
animation: load8 1.1s infinite linear;
|
|
106
|
+
&,
|
|
107
|
+
&:after {
|
|
108
|
+
border-radius: 50%;
|
|
109
|
+
}
|
|
110
|
+
&.is-hidden {
|
|
111
|
+
display: none;
|
|
112
|
+
}
|
|
113
|
+
${getLoadingContainerStyled}
|
|
114
|
+
`
|
|
115
|
+
export const LoadingParentContainer = styled.div<{ $color?: string }>`
|
|
116
|
+
@keyframes sk-bouncedelay {
|
|
117
|
+
0%, 80%, 100% {
|
|
118
|
+
-webkit-transform: scale(0);
|
|
119
|
+
transform: scale(0);
|
|
120
|
+
} 40% {
|
|
121
|
+
-webkit-transform: scale(1.0);
|
|
122
|
+
transform: scale(1.0);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
width: auto;
|
|
126
|
+
display: inline;
|
|
127
|
+
margin-left: 4px;
|
|
128
|
+
> div {
|
|
129
|
+
width: 5px;
|
|
130
|
+
height: 5px;
|
|
131
|
+
background-color: var(--act-clr-bg);
|
|
132
|
+
border-radius: 100%;
|
|
133
|
+
display: inline-block;
|
|
134
|
+
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
135
|
+
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
136
|
+
margin-left: 1px;
|
|
137
|
+
&:nth-child(1) {
|
|
138
|
+
animation-delay: -0.32s;
|
|
139
|
+
}
|
|
140
|
+
&:nth-child(2) {
|
|
141
|
+
animation-delay: -0.16s;
|
|
142
|
+
}
|
|
143
|
+
&:nth-child(3) {
|
|
144
|
+
animation-delay: -0.32s;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
${({ $color }:{ $color?: string }) => {
|
|
148
|
+
if ($color) {
|
|
149
|
+
return css`
|
|
150
|
+
> div {
|
|
151
|
+
background-color: ${$color};
|
|
152
|
+
}
|
|
153
|
+
`
|
|
154
|
+
}
|
|
155
|
+
}}
|
|
156
|
+
`
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import { LoadingContainer, LoadingParentContainer } from './loading.styles';
|
|
3
|
+
|
|
4
|
+
export type TLoading = HTMLAttributes<HTMLDivElement> & {
|
|
5
|
+
$mode?: string
|
|
6
|
+
$shape?: string
|
|
7
|
+
$color?: string
|
|
8
|
+
$position?: string
|
|
9
|
+
$extendClass?: string
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const LoadingComponent = ({ $mode, $position, $shape, $color, $extendClass, ...props }: TLoading) => {
|
|
13
|
+
const _className = `${props.className || ''} ${$extendClass || ''}`
|
|
14
|
+
|
|
15
|
+
return $shape === 'dot' ? (
|
|
16
|
+
<LoadingParentContainer className={_className} $color={$color} {... props} >
|
|
17
|
+
<div></div>
|
|
18
|
+
<div></div>
|
|
19
|
+
<div></div>
|
|
20
|
+
</LoadingParentContainer>
|
|
21
|
+
) : <LoadingContainer className={_className} $mode={$mode} $color={$color} $position={$position} {... props} />
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default LoadingComponent
|