@razorpay/blade
Version:
The Design System that powers Razorpay
173 lines (169 loc) • 7.98 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import styled from 'styled-components';
import React__default from 'react';
import { useListContext } from './ListContext.js';
import { UnorderedItemIcon } from './ListItemIcons.js';
import { ListItemElement } from './ListItemElement.web.js';
import { listItemMarginLeft, listItemMarginBottom, listItemBulletMarginRight, listItemBulletMarginTop, listItemOrderedBulletBoxSize } from './listTokens.js';
import { getOrderedListItemBullet } from './getOrderedListItemBullet.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../Typography/index.js';
import '../BladeProvider/index.js';
import '../Box/BaseBox/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/getPlatformType/index.js';
import '../../utils/logger/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Text } from '../Typography/Text/Text.js';
import useTheme from '../BladeProvider/useTheme.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { getComponentId, isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.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; }
var StyledListItem = /*#__PURE__*/styled(ListItemElement).withConfig({
displayName: "ListItem__StyledListItem",
componentId: "sc-6bxu4b-0"
})(function (_ref) {
var level = _ref.level,
theme = _ref.theme,
variant = _ref.variant,
hasIcon = _ref.hasIcon;
return {
marginLeft: level ? getIn(theme, listItemMarginLeft["".concat(variant).concat(variant === 'unordered' && hasIcon ? 'WithIcon' : '')][level]) : 0
};
});
var ListItemContentChildren = function ListItemContentChildren(_ref2) {
var children = _ref2.children,
size = _ref2.size;
/* Having a <View><Text>...</Text><View/> inside <Text /> breaks vertical alignment. Issue: https://github.com/facebook/react-native/issues/31955
As a workaround, we wrap individual strings in their own <Text /> and handle alignment with a parent <View> (BaseBox).
*/
return getPlatformType() === 'react-native' ? /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
children: children.map(function (child, index) {
if (typeof child === 'string') {
return /*#__PURE__*/jsx(Text, {
variant: "body",
size: size,
children: child
}, index);
}
return child;
})
}) : /*#__PURE__*/jsx(Text, {
variant: "body",
size: size,
children: children
});
};
var _ListItem = function _ListItem(_ref3) {
var _ref4;
var children = _ref3.children,
Icon = _ref3.icon,
listItemIconColor = _ref3.iconColor,
_itemNumber = _ref3._itemNumber,
testID = _ref3.testID;
var _useListContext = useListContext(),
level = _useListContext.level,
size = _useListContext.size,
ListContextIcon = _useListContext.icon,
variant = _useListContext.variant,
iconColor = _useListContext.iconColor;
var _useTheme = useTheme(),
theme = _useTheme.theme,
platform = _useTheme.platform;
var ItemIcon = Icon !== null && Icon !== void 0 ? Icon : ListContextIcon;
var iconColorToken = (_ref4 = listItemIconColor !== null && listItemIconColor !== void 0 ? listItemIconColor : iconColor) !== null && _ref4 !== void 0 ? _ref4 : 'surface.icon.gray.muted';
if (true) {
if (level && level > 3) {
throwBladeError({
message: 'List Nesting is allowed only upto 3 levels.',
moduleName: 'List'
});
}
}
var childrenArray = React__default.Children.toArray(children);
// Get children that are not a List component and are valid allowed children
var validChildItem = childrenArray.filter(function (child) {
if (getComponentId(child) === MetaConstants.List) return null;
if (typeof child === 'string' || isValidAllowedChildren(child, MetaConstants.ListItemLink) || isValidAllowedChildren(child, MetaConstants.ListItemText) || isValidAllowedChildren(child, MetaConstants.ListItemCode)) {
return child;
} else if (true) {
throwBladeError({
message: "You can only pass a List, ListItemLink, ListItemCode, ListItemText or a string as a child to ListItem.",
moduleName: 'ListItem'
});
}
return null;
});
// Get child that is a List component
var childList = childrenArray.filter(function (child) {
return getComponentId(child) === MetaConstants.List ? child : null;
});
var hasIcon = Boolean(ItemIcon);
return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
level: level,
variant: variant,
hasIcon: hasIcon
}, metaAttribute({
name: MetaConstants.ListItem,
testID: testID
})), {}, {
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
marginBottom: listItemMarginBottom,
children: [variant === 'unordered' ? /*#__PURE__*/jsx(BaseBox, {
marginRight: listItemBulletMarginRight[variant],
marginTop: listItemBulletMarginTop["".concat(variant).concat(hasIcon ? 'WithIcon' : '')][platform][size],
display: "flex",
alignSelf: "flex-start",
children: ItemIcon ? /*#__PURE__*/jsx(ItemIcon, {
size: size,
color: iconColorToken
}) : /*#__PURE__*/jsx(UnorderedItemIcon, {
level: level
})
}) : /*#__PURE__*/jsx(BaseBox, {
width: listItemOrderedBulletBoxSize[variant][platform][size],
height: listItemOrderedBulletBoxSize[variant][platform][size],
marginRight: listItemBulletMarginRight[variant],
marginTop: listItemBulletMarginTop[variant][platform][size],
display: "flex",
flexShrink: 0,
justifyContent: "center",
alignSelf: "flex-start",
alignItems: "center",
borderRadius: variant === 'ordered-filled' ? 'max' : undefined,
backgroundColor: variant === 'ordered-filled' ? getIn(theme.colors, 'feedback.background.neutral.subtle') : undefined,
children: /*#__PURE__*/jsx(Text, {
variant: "body",
color: "surface.text.gray.muted",
size: variant === 'ordered' ? size : 'xsmall',
children: "".concat(getOrderedListItemBullet({
itemNumber: _itemNumber !== null && _itemNumber !== void 0 ? _itemNumber : 1,
level: level !== null && level !== void 0 ? level : 1
})).concat(variant === 'ordered' ? '.' : '')
})
}), /*#__PURE__*/jsx(ListItemContentChildren, {
size: size,
children: validChildItem
})]
}), childList]
}));
};
var ListItem = /*#__PURE__*/assignWithoutSideEffects(_ListItem, {
componentId: MetaConstants.ListItem
});
export { ListItem };
//# sourceMappingURL=ListItem.js.map