@findify/react-components/lib/components/common/Checkbox/index.js

Findify react UI components

/**
 * @module components/CheckboxFacet
 */
import { useCallback } from 'react';
import Button from "../../Button";
import Text from "../../Text";
import Icon from "../../Icon";
var styles = {
  "item": "findify-components-common--checkbox__item",
  "mobile": "findify-components-common--checkbox__mobile",
  "icon": "findify-components-common--checkbox__icon",
  "content": "findify-components-common--checkbox__content"
};
import cx from 'classnames';
/** Props that CheckboxFacet Item accepts */

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default (function (_ref) {
  var item = _ref.item,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme,
      style = _ref.style,
      onItemClick = _ref.onItemClick,
      content = _ref.content,
      config = _ref.config,
      isMobile = _ref.isMobile;
  var onClick = useCallback(function (evt) {
    item.toggle(evt);
    onItemClick && onItemClick(evt);
  }, [item, onItemClick]);
  var isSelected = item.get('selected');
  return /*#__PURE__*/_jsxs(Button, {
    style: style,
    role: "checkbox",
    "aria-checked": isSelected ? 'true' : 'false',
    tabIndex: 0,
    onClick: onClick,
    className: cx(theme.item, isMobile && theme.mobile),
    children: [/*#__PURE__*/_jsx(Icon, {
      className: theme.icon,
      name: isSelected ? 'CheckboxFilled' : 'CheckboxEmpty',
      title: isSelected ? 'Selected' : 'Not selected'
    }), /*#__PURE__*/_jsx(Text, {
      primary: true,
      lowercase: true,
      className: theme.content,
      bold: isSelected,
      children: content({
        item: item,
        config: config
      })
    }), /*#__PURE__*/_jsxs(Text, {
      secondary: true,
      uppercase: true,
      children: ["(", item.get('count'), ")"]
    })]
  });
});