UNPKG

sccoreui

Version:

ui-sccore

27 lines (26 loc) • 8.87 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const tslib_1 = require("tslib"); const jsx_runtime_1 = require("react/jsx-runtime"); const checkbox_1 = require("primereact/checkbox"); const react_1 = require("react"); const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component")); const CheckboxComponent = () => { const [checkedBox, setCheckedBox] = (0, react_1.useState)(false); const [checkedCircle, setCheckedCircle] = (0, react_1.useState)(false); const [indeterminateBox, setIndeterminateBox] = (0, react_1.useState)(false); return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Checkbox & Checkcircle" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex align-items-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => { setCheckedBox(e.checked); }, checked: checkedBox, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => { setIndeterminateBox(e.checked); }, checked: indeterminateBox, icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hyphen-selected" }) }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid", checked: false })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => { setCheckedCircle(e.checked); }, checked: checkedCircle, icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, disabled: true, icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }), className: "p-checkcircle" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "p-invalid p-checkcircle", checked: false })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => { setCheckedBox(e.checked); }, checked: checkedBox, className: "mt-1", icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1", icon: checkedBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected" }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => { setIndeterminateBox(e.checked); }, checked: indeterminateBox, className: "mt-1", icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hyphen-selected" }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1", icon: indeterminateBox && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "hyphen-selected" }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onChange: (e) => { setCheckedCircle(e.checked); }, checked: checkedCircle, className: "mt-1 p-checkcircle", icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-start gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: true, checked: false, className: "mt-1 p-checkcircle", icon: checkedCircle && (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check-selected-white" }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: "Remember me" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: "Save my login details for next time." }))] }))] }))] }))] }))] }))] }))); }; exports.default = CheckboxComponent;