lucid-ui/lib/components/Checkbox/Checkbox.js

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _noop from "lodash/noop";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps } from '../../util/component-types';
var cx = lucidClassNames.bind('&-Checkbox');
var bool = PropTypes.bool,
    func = PropTypes.func,
    object = PropTypes.object,
    string = PropTypes.string;
export var defaultProps = {
  isIndeterminate: false,
  isDisabled: false,
  isSelected: false,
  onSelect: _noop
};
export var Checkbox = function Checkbox(props) {
  var className = props.className,
      isIndeterminate = props.isIndeterminate,
      isSelected = props.isSelected,
      isDisabled = props.isDisabled,
      style = props.style,
      title = props.title,
      onSelect = props.onSelect,
      passThroughs = _objectWithoutProperties(props, ["className", "isIndeterminate", "isSelected", "isDisabled", "style", "title", "onSelect"]);

  var nativeElement = /*#__PURE__*/React.createRef();

  function handleSpanClick(e) {
    e.preventDefault();
  }

  function handleClicked(event) {
    if (!isDisabled && onSelect) {
      onSelect(!isSelected, {
        event: event,
        props: props
      });

      if (nativeElement.current) {
        nativeElement.current.focus();
      }
    }
  }

  return /*#__PURE__*/React.createElement("div", {
    className: cx('&', {
      '&-is-disabled': isDisabled,
      '&-is-selected': isIndeterminate || isSelected
    }, className),
    onClick: handleClicked,
    style: style,
    title: title
  }, /*#__PURE__*/React.createElement("input", _extends({
    onChange: _noop
  }, omitProps(passThroughs, undefined, ['children'].concat(_keys(Checkbox.propTypes))), {
    checked: isSelected,
    className: cx('&-native'),
    disabled: isDisabled,
    ref: nativeElement,
    title: title,
    type: "checkbox"
  })), /*#__PURE__*/React.createElement("span", {
    onClick: handleSpanClick,
    className: cx('&-visualization-glow')
  }), /*#__PURE__*/React.createElement("span", {
    onClick: handleSpanClick,
    className: cx('&-visualization-container')
  }), isIndeterminate ? /*#__PURE__*/React.createElement("span", {
    onClick: handleSpanClick,
    className: cx('&-visualization-indeterminate')
  }, /*#__PURE__*/React.createElement("span", {
    className: cx('&-visualization-indeterminate-line')
  })) : /*#__PURE__*/React.createElement("span", {
    onClick: handleSpanClick,
    className: cx('&-visualization-checkmark')
  }, /*#__PURE__*/React.createElement("span", {
    className: cx('&-visualization-checkmark-stem')
  }), /*#__PURE__*/React.createElement("span", {
    className: cx('&-visualization-checkmark-kick')
  })));
};
Checkbox.displayName = 'Checkbox';
Checkbox.peek = {
  description: "\n\t\tCheckbox is a square two-state toggle used to create `CheckboxLabeled`.\n\n\t\tIt uses a hidden native checkbox control under the hood but leverages\n\t\tother HTML elements to visualize its state.\n\t",
  notes: {
    overview: "\n\t\t\tCheckbox is a square two-state toggle. Use `CheckboxLabeled` in your applications.\n\t\t",
    intendedUse: "\n\t\t\tUsed to create `CheckboxLabeled`. \t\t\t\n\t\t",
    technicalRecommendations: "\n\t\t\t- Use the Selected state when a filter or setting will be applied.\n\t\t\t- Use the Unselected state when a filter or setting will not be applied.\n\t\t\t- Use the Indeterminate state for parent checkboxes where some of the child checkboxes are Selected and some are Unselected. For example, the master checkbox in the header row of the interactive table example in `DataTable`.\n\t\t"
  },
  categories: ['controls', 'toggles']
};
Checkbox.defaultProps = defaultProps;
Checkbox.propTypes = {
  className: string,
  isIndeterminate: bool,
  isDisabled: bool,
  isSelected: bool,
  onSelect: func,
  style: object,
  title: string
};
export default Checkbox;