@razorpay/blade
Version:
The Design System that powers Razorpay
148 lines (145 loc) • 6.65 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import styled from 'styled-components';
import { classes } from './tokens.js';
import '../Box/index.js';
import '../Typography/index.js';
import '../Collapsible/index.js';
import '../Box/BaseBox/index.js';
import { useCollapsible } from '../Collapsible/CollapsibleContext.js';
import '../Icons/index.js';
import '../../utils/index.js';
import '../Link/BaseLink/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';
import BaseLink from '../Link/BaseLink/BaseLink.js';
import ChevronUpIcon from '../Icons/ChevronUpIcon/ChevronUpIcon.js';
import ChevronDownIcon from '../Icons/ChevronDownIcon/ChevronDownIcon.js';
import { Box } from '../Box/Box.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { Text } from '../Typography/Text/Text.js';
import { Collapsible } from '../Collapsible/Collapsible.js';
import { CollapsibleBody } from '../Collapsible/CollapsibleBody.js';
var _excluded = ["children", "title", "defaultIsExpanded", "maxVisibleItems", "onExpandChange"];
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; }
var SideNavTitleDivider = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "SideNavSectionweb__SideNavTitleDivider",
componentId: "sc-1nb7ytk-0"
})(function (_ref) {
var theme = _ref.theme;
return {
height: makeBorderSize(theme.border.width.thicker),
width: '100%',
background: "linear-gradient(90deg, ".concat(theme.colors.transparent, " 0%, ").concat(theme.colors.surface.border.gray.muted, " 50%, ").concat(theme.colors.transparent, " 100%)")
};
});
var FullWidthLink = /*#__PURE__*/styled(BaseLink).withConfig({
displayName: "SideNavSectionweb__FullWidthLink",
componentId: "sc-1nb7ytk-1"
})(function () {
return {
width: '100%'
};
});
var ShowMoreLink = function ShowMoreLink(_ref2) {
var collapsedItemsCount = _ref2.collapsedItemsCount;
var _useCollapsible = useCollapsible(),
isExpanded = _useCollapsible.isExpanded,
onExpandChange = _useCollapsible.onExpandChange;
var toggleCollapse = function toggleCollapse() {
return onExpandChange(!isExpanded);
};
var linkProps = {
size: 'small',
color: 'neutral',
variant: 'button',
onClick: toggleCollapse,
marginY: 'spacing.2'
};
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(BaseBox, {
className: classes.SHOW_WHEN_COLLAPSED,
width: "100%",
justifyContent: "center",
children: /*#__PURE__*/jsx(FullWidthLink, _objectSpread(_objectSpread({}, linkProps), {}, {
marginX: "spacing.4",
icon: isExpanded ? ChevronUpIcon : undefined,
iconPosition: "right",
children: isExpanded ? "" : "+".concat(collapsedItemsCount)
}))
}), /*#__PURE__*/jsx(BaseBox, {
className: classes.HIDE_WHEN_COLLAPSED,
width: "100%",
children: /*#__PURE__*/jsx(FullWidthLink, _objectSpread(_objectSpread({}, linkProps), {}, {
marginX: "spacing.4",
icon: isExpanded ? ChevronUpIcon : ChevronDownIcon,
iconPosition: "right",
children: isExpanded ? 'Show Less' : "+".concat(collapsedItemsCount, " More")
}))
})]
});
};
var StyledSectionTitleContainer = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "SideNavSectionweb__StyledSectionTitleContainer",
componentId: "sc-1nb7ytk-2"
})(function (_props) {
return _defineProperty({}, ".".concat(classes.COLLAPSED, ":not(.").concat(classes.TRANSITIONING, ") & p"), {
// We only make it opacity 0 to maintain the height of the title in collapsed state
opacity: 0
});
});
var SideNavSection = function SideNavSection(_ref4) {
var children = _ref4.children,
title = _ref4.title,
defaultIsExpanded = _ref4.defaultIsExpanded,
maxVisibleItems = _ref4.maxVisibleItems,
onExpandChange = _ref4.onExpandChange,
rest = _objectWithoutProperties(_ref4, _excluded);
var totalItemsCount = React__default.Children.count(children);
var collapsedItemsCount = maxVisibleItems ? totalItemsCount - maxVisibleItems : undefined;
return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({
paddingY: "spacing.3"
}, makeAnalyticsAttribute(rest)), {}, {
children: [title ? /*#__PURE__*/jsxs(StyledSectionTitleContainer, {
position: "relative",
padding: ['spacing.2', 'spacing.4'],
children: [/*#__PURE__*/jsx(Text, {
size: "xsmall",
weight: "medium",
truncateAfterLines: 1,
color: "surface.text.gray.muted",
children: title === null || title === void 0 ? void 0 : title.toUpperCase()
}), /*#__PURE__*/jsx(BaseBox, {
className: classes.SHOW_WHEN_COLLAPSED,
position: "absolute",
top: "50%",
margin: "auto",
left: "spacing.0",
right: "spacing.0",
transform: "translateY(-50%)",
children: /*#__PURE__*/jsx(SideNavTitleDivider, {})
})]
}) : null, /*#__PURE__*/jsx(Box, {
children: maxVisibleItems ? children.slice(0, maxVisibleItems) : children
}), maxVisibleItems ? /*#__PURE__*/jsxs(Collapsible, {
direction: "top",
_dangerouslyDisableValidations: true,
_shouldApplyWidthRestrictions: false,
onExpandChange: onExpandChange,
defaultIsExpanded: defaultIsExpanded,
children: [/*#__PURE__*/jsx(ShowMoreLink, {
collapsedItemsCount: collapsedItemsCount
}), /*#__PURE__*/jsx(CollapsibleBody, {
width: "100%",
_hasMargin: false,
children: children.slice(maxVisibleItems)
})]
}) : null]
}));
};
export { SideNavSection };
//# sourceMappingURL=SideNavSection.web.js.map