@retailmenot/anchor/ts/Form/Checkbox/Checkbox.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// REACT
import * as React from 'react';
const { forwardRef } = React;
// VENDOR
import styled, { css } from '@xstyled/styled-components';
import { compose, space as spaceStyles, color as colorStyles, backgroundColor as backgroundColorStyles, } from '@xstyled/system';
import classnames from 'classnames';
// ANCHOR
import { Check } from '../../Icon';
const HiddenInput = styled('input') `
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
`;
const StyledCheckbox = styled('label') `
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    user-select: none;
    // todo: don't hardcode
    border: thin solid #808080;
    // todo: may want to read from a theme value here
    border-radius: 2px;

    ${({ size, disabled }) => css({
    height: size,
    width: size,
    cursor: disabled ? 'default' : 'pointer',
    opacity: disabled ? 0.4 : 1,
})};

    ${compose(spaceStyles, colorStyles, backgroundColorStyles)};
`;
export const Checkbox = forwardRef((_a, ref) => {
    var { id, className, inputProps, color = 'primary.base', backgroundColor, checked, size = '1.375rem', disabled, onChange } = _a, props = __rest(_a, ["id", "className", "inputProps", "color", "backgroundColor", "checked", "size", "disabled", "onChange"]);
    return (React.createElement(StyledCheckbox, Object.assign({ className: classnames('anchor-checkbox', className), disabled: disabled, htmlFor: id, color: color, backgroundColor: backgroundColor || (disabled ? 'background.base' : 'white'), size: size, checked: checked }, props),
        checked && React.createElement(Check, { scale: "sm" }),
        React.createElement(HiddenInput, Object.assign({ type: "checkbox", id: id, onChange: onChange, checked: checked, disabled: disabled, ref: ref }, props, inputProps))));
});
//# sourceMappingURL=Checkbox.component.js.map