@evg-b/evg-ui/dist/Checkbox/Checkbox.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import Color from '../styles/Color/Color.js';
import SwitchBase from '../SwitchBase/SwitchBase.js';
import CheckBoxCheck from '../internal/icons/Checkbox/CheckBoxCheck.js';
import CheckBoxOutlineBlank from '../internal/icons/Checkbox/CheckBoxOutlineBlank.js';
import IndeterminateCheckBox from '../internal/icons/Checkbox/IndeterminateCheckBox.js';

var MapSize = {
  'small': 12,
  'medium': 14,
  'large': 24,
  'extra': 34
};
var styles = {
  base: {
    position: 'relative'
  },
  iconChecked: {
    position: 'absolute',
    opacity: 0,
    transition: 'opacity 100ms linear,stroke-dashoffset 250ms cubic-bezier(0.4, 0, 0.2, 1)',
    userSelect: 'none',
    fill: 'currentColor',
    stroke: function stroke(props) {
      return props.color === 'default' ? Color('#000000').Contrast() : props.Color.Contrast();
    },
    strokeWidth: 2.5,
    strokeDasharray: 24,
    strokeDashoffset: 24,
    backgroundColor: function backgroundColor(props) {
      return props.color === 'default' ? Color('#000000').Base() : props.Color.Base();
    },
    '&:disabled,&[disabled]': {
      cursor: 'default',
      pointerEvents: ' none',
      backgroundColor: '#b4b4b4'
    }
  },
  indeterminateChecked: {
    position: 'absolute',
    opacity: 0,
    transition: 'opacity 100ms linear'
  },
  checked: {
    '&:checked + $indeterminateChecked': {
      opacity: 1
    },
    '&:checked + $iconChecked': {
      opacity: 1,
      strokeDashoffset: 0
    }
  }
};
/**
 * Компонент позволяющий управлять параметром с двумя состояниями. 
 * Полное соответствие функционала что и у нативной версии.
*/

var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
  var _classNames;

  var classes = props.classes,
      className = props.className;
      props.children;
      var name = props.name,
      size = props.size,
      color = props.color,
      indeterminate = props.indeterminate,
      disabled = props.disabled,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "name", "size", "color", "indeterminate", "disabled"]);

  var CheckBoxIcon = indeterminate ? IndeterminateCheckBox : CheckBoxCheck;
  var CheckBoxCheckedIcon = /*#__PURE__*/React.createElement(CheckBoxIcon, {
    size: !indeterminate ? MapSize[size] : size,
    color: color,
    disabled: disabled,
    className: classNames((_classNames = {}, _defineProperty(_classNames, classes.iconChecked, !indeterminate), _defineProperty(_classNames, classes.indeterminateChecked, indeterminate), _classNames))
  });
  return /*#__PURE__*/React.createElement(SwitchBase, _extends({
    type: "checkbox",
    ref: ref,
    name: name,
    color: color,
    className: className,
    classes: {
      checked: classes.checked
    },
    icon: /*#__PURE__*/React.createElement(CheckBoxOutlineBlank, {
      size: size
    }),
    iconChecked: CheckBoxCheckedIcon,
    disabled: disabled
  }, otherProps));
});
Checkbox.propTypes = {
  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Это свойство не реализуется.
  */
  children: PropTypes.any,

  /**
   * Название цвета в разных форматах.
  */
  color: PropTypes.string,

  /**
   * Название компонента.
  */
  name: PropTypes.string,

  /**
   * Размер компонента.
  */
  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra']),

  /**
   * indeterminate состояние.
  */
  indeterminate: PropTypes.bool,

  /**
   * Если true, принимает состоянии disabled.
  */
  disabled: PropTypes.bool
};
Checkbox.defaultProps = {
  name: 'checkbox',
  color: 'default',
  size: 'medium',
  indeterminate: false,
  disabled: false
};
Checkbox.displayName = 'CheckboxEVG';
var Checkbox$1 = withStyles(styles)(Checkbox);

export default Checkbox$1;