@razorpay/blade
Version:
The Design System that powers Razorpay
189 lines (182 loc) • 9.47 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { componentIds } from './componentIds.js';
import '../../utils/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/logger/index.js';
import { getComponentId, isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { throwBladeError } from '../../utils/logger/logger.js';
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; }
/**
* Returns if there is ActionListItem after ActionListSection
* and an index of last ActionListSection
*
* It is used to decide if ActionListSection add divider at the end
*/
var getActionListSectionPosition = function getActionListSectionPosition(children) {
// Creating an array of componentIds
var childComponentIdArray = React__default.Children.toArray(children).map(function (child) {
return getComponentId(child);
});
// Reading the last `ActionListSection` component's index
var lastActionListSectionIndex = childComponentIdArray.lastIndexOf(componentIds.ActionListSection);
// Checking if there is any `ActionListItem` present after `ActionListSection`
var isActionListItemPresentAfterSection = childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds.ActionListItem);
return {
isActionListItemPresentAfterSection: isActionListItemPresentAfterSection,
lastActionListSectionIndex: lastActionListSectionIndex
};
};
var actionListAllowedChildren = [componentIds.ActionListItem, componentIds.ActionListSection];
/**
* Loops over action list items and returns different properties from children like option values, header and footer child, etc
*/
var getActionListProperties = function getActionListProperties(children) {
var sectionData = [];
var currentSection = null;
var actionListOptions = [];
var getActionListItemWithId = function getActionListItemWithId(child, hideDivider) {
if ( /*#__PURE__*/React__default.isValidElement(child) && !child.props.isDisabled) {
actionListOptions.push({
title: child.props.title,
value: child.props.value,
onClickTrigger: function onClickTrigger(value) {
var _child$props$onClick, _child$props, _child$props$isSelect;
var anchorLink = child.props.href;
(_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, {
name: child.props.value,
value: (_child$props$isSelect = child.props.isSelected) !== null && _child$props$isSelect !== void 0 ? _child$props$isSelect : value
});
if (anchorLink && !isReactNative()) {
var _child$props$target;
var target = (_child$props$target = child.props.target) !== null && _child$props$target !== void 0 ? _child$props$target : '_self';
window.open(anchorLink, target);
if (window.top) {
window.top.open(anchorLink, target);
}
}
}
});
var currentIndex = actionListOptions.length - 1;
var foundSection = sectionData.find(function (v) {
return v.title === currentSection;
});
// push the item in the appropriate bucket
if (foundSection) {
foundSection === null || foundSection === void 0 ? void 0 : foundSection.data.push(_objectSpread(_objectSpread({}, child.props), {}, {
_index: currentIndex
}));
} else {
// create a new bucket
sectionData.push({
title: currentSection,
hideDivider: hideDivider,
data: [_objectSpread(_objectSpread({}, child.props), {}, {
_index: currentIndex
})]
});
}
var clonedChild = /*#__PURE__*/React__default.cloneElement(child, {
// @ts-expect-error: TS doesn't understand the child's props
_index: currentIndex
});
return clonedChild;
}
return child;
};
var isActionListItemPresentAfterSection;
// eslint-disable-next-line one-var
var lastActionListSectionIndex;
if (isReactNative()) {
// We're reading this so that we can decide whether to show the divider or not.
// If ActionListSection is final item and no ActionListItem is present after that, we hide the divider
// On web, we do it using descendant styling
var _getActionListSection = getActionListSectionPosition(children);
isActionListItemPresentAfterSection = _getActionListSection.isActionListItemPresentAfterSection;
lastActionListSectionIndex = _getActionListSection.lastActionListSectionIndex;
}
// Looping through ActionListItems to add index to them and get an options array for moving focus between items
var childrenWithId = React__default.Children.map(children, function (child, index) {
if ( /*#__PURE__*/React__default.isValidElement(child)) {
if (isValidAllowedChildren(child, componentIds.ActionListSection)) {
var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
var sectionChildValues = [];
return /*#__PURE__*/React__default.cloneElement(child, {
// @ts-expect-error: TS doesn't understand the child's props
children: React__default.Children.map(child.props.children, function (childInSection) {
currentSection = child.props.title;
sectionChildValues.push(childInSection.props.value);
if (isValidAllowedChildren(childInSection, componentIds.ActionListItem)) {
return getActionListItemWithId(childInSection, shouldHideDivider);
}
return childInSection;
}),
// On web, we handle it with descendant styling in css so no need of JS there
_hideDivider: isReactNative() ? shouldHideDivider : undefined,
_sectionChildValues: sectionChildValues
});
}
if (isValidAllowedChildren(child, componentIds.ActionListItem)) {
return getActionListItemWithId(child, true);
}
if (true) {
throwBladeError({
message: "Only ".concat(actionListAllowedChildren.join(', '), " supported inside ActionList"),
moduleName: 'ActionList'
});
}
}
return child;
});
return {
sectionData: sectionData,
childrenWithId: childrenWithId,
actionListOptions: actionListOptions
};
};
var validateActionListItemProps = function validateActionListItemProps(_ref) {
var leading = _ref.leading,
trailing = _ref.trailing,
titleSuffix = _ref.titleSuffix;
if (true) {
React__default.Children.map(trailing, function (child) {
if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText)) {
throwBladeError({
message: "Only ".concat(componentIds.ActionListItemIcon, " and ").concat(componentIds.ActionListItemText, " are allowed in trailing prop"),
moduleName: 'ActionListItem'
});
}
});
React__default.Children.map(titleSuffix, function (child) {
if (!isValidAllowedChildren(child, componentIds.ActionListItemBadge) && !isValidAllowedChildren(child, componentIds.ActionListItemBadgeGroup)) {
throwBladeError({
message: "Only ".concat(componentIds.ActionListItemBadge, " and ").concat(componentIds.ActionListItemBadgeGroup, " are allowed in titleSuffix prop"),
moduleName: 'ActionListItem'
});
}
});
React__default.Children.map(leading, function (child) {
if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText) && !isValidAllowedChildren(child, componentIds.ActionListItemAsset) && !isValidAllowedChildren(child, componentIds.ActionListItemAvatar)) {
throwBladeError({
message: "Only ".concat(componentIds.ActionListItemIcon, ", ").concat(componentIds.ActionListItemAvatar, ", ").concat(componentIds.ActionListItemAsset, ", and ").concat(componentIds.ActionListItemText, " are allowed in leading prop"),
moduleName: 'ActionListItem'
});
}
});
}
};
var getNormalTextColor = function getNormalTextColor(isDisabled) {
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
isMuted = _ref2.isMuted;
if (isDisabled) {
return 'interactive.text.gray.disabled';
}
if (isMuted) {
return 'interactive.text.gray.muted';
}
return 'interactive.text.gray.normal';
};
export { getActionListProperties, getNormalTextColor, validateActionListItemProps };
//# sourceMappingURL=actionListUtils.js.map