kits-core/build/components/uielements/PCheckBox.js

Kits core module

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _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; };

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _icons = require("@ant-design/icons");

var _icons2 = _interopRequireDefault(_icons);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var disabledStyle = {
  "borderRadius": "4px",
  "background": "#D7D7DA",
  "width": "20px",
  "display": "flex",
  "justifyContent": "center",
  "alignItems": "center",
  "height": "20px"
};

var unCheckStyle = {
  "background": "#FFFFFF",
  "border": "1px solid #D7D7DA",
  "boxSizing": "border-box",
  "boxShadow": "inset 0px -3px 0px #EBEBEB",
  "borderRadius": "4px",
  "width": "20px",
  "height": "20px",
  "cursor": "pointer"
};

var labelStyle = {
  marginLeft: 8,
  color: "#313135",
  alignItems: "center",
  display: "flex",
  fontSize: 16,
  lineHeight: "22px"
};

var disableCheckSvg = function disableCheckSvg(props) {
  return _react2.default.createElement(
    "svg",
    { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    _react2.default.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#D7D7DA" }),
    _react2.default.createElement("path", { d: "M4 10L8 14L16 6", stroke: "#B4B4BB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
  );
};

var DisableCheckIcon = function DisableCheckIcon(props) {
  return _react2.default.createElement(_icons2.default, _extends({ component: function component() {
      return disableCheckSvg(_extends({}, props));
    } }, props));
};

var CheckSquareSvg = function CheckSquareSvg(props) {
  return _react2.default.createElement(
    "svg",
    { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
    _react2.default.createElement("rect", { width: "20", height: "20", rx: "4", fill: "#069356" }),
    _react2.default.createElement("path", { d: "M4 10L8 14L16 6", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
  );
};

var CheckSquareIcon = function CheckSquareIcon(props) {
  return _react2.default.createElement(_icons2.default, _extends({ component: function component() {
      return CheckSquareSvg(_extends({}, props));
    } }, props));
};

var PCheckBox = (0, _react.forwardRef)(function (props, ref) {
  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      checked = _useState2[0],
      setChecked = _useState2[1];

  (0, _react.useEffect)(function () {
    setChecked(props.checked);
  }, [props.checked]);

  var onChange = function onChange() {
    if (!props.disabled) {
      props.onChange && props.onChange(!checked);
      setChecked(!checked);
    }
  };

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      onChange: onChange
    };
  });

  switch (props.type) {
    case "circle":
    case "square":
    case "square-outline":

      return _react2.default.createElement(
        "div",
        {
          id: props.id ? props.id : "cb-" + props.label,
          key: props.id ? props.id : "cb-" + props.label + "-" + checked,
          className: props.className,
          onClick: onChange,
          style: {
            display: "flex",
            cursor: props.disabled ? "not-allowed" : "pointer",
            alignItems: "center",
            width: "fit-content"
          } },
        !props.disabled && _react2.default.createElement(
          _react2.default.Fragment,
          null,
          !checked ? _react2.default.createElement("div", { style: unCheckStyle }) : _react2.default.createElement(CheckSquareIcon, null)
        ),
        props.disabled && _react2.default.createElement(
          "div",
          { style: disabledStyle },
          !checked ? _react2.default.createElement("div", { style: disabledStyle }) : _react2.default.createElement(DisableCheckIcon, null)
        ),
        props.label && _react2.default.createElement(
          "div",
          { style: _extends({}, labelStyle) },
          props.label
        )
      );

    default:
      return _react2.default.createElement(_react2.default.Fragment, null);
  }
});

exports.default = PCheckBox;