phx-react 1.3.797 → 1.3.799
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/cjs/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/cjs/components/Checkbox/Checkbox.js +22 -12
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.js +1 -1
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/esm/components/Checkbox/Checkbox.js +22 -12
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.js +1 -1
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,8 +6,8 @@ var react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
var StyleCheckbox_1 = tslib_1.__importDefault(require("./styles/StyleCheckbox"));
|
|
7
7
|
var types_1 = require("../types");
|
|
8
8
|
var PHXCheckbox = function (_a) {
|
|
9
|
-
var activeData = _a.activeData,
|
|
10
|
-
var
|
|
9
|
+
var activeData = _a.activeData, _b = _a.checkType, checkType = _b === void 0 ? 'default' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, error = _a.error, errorType = _a.errorType, expanded = _a.expanded, helpText = _a.helpText, _c = _a.id, id = _c === void 0 ? 'checkbox' : _c, label = _a.label, onChange = _a.onChange, register = _a.register, _d = _a.isLarge, isLarge = _d === void 0 ? false : _d, title = _a.title, rest = tslib_1.__rest(_a, ["activeData", "checkType", "children", "className", "disabled", "error", "errorType", "expanded", "helpText", "id", "label", "onChange", "register", "isLarge", "title"]);
|
|
10
|
+
var _e = (0, react_1.useState)(false), show = _e[0], setShow = _e[1];
|
|
11
11
|
(0, react_1.useEffect)(function () {
|
|
12
12
|
// @ts-ignore
|
|
13
13
|
setShow(expanded);
|
|
@@ -21,7 +21,9 @@ var PHXCheckbox = function (_a) {
|
|
|
21
21
|
var getBorderClasses = function (type) {
|
|
22
22
|
if (type !== 'with-border')
|
|
23
23
|
return '';
|
|
24
|
-
return (0, types_1.classNames)(
|
|
24
|
+
return (0, types_1.classNames)(isLarge
|
|
25
|
+
? 'py-2.5 rounded-xl border-[0.75px] border-gray-500 px-4 text-sm font-normal shadow-md hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-2 focus:outline-indigo-500 focus:ring-transparent'
|
|
26
|
+
: 'py-1.5 rounded-lg border-[0.5px] border-gray-500 px-3 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error && 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50', disabled && 'bg-gray-50');
|
|
25
27
|
};
|
|
26
28
|
var getColorByActiveData = function (isWithBorder) {
|
|
27
29
|
if (isWithBorder === void 0) { isWithBorder = false; }
|
|
@@ -35,19 +37,27 @@ var PHXCheckbox = function (_a) {
|
|
|
35
37
|
};
|
|
36
38
|
return (react_1["default"].createElement("div", { className: className },
|
|
37
39
|
react_1["default"].createElement(StyleCheckbox_1["default"], { activeData: activeData, id: id }),
|
|
38
|
-
label && react_1["default"].createElement("label", { className: (0, types_1.classNames)(getColorByActiveData(false), 'block text-xs font-normal') }, label),
|
|
40
|
+
label && (react_1["default"].createElement("label", { className: (0, types_1.classNames)(getColorByActiveData(false), isLarge ? 'block text-sm font-normal' : 'block text-xs font-normal') }, label)),
|
|
39
41
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center py-1', getBorderClasses(checkType)) },
|
|
40
42
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
|
|
41
|
-
react_1["default"].createElement("input", tslib_1.__assign({}, rest, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
react_1["default"].createElement("input", tslib_1.__assign({}, rest, { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-200 hover:bg-transparent' : getColorByActiveData(true), isLarge
|
|
44
|
+
? 'hidden h-6 w-6 rounded-md border-[0.75px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
45
|
+
: 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onChange: handleChange }, register, { disabled: disabled, type: 'checkbox' })),
|
|
46
|
+
react_1["default"].createElement("label", { className: (0, types_1.classNames)('checkbox', checkType === 'with-border' && 'flex-1', disabled && 'disabled', isLarge && 'large'), htmlFor: id },
|
|
47
|
+
react_1["default"].createElement("span", { className: (0, types_1.classNames)(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled
|
|
48
|
+
? 'border-gray-200 bg-gray-200'
|
|
49
|
+
: (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive)
|
|
50
|
+
? getColorByActiveData(true)
|
|
51
|
+
: 'border-gray-400', isLarge
|
|
52
|
+
? 'icon block h-6 w-6 rounded-md border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
53
|
+
: 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
|
|
54
|
+
react_1["default"].createElement("span", { className: (0, types_1.classNames)(isLarge ? 'ml-9 text-sm font-normal' : 'ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false)) }, title)))),
|
|
55
|
+
helpText && show ? (react_1["default"].createElement("div", { className: (0, types_1.classNames)(isLarge ? 'pl-9 text-sm font-light text-gray-400' : 'pl-7 text-xs font-light text-gray-400') }, helpText)) : null,
|
|
56
|
+
show && children ? react_1["default"].createElement("div", { className: (0, types_1.classNames)(isLarge ? 'ml-9' : 'ml-7') }, children) : react_1["default"].createElement(react_1["default"].Fragment, null),
|
|
47
57
|
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
48
|
-
react_1["default"].createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
58
|
+
react_1["default"].createElement("svg", { className: (0, types_1.classNames)(isLarge ? 'mr-2.5 h-5 w-5 text-red-500' : 'mr-2 h-4 w-4 text-red-500'), fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
49
59
|
react_1["default"].createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
50
|
-
react_1["default"].createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
60
|
+
react_1["default"].createElement("p", { className: (0, types_1.classNames)(isLarge ? 'text-sm text-red-800' : 'text-xs text-red-800') }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
51
61
|
};
|
|
52
62
|
exports.PHXCheckbox = PHXCheckbox;
|
|
53
63
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuE;AAEvE,iFAAyD;AACzD,kCAAqC;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ var tslib_1 = require("tslib");
|
|
|
4
4
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
5
5
|
var StyledCheckboxLayout = function (_a) {
|
|
6
6
|
var activeData = _a.activeData, id = _a.id;
|
|
7
|
-
return (react_1["default"].createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n
|
|
7
|
+
return (react_1["default"].createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: 100%;\n width: 100%;\n border-radius: 0px;\n background: transparent;\n transition: background 80ms cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n \n .checkbox .icon::after {\n border: 2px solid transparent;\n transition: height 80ms ease-in, width 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms 80ms;\n width: 0px;\n height: 0px;\n bottom: 7px;\n left: 1px;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 3px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n }\n \n .checkbox.large .icon::before {\n height: 22px;\n width: 22px;\n border-radius: 5px;\n }\n \n .checkbox.large .icon::after {\n bottom: 11px;\n left: 2px;\n }\n \n .checkbox.disabled .icon::before {\n background: #E5E7EB;\n }\n \n .checkbox.disabled {\n cursor: not-allowed;\n }\n \n #".concat(id, ":checked + .checkbox .icon::after {\n width: 6px;\n height: 10px;\n border-right-color: white;\n border-bottom-color: white;\n transition: width 80ms ease-in, height 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;\n }\n \n #").concat(id, ":checked + .checkbox.large .icon::after {\n width: 9px;\n height: 15px;\n border-right-color: white;\n border-bottom-color: white;\n }\n \n #").concat(id, ":checked + .checkbox .icon::before {\n background: ").concat((activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a', ";\n }\n \n #").concat(id, ":checked + .checkbox.disabled .icon::before {\n background: #E5E7EB;\n }\n \n #").concat(id, ":checked + .checkbox.disabled .icon::after {\n border-right-color: #9CA3AF;\n border-bottom-color: #9CA3AF;\n }\n \n #").concat(id, ":checked + .checkbox.disabled.large .icon::after {\n width: 9px;\n height: 15px;\n border-right-color: #9CA3AF;\n border-bottom-color: #9CA3AF;\n }\n ")));
|
|
8
8
|
};
|
|
9
9
|
exports["default"] = StyledCheckboxLayout;
|
|
10
10
|
//# sourceMappingURL=StyleCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,oBAAoB,GAAG,UAAC,EAAuB;QAArB,UAAU,gBAAA,EAAE,EAAE,QAAA;IAAY,OAAA,CACxD,gDACG,
|
|
1
|
+
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,oBAAoB,GAAG,UAAC,EAAuB;QAArB,UAAU,gBAAA,EAAE,EAAE,QAAA;IAAY,OAAA,CACxD,gDACG,u1DAmEM,EAAE,mVAQF,EAAE,2NAOF,EAAE,2EACa,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,MAAK,QAAQ,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,8CAGlG,EAAE,4HAIF,EAAE,8KAKF,EAAE,iNAMR,CACK,CACT;AAzGyD,CAyGzD,CAAA;AAED,qBAAe,oBAAoB,CAAA"}
|
|
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
|
|
|
3
3
|
import StyledCheckboxLayout from './styles/StyleCheckbox';
|
|
4
4
|
import { classNames } from '../types';
|
|
5
5
|
export var PHXCheckbox = function (_a) {
|
|
6
|
-
var activeData = _a.activeData,
|
|
7
|
-
var
|
|
6
|
+
var activeData = _a.activeData, _b = _a.checkType, checkType = _b === void 0 ? 'default' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, error = _a.error, errorType = _a.errorType, expanded = _a.expanded, helpText = _a.helpText, _c = _a.id, id = _c === void 0 ? 'checkbox' : _c, label = _a.label, onChange = _a.onChange, register = _a.register, _d = _a.isLarge, isLarge = _d === void 0 ? false : _d, title = _a.title, rest = __rest(_a, ["activeData", "checkType", "children", "className", "disabled", "error", "errorType", "expanded", "helpText", "id", "label", "onChange", "register", "isLarge", "title"]);
|
|
7
|
+
var _e = useState(false), show = _e[0], setShow = _e[1];
|
|
8
8
|
useEffect(function () {
|
|
9
9
|
// @ts-ignore
|
|
10
10
|
setShow(expanded);
|
|
@@ -18,7 +18,9 @@ export var PHXCheckbox = function (_a) {
|
|
|
18
18
|
var getBorderClasses = function (type) {
|
|
19
19
|
if (type !== 'with-border')
|
|
20
20
|
return '';
|
|
21
|
-
return classNames(
|
|
21
|
+
return classNames(isLarge
|
|
22
|
+
? 'py-2.5 rounded-xl border-[0.75px] border-gray-500 px-4 text-sm font-normal shadow-md hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-2 focus:outline-indigo-500 focus:ring-transparent'
|
|
23
|
+
: 'py-1.5 rounded-lg border-[0.5px] border-gray-500 px-3 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error && 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50', disabled && 'bg-gray-50');
|
|
22
24
|
};
|
|
23
25
|
var getColorByActiveData = function (isWithBorder) {
|
|
24
26
|
if (isWithBorder === void 0) { isWithBorder = false; }
|
|
@@ -32,18 +34,26 @@ export var PHXCheckbox = function (_a) {
|
|
|
32
34
|
};
|
|
33
35
|
return (React.createElement("div", { className: className },
|
|
34
36
|
React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id }),
|
|
35
|
-
label && React.createElement("label", { className: classNames(getColorByActiveData(false), 'block text-xs font-normal') }, label),
|
|
37
|
+
label && (React.createElement("label", { className: classNames(getColorByActiveData(false), isLarge ? 'block text-sm font-normal' : 'block text-xs font-normal') }, label)),
|
|
36
38
|
React.createElement("div", { className: classNames('flex items-center py-1', getBorderClasses(checkType)) },
|
|
37
39
|
React.createElement("div", { className: classNames('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData(false)) },
|
|
38
|
-
React.createElement("input", __assign({}, rest, { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
React.createElement("input", __assign({}, rest, { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled ? 'border-gray-200 hover:bg-transparent' : getColorByActiveData(true), isLarge
|
|
41
|
+
? 'hidden h-6 w-6 rounded-md border-[0.75px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
42
|
+
: 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'), id: id, onChange: handleChange }, register, { disabled: disabled, type: 'checkbox' })),
|
|
43
|
+
React.createElement("label", { className: classNames('checkbox', checkType === 'with-border' && 'flex-1', disabled && 'disabled', isLarge && 'large'), htmlFor: id },
|
|
44
|
+
React.createElement("span", { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', disabled
|
|
45
|
+
? 'border-gray-200 bg-gray-200'
|
|
46
|
+
: (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive)
|
|
47
|
+
? getColorByActiveData(true)
|
|
48
|
+
: 'border-gray-400', isLarge
|
|
49
|
+
? 'icon block h-6 w-6 rounded-md border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent'
|
|
50
|
+
: 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent') }),
|
|
51
|
+
React.createElement("span", { className: classNames(isLarge ? 'ml-9 text-sm font-normal' : 'ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : getColorByActiveData(false)) }, title)))),
|
|
52
|
+
helpText && show ? (React.createElement("div", { className: classNames(isLarge ? 'pl-9 text-sm font-light text-gray-400' : 'pl-7 text-xs font-light text-gray-400') }, helpText)) : null,
|
|
53
|
+
show && children ? React.createElement("div", { className: classNames(isLarge ? 'ml-9' : 'ml-7') }, children) : React.createElement(React.Fragment, null),
|
|
44
54
|
error && errorType ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
45
|
-
React.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
55
|
+
React.createElement("svg", { className: classNames(isLarge ? 'mr-2.5 h-5 w-5 text-red-500' : 'mr-2 h-4 w-4 text-red-500'), fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
|
|
46
56
|
React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
|
|
47
|
-
React.createElement("p", { className: 'text-xs text-red-800' }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
57
|
+
React.createElement("p", { className: classNames(isLarge ? 'text-sm text-red-800' : 'text-xs text-red-800') }, errorType === 'required-field' ? 'Vui lòng chọn thông tin' : 'Thông tin đã tồn tại'))) : null));
|
|
48
58
|
};
|
|
49
59
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvE,OAAO,oBAAoB,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAwBrC,MAAM,CAAC,IAAM,WAAW,GAA4B,UAAC,EAiBrC;IAhBd,IAAA,UAAU,gBAAA,EACV,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA,EACrB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,UAAe,EAAf,EAAE,mBAAG,UAAU,KAAA,EACf,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,KAAK,WAAA,EACF,IAAI,cAhB4C,yKAiBpD,CADQ;IAED,IAAA,KAAkB,QAAQ,CAAU,KAAK,CAAC,EAAzC,IAAI,QAAA,EAAE,OAAO,QAA4B,CAAA;IAEhD,SAAS,CAAC;QACR,aAAa;QACb,OAAO,CAAC,QAAQ,CAAC,CAAA;IACnB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAM,YAAY,GAAG,UAAC,CAAM;QAC1B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACzB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,CAAA;SACZ;IACH,CAAC,CAAA;IACD,IAAM,gBAAgB,GAAG,UAAC,IAAY;QACpC,IAAI,IAAI,KAAK,aAAa;YAAE,OAAO,EAAE,CAAA;QAErC,OAAO,UAAU,CACf,OAAO;YACL,CAAC,CAAC,wOAAwO;YAC1O,CAAC,CAAC,uOAAuO,EAC3O,KAAK,IAAI,+EAA+E,EACxF,QAAQ,IAAI,YAAY,CACzB,CAAA;IACH,CAAC,CAAA;IAED,IAAM,oBAAoB,GAAG,UAAC,YAAoB;QAApB,6BAAA,EAAA,oBAAoB;QAChD,IAAM,YAAY,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,MAAK,QAAQ,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA,CAAA;QAEhF,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,gBAAgB,CAAA;SAC3E;aAAM;YACL,OAAO,YAAY,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,eAAe,CAAA;SAC1E;IACH,CAAC,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,oBAAC,oBAAoB,IAAC,UAAU,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,GAAI;QACvD,KAAK,IAAI,CACR,+BACE,SAAS,EAAE,UAAU,CACnB,oBAAoB,CAAC,KAAK,CAAC,EAC3B,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,2BAA2B,CACpE,IAEA,KAAK,CACA,CACT;QACD,6BAAK,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC/E,6BACE,SAAS,EAAE,UAAU,CACnB,sEAAsE,EACtE,SAAS,KAAK,aAAa,IAAI,QAAQ,EACvC,oBAAoB,CAAC,KAAK,CAAC,CAC5B;gBAED,0CACM,IAAI,IACR,SAAS,EAAE,UAAU,CACnB,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,EAC5F,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAC9E,OAAO;wBACL,CAAC,CAAC,yGAAyG;wBAC3G,CAAC,CAAC,qGAAqG,CAC1G,EACD,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,YAAY,IAClB,QAAQ,IACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,IACf;gBACF,+BACE,SAAS,EAAE,UAAU,CACnB,UAAU,EACV,SAAS,KAAK,aAAa,IAAI,QAAQ,EACvC,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,OAAO,CACnB,EACD,OAAO,EAAE,EAAE;oBAEX,8BACE,SAAS,EAAE,UAAU,CACnB,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,EAC5F,QAAQ;4BACN,CAAC,CAAC,6BAA6B;4BAC/B,CAAC,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,MAAK,QAAQ,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA;gCAC7D,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC;gCAC5B,CAAC,CAAC,iBAAiB,EACrB,OAAO;4BACL,CAAC,CAAC,oGAAoG;4BACtG,CAAC,CAAC,iGAAiG,CACtG,GACD;oBACF,8BACE,SAAS,EAAE,UAAU,CACnB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,kBAAkB,EACzD,QAAQ,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAC9E,IAEA,KAAK,CACD,CACD,CACJ,CACF;QACL,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,CAClB,6BACE,SAAS,EAAE,UAAU,CACnB,OAAO,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,uCAAuC,CAC5F,IAEA,QAAQ,CACL,CACP,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAG,QAAQ,CAAO,CAAC,CAAC,CAAC,yCAAK;QAClG,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CACpB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,6BACE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,2BAA2B,CAAC,EAC5F,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,0EAA0E,EAC5E,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE;YAEN,2BAAG,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,IAChF,SAAS,KAAK,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAClF,CACA,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
var StyledCheckboxLayout = function (_a) {
|
|
3
3
|
var activeData = _a.activeData, id = _a.id;
|
|
4
|
-
return (React.createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n
|
|
4
|
+
return (React.createElement("style", null, "\n .checkbox {\n display: inline-block;\n position: relative;\n font-weight: bold;\n cursor: pointer;\n }\n \n .checkbox:active .text {\n transform: scale(0.9);\n }\n \n .checkbox .icon {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n }\n \n .checkbox .icon::before,\n .checkbox .icon::after {\n content: '';\n display: block;\n position: absolute;\n }\n \n .checkbox .icon::before {\n height: 100%;\n width: 100%;\n border-radius: 0px;\n background: transparent;\n transition: background 80ms cubic-bezier(0.165, 0.84, 0.44, 1);\n }\n \n .checkbox .icon::after {\n border: 2px solid transparent;\n transition: height 80ms ease-in, width 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms 80ms;\n width: 0px;\n height: 0px;\n bottom: 7px;\n left: 1px;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 3px;\n transform-origin: bottom left;\n transform: rotate(45deg);\n }\n \n .checkbox.large .icon::before {\n height: 22px;\n width: 22px;\n border-radius: 5px;\n }\n \n .checkbox.large .icon::after {\n bottom: 11px;\n left: 2px;\n }\n \n .checkbox.disabled .icon::before {\n background: #E5E7EB;\n }\n \n .checkbox.disabled {\n cursor: not-allowed;\n }\n \n #".concat(id, ":checked + .checkbox .icon::after {\n width: 6px;\n height: 10px;\n border-right-color: white;\n border-bottom-color: white;\n transition: width 80ms ease-in, height 80ms ease-out 80ms, border-color cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;\n }\n \n #").concat(id, ":checked + .checkbox.large .icon::after {\n width: 9px;\n height: 15px;\n border-right-color: white;\n border-bottom-color: white;\n }\n \n #").concat(id, ":checked + .checkbox .icon::before {\n background: ").concat((activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive) ? '#F53E3E' : '#1a1a1a', ";\n }\n \n #").concat(id, ":checked + .checkbox.disabled .icon::before {\n background: #E5E7EB;\n }\n \n #").concat(id, ":checked + .checkbox.disabled .icon::after {\n border-right-color: #9CA3AF;\n border-bottom-color: #9CA3AF;\n }\n \n #").concat(id, ":checked + .checkbox.disabled.large .icon::after {\n width: 9px;\n height: 15px;\n border-right-color: #9CA3AF;\n border-bottom-color: #9CA3AF;\n }\n ")));
|
|
5
5
|
};
|
|
6
6
|
export default StyledCheckboxLayout;
|
|
7
7
|
//# sourceMappingURL=StyleCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,IAAM,oBAAoB,GAAG,UAAC,EAAuB;QAArB,UAAU,gBAAA,EAAE,EAAE,QAAA;IAAY,OAAA,CACxD,mCACG,
|
|
1
|
+
{"version":3,"file":"StyleCheckbox.js","sourceRoot":"","sources":["../../../../../src/components/Checkbox/styles/StyleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,IAAM,oBAAoB,GAAG,UAAC,EAAuB;QAArB,UAAU,gBAAA,EAAE,EAAE,QAAA;IAAY,OAAA,CACxD,mCACG,u1DAmEM,EAAE,mVAQF,EAAE,2NAOF,EAAE,2EACa,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,MAAK,QAAQ,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,8CAGlG,EAAE,4HAIF,EAAE,8KAKF,EAAE,iNAMR,CACK,CACT;AAzGyD,CAyGzD,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|