allaw-ui 0.1.27 → 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/buttons/SecondaryButton.d.ts +8 -4
- package/dist/components/atoms/buttons/SecondaryButton.js +113 -7
- 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
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { ButtonHTMLAttributes } from "react";
|
|
2
2
|
import "./SecondaryButton.css";
|
|
3
3
|
import "../../../styles/global.css";
|
|
4
|
-
export interface SecondaryButtonProps {
|
|
4
|
+
export interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
5
|
startIcon?: React.ReactNode;
|
|
6
6
|
endIcon?: React.ReactNode;
|
|
7
|
+
startIconName?: string;
|
|
8
|
+
endIconName?: string;
|
|
7
9
|
label: string;
|
|
8
10
|
disabled?: boolean;
|
|
9
11
|
mode?: "dark" | "light";
|
|
10
|
-
onClick?: () => void;
|
|
12
|
+
onClick?: () => Promise<void> | void;
|
|
11
13
|
fullWidth?: boolean;
|
|
14
|
+
type?: "button" | "submit" | "reset";
|
|
15
|
+
isLoading?: boolean;
|
|
12
16
|
}
|
|
13
|
-
declare const SecondaryButton: React.
|
|
17
|
+
declare const SecondaryButton: React.ForwardRefExoticComponent<SecondaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
18
|
export default SecondaryButton;
|
|
@@ -1,11 +1,117 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
50
|
+
var t = {};
|
|
51
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
52
|
+
t[p] = s[p];
|
|
53
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
54
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
55
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
56
|
+
t[p[i]] = s[p[i]];
|
|
57
|
+
}
|
|
58
|
+
return t;
|
|
59
|
+
};
|
|
60
|
+
import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
|
|
2
61
|
import "./SecondaryButton.css";
|
|
3
62
|
import "../../../styles/global.css";
|
|
4
|
-
var SecondaryButton = function (_a) {
|
|
5
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d;
|
|
6
|
-
|
|
7
|
-
|
|
63
|
+
var SecondaryButton = forwardRef(function (_a, ref) {
|
|
64
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.mode, mode = _c === void 0 ? "dark" : _c, onClick = _a.onClick, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.type, type = _e === void 0 ? "button" : _e, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "mode", "onClick", "fullWidth", "type", "isLoading"]);
|
|
65
|
+
var buttonRef = React.useRef(null);
|
|
66
|
+
var _g = useState(false), internalIsLoading = _g[0], setInternalIsLoading = _g[1];
|
|
67
|
+
var _h = useState(""), loadingDots = _h[0], setLoadingDots = _h[1];
|
|
68
|
+
useImperativeHandle(ref, function () { return buttonRef.current; });
|
|
69
|
+
var isButtonLoading = isLoading || internalIsLoading;
|
|
70
|
+
useEffect(function () {
|
|
71
|
+
var interval = null;
|
|
72
|
+
if (isButtonLoading) {
|
|
73
|
+
interval = setInterval(function () {
|
|
74
|
+
setLoadingDots(function (prev) {
|
|
75
|
+
if (prev.length >= 3)
|
|
76
|
+
return "";
|
|
77
|
+
return prev + ".";
|
|
78
|
+
});
|
|
79
|
+
}, 500);
|
|
80
|
+
}
|
|
81
|
+
return function () {
|
|
82
|
+
if (interval) {
|
|
83
|
+
clearInterval(interval);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
}, [isButtonLoading]);
|
|
87
|
+
var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
88
|
+
return __generator(this, function (_a) {
|
|
89
|
+
switch (_a.label) {
|
|
90
|
+
case 0:
|
|
91
|
+
if (isButtonLoading) {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
return [2 /*return*/];
|
|
94
|
+
}
|
|
95
|
+
if (!onClick) return [3 /*break*/, 4];
|
|
96
|
+
setInternalIsLoading(true);
|
|
97
|
+
_a.label = 1;
|
|
98
|
+
case 1:
|
|
99
|
+
_a.trys.push([1, , 3, 4]);
|
|
100
|
+
return [4 /*yield*/, onClick()];
|
|
101
|
+
case 2:
|
|
102
|
+
_a.sent();
|
|
103
|
+
return [3 /*break*/, 4];
|
|
104
|
+
case 3:
|
|
105
|
+
setInternalIsLoading(false);
|
|
106
|
+
return [7 /*endfinally*/];
|
|
107
|
+
case 4: return [2 /*return*/];
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
}); };
|
|
111
|
+
return (React.createElement("button", __assign({ ref: buttonRef, className: "secondary-button ".concat(disabled ? "secondary-button-disabled" : "secondary-button-enabled", " secondary-button-").concat(mode, " ").concat(fullWidth ? "secondary-button-full-width" : "", " ").concat(isButtonLoading ? "secondary-button-loading" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
112
|
+
startIcon && (React.createElement("span", { className: "secondary-button-icon ".concat(startIconName) })),
|
|
8
113
|
React.createElement("span", { className: "secondary-button-label" }, label),
|
|
9
|
-
endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(
|
|
10
|
-
};
|
|
114
|
+
isButtonLoading ? (React.createElement("span", { className: "secondary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "secondary-button-icon ".concat(endIconName) }))));
|
|
115
|
+
});
|
|
116
|
+
SecondaryButton.displayName = "SecondaryButton";
|
|
11
117
|
export default SecondaryButton;
|
|
@@ -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";
|