infinity-forge 7.6.5 → 7.6.6
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/ui/components/form/checkbox/index.js +1 -1
- package/dist/ui/components/form/checkbox/index.js.map +1 -1
- package/dist/ui/components/form/input-switch/index.js +13 -4
- package/dist/ui/components/form/input-switch/index.js.map +1 -1
- package/dist/ui/components/form/input-switch/interfaces.d.ts +1 -0
- package/dist/ui/components/form/input-switch/styles.d.ts +1 -0
- package/dist/ui/components/form/input-switch/styles.js +4 -3
- package/dist/ui/components/form/input-switch/styles.js.map +1 -1
- package/dist/ui/components/form/interfaces.d.ts +2 -2
- package/package.json +1 -1
|
@@ -60,7 +60,7 @@ function InputCheckbox(props) {
|
|
|
60
60
|
}, [field.value]);
|
|
61
61
|
return ((0, jsx_runtime_1.jsx)(input_control_1.InputControl, __assign({}, props, { name: props.name, children: (0, jsx_runtime_1.jsx)(S.InputCheckbox, { children: (0, jsx_runtime_1.jsx)("div", { className: 'list-radios', children: props.options.map(function (option, index) {
|
|
62
62
|
var _a;
|
|
63
|
-
return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: props.name + index, children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: props.name + index }, field, { checked: (_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.find(function (v) { return v === option.value; }), type: 'checkbox', value: option.value, style: { display: props.OptionComponent ? "none" : "block" } })), props.OptionComponent ? (0, react_1.createElement)(props.OptionComponent, __assign({}, option, { key: option.value })) : (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: option.label } })] }, option.value));
|
|
63
|
+
return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: props.name + index, children: [(0, jsx_runtime_1.jsx)("input", __assign({ id: props.name + index }, field, { checked: !!((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.find(function (v) { return v === option.value; })), type: 'checkbox', value: option.value, style: { display: props.OptionComponent ? "none" : "block" } })), props.OptionComponent ? (0, react_1.createElement)(props.OptionComponent, __assign({}, option, { key: option.value })) : (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: option.label } })] }, option.value));
|
|
64
64
|
}) }) }) })));
|
|
65
65
|
}
|
|
66
66
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/checkbox/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,sCA+BC;;;AA5CD,+BAAwC;AACxC,iCAAiC;AAEjC,kDAA+C;AAI/C,0CAA6B;AAM7B,SAAgB,aAAa,CAAC,KAAsC;IAC5D,IAAA,KAAsB,IAAA,iBAAQ,EAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,EAAnD,KAAK,QAAA,EAAE,CAAC,QAAA,EAAE,OAAO,QAAkC,CAAA;IAE1D,IAAA,iBAAS,EAAC;QACR,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC9B,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,uBAAC,4BAAY,eAAK,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YACvC,uBAAC,CAAC,CAAC,aAAa,cACd,gCAAK,SAAS,EAAC,aAAa,YACzB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK;;oBAAK,OAAA,CACpC,mCAA0B,OAAO,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,aACnD,2CACE,EAAE,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,IAClB,KAAK,IACT,OAAO,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,KAAK,MAAM,CAAC,KAAK,EAAlB,CAAkB,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/checkbox/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,sCA+BC;;;AA5CD,+BAAwC;AACxC,iCAAiC;AAEjC,kDAA+C;AAI/C,0CAA6B;AAM7B,SAAgB,aAAa,CAAC,KAAsC;IAC5D,IAAA,KAAsB,IAAA,iBAAQ,EAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,EAAnD,KAAK,QAAA,EAAE,CAAC,QAAA,EAAE,OAAO,QAAkC,CAAA;IAE1D,IAAA,iBAAS,EAAC;QACR,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC9B,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,uBAAC,4BAAY,eAAK,KAAK,IAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YACvC,uBAAC,CAAC,CAAC,aAAa,cACd,gCAAK,SAAS,EAAC,aAAa,YACzB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK;;oBAAK,OAAA,CACpC,mCAA0B,OAAO,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,aACnD,2CACE,EAAE,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,IAClB,KAAK,IACT,OAAO,EAAE,CAAC,CAAC,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,IAAI,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,KAAK,MAAM,CAAC,KAAK,EAAlB,CAAkB,CAAC,CAAA,EACxD,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,IAC5D,EAED,KAAK,CAAC,eAAe,CAAC,CAAC,CAAE,2BAAC,KAAK,CAAC,eAAe,eAAK,MAAM,IAAE,GAAG,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,GAAI,KAVtI,MAAM,CAAC,KAAK,CAWhB,CACT,CAAA;iBAAA,CAAC,GACE,GACU,IACL,CAChB,CAAA;AACH,CAAC"}
|
|
@@ -51,12 +51,21 @@ var ui_1 = require("../../../../ui/index.js");
|
|
|
51
51
|
var input_control_1 = require("../input-control/index.js");
|
|
52
52
|
var S = __importStar(require("./styles.js"));
|
|
53
53
|
function InputSwitch(props) {
|
|
54
|
+
var formikContext = (0, formik_1.useFormikContext)();
|
|
54
55
|
var _a = (0, formik_1.useField)({ name: props.name, type: 'checkbox' }), field = _a[0], state = _a[1], utils = _a[2];
|
|
55
56
|
var isChecked = field === null || field === void 0 ? void 0 : field.value;
|
|
56
|
-
var htmlFor = props.name + (props.checkbox_key ||
|
|
57
|
-
|
|
57
|
+
var htmlFor = props.name + (props.checkbox_key || '');
|
|
58
|
+
var Style = (function () {
|
|
59
|
+
switch (props.design) {
|
|
60
|
+
case 'checkbox':
|
|
61
|
+
return S.InputSwitchCheckbox;
|
|
62
|
+
default:
|
|
63
|
+
return S.InputSwitch;
|
|
64
|
+
}
|
|
65
|
+
})();
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(Style, { children: (0, jsx_runtime_1.jsxs)(input_control_1.InputControl, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("input", __assign({ type: 'checkbox', id: htmlFor }, field, { onChange: function (ev) {
|
|
58
67
|
utils.setValue(ev.target.checked);
|
|
59
|
-
props.onChangeInput && props.onChangeInput(ev.target.checked);
|
|
60
|
-
}, className:
|
|
68
|
+
props.onChangeInput && props.onChangeInput(ev.target.checked, function () { }, { state: state, utils: utils }, undefined, formikContext);
|
|
69
|
+
}, className: "custom-checkbox ".concat(props.design === 'checkbox' ? 'checkbox-design' : '') })), (0, jsx_runtime_1.jsx)("label", { style: isChecked ? { background: props.color || '#444' } : {}, className: "custom-checkbox-label ".concat(isChecked ? 'checked' : ''), htmlFor: htmlFor, children: props.design === 'checkbox' ? ((0, jsx_runtime_1.jsx)("span", { className: 'checkbox-mark', children: isChecked && (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'Checked' }) })) : (isChecked && (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'Checked' })) })] })) }));
|
|
61
70
|
}
|
|
62
71
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-switch/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-switch/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,kCA4CC;;AArDD,iCAAmD;AAEnD,2BAA2B;AAC3B,kDAA+C;AAI/C,0CAA6B;AAE7B,SAAgB,WAAW,CAAC,KAAmB;IAC7C,IAAM,aAAa,GAAG,IAAA,yBAAgB,GAAE,CAAA;IAClC,IAAA,KAAwB,IAAA,iBAAQ,EAAC,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAvE,KAAK,QAAA,EAAE,KAAK,QAAA,EAAE,KAAK,QAAoD,CAAA;IAE9E,IAAM,SAAS,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAA;IAC9B,IAAM,OAAO,GAAG,KAAK,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAA;IAEvD,IAAM,KAAK,GAAG,CAAC;QACb,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC;YACrB,KAAK,UAAU;gBACb,OAAO,CAAC,CAAC,mBAAmB,CAAA;YAC9B;gBACE,OAAO,CAAC,CAAC,WAAW,CAAA;QACxB,CAAC;IACH,CAAC,CAAC,EAAE,CAAA;IAEJ,OAAO,CACL,uBAAC,KAAK,cACJ,wBAAC,4BAAY,eAAK,KAAK,eACrB,2CACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,IACP,KAAK,IACT,QAAQ,EAAE,UAAC,EAAE;wBACX,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;wBACjC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,cAAO,CAAC,EAAE,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,EAAE,SAAS,EAAE,aAAa,CAAC,CAAA;oBACrH,CAAC,EACD,SAAS,EAAE,0BAAmB,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAE,IACpF,EAEF,kCACE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAC7D,SAAS,EAAE,gCAAyB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EAChE,OAAO,EAAE,OAAO,YAEf,KAAK,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,CAC7B,iCAAM,SAAS,EAAC,eAAe,YAAE,SAAS,IAAI,uBAAC,SAAI,IAAC,IAAI,EAAC,SAAS,GAAG,GAAQ,CAC9E,CAAC,CAAC,CAAC,CACF,SAAS,IAAI,uBAAC,SAAI,IAAC,IAAI,EAAC,SAAS,GAAG,CACrC,GACK,KACK,GACT,CACT,CAAA;AACH,CAAC"}
|
|
@@ -1 +1,2 @@
|
|
|
1
1
|
export declare const InputSwitch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, never>> & string;
|
|
2
|
+
export declare const InputSwitchCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, never>> & string;
|
|
@@ -7,8 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.InputSwitch = void 0;
|
|
10
|
+
exports.InputSwitchCheckbox = exports.InputSwitch = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.InputSwitch = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: fit-content;\n\n .container-switch {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: 10px;\n }\n\n .custom-checkbox {\n display: none
|
|
13
|
-
|
|
12
|
+
exports.InputSwitch = (0, styled_components_1.default)('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: fit-content;\n\n .container-switch {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: 10px;\n }\n\n .custom-checkbox {\n display: none;\n }\n\n .custom-checkbox-label {\n position: relative;\n margin: 0;\n cursor: pointer;\n text-indent: -9999px;\n width: 40px;\n height: 20px;\n background: grey;\n display: block;\n border-radius: 100px;\n position: relative;\n\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 5px;\n width: 12px;\n height: 12px;\n background: #fff;\n border-radius: 12px;\n transition: 0.3s;\n }\n\n &.checked {\n border: none;\n }\n\n svg {\n stroke: #fff;\n width: 100%;\n height: auto;\n }\n }\n\n input:checked + .custom-checkbox-label {\n background: #bada55;\n }\n\n input:checked + .custom-checkbox-label:after {\n left: calc(100% - 15px);\n }\n"], ["\n width: fit-content;\n\n .container-switch {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n gap: 10px;\n }\n\n .custom-checkbox {\n display: none;\n }\n\n .custom-checkbox-label {\n position: relative;\n margin: 0;\n cursor: pointer;\n text-indent: -9999px;\n width: 40px;\n height: 20px;\n background: grey;\n display: block;\n border-radius: 100px;\n position: relative;\n\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 5px;\n width: 12px;\n height: 12px;\n background: #fff;\n border-radius: 12px;\n transition: 0.3s;\n }\n\n &.checked {\n border: none;\n }\n\n svg {\n stroke: #fff;\n width: 100%;\n height: auto;\n }\n }\n\n input:checked + .custom-checkbox-label {\n background: #bada55;\n }\n\n input:checked + .custom-checkbox-label:after {\n left: calc(100% - 15px);\n }\n"])));
|
|
13
|
+
exports.InputSwitchCheckbox = (0, styled_components_1.default)('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: fit-content;\n \n .container-switch {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-direction: row-reverse;\n }\n\n .custom-checkbox {\n display: none;\n }\n\n .custom-checkbox-label {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: 2px solid #444;\n border-radius: 4px;\n background: #fff;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-bottom: 0;\n }\n\n .custom-checkbox-label .checkbox-mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n input:checked + .custom-checkbox-label {\n background: #444;\n border-color: #444;\n }\n\n input:checked + .custom-checkbox-label .checkbox-mark {\n color: white;\n }\n\n .checkbox-mark svg {\n width: 14px;\n height: 14px;\n stroke: white;\n display: none;\n }\n\n input:checked + .custom-checkbox-label .checkbox-mark svg {\n display: block;\n }\n"], ["\n width: fit-content;\n \n .container-switch {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-direction: row-reverse;\n }\n\n .custom-checkbox {\n display: none;\n }\n\n .custom-checkbox-label {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: 2px solid #444;\n border-radius: 4px;\n background: #fff;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-bottom: 0;\n }\n\n .custom-checkbox-label .checkbox-mark {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n input:checked + .custom-checkbox-label {\n background: #444;\n border-color: #444;\n }\n\n input:checked + .custom-checkbox-label .checkbox-mark {\n color: white;\n }\n\n .checkbox-mark svg {\n width: 14px;\n height: 14px;\n stroke: white;\n display: none;\n }\n\n input:checked + .custom-checkbox-label .checkbox-mark svg {\n display: block;\n }\n"])));
|
|
14
|
+
var templateObject_1, templateObject_2;
|
|
14
15
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-switch/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/ui/components/form/input-switch/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAIzB,QAAA,WAAW,GAAG,IAAA,2BAAM,EAAC,KAAK,CAAC,yjCAAA,s/BAyDvC,KAAA;AAEY,QAAA,mBAAmB,GAAG,IAAA,2BAAM,EAAC,KAAK,CAAC,8lCAAA,2hCAuD/C,KAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TranslateProps } from '../../../ui/contexts/index.js';
|
|
2
2
|
import { IconsNames } from '../../../ui/icons/index.js';
|
|
3
|
-
import { FieldHelperProps, FieldMetaProps } from 'formik';
|
|
3
|
+
import { FieldHelperProps, FieldMetaProps, FormikContextType } from 'formik';
|
|
4
4
|
type InputFormikState = {
|
|
5
5
|
utils: FieldHelperProps<any>;
|
|
6
6
|
state: FieldMetaProps<any>;
|
|
@@ -72,7 +72,7 @@ interface Props {
|
|
|
72
72
|
iconDirection?: 'left' | 'right';
|
|
73
73
|
isAccumalativeFile?: boolean;
|
|
74
74
|
only?: 'cpf' | 'cnpj';
|
|
75
|
-
onChangeInput?: (value: number | string | boolean | string[] | Date, callback?: () => void, formik?: InputFormikState, applyMask?: (value: string, mask: string) => string) => any;
|
|
75
|
+
onChangeInput?: (value: number | string | boolean | string[] | Date, callback?: () => void, formik?: InputFormikState, applyMask?: (value: string, mask: string) => string, formikContext?: FormikContextType<unknown>) => any;
|
|
76
76
|
controlledInitialValue?: {
|
|
77
77
|
value?: string;
|
|
78
78
|
};
|