@catho/quantum
Version:
Catho react components
253 lines (252 loc) • 14.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _slugify = _interopRequireDefault(require("slugify"));
var _theme = require("../shared/theme");
var _shared = require("../shared");
var _Icon = _interopRequireDefault(require("../Icon"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && {}.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; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Wrapper = _styledComponents["default"].ul.withConfig({
displayName: "Accordion__Wrapper",
componentId: "sc-xw8wcl-0"
})(["", " padding:0px;list-style-type:none;"], function (_ref) {
var _ref$theme = _ref.theme,
baseFontSize = _ref$theme.baseFontSize,
color = _ref$theme.colors.neutral[900];
return "\n color: ".concat(color, ";\n font-size: ").concat(baseFontSize, "px;\n ");
});
var AccordionTitle = _styledComponents["default"].span.withConfig({
displayName: "Accordion__AccordionTitle",
componentId: "sc-xw8wcl-1"
})(["", " font-weight:bold;line-height:inherit;"], function (_ref2) {
var _ref2$theme = _ref2.theme,
baseFontSize = _ref2$theme.baseFontSize,
neutral = _ref2$theme.colors.neutral;
return "\n color: ".concat(neutral[700], ";\n font-size: ").concat(baseFontSize, "px;\n ");
});
var AccordionHeader = _styledComponents["default"].button.attrs({
type: 'button'
}).withConfig({
displayName: "Accordion__AccordionHeader",
componentId: "sc-xw8wcl-2"
})(["", " background:inherit;border:none;box-sizing:content-box;cursor:pointer;display:inline-flex;justify-content:space-between;width:100%;"], function (_ref3) {
var _ref3$spacing = _ref3.spacing,
large = _ref3$spacing.large,
medium = _ref3$spacing.medium;
return "\n height: ".concat(large, "px;\n line-height: ").concat(large, "px;\n padding: ").concat(medium, "px 0;\n ");
});
var AccordionContent = _styledComponents["default"].div.withConfig({
displayName: "Accordion__AccordionContent",
componentId: "sc-xw8wcl-3"
})(["", " ", ""], function (_ref4) {
var _ref4$theme = _ref4.theme,
xsmall = _ref4$theme.spacing.xsmall,
baseFontSize = _ref4$theme.baseFontSize,
_ref4$theme$colors = _ref4$theme.colors,
primary = _ref4$theme$colors.primary,
secondary = _ref4$theme$colors.secondary;
return "\n font-size: ".concat(baseFontSize - 2, "px;\n max-height: 0;\n overflow: hidden;\n padding: 0px;\n transition: max-height 0.2s linear;\n will-change: transform;\n \n a {\n color: ").concat(primary[700], ";\n font-size: ").concat(baseFontSize - 2, "px;\n text-decoration: underline;\n display: block;\n padding: ").concat(xsmall, "px 0;\n\n &:hover {\n color: ").concat(secondary[700], ";\n }\n }\n\n ul {\n list-style-type: none;\n padding: 0;\n }\n\n p {\n margin: 0;\n }\n ");
}, function (_ref5) {
var opened = _ref5.opened,
_ref5$theme$spacing = _ref5.theme.spacing,
xsmall = _ref5$theme$spacing.xsmall,
large = _ref5$theme$spacing.large;
return opened && (0, _styledComponents.css)(["padding:", "px 0 ", "px 0;max-height:2000px;"], xsmall, large);
});
var StyledIcon = (0, _styledComponents["default"])(_Icon["default"]).withConfig({
displayName: "Accordion__StyledIcon",
componentId: "sc-xw8wcl-4"
})(["", " line-height:inherit;"], function (_ref6) {
var _ref6$theme = _ref6.theme,
baseFontSize = _ref6$theme.baseFontSize,
large = _ref6$theme.spacing.large,
primary = _ref6$theme.colors.primary;
return "\n font-size: ".concat(baseFontSize * 1.5, "px;\n margin-right: ").concat(large, "px;\n color: ").concat(primary[700], ";\n ");
});
var AccordionItem = _styledComponents["default"].li.withConfig({
displayName: "Accordion__AccordionItem",
componentId: "sc-xw8wcl-5"
})(["transition:border 0.2s linear,margin 0.2s linear;overflow:hidden;", " ", " ", ""], function (_ref7) {
var _ref7$theme = _ref7.theme,
small = _ref7$theme.spacing.small,
neutral = _ref7$theme.colors.neutral;
return "\n &:first-child {\n border-radius: 4px 4px 0px 0px;\n }\n\n &:last-child {\n border-radius: 0px 0px 4px 4px;\n border-bottom: none;\n }\n background-color: ".concat(neutral[0], ";\n padding-left: ").concat(small, "px;\n border-left: 4px solid transparent;\n border-radius: inherit;\n margin: 1px 0;\n ");
}, function (_ref8) {
var _ref8$theme = _ref8.theme,
primary = _ref8$theme.colors.primary,
medium = _ref8$theme.spacing.medium,
opened = _ref8.opened;
return opened && (0, _styledComponents.css)(["border-radius:4px;&:first-child{border-radius:4px;}&:last-child{border-radius:4px;}border-left:4px solid ", ";margin:", "px 0px;"], primary[700], medium);
}, (0, _shared.shadow)(1));
AccordionHeader.displayName = 'AccordionHeader';
AccordionContent.displayName = 'AccordionContent';
var Accordion = /*#__PURE__*/function (_Component) {
function Accordion(props) {
var _this;
_classCallCheck(this, Accordion);
_this = _callSuper(this, Accordion, [props]);
_defineProperty(_this, "toggleItem", function (indexToChange) {
var items = _this.state.items;
var keepOnlyOneOpen = _this.props.keepOnlyOneOpen;
var newItems = items;
if (keepOnlyOneOpen) {
newItems = _this.closeAllContents();
}
newItems = _this.toggleItemVisibility(newItems, indexToChange);
_this.setAccordionItems(newItems);
});
_defineProperty(_this, "handleCustomItem", function (items) {
return items.map(function (item, index) {
var customItem = item;
customItem.onItemClick = function (i) {
if (typeof item.onClick === 'function') {
item.onClick();
}
_this.toggleItem(i);
};
customItem.opened = !!item.opened;
return _this.renderItem(customItem, index);
});
});
_this.state = {
items: props.items
};
return _this;
}
_inherits(Accordion, _Component);
return _createClass(Accordion, [{
key: "setAccordionItems",
value: function setAccordionItems(items) {
this.setState({
items: items
});
}
}, {
key: "closeAllContents",
value: function closeAllContents() {
var items = this.state.items;
return items.map(function (item) {
return _objectSpread(_objectSpread({}, item), {}, {
opened: false
});
});
}
}, {
key: "toggleItemVisibility",
value: function toggleItemVisibility(newItems, indexToChange) {
var items = this.state.items;
var itemsToReturn = newItems;
itemsToReturn[indexToChange].opened = !items[indexToChange].opened;
return itemsToReturn;
}
}, {
key: "renderItem",
value: function renderItem(item, itemIndex) {
var title = item.title,
content = item.content,
opened = item.opened,
onItemClick = item.onItemClick;
var theme = this.props.theme;
var color = theme.colors.neutral[900],
spacing = theme.spacing;
var itemId = "".concat((0, _slugify["default"])(title), "-").concat(itemIndex);
var contentId = "".concat(itemId, "-content");
var headerId = "".concat(itemId, "-header");
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionItem, {
className: "accordion-item",
opened: opened,
color: color,
theme: theme,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(AccordionHeader, {
spacing: spacing,
onClick: function onClick() {
return onItemClick(itemIndex);
},
"aria-controls": contentId,
id: headerId,
theme: theme,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionTitle, {
opened: opened,
theme: theme,
children: title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIcon, {
theme: theme,
name: opened ? 'expand_less' : 'expand_more'
})]
}), content && /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionContent, {
id: contentId,
"aria-labelledby": headerId,
opened: opened,
"aria-hidden": !opened,
theme: theme,
children: content
})]
}, title);
}
}, {
key: "render",
value: function render() {
var theme = this.props.theme;
var items = this.state.items;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
theme: theme,
children: this.handleCustomItem(items)
});
}
}]);
}(_react.Component);
Accordion.defaultProps = {
theme: {
colors: _theme.colors,
spacing: _theme.spacing,
baseFontSize: _theme.baseFontSize
},
keepOnlyOneOpen: false
};
Accordion.propTypes = {
/**
* this prop receives an array of objects to render the content of component.
*
* Ps 1: The content item should receive HTML elements
*
* Ps 2: onClick item receives a callback function its will trigger when the respective item of Accordion is clicked */
items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
title: _propTypes["default"].string,
content: _propTypes["default"].node,
opened: _propTypes["default"].bool,
onClick: _propTypes["default"].func
})).isRequired,
/** Set true to keep only one item open and close the remainings on click */
keepOnlyOneOpen: _propTypes["default"].bool,
/** Theme natively passed by Quantum theme. Don't change this prop */
theme: _propTypes["default"].shape({
colors: _propTypes["default"].object,
spacing: _propTypes["default"].object,
baseFontSize: _propTypes["default"].number
})
};
var _default = exports["default"] = Accordion;