allaw-ui 0.1.28 → 0.1.29
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/components/atoms/inputs/TextArea.css +199 -0
- package/dist/components/atoms/inputs/TextArea.d.ts +22 -0
- package/dist/components/atoms/inputs/TextArea.js +79 -0
- package/dist/components/atoms/inputs/index.d.ts +2 -0
- package/dist/components/atoms/inputs/index.js +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
@import "../../../styles/colors.css";
|
|
2
|
+
|
|
3
|
+
/* Style commun */
|
|
4
|
+
.text-area {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: 8px;
|
|
8
|
+
field-sizing: content;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.text-area-title-container {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.text-area-required {
|
|
17
|
+
color: var(--dark-grey, #456073);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.text-area-placeholder {
|
|
21
|
+
color: var(--Tags-Mid-grey, rgba(114, 142, 167, 1));
|
|
22
|
+
font-family: "Open Sans";
|
|
23
|
+
font-size: 14px;
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
line-height: normal;
|
|
27
|
+
opacity: 0.8;
|
|
28
|
+
width: 100%;
|
|
29
|
+
padding-left: 4px;
|
|
30
|
+
resize: vertical;
|
|
31
|
+
min-height: 100px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Style default */
|
|
35
|
+
.text-area-default {
|
|
36
|
+
display: flex;
|
|
37
|
+
width: 100%;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
align-items: flex-start;
|
|
41
|
+
gap: 11px;
|
|
42
|
+
field-sizing: content;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.text-area-default .text-area-container {
|
|
46
|
+
display: flex;
|
|
47
|
+
width: 100%;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
align-items: flex-start;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.text-area-default .text-area-input {
|
|
54
|
+
display: flex;
|
|
55
|
+
width: 100%;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
align-items: flex-start;
|
|
58
|
+
border-radius: 8px;
|
|
59
|
+
border: 3px solid var(--grey-venom, #e6edf5);
|
|
60
|
+
background: var(--Primary-Blanc, #fff);
|
|
61
|
+
padding: 10px;
|
|
62
|
+
field-sizing: content;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.text-area-default .text-area-input:hover {
|
|
66
|
+
border-color: var(--venom-grey-dark, #d1dce8);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.text-area-default .text-area-input:focus-within {
|
|
70
|
+
border-color: var(--mid-grey, #728ea7);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.text-area-default .text-area-input textarea {
|
|
74
|
+
width: 100%;
|
|
75
|
+
border: none;
|
|
76
|
+
outline: none;
|
|
77
|
+
color: var(--noir);
|
|
78
|
+
field-sizing: content;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Style variation */
|
|
82
|
+
.text-area-variation {
|
|
83
|
+
display: flex;
|
|
84
|
+
width: 100%;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
align-items: flex-start;
|
|
88
|
+
gap: 11px;
|
|
89
|
+
field-sizing: content;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.text-area-variation .text-area-container {
|
|
93
|
+
display: flex;
|
|
94
|
+
width: 100%;
|
|
95
|
+
flex-direction: row;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.text-area-variation .text-area-input {
|
|
101
|
+
display: flex;
|
|
102
|
+
flex: 1;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
align-items: flex-start;
|
|
105
|
+
border-radius: 8px;
|
|
106
|
+
border: 1px solid rgba(114, 142, 167, 1);
|
|
107
|
+
background: var(--Primary-Blanc, #fff);
|
|
108
|
+
padding: 10px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.text-area-variation .text-area-input textarea {
|
|
112
|
+
width: 100%;
|
|
113
|
+
border: none;
|
|
114
|
+
outline: none;
|
|
115
|
+
color: var(--noir);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.text-area-variation .text-area-icon-button {
|
|
119
|
+
display: flex;
|
|
120
|
+
width: 40px;
|
|
121
|
+
height: 40px;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
align-items: center;
|
|
124
|
+
border-radius: 4px;
|
|
125
|
+
background: var(--Primary-Light-grey, #f4f7fb);
|
|
126
|
+
border: none;
|
|
127
|
+
margin-left: 8px;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.text-area-variation .text-area-icon-button:hover {
|
|
132
|
+
background: rgba(0, 0, 0, 0.1);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.text-area-variation .text-area-icon-button i {
|
|
136
|
+
width: 19px;
|
|
137
|
+
height: 19px;
|
|
138
|
+
flex-shrink: 0;
|
|
139
|
+
color: var(--dark-grey, #f4f7fb);
|
|
140
|
+
font-size: 18px;
|
|
141
|
+
padding-left: 2px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Style password */
|
|
145
|
+
.text-area-password {
|
|
146
|
+
display: flex;
|
|
147
|
+
width: 100%;
|
|
148
|
+
flex-direction: column;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
align-items: flex-start;
|
|
151
|
+
gap: 11px;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.text-area-password .text-area-container {
|
|
155
|
+
display: flex;
|
|
156
|
+
width: 100%;
|
|
157
|
+
flex-direction: row;
|
|
158
|
+
justify-content: space-between;
|
|
159
|
+
align-items: center;
|
|
160
|
+
border-radius: 8px;
|
|
161
|
+
border: 1px solid rgba(114, 142, 167, 1);
|
|
162
|
+
background: var(--Primary-Blanc, #fff);
|
|
163
|
+
padding: 10px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.text-area-password .text-area-input {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex: 1;
|
|
169
|
+
flex-direction: column;
|
|
170
|
+
align-items: flex-start;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.text-area-password .text-area-input textarea {
|
|
174
|
+
width: 100%;
|
|
175
|
+
border: none;
|
|
176
|
+
outline: none;
|
|
177
|
+
color: var(--noir);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.text-area-password .text-area-button {
|
|
181
|
+
color: var(--Primary-Mid-black, var(--primary-black, #171e25));
|
|
182
|
+
font-family: "Open Sans";
|
|
183
|
+
font-size: 12px;
|
|
184
|
+
font-style: normal;
|
|
185
|
+
font-weight: 600;
|
|
186
|
+
line-height: normal;
|
|
187
|
+
background: none;
|
|
188
|
+
border: none;
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.text-area-error {
|
|
193
|
+
margin-top: 4px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.error-message {
|
|
197
|
+
padding-top: 4px;
|
|
198
|
+
padding-left: 14px;
|
|
199
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./TextArea.css";
|
|
3
|
+
import "../../../styles/global.css";
|
|
4
|
+
import "../../../styles/icons.css";
|
|
5
|
+
import { commonRegex } from "../../../utils/regex";
|
|
6
|
+
export interface TextAreaProps {
|
|
7
|
+
title: string;
|
|
8
|
+
style?: "default" | "variation" | "password";
|
|
9
|
+
placeholder: string;
|
|
10
|
+
endIcon?: string;
|
|
11
|
+
isRequired?: boolean;
|
|
12
|
+
validate?: RegExp | keyof typeof commonRegex;
|
|
13
|
+
onError?: (error: string) => void;
|
|
14
|
+
onChange?: (value: string) => void;
|
|
15
|
+
value?: string;
|
|
16
|
+
error?: string;
|
|
17
|
+
}
|
|
18
|
+
export interface TextAreaRef {
|
|
19
|
+
validate: () => boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
|
|
22
|
+
export default TextArea;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
// TextArea.tsx
|
|
2
|
+
import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
|
|
3
|
+
import "./TextArea.css";
|
|
4
|
+
import "../../../styles/global.css";
|
|
5
|
+
import "../../../styles/icons.css";
|
|
6
|
+
import { commonRegex } from "../../../utils/regex";
|
|
7
|
+
import TinyInfo from "../typography/TinyInfo";
|
|
8
|
+
import Paragraph from "../typography/Paragraph";
|
|
9
|
+
var TextArea = forwardRef(function (_a, ref) {
|
|
10
|
+
var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error;
|
|
11
|
+
var _d = useState(false), isPasswordVisible = _d[0], setIsPasswordVisible = _d[1];
|
|
12
|
+
var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
|
|
13
|
+
var _f = useState(propError || ""), error = _f[0], setError = _f[1];
|
|
14
|
+
var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
|
|
15
|
+
var textareaRef = useRef(null);
|
|
16
|
+
useEffect(function () {
|
|
17
|
+
setValue(propValue || "");
|
|
18
|
+
}, [propValue]);
|
|
19
|
+
useEffect(function () {
|
|
20
|
+
setError(propError || "");
|
|
21
|
+
}, [propError]);
|
|
22
|
+
var validateTextArea = useCallback(function () {
|
|
23
|
+
var _a;
|
|
24
|
+
var currentValue = ((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value) || value;
|
|
25
|
+
var errorMessage = "";
|
|
26
|
+
if (isRequired && currentValue.trim() === "") {
|
|
27
|
+
errorMessage = "Ce champ est requis";
|
|
28
|
+
}
|
|
29
|
+
else if (validate && currentValue) {
|
|
30
|
+
var regex = typeof validate === "string" ? commonRegex[validate] : validate;
|
|
31
|
+
if (!regex.test(currentValue)) {
|
|
32
|
+
errorMessage = "Veuillez vérifier votre saisie";
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
setError(errorMessage);
|
|
36
|
+
setIsTouched(true);
|
|
37
|
+
onError === null || onError === void 0 ? void 0 : onError(errorMessage);
|
|
38
|
+
return !errorMessage;
|
|
39
|
+
}, [isRequired, value, validate, onError]);
|
|
40
|
+
useImperativeHandle(ref, function () { return ({
|
|
41
|
+
validate: validateTextArea,
|
|
42
|
+
}); });
|
|
43
|
+
var handleChange = function (e) {
|
|
44
|
+
var newValue = e.target.value;
|
|
45
|
+
setValue(newValue);
|
|
46
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
47
|
+
if (isTouched) {
|
|
48
|
+
validateTextArea();
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var handleBlur = function () {
|
|
52
|
+
setIsTouched(true);
|
|
53
|
+
validateTextArea();
|
|
54
|
+
};
|
|
55
|
+
var renderEndIcon = function () {
|
|
56
|
+
if (style === "variation" && endIcon) {
|
|
57
|
+
return (React.createElement("button", { className: "text-area-icon-button" },
|
|
58
|
+
React.createElement("i", { className: endIcon })));
|
|
59
|
+
}
|
|
60
|
+
if (style === "password") {
|
|
61
|
+
return (React.createElement("button", { className: "text-area-button", onClick: function () { return setIsPasswordVisible(!isPasswordVisible); } }, isPasswordVisible ? "CACHER" : "AFFICHER"));
|
|
62
|
+
}
|
|
63
|
+
return null;
|
|
64
|
+
};
|
|
65
|
+
return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
|
|
66
|
+
React.createElement("div", { className: "text-area-title-container" },
|
|
67
|
+
React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
|
|
68
|
+
isRequired && title && (React.createElement("span", { className: "text-area-required" },
|
|
69
|
+
"\u00A0",
|
|
70
|
+
"*"))),
|
|
71
|
+
React.createElement("div", { className: "text-area-container" },
|
|
72
|
+
React.createElement("div", { className: "text-area-input ".concat(style === "password" ? "text-area-password-input" : "") },
|
|
73
|
+
React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
|
|
74
|
+
renderEndIcon(),
|
|
75
|
+
error && isTouched && (React.createElement("div", { className: "error-message" },
|
|
76
|
+
React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
|
|
77
|
+
});
|
|
78
|
+
TextArea.displayName = "TextArea";
|
|
79
|
+
export default TextArea;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as Input } from "./Input";
|
|
2
|
+
export { default as TextArea } from "./TextArea";
|
|
2
3
|
export { default as SearchBar } from "./SearchBar";
|
|
3
4
|
export type { InputProps, InputRef } from "./Input";
|
|
4
5
|
export type { SearchBarProps } from "./SearchBar";
|
|
6
|
+
export type { TextAreaProps, TextAreaRef } from "./TextArea";
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
|
|
|
13
13
|
export { default as Fitler } from "./components/atoms/filter/Filter";
|
|
14
14
|
export { default as Input } from "./components/atoms/inputs/Input";
|
|
15
15
|
export type { InputProps, InputRef } from "./components/atoms/inputs/Input";
|
|
16
|
+
export { default as TextArea } from "./components/atoms/inputs/TextArea";
|
|
17
|
+
export type { TextAreaProps, TextAreaRef, } from "./components/atoms/inputs/TextArea";
|
|
16
18
|
export { default as SearchBar } from "./components/atoms/inputs/SearchBar";
|
|
17
19
|
export { default as ProgressBar } from "./components/atoms/progressBars/ProgressBar";
|
|
18
20
|
export { default as RadioButton } from "./components/atoms/radios/RadioButton";
|
package/dist/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { default as Checkbox } from "./components/atoms/checkboxes/Checkbox";
|
|
|
17
17
|
export { default as Fitler } from "./components/atoms/filter/Filter";
|
|
18
18
|
// Inputs
|
|
19
19
|
export { default as Input } from "./components/atoms/inputs/Input";
|
|
20
|
+
export { default as TextArea } from "./components/atoms/inputs/TextArea";
|
|
20
21
|
export { default as SearchBar } from "./components/atoms/inputs/SearchBar";
|
|
21
22
|
// Progress Bars
|
|
22
23
|
export { default as ProgressBar } from "./components/atoms/progressBars/ProgressBar";
|