phx-react 1.3.758 → 1.3.759
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 +6 -0
- package/dist/cjs/components/Checkbox/Checkbox.js +18 -7
- package/dist/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.d.ts +1 -1
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.js +2 -2
- package/dist/cjs/components/Checkbox/styles/StyleCheckbox.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.d.ts +6 -0
- package/dist/esm/components/Checkbox/Checkbox.js +18 -7
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.d.ts +1 -1
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.js +2 -2
- package/dist/esm/components/Checkbox/styles/StyleCheckbox.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React, { InputHTMLAttributes } from 'react';
|
|
2
2
|
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
3
|
+
interface ActiveData {
|
|
4
|
+
activeType: 'default' | 'danger';
|
|
5
|
+
isActive: boolean;
|
|
6
|
+
}
|
|
3
7
|
export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
4
8
|
className?: string;
|
|
5
9
|
children?: any;
|
|
@@ -14,5 +18,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
14
18
|
id?: string;
|
|
15
19
|
checkType?: 'default' | 'with-border';
|
|
16
20
|
disabled?: boolean;
|
|
21
|
+
activeData?: ActiveData;
|
|
17
22
|
}
|
|
18
23
|
export declare const PHXCheckbox: React.FC<CheckboxProps>;
|
|
24
|
+
export {};
|
|
@@ -3,10 +3,10 @@ exports.__esModule = true;
|
|
|
3
3
|
exports.PHXCheckbox = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
6
|
-
var types_1 = require("../types");
|
|
7
6
|
var StyleCheckbox_1 = tslib_1.__importDefault(require("./styles/StyleCheckbox"));
|
|
7
|
+
var types_1 = require("../types");
|
|
8
8
|
var PHXCheckbox = function (_a) {
|
|
9
|
-
var children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'checkbox' : _b, _c = _a.checkType, checkType = _c === void 0 ? 'default' : _c, disabled = _a.disabled, rest = tslib_1.__rest(_a, ["children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType", "id", "checkType", "disabled"]);
|
|
9
|
+
var activeData = _a.activeData, children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'checkbox' : _b, _c = _a.checkType, checkType = _c === void 0 ? 'default' : _c, disabled = _a.disabled, rest = tslib_1.__rest(_a, ["activeData", "children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType", "id", "checkType", "disabled"]);
|
|
10
10
|
var _d = (0, react_1.useState)(false), show = _d[0], setShow = _d[1];
|
|
11
11
|
(0, react_1.useEffect)(function () {
|
|
12
12
|
// @ts-ignore
|
|
@@ -23,14 +23,25 @@ var PHXCheckbox = function (_a) {
|
|
|
23
23
|
return '';
|
|
24
24
|
return (0, types_1.classNames)('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
25
|
};
|
|
26
|
+
var getColorByActiveData = function (colorDefault, isWithBorder) {
|
|
27
|
+
if (isWithBorder === void 0) { isWithBorder = false; }
|
|
28
|
+
var isDangerType = (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive);
|
|
29
|
+
var dangerColor = '#F53E3E';
|
|
30
|
+
if (isDangerType) {
|
|
31
|
+
return isWithBorder ? "border-[".concat(dangerColor, "] text-[").concat(dangerColor, "]") : "text-[".concat(dangerColor, "]");
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
return colorDefault;
|
|
35
|
+
}
|
|
36
|
+
};
|
|
26
37
|
return (react_1["default"].createElement("div", { className: className },
|
|
27
|
-
react_1["default"].createElement(StyleCheckbox_1["default"], { id: id }),
|
|
28
|
-
label && react_1["default"].createElement("label", { className: 'block text-xs font-normal
|
|
38
|
+
react_1["default"].createElement(StyleCheckbox_1["default"], { activeData: activeData, id: id }),
|
|
39
|
+
label && (react_1["default"].createElement("label", { className: (0, types_1.classNames)(getColorByActiveData('text-gray-700', false), 'block text-xs font-normal') }, label)),
|
|
29
40
|
react_1["default"].createElement("div", { className: (0, types_1.classNames)('flex items-center py-1', getBorderClasses(checkType)) },
|
|
30
|
-
react_1["default"].createElement("div", { className:
|
|
31
|
-
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-400 hover:bg-transparent' : '', 'h-4 w-4 rounded border-[0.5px]
|
|
41
|
+
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('text-gray-700', false)) },
|
|
42
|
+
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-400 hover:bg-transparent' : '', 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', getColorByActiveData('border-gray-500 text-indigo-800', true)), id: id, onChange: handleChange }, register, { type: 'checkbox', disabled: disabled })),
|
|
32
43
|
react_1["default"].createElement("label", { htmlFor: id, className: "checkbox ".concat(checkType === 'with-border' && 'flex-1') },
|
|
33
|
-
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 ? 'border-gray-400 hover:bg-transparent' : '', 'block h-4 w-4 rounded border
|
|
44
|
+
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 ? 'border-gray-400 hover:bg-transparent' : '', 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', getColorByActiveData('border-gray-500 text-indigo-800', true)) }),
|
|
34
45
|
react_1["default"].createElement("span", { className: (0, types_1.classNames)('ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : '') }, title)))),
|
|
35
46
|
helpText && show ? react_1["default"].createElement("div", { className: 'pl-7 text-xs font-light text-gray-400' }, helpText) : null,
|
|
36
47
|
show && children ? react_1["default"].createElement("div", { className: 'ml-7' }, children) : react_1["default"].createElement(react_1["default"].Fragment, null),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAAuE;AAEvE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,8 +3,8 @@ exports.__esModule = true;
|
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
5
5
|
var StyledCheckboxLayout = function (_a) {
|
|
6
|
-
var 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 }\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: 100%; */\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 #".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 .icon::before {\n background: #1a1a1a
|
|
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 }\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: 100%; */\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 #".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 .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 ")));
|
|
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,
|
|
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,w8CAgDQ,EAAE,yVAQF,EAAE,2EACW,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,iBAClG,CACD,CACT;AA9DyD,CA8DzD,CAAA;AAED,qBAAe,oBAAoB,CAAA"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React, { InputHTMLAttributes } from 'react';
|
|
2
2
|
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
3
|
+
interface ActiveData {
|
|
4
|
+
activeType: 'default' | 'danger';
|
|
5
|
+
isActive: boolean;
|
|
6
|
+
}
|
|
3
7
|
export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
4
8
|
className?: string;
|
|
5
9
|
children?: any;
|
|
@@ -14,5 +18,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
14
18
|
id?: string;
|
|
15
19
|
checkType?: 'default' | 'with-border';
|
|
16
20
|
disabled?: boolean;
|
|
21
|
+
activeData?: ActiveData;
|
|
17
22
|
}
|
|
18
23
|
export declare const PHXCheckbox: React.FC<CheckboxProps>;
|
|
24
|
+
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
2
|
import React, { useEffect, useState } from 'react';
|
|
3
|
-
import { classNames } from '../types';
|
|
4
3
|
import StyledCheckboxLayout from './styles/StyleCheckbox';
|
|
4
|
+
import { classNames } from '../types';
|
|
5
5
|
export var PHXCheckbox = function (_a) {
|
|
6
|
-
var children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'checkbox' : _b, _c = _a.checkType, checkType = _c === void 0 ? 'default' : _c, disabled = _a.disabled, rest = __rest(_a, ["children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType", "id", "checkType", "disabled"]);
|
|
6
|
+
var activeData = _a.activeData, children = _a.children, className = _a.className, helpText = _a.helpText, label = _a.label, title = _a.title, expanded = _a.expanded, register = _a.register, onChange = _a.onChange, error = _a.error, errorType = _a.errorType, _b = _a.id, id = _b === void 0 ? 'checkbox' : _b, _c = _a.checkType, checkType = _c === void 0 ? 'default' : _c, disabled = _a.disabled, rest = __rest(_a, ["activeData", "children", "className", "helpText", "label", "title", "expanded", "register", "onChange", "error", "errorType", "id", "checkType", "disabled"]);
|
|
7
7
|
var _d = useState(false), show = _d[0], setShow = _d[1];
|
|
8
8
|
useEffect(function () {
|
|
9
9
|
// @ts-ignore
|
|
@@ -20,14 +20,25 @@ export var PHXCheckbox = function (_a) {
|
|
|
20
20
|
return '';
|
|
21
21
|
return classNames('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
22
|
};
|
|
23
|
+
var getColorByActiveData = function (colorDefault, isWithBorder) {
|
|
24
|
+
if (isWithBorder === void 0) { isWithBorder = false; }
|
|
25
|
+
var isDangerType = (activeData === null || activeData === void 0 ? void 0 : activeData.activeType) === 'danger' && (activeData === null || activeData === void 0 ? void 0 : activeData.isActive);
|
|
26
|
+
var dangerColor = '#F53E3E';
|
|
27
|
+
if (isDangerType) {
|
|
28
|
+
return isWithBorder ? "border-[".concat(dangerColor, "] text-[").concat(dangerColor, "]") : "text-[".concat(dangerColor, "]");
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
return colorDefault;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
23
34
|
return (React.createElement("div", { className: className },
|
|
24
|
-
React.createElement(StyledCheckboxLayout, { id: id }),
|
|
25
|
-
label && React.createElement("label", { className: 'block text-xs font-normal
|
|
35
|
+
React.createElement(StyledCheckboxLayout, { activeData: activeData, id: id }),
|
|
36
|
+
label && (React.createElement("label", { className: classNames(getColorByActiveData('text-gray-700', false), 'block text-xs font-normal') }, label)),
|
|
26
37
|
React.createElement("div", { className: classNames('flex items-center py-1', getBorderClasses(checkType)) },
|
|
27
|
-
React.createElement("div", { className:
|
|
28
|
-
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-400 hover:bg-transparent' : '', 'h-4 w-4 rounded border-[0.5px]
|
|
38
|
+
React.createElement("div", { className: classNames('flex items-center text-xs font-normal leading-5 hover:cursor-pointer', checkType === 'with-border' && 'flex-1', getColorByActiveData('text-gray-700', false)) },
|
|
39
|
+
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-400 hover:bg-transparent' : '', 'hidden h-4 w-4 rounded border-[0.5px] hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', getColorByActiveData('border-gray-500 text-indigo-800', true)), id: id, onChange: handleChange }, register, { type: 'checkbox', disabled: disabled })),
|
|
29
40
|
React.createElement("label", { htmlFor: id, className: "checkbox ".concat(checkType === 'with-border' && 'flex-1') },
|
|
30
|
-
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 ? 'border-gray-400 hover:bg-transparent' : '', 'block h-4 w-4 rounded border
|
|
41
|
+
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 ? 'border-gray-400 hover:bg-transparent' : '', 'icon block h-4 w-4 rounded border hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', getColorByActiveData('border-gray-500 text-indigo-800', true)) }),
|
|
31
42
|
React.createElement("span", { className: classNames('ml-7 font-normal', disabled ? 'text-gray-400 hover:bg-transparent' : '') }, title)))),
|
|
32
43
|
helpText && show ? React.createElement("div", { className: 'pl-7 text-xs font-light text-gray-400' }, helpText) : null,
|
|
33
44
|
show && children ? React.createElement("div", { className: 'ml-7' }, children) : React.createElement(React.Fragment, null),
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
var StyledCheckboxLayout = function (_a) {
|
|
3
|
-
var 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 }\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: 100%; */\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 #".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 .icon::before {\n background: #1a1a1a
|
|
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 }\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: 100%; */\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 #".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 .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 ")));
|
|
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,
|
|
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,w8CAgDQ,EAAE,yVAQF,EAAE,2EACW,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,iBAClG,CACD,CACT;AA9DyD,CA8DzD,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|