@shopgate/pwa-common/components/Checkbox/index.js

Common library for the Shopgate Connect PWA.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

/**
 * @typedef {Object} CheckboxProps
 * @property {React.ReactNode} checkedIcon React component used as icon for the checked state
 * @property {React.ReactNode} uncheckedIcon React component used as icon for the unchecked state
 * @property {boolean} [checked] Current checked state of the checkbox
 * @property {string} [className] Class name for the checkbox
 * @property {boolean} [defaultChecked] Whether the checkbox is checked by default
 * @property {boolean} [disabled] Disabled state of the checkbox (default `false`)
 * @property {React.ReactNode | string} [label] Checkbox label. Can be a string or a component.
 * @property {"left"|"right"} [labelPosition] Position for the lable (default `"left"`)
 * @property {string} [name] Name for the hidden input tag
 * @property {Function} [onCheck] Callback invoked when checkbox is toggled
 */

/**
 * Base checkbox component.
 * @extends {React.Component<CheckboxProps>}
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
let Checkbox = /*#__PURE__*/function (_Component) {
  /**
   * The checkbox component constructor.
   * It checks if the checkbox is a controlled or uncontrolled input and sets an internal state if
   * uncontrolled to keep track of th checked-state.
   * @param {Object} props The Checkbox properties.
   */
  function Checkbox(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    /**
     * Returns if the checkbox is checked or not.
     * @return {boolean} Is the checkbox checked?
     */
    _this.isChecked = () => typeof _this.props.defaultChecked === 'undefined' ? _this.props.checked // Controlled.
    : _this.state.checked // Uncontrolled.
    ;
    /**
     * Inverts the current "checked" value and calls the callback function with it.
     * If the checkbox is uncontrolled, it keeps track of the value.
     */
    _this.handleCheck = () => {
      if (_this.props.disabled) {
        return;
      }
      const checked = !_this.isChecked();
      if (typeof _this.props.defaultChecked !== 'undefined') {
        // Uncontrolled.
        _this.setState({
          checked
        });
      }
      _this.props.onCheck(checked);
    };
    /**
     * Handler for keyDown events of the checkbox
     * @param {Object} e The keyDown event payload
     */
    _this.handleKeyDown = e => {
      if (e.key === ' ') {
        // Toggle checkbox on "space" - mocks behavior of native checkboxes
        _this.handleCheck();
      }
    };
    /**
     * Renders the checked/unchecked icon.
     * @returns {JSX}
     */
    _this.renderIcon = () => _this.isChecked() ? _this.props.checkedIcon : _this.props.uncheckedIcon;
    /**
     * Renders an input if a "name" prop is provided.
     * @returns {JSX}
     */
    _this.renderInput = () => {
      const {
        props: {
          name
        },
        isChecked
      } = _this;
      return _this.props.name ? /*#__PURE__*/_jsx("input", {
        className: "input",
        type: "hidden",
        name: name,
        value: isChecked() ? 1 : 0
      }) : null;
    };
    /**
     * Renders the label if "side" matches he labelPosition prop.
     * @param {string} side Used to check against which side to render the label on.
     * @returns {JSX}
     */
    _this.renderLabelIfItIsOnThe = side => _this.props.labelPosition === side ? _this.props.label : null;
    if (typeof props.defaultChecked !== 'undefined') {
      // Uncontrolled input.
      _this.state = {
        checked: props.defaultChecked
      };
    } else {
      // Controlled input
      _this.state = {
        checked: props.checked
      };
    }
    return _this;
  }

  /**
   * Make sure state is updated with new checked value when input is controlled
   * @param {Object} nextProps Contains the new "checked" status
   */
  _inheritsLoose(Checkbox, _Component);
  var _proto = Checkbox.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    // Update only for controlled input
    if (typeof this.props.defaultChecked === 'undefined') {
      if (this.state.checked !== nextProps.checked) {
        this.setState({
          checked: nextProps.checked
        });
      }
    }
  };
  /**
   * Renders the checkbox component.
   * @returns {JSX}
   */
  _proto.render = function render() {
    return /*#__PURE__*/_jsxs("div", {
      className: classNames(this.props.className, 'checkbox', 'common__checkbox'),
      onClick: this.handleCheck,
      onKeyDown: this.handleKeyDown,
      role: "checkbox",
      "aria-checked": this.props.checked,
      tabIndex: 0,
      children: [this.renderInput(), this.renderLabelIfItIsOnThe('left'), this.renderIcon(), this.renderLabelIfItIsOnThe('right')]
    });
  };
  return Checkbox;
}(Component);
Checkbox.defaultProps = {
  checked: undefined,
  className: undefined,
  defaultChecked: undefined,
  disabled: false,
  label: null,
  labelPosition: 'left',
  name: undefined,
  onCheck: () => {}
};
export default Checkbox;