dhre-component-lib 0.6.9 → 0.7.0
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.esm.js +15 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +15 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9654,20 +9654,32 @@ function Dropdown(props) {
|
|
|
9654
9654
|
React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
|
|
9655
9655
|
}
|
|
9656
9656
|
|
|
9657
|
-
var css$8 = ".textArea {\n min-width: 70%;\n width: 100%;\n height: 8.875rem;\n border-radius: 0.5rem;\n padding: 1rem;\n font-size: 1rem;\n font-family: Meraas Aktiv;\n font-weight: 400;\n line-height: 1.4rem;\n text-align: left;\n outline: none;\n resize: none;\n overflow: auto;\n max-width: 100%;\n max-height: 100%;\n}\n.characters {\n color: #686868;\n}\n\n.textArea100 {\n height: 100%;\n width: 100%;\n
|
|
9657
|
+
var css$8 = ".textArea {\n min-width: 70%;\n width: 100%;\n height: 8.875rem;\n border-radius: 0.5rem;\n padding: 1rem;\n font-size: 1rem;\n font-family: Meraas Aktiv;\n font-weight: 400;\n line-height: 1.4rem;\n text-align: left;\n outline: none;\n resize: none;\n overflow: auto;\n max-width: 100%;\n max-height: 100%;\n}\n.inputTextAreaLabel {\n position: absolute;\n z-index: 1;\n top: -10px;\n left: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.characters {\n color: #686868;\n}\n\n.textArea100 {\n height: 100%;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.positionRel {\n position: relative;\n z-index: 0;\n}\n\n.label {\n position: absolute;\n z-index: 1;\n top: -10px;\n left: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.astreik {\n color: #eb0542;\n}\n\n.textArea::placeholder {\n font-family: Meraas Aktiv, sans-serif;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-align: left;\n color: #686868;\n}\n\n.maxLimit {\n color: #eb0542 !important;\n}\n\n.maxLimitArea {\n border: 1px solid #eb0542 !important;\n}";
|
|
9658
9658
|
n(css$8,{});
|
|
9659
9659
|
|
|
9660
9660
|
function TextArea(props) {
|
|
9661
9661
|
const { value, onChange, requiredLimit, placeholder, charText, property } = props;
|
|
9662
|
+
const [showLabelOnBorder, setShowLabelOnBorder] = React.useState(false);
|
|
9662
9663
|
const checkSpecialChar = (e) => {
|
|
9663
9664
|
if (!/[0-9a-zA-Z ]/.test(e.key)) {
|
|
9664
9665
|
e.preventDefault();
|
|
9665
9666
|
}
|
|
9666
9667
|
console.log('textAraea');
|
|
9667
9668
|
};
|
|
9668
|
-
|
|
9669
|
+
const checkFieldValue = (e) => {
|
|
9670
|
+
if (!e.key) {
|
|
9671
|
+
setShowLabelOnBorder(false);
|
|
9672
|
+
}
|
|
9673
|
+
};
|
|
9674
|
+
React.useEffect(() => {
|
|
9675
|
+
setShowLabelOnBorder(!!value);
|
|
9676
|
+
}, [value]);
|
|
9677
|
+
return (React__namespace.default.createElement("div", { className: "positionRel" },
|
|
9669
9678
|
React__namespace.default.createElement("div", { className: "textArea100" },
|
|
9670
|
-
|
|
9679
|
+
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: 'inputTextAreaLabel' },
|
|
9680
|
+
placeholder.replace("*", ""),
|
|
9681
|
+
placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*")),
|
|
9682
|
+
React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
|
|
9671
9683
|
React__namespace.default.createElement(Typography, { className: `characters ${value &&
|
|
9672
9684
|
value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
|
|
9673
9685
|
value?.length ?? 0,
|