@razorpay/blade
Version:
The Design System that powers Razorpay
165 lines (161 loc) • 8.03 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { useStepGroup, StepGroupContext } from './StepGroupContext.js';
import { componentIds } from './componentIds.js';
import '../Box/BaseBox/index.js';
import '../Box/styledProps/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { componentIds as componentIds$1 } from '../Collapsible/componentIds.js';
import '../../utils/logger/index.js';
import { jsx } from 'react/jsx-runtime';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["_nestingLevel", "children"],
_excluded2 = ["size", "orientation", "children", "testID", "_nestingLevel", "width", "minWidth", "maxWidth"];
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 useChildrenWithIndexes = function useChildrenWithIndexes(_ref) {
var _nestingLevel = _ref._nestingLevel,
children = _ref.children,
parentStepGroupProps = _objectWithoutProperties(_ref, _excluded);
var _useStepGroup = useStepGroup(),
totalItemsFromPreviousParent = _useStepGroup.totalItemsInParentGroupCount;
var totalIndex = 0;
var traverseGroupAndAddIndex = function traverseGroupAndAddIndex(groupChildrenProp) {
var nestingLevelOfGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var stepItemIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
return React__default.Children.map(groupChildrenProp, function (child, index) {
var componentId = getComponentId(child);
if (componentId === componentIds.StepItem) {
return /*#__PURE__*/React__default.cloneElement(child, {
_index: stepItemIndex++,
_totalIndex: totalIndex++,
_nestingLevel: nestingLevelOfGroup,
key: index
});
}
if (componentId === componentIds$1.Collapsible) {
if (parentStepGroupProps.orientation !== 'vertical' && false) {
throwBladeError({
message: 'Collapsible is not supported in horizontal orientation',
moduleName: 'StepGroup'
});
}
return /*#__PURE__*/React__default.cloneElement(child, {
children: React__default.Children.map(child.props.children, function (nestedChild) {
if ( /*#__PURE__*/React__default.isValidElement(nestedChild) && getComponentId(nestedChild) === componentIds$1.CollapsibleBody) {
return /*#__PURE__*/React__default.cloneElement(nestedChild, {
children: traverseGroupAndAddIndex(nestedChild.props.children, nestingLevelOfGroup, stepItemIndex),
key: totalIndex
});
}
return nestedChild;
})
});
}
if (componentId === componentIds.StepGroup && nestingLevelOfGroup < 3) {
return /*#__PURE__*/React__default.cloneElement(child, _objectSpread(_objectSpread({}, parentStepGroupProps), {}, {
children: traverseGroupAndAddIndex(child.props.children, nestingLevelOfGroup + 1),
_nestingLevel: nestingLevelOfGroup + 1
}));
}
return child;
});
};
var childrenWithIndex = React__default.useMemo(function () {
return _nestingLevel === 0 ? traverseGroupAndAddIndex(children) : children;
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[children, _nestingLevel]);
var totalItemsInParentGroupCount = _nestingLevel === 0 ? totalIndex : totalItemsFromPreviousParent;
return {
childrenWithIndex: childrenWithIndex,
totalItemsInParentGroupCount: totalItemsInParentGroupCount
};
};
var _StepGroup = function _StepGroup(_ref2, ref) {
var _ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 'medium' : _ref2$size,
_ref2$orientation = _ref2.orientation,
orientation = _ref2$orientation === void 0 ? 'vertical' : _ref2$orientation,
children = _ref2.children,
testID = _ref2.testID,
_ref2$_nestingLevel = _ref2._nestingLevel,
_nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
width = _ref2.width,
minWidth = _ref2.minWidth,
maxWidth = _ref2.maxWidth,
rest = _objectWithoutProperties(_ref2, _excluded2);
var itemsInGroupCount = React__default.Children.count(children);
var _useChildrenWithIndex = useChildrenWithIndexes({
children: children,
size: size,
orientation: orientation,
_nestingLevel: _nestingLevel
}),
childrenWithIndex = _useChildrenWithIndex.childrenWithIndex,
totalItemsInParentGroupCount = _useChildrenWithIndex.totalItemsInParentGroupCount;
var contextValue = React__default.useMemo(function () {
return {
size: size,
orientation: orientation,
itemsInGroupCount: itemsInGroupCount,
totalItemsInParentGroupCount: totalItemsInParentGroupCount
};
}, [size, orientation, itemsInGroupCount, totalItemsInParentGroupCount]);
var isHorizontal = orientation === 'horizontal';
var defaultWidth = isHorizontal ? '100%' : undefined;
return /*#__PURE__*/jsx(StepGroupContext.Provider, {
value: contextValue,
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref
}, getStyledProps(rest)), {}, {
display: "inline-flex",
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '100%',
minWidth: minWidth,
width: width !== null && width !== void 0 ? width : defaultWidth,
paddingY: _nestingLevel === 0 ? 'spacing.4' : undefined,
overflowX: isHorizontal ? 'auto' : undefined,
flexDirection: isHorizontal ? 'row' : 'column'
}, metaAttribute({
name: MetaConstants.StepGroup,
testID: testID
})), makeAnalyticsAttribute(rest)), {}, {
children: childrenWithIndex
}))
});
};
/**
* ## StepGroup
*
* Step Group visualises sequential processes with a consistent structure. It can be interactive, guiding users through steps, or function as a timeline for reference.
*
* ### Usage
*
* ```jsx
* <StepGroup orientation="vertical" size="medium">
* <StepItem title="Personal Details" />
* <StepItem title="Business Details" />
* </StepGroup>
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
*/
var StepGroup = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_StepGroup), {
componentId: componentIds.StepGroup,
displayName: componentIds.StepGroup
});
export { StepGroup };
//# sourceMappingURL=StepGroup.web.js.map