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

Common library for the Shopgate Connect PWA.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}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}
 */var 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 _this2;_classCallCheck(this,Checkbox);_this2=_callSuper(this,Checkbox,[props]);/**
   * Returns if the checkbox is checked or not.
   * @return {boolean} Is the checkbox checked?
   */_defineProperty(_this2,"isChecked",function(){return typeof _this2.props.defaultChecked==='undefined'?_this2.props.checked// Controlled.
:_this2.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.
   */_defineProperty(_this2,"handleCheck",function(){if(_this2.props.disabled){return;}var checked=!_this2.isChecked();if(typeof _this2.props.defaultChecked!=='undefined'){// Uncontrolled.
_this2.setState({checked:checked});}_this2.props.onCheck(checked);});/**
   * Handler for keyDown events of the checkbox
   * @param {Object} e The keyDown event payload
   */_defineProperty(_this2,"handleKeyDown",function(e){if(e.key===' '){// Toggle checkbox on "space" - mocks behavior of native checkboxes
_this2.handleCheck();}});/**
   * Renders the checked/unchecked icon.
   * @returns {JSX}
   */_defineProperty(_this2,"renderIcon",function(){return _this2.isChecked()?_this2.props.checkedIcon:_this2.props.uncheckedIcon;});/**
   * Renders an input if a "name" prop is provided.
   * @returns {JSX}
   */_defineProperty(_this2,"renderInput",function(){var _this3=_this2,name=_this3.props.name,isChecked=_this3.isChecked;return _this2.props.name?React.createElement("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}
   */_defineProperty(_this2,"renderLabelIfItIsOnThe",function(side){return _this2.props.labelPosition===side?_this2.props.label:null;});if(typeof props.defaultChecked!=='undefined'){// Uncontrolled input.
_this2.state={checked:props.defaultChecked};}else{// Controlled input
_this2.state={checked:props.checked};}return _this2;}/**
   * Make sure state is updated with new checked value when input is controlled
   * @param {Object} nextProps Contains the new "checked" status
   */_inherits(Checkbox,_Component);return _createClass(Checkbox,[{key:"UNSAFE_componentWillReceiveProps",value: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});}}}},{key:"render",value:/**
   * Renders the checkbox component.
   * @returns {JSX}
   */function render(){return React.createElement("div",{className:classNames(this.props.className,'checkbox','common__checkbox'),onClick:this.handleCheck,onKeyDown:this.handleKeyDown,role:"checkbox","aria-checked":this.props.checked,tabIndex:0},this.renderInput(),this.renderLabelIfItIsOnThe('left'),this.renderIcon(),this.renderLabelIfItIsOnThe('right'));}}]);}(Component);_defineProperty(Checkbox,"defaultProps",{checked:undefined,className:undefined,defaultChecked:undefined,disabled:false,label:null,labelPosition:'left',name:undefined,onCheck:function onCheck(){}});export default Checkbox;