@music-loopy/loops/es/components/CheckboxSelect/index.js

A React component library for Music Loopy Applications and websites

var _excluded = ["color", "label", "options", "onChange", "firstRow", "icon", "selectedOptions"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Icon from '../Icon';
import { LiaAngleDownSolid, LiaAngleUpSolid } from 'react-icons/lia';
var StyledContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid\n    ", ";\n  padding: 5px;\n  background: ", ";\n  border-radius: 5px;\n  overflow: hidden;\n  transition:\n    max-height 0.25s ease-in-out,\n    opacity 0.25s ease-in-out;\n  max-height: ", ";\n  ", "\n"])), function (props) {
  return props.theme.colors[props.color.border || 'primary'].color;
}, function (props) {
  return props.theme.colors[props.color.background || 'primary'].color;
}, function (props) {
  return props.isOpen ? '50vh' : '100px';
}, function (props) {
  return props.isOpen && "position: relative;\n    overflow: scroll;\n    box-shadow: 1px 1px 11px 1px #00000057;\n  ";
});
var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 5%;\n  margin-left: 1%;\n  svg {\n    color: ", ";\n  }\n"])), function (props) {
  return props.theme.colors[props.color || 'primary'].color;
});
var LabelContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 80%;\n  margin-left: 2%;\n  color: ", ";\n"])), function (props) {
  return props.theme.colors[props.color || 'primary'].color;
});
var Circle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  width: 15px;\n  height: 15px;\n  font-weight: 600;\n  border: 2px solid\n    ", ";\n  transition: transform 0.25s ease-in-out;\n  svg {\n    stroke-width: 2.5px;\n  }\n  &:hover {\n    cursor: pointer;\n    transform: scale(1.1);\n  }\n"])), function (props) {
  return props.theme.colors[props.color || 'primary'].color;
});
var Rows = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 5px;\n  flex-direction: column;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  margin-left: 7%;\n  width: 100%;\n  margin-top: ", ";\n  transition: all 0.25s ease-in-out;\n"])), function (props) {
  return props.isOpen ? '10px' : '0';
}, function (props) {
  return props.isOpen ? '10px' : '0';
}, function (props) {
  return props.isOpen ? '5%' : '0';
});
var Row = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n  transition: all 0.25s ease-in-out;\n"])));
var RadioButtonContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n  flex-direction: row;\n  transition: all 0.25s ease-in-out;\n"])));
var Checkbox = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  width: 10px;\n  transition: all 0.25s ease-in-out;\n  visibility: hidden;\n  position: absolute;\n  &::after {\n    --color-border: ", ";\n    --color-dot: var(--color-border);\n    content: '';\n    visibility: visible;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--padding) * -1);\n    width: var(--size);\n    height: var(--size);\n    border-radius: 1px;\n    color: lightgray;\n\n    box-shadow: 0 0 0 2px var(--color-border);\n    pointer-events: none;\n  }\n\n  &:checked::after {\n    content: '\u2713';\n    color: var(--color-dot);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])), function (props) {
  var _props$color;
  return props.theme.colors[((_props$color = props.color) === null || _props$color === void 0 ? void 0 : _props$color.text) || 'darkGrey'].color;
});
var Label = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 12px;\n  --size: 10px;\n  --padding: calc(var(--size) + 1em);\n  position: relative;\n  margin: 0.25em;\n  min-height: var(--size);\n  padding-left: var(--padding);\n  cursor: pointer;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  transition: all 0.25s ease-in-out;\n"])), function (props) {
  var _props$color2;
  return props.theme.colors[((_props$color2 = props.color) === null || _props$color2 === void 0 ? void 0 : _props$color2.text) || 'darkGrey' || 'primary'].color;
});
var FirstRow = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 5px;\n  z-index: 1;\n  flex-direction: row;\n  ", "\n"])), function (props) {
  return props.isOpen && "\n    position: sticky;\n    background: hsl(\n      from  " + props.theme.colors[props.background || 'primary'].color + " h s calc(l - 5)\n    );\n    top: -10px;\n    left: -10px;\n    right: -2px;\n    z-index: 10;\n    padding: 5px;\n    margin: -5px;\n  ";
});
export var CheckboxSelect = function CheckboxSelect(_ref) {
  var color = _ref.color,
    label = _ref.label,
    options = _ref.options,
    onChange = _ref.onChange,
    firstRow = _ref.firstRow,
    icon = _ref.icon,
    selectedOptions = _ref.selectedOptions,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(false),
    isOpen = _useState[0],
    setIsOpen = _useState[1];
  var _useState2 = useState(selectedOptions || []),
    _selectedOptions = _useState2[0],
    setSelectedOptions = _useState2[1];
  var openSelect = function openSelect() {
    setIsOpen(!isOpen);
  };
  var handleCheckboxSelect = function handleCheckboxSelect(e) {
    var checked = e.target.checked;
    if (checked) {
      var option = options.find(function (option) {
        return option.id === e.target.id;
      });
      var newSelectedOptions = [].concat(_selectedOptions, [option]);
      onChange(newSelectedOptions);
      setSelectedOptions(newSelectedOptions);
    } else {
      var _newSelectedOptions = _selectedOptions.filter(function (option) {
        return option.id !== e.target.id;
      });
      onChange(_newSelectedOptions);
      setSelectedOptions(_newSelectedOptions);
    }
  };
  return /*#__PURE__*/React.createElement(StyledContainer, _extends({
    color: color,
    isOpen: isOpen
  }, rest), /*#__PURE__*/React.createElement(FirstRow, {
    isOpen: isOpen,
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    },
    background: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.background) || 'light' : (color === null || color === void 0 ? void 0 : color.icon) || 'darkGrey'
  }, /*#__PURE__*/React.createElement(IconContainer, {
    color: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.text) || 'darkGrey' : (color === null || color === void 0 ? void 0 : color.icon) || 'darkGrey'
  }, /*#__PURE__*/React.createElement(Icon, {
    name: icon,
    fill: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.text) || 'darkGrey' : (color === null || color === void 0 ? void 0 : color.icon) || 'darkGrey'
  })), /*#__PURE__*/React.createElement(LabelContainer, {
    color: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.text) || 'darkGrey' : (color === null || color === void 0 ? void 0 : color.text) || 'darkGrey'
  }, label), /*#__PURE__*/React.createElement(IconContainer, {
    color: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.text) || 'darkGrey' : (color === null || color === void 0 ? void 0 : color.icon) || 'darkGrey',
    onClick: function onClick() {
      return openSelect();
    }
  }, isOpen ? /*#__PURE__*/React.createElement(Circle, {
    color: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.text) || 'darkGrey' : (color === null || color === void 0 ? void 0 : color.icon) || 'darkGrey'
  }, ' ', /*#__PURE__*/React.createElement(LiaAngleUpSolid, {
    size: "2em"
  })) : /*#__PURE__*/React.createElement(Circle, {
    color: isOpen ? (firstRow === null || firstRow === void 0 ? void 0 : firstRow.text) || 'darkGrey' : (color === null || color === void 0 ? void 0 : color.icon) || 'darkGrey'
  }, /*#__PURE__*/React.createElement(LiaAngleDownSolid, {
    size: "2em"
  })))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Rows, {
    isOpen: isOpen,
    color: color
  }, isOpen && options.map(function (option) {
    return /*#__PURE__*/React.createElement(Row, {
      key: option.label
    }, /*#__PURE__*/React.createElement(RadioButtonContainer, null, /*#__PURE__*/React.createElement(Label, {
      className: "radio",
      color: color,
      htmlFor: option.id
    }, /*#__PURE__*/React.createElement(Checkbox, {
      type: "checkbox",
      id: option.id,
      name: option.name,
      onClick: handleCheckboxSelect,
      checked: _selectedOptions.some(function (selectedOption) {
        return selectedOption.id === option.id;
      }),
      color: color
    }), option.label)));
  }))));
};
CheckboxSelect.propTypes = process.env.NODE_ENV !== "production" ? {
  color: PropTypes.shape({
    border: PropTypes.string,
    text: PropTypes.string,
    icon: PropTypes.string
  }),
  label: PropTypes.string.isRequired,
  options: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string,
    label: PropTypes.string
  }))
} : {};
export default CheckboxSelect;