react-core-ts 1.3.14 → 1.3.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/ReactTextArea.d.ts +2 -2
- package/dist/ReactTextArea.js +34 -32
- package/dist/ReactTextArea.js.map +1 -1
- package/package.json +1 -1
- package/src/ReactTextArea.tsx +52 -55
package/dist/ReactTextArea.d.ts
CHANGED
package/dist/ReactTextArea.js
CHANGED
|
@@ -66,7 +66,7 @@ var ModernTextArea = function (_a) {
|
|
|
66
66
|
setIsDisabled(disabled);
|
|
67
67
|
}, [disabled]);
|
|
68
68
|
var getErrors = function (err) {
|
|
69
|
-
var errMsg =
|
|
69
|
+
var errMsg = "";
|
|
70
70
|
if (err.message) {
|
|
71
71
|
errMsg = err === null || err === void 0 ? void 0 : err.message;
|
|
72
72
|
}
|
|
@@ -75,35 +75,20 @@ var ModernTextArea = function (_a) {
|
|
|
75
75
|
var generateClassName = function (type) {
|
|
76
76
|
var className = "resize-none ".concat(propsClassName);
|
|
77
77
|
switch (type) {
|
|
78
|
-
case
|
|
79
|
-
className += " block text-common text-input-text font-normal px-3.5 py-2 w-full text-sm text-gray-900 bg-transparent border appearance-none focus:outline-none focus:ring-0 peer rounded-[4px] disabled:text-input-disabled disabled:bg-disabled ".concat(hideLabel ?
|
|
78
|
+
case "input":
|
|
79
|
+
className += " block text-common text-input-text font-normal px-3.5 py-2 w-full text-sm text-gray-900 bg-transparent border appearance-none focus:outline-none focus:ring-0 peer rounded-[4px] disabled:text-input-disabled disabled:bg-disabled ".concat(hideLabel ? "" : "placeholder-transparent", " focus:placeholder-grey-secondary");
|
|
80
80
|
if (errors && errors[name]) {
|
|
81
81
|
className +=
|
|
82
|
-
|
|
82
|
+
" border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 ";
|
|
83
83
|
}
|
|
84
84
|
else {
|
|
85
85
|
className +=
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
break;
|
|
89
|
-
case 'label':
|
|
90
|
-
className += "\n modern-input-label \n peer-focus:modern-input-peer-focus-label-size \n absolute duration-300 transform \n -translate-y-[calc(100%-0.25rem)] top-[0.25rem] z-1 origin-[0] px-0 \n peer-placeholder-shown:translate-y-4 peer-placeholder-shown:top-4 \n peer-focus:top-[0.25rem] peer-focus:-translate-y-[calc(100%-0.25rem)] \n start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ".concat(isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer', " ").concat(!isDisabled || !checkIsEmptyField()
|
|
91
|
-
? 'active-input-label-bg'
|
|
92
|
-
: isDisabled && !checkIsEmptyField()
|
|
93
|
-
? 'disabled-input-label-bg'
|
|
94
|
-
: '', " ").concat(checkIsEmptyField()
|
|
95
|
-
? 'modern-input-label-size'
|
|
96
|
-
: 'modern-input-peer-focus-label-size');
|
|
97
|
-
if (errors && errors[name]) {
|
|
98
|
-
className += ' text-error-light ';
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
86
|
+
" text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0";
|
|
102
87
|
}
|
|
103
88
|
break;
|
|
104
89
|
// case 'label': // changes made for remove bg-white from placeolder is field disable and or with data
|
|
105
|
-
// className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-
|
|
106
|
-
// peer-placeholder-shown
|
|
90
|
+
// className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-6 z-1 origin-[0] px-0
|
|
91
|
+
// peer-placeholder-shown:translate-y-0 peer-placeholder-shown:top-[60%] peer-focus:top-2
|
|
107
92
|
// peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
|
|
108
93
|
// isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
|
|
109
94
|
// } ${
|
|
@@ -123,12 +108,29 @@ var ModernTextArea = function (_a) {
|
|
|
123
108
|
// className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
124
109
|
// }
|
|
125
110
|
// break;
|
|
126
|
-
case
|
|
127
|
-
className
|
|
111
|
+
case "label": // changes made for remove bg-white from placeolder is field disable and or with data
|
|
112
|
+
className += "modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-1.5 z-1 origin-[0] px-0 \n peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/6 rtl:peer-focus:left-auto \n peer-placeholder-shown:translate-y-2 peer-placeholder-shown:top-[2px] peer-focus:top-1.5 peer-focus:-translate-y-4\" ".concat(isDisabled
|
|
113
|
+
? "cursor-pointer"
|
|
114
|
+
: "cursor-text peer-focus:cursor-pointer", " ").concat(!isDisabled || !checkIsEmptyField()
|
|
115
|
+
? "active-input-label-bg"
|
|
116
|
+
: isDisabled && !checkIsEmptyField()
|
|
117
|
+
? "disabled-input-label-bg"
|
|
118
|
+
: "", " ").concat(checkIsEmptyField()
|
|
119
|
+
? "modern-input-label-size"
|
|
120
|
+
: "modern-input-peer-focus-label-size");
|
|
121
|
+
if (errors && errors[name]) {
|
|
122
|
+
className += " text-error-light ";
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
className += " text-grey-dark peer-focus:text-blue-navy";
|
|
126
|
+
}
|
|
127
|
+
break;
|
|
128
|
+
case "message":
|
|
129
|
+
className = " text-error-icon ";
|
|
128
130
|
break;
|
|
129
|
-
case
|
|
131
|
+
case "adorement":
|
|
130
132
|
className +=
|
|
131
|
-
|
|
133
|
+
" absolute right-0 py-4 adorement gap-1 flex items-center ";
|
|
132
134
|
break;
|
|
133
135
|
default:
|
|
134
136
|
break;
|
|
@@ -145,25 +147,25 @@ var ModernTextArea = function (_a) {
|
|
|
145
147
|
// }
|
|
146
148
|
var handleError = function (data) {
|
|
147
149
|
var _a;
|
|
148
|
-
if (getErrors(data[name]) ===
|
|
149
|
-
getErrors(data[name]) ===
|
|
150
|
+
if (getErrors(data[name]) === "required" ||
|
|
151
|
+
getErrors(data[name]) === "Required") {
|
|
150
152
|
return "".concat(label, " is ").concat(getErrors(data[name]));
|
|
151
153
|
}
|
|
152
154
|
else {
|
|
153
|
-
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a :
|
|
155
|
+
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : "";
|
|
154
156
|
}
|
|
155
157
|
};
|
|
156
158
|
var textFieldRef = (0, react_1.useRef)(null); // Ref for the text field div
|
|
157
159
|
(0, react_1.useEffect)(function () {
|
|
158
160
|
(0, getPosition_1.applyPositionClass)(textFieldRef, isHovered);
|
|
159
161
|
}, [isHovered]);
|
|
160
|
-
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: textFieldRef, className: " ".concat(fullwidth ?
|
|
162
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: textFieldRef, className: " ".concat(fullwidth ? "w-full" : "w-auto") }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "tooltip-container" }, { children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "tooltip" }, { children: errors && handleError(errors) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex relative ".concat(fullwidth ? "w-full" : "w-auto") }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "relative w-full" }, { children: [(0, jsx_runtime_1.jsx)("textarea", __assign({ id: id, ref: inputRef, disabled: isDisabled, "data-testid": "textarea" }, register === null || register === void 0 ? void 0 : register(name, { required: required }), { placeholder: placeholder || label, rows: rows || 5, onChange: onChange, value: value, style: {
|
|
161
163
|
paddingRight: (0, generateInnerWidth_1.getInnerWidth)(adorementRef, 11),
|
|
162
164
|
height: boxHeight !== null && boxHeight !== void 0 ? boxHeight : undefined,
|
|
163
165
|
minHeight: boxMinHeight !== null && boxMinHeight !== void 0 ? boxMinHeight : undefined,
|
|
164
|
-
}, autoComplete: autoComplete ?
|
|
166
|
+
}, autoComplete: autoComplete ? "on" : "off",
|
|
165
167
|
// autoFocus={autoFocus}
|
|
166
|
-
className: generateClassName(
|
|
168
|
+
className: generateClassName("input") })), !hideLabel && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName("label") }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: generateClassName("adorement"), ref: adorementRef }, { children: errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label text-error-icon cursor-pointer relative ".concat(generateClassName("message")), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) }))) }))] }))] })) })));
|
|
167
169
|
};
|
|
168
170
|
exports.default = ModernTextArea;
|
|
169
171
|
//# sourceMappingURL=ReactTextArea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactTextArea.js","sourceRoot":"","sources":["../src/ReactTextArea.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ReactTextArea.js","sourceRoot":"","sources":["../src/ReactTextArea.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/ReactTextArea.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from
|
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
2
2
|
|
|
3
|
-
import { TextAreaProps } from
|
|
4
|
-
import CustomIcons from
|
|
5
|
-
import { getInnerWidth } from
|
|
6
|
-
import { applyPositionClass } from
|
|
3
|
+
import { TextAreaProps } from "./commontypes";
|
|
4
|
+
import CustomIcons from "./components/customIcons";
|
|
5
|
+
import { getInnerWidth } from "./utilities/generateInnerWidth";
|
|
6
|
+
import { applyPositionClass } from "./utilities/getPosition";
|
|
7
7
|
|
|
8
8
|
const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
9
9
|
name,
|
|
@@ -70,60 +70,32 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
70
70
|
setIsDisabled(disabled);
|
|
71
71
|
}, [disabled]);
|
|
72
72
|
const getErrors = (err: any) => {
|
|
73
|
-
let errMsg =
|
|
73
|
+
let errMsg = "";
|
|
74
74
|
if (err.message) {
|
|
75
75
|
errMsg = err?.message;
|
|
76
76
|
}
|
|
77
77
|
return errMsg;
|
|
78
78
|
};
|
|
79
79
|
const generateClassName = (
|
|
80
|
-
type:
|
|
80
|
+
type: "input" | "label" | "message" | "adorement"
|
|
81
81
|
): string => {
|
|
82
82
|
let className = `resize-none ${propsClassName}`;
|
|
83
83
|
switch (type) {
|
|
84
|
-
case
|
|
84
|
+
case "input":
|
|
85
85
|
className += ` block text-common text-input-text font-normal px-3.5 py-2 w-full text-sm text-gray-900 bg-transparent border appearance-none focus:outline-none focus:ring-0 peer rounded-[4px] disabled:text-input-disabled disabled:bg-disabled ${
|
|
86
|
-
hideLabel ?
|
|
86
|
+
hideLabel ? "" : "placeholder-transparent"
|
|
87
87
|
} focus:placeholder-grey-secondary`;
|
|
88
88
|
if (errors && errors[name]) {
|
|
89
89
|
className +=
|
|
90
|
-
|
|
90
|
+
" border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 ";
|
|
91
91
|
} else {
|
|
92
92
|
className +=
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
break;
|
|
96
|
-
case 'label':
|
|
97
|
-
className += `
|
|
98
|
-
modern-input-label
|
|
99
|
-
peer-focus:modern-input-peer-focus-label-size
|
|
100
|
-
absolute duration-300 transform
|
|
101
|
-
-translate-y-[calc(100%-0.25rem)] top-[0.25rem] z-1 origin-[0] px-0
|
|
102
|
-
peer-placeholder-shown:translate-y-4 peer-placeholder-shown:top-4
|
|
103
|
-
peer-focus:top-[0.25rem] peer-focus:-translate-y-[calc(100%-0.25rem)]
|
|
104
|
-
start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
|
|
105
|
-
isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
|
|
106
|
-
} ${
|
|
107
|
-
!isDisabled || !checkIsEmptyField()
|
|
108
|
-
? 'active-input-label-bg'
|
|
109
|
-
: isDisabled && !checkIsEmptyField()
|
|
110
|
-
? 'disabled-input-label-bg'
|
|
111
|
-
: ''
|
|
112
|
-
} ${
|
|
113
|
-
checkIsEmptyField()
|
|
114
|
-
? 'modern-input-label-size'
|
|
115
|
-
: 'modern-input-peer-focus-label-size'
|
|
116
|
-
}`;
|
|
117
|
-
|
|
118
|
-
if (errors && errors[name]) {
|
|
119
|
-
className += ' text-error-light ';
|
|
120
|
-
} else {
|
|
121
|
-
className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
93
|
+
" text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0";
|
|
122
94
|
}
|
|
123
95
|
break;
|
|
124
96
|
// case 'label': // changes made for remove bg-white from placeolder is field disable and or with data
|
|
125
|
-
// className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-
|
|
126
|
-
// peer-placeholder-shown
|
|
97
|
+
// className += ` modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-6 z-1 origin-[0] px-0
|
|
98
|
+
// peer-placeholder-shown:translate-y-0 peer-placeholder-shown:top-[60%] peer-focus:top-2
|
|
127
99
|
// peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
|
|
128
100
|
// isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
|
|
129
101
|
// } ${
|
|
@@ -144,13 +116,38 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
144
116
|
// className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
145
117
|
// }
|
|
146
118
|
// break;
|
|
119
|
+
case "label": // changes made for remove bg-white from placeolder is field disable and or with data
|
|
120
|
+
className += `modern-input-label peer-focus:modern-input-peer-focus-label-size absolute duration-300 transform -translate-y-4 top-1.5 z-1 origin-[0] px-0
|
|
121
|
+
peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/6 rtl:peer-focus:left-auto
|
|
122
|
+
peer-placeholder-shown:translate-y-2 peer-placeholder-shown:top-[2px] peer-focus:top-1.5 peer-focus:-translate-y-4" ${
|
|
123
|
+
isDisabled
|
|
124
|
+
? "cursor-pointer"
|
|
125
|
+
: "cursor-text peer-focus:cursor-pointer"
|
|
126
|
+
} ${
|
|
127
|
+
!isDisabled || !checkIsEmptyField()
|
|
128
|
+
? "active-input-label-bg"
|
|
129
|
+
: isDisabled && !checkIsEmptyField()
|
|
130
|
+
? "disabled-input-label-bg"
|
|
131
|
+
: ""
|
|
132
|
+
} ${
|
|
133
|
+
checkIsEmptyField()
|
|
134
|
+
? "modern-input-label-size"
|
|
135
|
+
: "modern-input-peer-focus-label-size"
|
|
136
|
+
}`;
|
|
137
|
+
|
|
138
|
+
if (errors && errors[name]) {
|
|
139
|
+
className += " text-error-light ";
|
|
140
|
+
} else {
|
|
141
|
+
className += " text-grey-dark peer-focus:text-blue-navy";
|
|
142
|
+
}
|
|
143
|
+
break;
|
|
147
144
|
|
|
148
|
-
case
|
|
149
|
-
className =
|
|
145
|
+
case "message":
|
|
146
|
+
className = " text-error-icon ";
|
|
150
147
|
break;
|
|
151
|
-
case
|
|
148
|
+
case "adorement":
|
|
152
149
|
className +=
|
|
153
|
-
|
|
150
|
+
" absolute right-0 py-4 adorement gap-1 flex items-center ";
|
|
154
151
|
break;
|
|
155
152
|
default:
|
|
156
153
|
break;
|
|
@@ -167,12 +164,12 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
167
164
|
// }
|
|
168
165
|
const handleError = (data: any) => {
|
|
169
166
|
if (
|
|
170
|
-
getErrors(data[name]) ===
|
|
171
|
-
getErrors(data[name]) ===
|
|
167
|
+
getErrors(data[name]) === "required" ||
|
|
168
|
+
getErrors(data[name]) === "Required"
|
|
172
169
|
) {
|
|
173
170
|
return `${label} is ${getErrors(data[name])}`;
|
|
174
171
|
} else {
|
|
175
|
-
return getErrors(data[name]) ??
|
|
172
|
+
return getErrors(data[name]) ?? "";
|
|
176
173
|
}
|
|
177
174
|
};
|
|
178
175
|
const textFieldRef = useRef<HTMLDivElement>(null); // Ref for the text field div
|
|
@@ -181,13 +178,13 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
181
178
|
applyPositionClass(textFieldRef, isHovered);
|
|
182
179
|
}, [isHovered]);
|
|
183
180
|
return (
|
|
184
|
-
<div ref={textFieldRef} className={` ${fullwidth ?
|
|
181
|
+
<div ref={textFieldRef} className={` ${fullwidth ? "w-full" : "w-auto"}`}>
|
|
185
182
|
<div className="tooltip-container">
|
|
186
183
|
{isHovered && errors && errors[name] && (
|
|
187
184
|
<span className="tooltip">{errors && handleError(errors)}</span>
|
|
188
185
|
)}
|
|
189
186
|
|
|
190
|
-
<div className={`flex relative ${fullwidth ?
|
|
187
|
+
<div className={`flex relative ${fullwidth ? "w-full" : "w-auto"}`}>
|
|
191
188
|
<div className="relative w-full">
|
|
192
189
|
<textarea
|
|
193
190
|
id={id}
|
|
@@ -204,26 +201,26 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
|
|
|
204
201
|
height: boxHeight ?? undefined,
|
|
205
202
|
minHeight: boxMinHeight ?? undefined,
|
|
206
203
|
}}
|
|
207
|
-
autoComplete={autoComplete ?
|
|
204
|
+
autoComplete={autoComplete ? "on" : "off"}
|
|
208
205
|
// autoFocus={autoFocus}
|
|
209
|
-
className={generateClassName(
|
|
206
|
+
className={generateClassName("input")}
|
|
210
207
|
/>
|
|
211
208
|
{!hideLabel && (
|
|
212
209
|
<label
|
|
213
210
|
htmlFor={id}
|
|
214
211
|
onClick={() => onLabelClick()}
|
|
215
|
-
className={generateClassName(
|
|
212
|
+
className={generateClassName("label")}
|
|
216
213
|
>
|
|
217
214
|
{label}
|
|
218
215
|
{required ? <span className="text-error"> *</span> : <></>}
|
|
219
216
|
</label>
|
|
220
217
|
)}
|
|
221
218
|
</div>
|
|
222
|
-
<div className={generateClassName(
|
|
219
|
+
<div className={generateClassName("adorement")} ref={adorementRef}>
|
|
223
220
|
{errors && errors[name] && (
|
|
224
221
|
<div
|
|
225
222
|
className={` text-error-label text-error-icon cursor-pointer relative ${generateClassName(
|
|
226
|
-
|
|
223
|
+
"message"
|
|
227
224
|
)}`}
|
|
228
225
|
onMouseEnter={() => setIsHovered(true)}
|
|
229
226
|
onMouseLeave={() => setIsHovered(false)}
|