@fluentui/react-northstar/dist/es/components/Checkbox/Checkbox.js

A themable React component library.

import _invoke from "lodash/invoke";
import { checkboxBehavior } from '@fluentui/accessibility';
import { getElementType, useUnhandledProps, useAccessibility, useStateManager, useFluentContext, useStyles, useTelemetry } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import { createCheckboxManager } from '@fluentui/state';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes } from '../../utils';
import { Box } from '../Box/Box';
import { Text } from '../Text/Text';
export var checkboxClassName = 'ui-checkbox';
export var checkboxSlotClassNames = {
  label: checkboxClassName + "__label",
  indicator: checkboxClassName + "__indicator"
};

/**
 * A Checkbox allows a user to make a choice between two mutually exclusive options.
 *
 * @accessibility
 * Implements [ARIA Checkbox](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox) design pattern.
 */
export var Checkbox = /*#__PURE__*/function () {
  var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(Checkbox.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var checked = props.checked,
      className = props.className,
      defaultChecked = props.defaultChecked,
      design = props.design,
      disabled = props.disabled,
      label = props.label,
      labelPosition = props.labelPosition,
      indicator = props.indicator,
      styles = props.styles,
      toggle = props.toggle,
      variables = props.variables;
    var _useStateManager = useStateManager(createCheckboxManager, {
        mapPropsToInitialState: function mapPropsToInitialState() {
          return {
            checked: defaultChecked
          };
        },
        mapPropsToState: function mapPropsToState() {
          return {
            checked: checked === 'mixed' ? false : checked
          };
        }
      }),
      state = _useStateManager.state,
      actions = _useStateManager.actions;
    var getA11Props = useAccessibility(props.accessibility, {
      debugName: Checkbox.displayName,
      mapPropsToBehavior: function mapPropsToBehavior() {
        return {
          checked: state.checked,
          disabled: disabled
        };
      },
      actionHandlers: {
        performClick: function performClick(e) {
          e.preventDefault();
          handleClick(e);
        }
      },
      rtl: context.rtl
    });
    var _useStyles = useStyles(Checkbox.displayName, {
        className: checkboxClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            checked: checked === 'mixed' ? 'mixed' : state.checked,
            disabled: disabled,
            labelPosition: labelPosition,
            toggle: toggle
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes,
      resolvedStyles = _useStyles.styles;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(Checkbox.handledProps, props);
    var handleChange = function handleChange(e) {
      if (!disabled) {
        // Checkbox component doesn't present any `input` component in markup, however all of our
        // components should handle events transparently.
        var _checked = !state.checked;
        actions.toggle(_checked);
        _invoke(props, 'onChange', e, Object.assign({}, props, {
          checked: _checked
        }));
      }
    };
    var handleClick = function handleClick(e) {
      if (!disabled) {
        var _checked2 = !state.checked;
        actions.toggle(_checked2);
        _invoke(props, 'onClick', e, Object.assign({}, props, {
          checked: _checked2
        }));
        _invoke(props, 'onChange', e, Object.assign({}, props, {
          checked: _checked2
        }));
      }
    };
    var labelElement = Text.create(label, {
      defaultProps: function defaultProps() {
        return getA11Props('label', {
          styles: resolvedStyles.label,
          className: checkboxSlotClassNames.label
        });
      }
    });
    var element = /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
      className: classes.root,
      onClick: handleClick,
      onChange: handleChange,
      ref: ref
    }, unhandledProps)), labelPosition === 'start' && labelElement, Box.create(indicator, {
      defaultProps: function defaultProps() {
        return getA11Props('indicator', {
          className: checkboxSlotClassNames.indicator,
          styles: toggle ? resolvedStyles.toggle : resolvedStyles.checkbox
        });
      }
    }), labelPosition === 'end' && labelElement);
    setEnd();
    return element;
  });
  Checkbox.displayName = 'Checkbox';
  Checkbox.defaultProps = {
    accessibility: checkboxBehavior,
    indicator: {},
    labelPosition: 'end'
  };
  Checkbox.propTypes = Object.assign({}, commonPropTypes.createCommon({
    content: false
  }), {
    checked: PropTypes.oneOf([true, false, 'mixed']),
    defaultChecked: PropTypes.bool,
    disabled: PropTypes.bool,
    indicator: customPropTypes.shorthandAllowingChildren,
    label: customPropTypes.itemShorthand,
    labelPosition: PropTypes.oneOf(['start', 'end']),
    onChange: PropTypes.func,
    onClick: PropTypes.func,
    toggle: PropTypes.bool
  });
  Checkbox.handledProps = Object.keys(Checkbox.propTypes);
  Checkbox.create = createShorthandFactory({
    Component: Checkbox,
    mappedProp: 'label'
  });
  return Checkbox;
}();
//# sourceMappingURL=Checkbox.js.map