krl-alfred 1.76.13 → 1.76.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.
|
@@ -32,12 +32,14 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
32
32
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
33
33
|
var TextLink_1 = __importDefault(require("../TextLink"));
|
|
34
34
|
var react_number_format_1 = require("react-number-format");
|
|
35
|
+
var react_i18next_1 = require("react-i18next");
|
|
35
36
|
var Input = function (props) {
|
|
36
37
|
var _a;
|
|
37
38
|
var type = props.type, other = __rest(props, ["type"]);
|
|
38
39
|
var _b = (0, react_1.useState)(type), inputType = _b[0], setInputType = _b[1];
|
|
39
40
|
var _c = (0, react_1.useState)(false), alert = _c[0], setAlert = _c[1];
|
|
40
41
|
var inputRef = (0, react_1.useRef)(null);
|
|
42
|
+
var t = (0, react_i18next_1.useTranslation)().t;
|
|
41
43
|
(0, react_1.useEffect)(function () {
|
|
42
44
|
setInputType(type);
|
|
43
45
|
}, [type]);
|
|
@@ -59,7 +61,7 @@ var Input = function (props) {
|
|
|
59
61
|
inputRef.current.blur();
|
|
60
62
|
};
|
|
61
63
|
return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ width: props.width }, { children: [(props === null || props === void 0 ? void 0 : props.label) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = props === null || props === void 0 ? void 0 : props.customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.label }), (props === null || props === void 0 ? void 0 : props.customLinkText) && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (props.customLinkHref && { href: props.customLinkHref }), { onClick: props.onCustomLinkClick }, { children: props === null || props === void 0 ? void 0 : props.customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(props.mask && props.format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({}, props, { format: props.format, mask: props.mask, customInput: Input_styled_1.InputStyled })))
|
|
62
|
-
: ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children:
|
|
64
|
+
: ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType }, other))), (props === null || props === void 0 ? void 0 : props.type) === 'password' && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) })), (props === null || props === void 0 ? void 0 : props.hasCopyButton) && (0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: 'Copy' }) })), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ visible: alert }, { children: t('copied') }))] })), (props === null || props === void 0 ? void 0 : props.hasError) && (0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: props === null || props === void 0 ? void 0 : props.errorMessage })] }))] }));
|
|
63
65
|
};
|
|
64
66
|
Input.defaultValues = {
|
|
65
67
|
hasError: false,
|
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.InstallmentBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n font: var(--caption-semi-bold-10-12);\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"], ["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n font: var(--caption-semi-bold-10-12);\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"])), function (props) { return props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
13
|
+
exports.InstallmentBoxStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n font: var(--caption-semi-bold-10-12);\n padding: 2px 0;\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"], ["\n display: block;\n > label {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n border: ", ";\n border-radius: 8px;\n height: 67px;\n cursor: pointer;\n .inner {\n width: 100%;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n @media only screen and ", " {\n padding: 0 1rem;\n }\n .leftContent {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex: 0 0 auto;\n width: auto;\n .installmentLabelWrapper{\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: block;\n }\n }\n .titlesWrapper {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n @media only screen and ", " {\n display: grid;\n row-gap: 0.5rem;\n }\n .advance {\n margin-left: 1rem;\n background: #f5effe;\n border-radius: 3px;\n width: 76px;\n height: 17px;\n display: inline-block;\n text-align: center;\n font: var(--caption-semi-bold-10-12);\n padding: 2px 0;\n @media only screen and ", " {\n margin-left: 0;\n margin-top: 0.5rem;\n }\n }\n }\n }\n .rightContent {\n flex: 0 0 auto;\n width: auto;\n text-align: end;\n row-gap: 0.25rem;\n display: grid;\n .price {\n display: block;\n color: var(--dark);\n font: var(--title-bold-16-19);\n }\n .totalPrice {\n display: block;\n color: var(--dark-opacity-50);\n font: var(--caption-semi-bold-12-15);\n .total {\n @media only screen and ", " {\n display: none;\n }\n }\n }\n }\n }\n }\n"])), function (props) { return props.checked ? '2px solid var(--primary)' : '1px solid var(--dark-opacity-10)'; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
14
|
var templateObject_1;
|