react-artasys-ui 0.0.3 → 0.0.4
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/lib/Button/Button.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
wait?: boolean;
|
|
4
|
+
classNameContainer?: string;
|
|
5
|
+
styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
|
|
4
6
|
}
|
|
5
|
-
declare const Button: ({ children, wait, ...props }: IButton) => JSX.Element;
|
|
7
|
+
declare const Button: ({ children, className, classNameContainer, styleContainer, wait, ...props }: IButton) => JSX.Element;
|
|
6
8
|
export default Button;
|
package/package.json
CHANGED
package/src/Button/Button.tsx
CHANGED
|
@@ -3,13 +3,15 @@ import styles from "./style.module.css";
|
|
|
3
3
|
import Spinner from "../Spinner";
|
|
4
4
|
|
|
5
5
|
interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
-
wait?: boolean
|
|
6
|
+
wait?: boolean;
|
|
7
|
+
classNameContainer?: string;
|
|
8
|
+
styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
|
|
7
9
|
}
|
|
8
10
|
|
|
9
|
-
const Button = ({children, wait = false, ...props}: IButton) => {
|
|
11
|
+
const Button = ({children, className, classNameContainer, styleContainer, wait = false, ...props}: IButton) => {
|
|
10
12
|
|
|
11
|
-
return(<div className={styles['container']}>
|
|
12
|
-
<button {...props}>{children}</button>
|
|
13
|
+
return(<div className={styles['container'] + (classNameContainer ? ' ' + classNameContainer : '')} style={styleContainer}>
|
|
14
|
+
<button {...props} className={className}>{children}</button>
|
|
13
15
|
<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
|
|
14
16
|
<Spinner size="small" color="contrast"/>
|
|
15
17
|
</div>
|
|
@@ -31,9 +31,11 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
|
|
|
31
31
|
style={styleContainer}
|
|
32
32
|
>
|
|
33
33
|
{beforeElement}
|
|
34
|
-
{
|
|
34
|
+
<div className={styles['element']}>
|
|
35
|
+
{typeof children === 'function' ? children(props) : null}
|
|
36
|
+
{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
|
|
37
|
+
</div>
|
|
35
38
|
{afterElement}
|
|
36
|
-
{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
|
|
37
39
|
</label>
|
|
38
40
|
{currentError && <div className={styles['error']}>{currentError}</div>}
|
|
39
41
|
</>);
|
|
@@ -4,21 +4,27 @@
|
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
6
|
width: 100%;
|
|
7
|
-
min-height:
|
|
7
|
+
min-height: 45px;
|
|
8
8
|
position: relative;
|
|
9
9
|
border: 1px solid #CCCCCC;
|
|
10
10
|
border-radius: 3px;
|
|
11
11
|
z-index: 0;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.element {
|
|
15
|
+
align-self: stretch;
|
|
16
|
+
width: 100%;
|
|
17
|
+
min-height: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.element > input, .element > textarea {
|
|
15
21
|
width: 100% !important;
|
|
22
|
+
height: 100% !important;
|
|
16
23
|
min-height: 100% !important;
|
|
17
24
|
max-height: 500px !important;
|
|
18
25
|
max-height: 50dvh !important;
|
|
19
|
-
padding: 10px 5px !important;
|
|
20
26
|
margin: 0 !important;
|
|
21
|
-
font-size: 1.3em
|
|
27
|
+
font-size: 1.3em;
|
|
22
28
|
border: 0 !important;
|
|
23
29
|
box-sizing: border-box !important;
|
|
24
30
|
background-color: transparent !important;
|
|
@@ -30,24 +36,25 @@
|
|
|
30
36
|
background-color: #EFEFEF;
|
|
31
37
|
}
|
|
32
38
|
|
|
33
|
-
.
|
|
34
|
-
.
|
|
35
|
-
.
|
|
36
|
-
.
|
|
39
|
+
.element > input:-webkit-autofill,
|
|
40
|
+
.element > input:-webkit-autofill:hover,
|
|
41
|
+
.element > input:-webkit-autofill:focus,
|
|
42
|
+
.element > input:-webkit-autofill:active{
|
|
37
43
|
-webkit-background-clip: text;
|
|
38
44
|
}
|
|
39
45
|
|
|
40
|
-
.
|
|
46
|
+
.element > input:focus {
|
|
41
47
|
outline: none;
|
|
42
48
|
}
|
|
43
49
|
|
|
44
|
-
.
|
|
50
|
+
.element > .placeholder {
|
|
45
51
|
position: absolute;
|
|
46
52
|
display: flex;
|
|
47
53
|
justify-content: center;
|
|
48
54
|
align-items: center;
|
|
49
55
|
top: 0;
|
|
50
|
-
left: 5px;
|
|
56
|
+
margin-left: 5px;
|
|
57
|
+
height: 100%;
|
|
51
58
|
color: #7A7A73;
|
|
52
59
|
font-size: 1.2em;
|
|
53
60
|
z-index: -1;
|
|
@@ -55,7 +62,11 @@
|
|
|
55
62
|
transition: transform 0.3s;
|
|
56
63
|
}
|
|
57
64
|
|
|
58
|
-
.
|
|
65
|
+
.element > textarea ~ .placeholder {
|
|
66
|
+
max-height: 2em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.element > .placeholder::before {
|
|
59
70
|
content: "";
|
|
60
71
|
position: absolute;
|
|
61
72
|
display: block;
|
|
@@ -65,16 +76,16 @@
|
|
|
65
76
|
z-index: -1;
|
|
66
77
|
}
|
|
67
78
|
|
|
68
|
-
.
|
|
79
|
+
.element > input:required ~ .placeholder::after {
|
|
69
80
|
content: "*";
|
|
70
81
|
}
|
|
71
82
|
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
.
|
|
75
|
-
.
|
|
76
|
-
.
|
|
77
|
-
transform: translate(-10%, -
|
|
83
|
+
.element > input:focus ~ .placeholder,
|
|
84
|
+
.element > textarea:focus ~ .placeholder,
|
|
85
|
+
.element > input:not([value=""]) ~ .placeholder,
|
|
86
|
+
.element > textarea:not(:empty) ~ .placeholder,
|
|
87
|
+
.element > input:not(:empty) ~ .placeholder {
|
|
88
|
+
transform: translate(-10%, -50%) scale(0.8);
|
|
78
89
|
z-index: 0;
|
|
79
90
|
}
|
|
80
91
|
|
|
@@ -82,7 +93,7 @@
|
|
|
82
93
|
border-color: #FF6D6D;
|
|
83
94
|
}
|
|
84
95
|
|
|
85
|
-
.container.error
|
|
96
|
+
.container.error .placeholder {
|
|
86
97
|
color: #FF6D6D;
|
|
87
98
|
}
|
|
88
99
|
|