react-base-guide/lib/components/checkbox/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const label_1 = __importDefault(require("../label"));
const checked_1 = __importDefault(require("./icons/checked"));
const unchecked_1 = __importDefault(require("./icons/unchecked"));
const CheckboxInput = styled_components_1.default.input `
  display: none;
`;
const CheckboxLabel = (0, styled_components_1.default)(label_1.default) `
  opacity: ${p => p.disabled ? "0.7" : "1"};
  pointer-events: ${p => p.disabled ? "none" : "all"};
  
  &:hover {
    color: ${p => p.theme.palette.element.primary};
    
    rect {
      stroke: ${p => p.theme.palette.element.primary};
    }
  }
`;
const Checkbox = (props) => ((0, jsx_runtime_1.jsx)(CheckboxLabel, Object.assign({ variant: "standard", disabled: props.disabled, className: props.className, styled: props.styled, label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.checked ? (0, jsx_runtime_1.jsx)(checked_1.default, { disabled: props.disabled }) : (0, jsx_runtime_1.jsx)(unchecked_1.default, { disabled: props.disabled }), props.label] }) }, { children: (0, jsx_runtime_1.jsx)(CheckboxInput, { type: "checkbox", disabled: props.disabled, checked: props.checked || false, onChange: props.onChange }) })));
exports.default = Checkbox;
//# sourceMappingURL=index.js.map