@catho/quantum/SegmentedControl/SegmentedControl.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Grid = require("../Grid");
var _theme = require("../shared/theme");
var _SegmentedButtons = _interopRequireDefault(require("./SegmentedButtons"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var SegmentedWrapper = _styledComponents["default"].div.withConfig({
  displayName: "SegmentedControl__SegmentedWrapper",
  componentId: "sc-15egx1v-0"
})(["display:flex;justify-content:space-around;label{border:1px solid;border-right:0px;", " &:first-child{border-radius:4px 0px 0px 4px;}&:last-child{border-radius:0px 4px 4px 0px;", "}}"], function (_ref) {
  var _ref$theme = _ref.theme,
    primaryColor700 = _ref$theme.colors.primary[700],
    _ref$theme$spacing = _ref$theme.spacing,
    xsmall = _ref$theme$spacing.xsmall,
    xxsmall = _ref$theme$spacing.xxsmall;
  return "\n      border-color: ".concat(primaryColor700, ";\n      padding: ").concat(xxsmall, "px ").concat(xsmall, "px;\n    ");
}, function (_ref2) {
  var primaryColor700 = _ref2.theme.colors.primary[700];
  return "\n        border: 1px solid ".concat(primaryColor700, ";\n      ");
});
var SegmentedControl = function SegmentedControl(_ref3) {
  var items = _ref3.items,
    _ref3$name = _ref3.name,
    name = _ref3$name === void 0 ? 'segmented-control' : _ref3$name,
    _ref3$onChange = _ref3.onChange,
    onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange,
    _ref3$theme = _ref3.theme,
    theme = _ref3$theme === void 0 ? {
      spacing: _theme.spacing,
      colors: _theme.colors
    } : _ref3$theme,
    _ref3$darkMode = _ref3.darkMode,
    darkMode = _ref3$darkMode === void 0 ? false : _ref3$darkMode;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.Row, {
    withBreakpoints: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.Col, {
      small: 6,
      medium: 5,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentedWrapper, {
        theme: theme,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SegmentedButtons["default"], {
          items: items,
          name: name,
          darkMode: darkMode,
          onChange: onChange
        })
      })
    })
  });
};
SegmentedControl.propTypes = {
  /** this prop receives a array of object with all the content */
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    label: _propTypes["default"].string,
    value: _propTypes["default"].string,
    icon: _propTypes["default"].string,
    checked: _propTypes["default"].bool
  })).isRequired,
  /** sets the name of component */
  name: _propTypes["default"].string,
  /** receives a callback function */
  onChange: _propTypes["default"].func,
  theme: _propTypes["default"].shape({
    spacing: _propTypes["default"].object,
    colors: _propTypes["default"].object
  }),
  /** this prop changes the layout to dark mode */
  darkMode: _propTypes["default"].bool
};
var _default = exports["default"] = SegmentedControl;