@razorpay/blade
Version:
The Design System that powers Razorpay
32 lines (29 loc) • 5.31 kB
JavaScript
import styled from 'styled-components/native';
import React__default from 'react';
import { useListContext } from './ListContext.js';
import { UnorderedItemIcon } from './ListItemIcons.js';
import { ListItemElement } from './ListItemElement.native.js';
import { listItemMarginLeft, listItemMarginBottom, listItemBulletMarginRight, listItemBulletMarginTop, listItemOrderedBulletBoxSize } from './listTokens.js';
import { getOrderedListItemBullet } from './getOrderedListItemBullet.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../Typography/Heading/Heading.js';
import { Text } from '../Typography/Text/Text.js';
import '../Typography/Code/Code.js';
import '../Typography/Display/Display.js';
import '@gorhom/portal';
import 'react-native-gesture-handler';
import useTheme from '../BladeProvider/useTheme.js';
import 'react-native';
import { getPlatformType } from '../../utils/getPlatformType/getPlatformType.js';
import '@babel/runtime/helpers/slicedToArray';
import { throwBladeError } from '../../utils/logger/logger.js';
import '../BottomSheet/BottomSheetStack.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getComponentId, isValidAllowedChildren } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
var StyledListItem=styled(ListItemElement)(function(_ref){var level=_ref.level,theme=_ref.theme,variant=_ref.variant,hasIcon=_ref.hasIcon;return {marginLeft:level?getIn(theme,listItemMarginLeft[`${variant}${variant==='unordered'&&hasIcon?'WithIcon':''}`][level]):0};});var ListItemContentChildren=function ListItemContentChildren(_ref2){var children=_ref2.children,size=_ref2.size;return getPlatformType()==='react-native'?jsx(BaseBox,{display:"flex",flexDirection:"row",flexWrap:"wrap",children:children.map(function(child,index){if(typeof child==='string'){return jsx(Text,{variant:"body",size:size,children:child},index);}return child;})}):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:ListContextIcon;var iconColorToken=(_ref4=listItemIconColor!=null?listItemIconColor:iconColor)!=null?_ref4:'surface.icon.gray.muted';if(__DEV__){if(level&&level>3){throwBladeError({message:'List Nesting is allowed only upto 3 levels.',moduleName:'List'});}}var childrenArray=React__default.Children.toArray(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(__DEV__){throwBladeError({message:`You can only pass a List, ListItemLink, ListItemCode, ListItemText or a string as a child to ListItem.`,moduleName:'ListItem'});}return null;});var childList=childrenArray.filter(function(child){return getComponentId(child)===MetaConstants.List?child:null;});var hasIcon=Boolean(ItemIcon);return jsxs(StyledListItem,Object.assign({level:level,variant:variant,hasIcon:hasIcon},metaAttribute({name:MetaConstants.ListItem,testID:testID}),{children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",marginBottom:listItemMarginBottom,children:[variant==='unordered'?jsx(BaseBox,{marginRight:listItemBulletMarginRight[variant],marginTop:listItemBulletMarginTop[`${variant}${hasIcon?'WithIcon':''}`][platform][size],display:"flex",alignSelf:"flex-start",children:ItemIcon?jsx(ItemIcon,{size:size,color:iconColorToken}):jsx(UnorderedItemIcon,{level:level})}):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:jsx(Text,{variant:"body",color:"surface.text.gray.muted",size:variant==='ordered'?size:'xsmall',children:`${getOrderedListItemBullet({itemNumber:_itemNumber!=null?_itemNumber:1,level:level!=null?level:1})}${variant==='ordered'?'.':''}`})}),jsx(ListItemContentChildren,{size:size,children:validChildItem})]}),childList]}));};var ListItem=assignWithoutSideEffects(_ListItem,{componentId:MetaConstants.ListItem});
export { ListItem };
//# sourceMappingURL=ListItem.js.map