react-elegant-ui/components/Checkbox/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CheckboxWithState = exports.CheckboxInlineExample = exports.BaseCheckbox = void 0;
var _react = _interopRequireWildcard(require("react"));
var _useUniqueId = require("../../../hooks/useUniqueId");
var _desktop = require("../Checkbox.bundle/desktop");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __read = void 0 && (void 0).__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
var verbose = true;
var CheckboxWithState = function (props) {
  var _a = __read((0, _react.useState)(props.checked), 2),
    isEnabled = _a[0],
    setState = _a[1];
  var toggleCounter = (0, _react.useRef)(0);
  (0, _react.useEffect)(function () {
    var _a;
    if (!verbose) return;
    // Skip init
    if (toggleCounter.current++ === 0) return;
    console.log("checkbox \"".concat((_a = props.label) !== null && _a !== void 0 ? _a : 'unknown', "\" toggle to"), isEnabled);
  }, [isEnabled, props.label]);
  return /*#__PURE__*/_react.default.createElement(_desktop.Checkbox, __assign({}, props, {
    checked: !!isEnabled,
    setChecked: setState
  }));
};
exports.CheckboxWithState = CheckboxWithState;
var BaseCheckbox = function () {
  var liClass = (0, _useUniqueId.useUniqueId)('exampleList');
  var style = "\n\t\t.".concat(liClass, " {\n\t\t\tlist-style: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.").concat(liClass, " li:not(:last-child) {\n\t\t\tmargin-bottom: .5rem;\n\t\t}\n\t");
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("style", null, style), /*#__PURE__*/_react.default.createElement("ul", {
    className: liClass
  }, Array(4).fill(0).map(function (_, idx) {
    var disabled = idx > 1;
    return /*#__PURE__*/_react.default.createElement("li", {
      key: idx
    }, /*#__PURE__*/_react.default.createElement(CheckboxWithState, {
      label: "Checkbox #".concat(idx + 1) + (disabled ? ' (disabled)' : ''),
      disabled: disabled,
      checked: (idx + 1) % 2 !== 0
    }));
  }), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(CheckboxWithState, {
    label: /*#__PURE__*/_react.default.createElement("span", null, "Some text ", /*#__PURE__*/_react.default.createElement("strong", null, "as node")),
    checked: true
  })), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(CheckboxWithState, {
    label: "Indeterminate checkbox",
    indeterminate: true
  }))));
};
exports.BaseCheckbox = BaseCheckbox;
var CheckboxInlineExample = function () {
  return /*#__PURE__*/_react.default.createElement("div", null, "Choose between ", /*#__PURE__*/_react.default.createElement(CheckboxWithState, {
    label: "some value"
  }), " and some", ' ', /*#__PURE__*/_react.default.createElement(CheckboxWithState, {
    label: "other value",
    size: "s"
  }));
};
exports.CheckboxInlineExample = CheckboxInlineExample;