@os-design-mobile/menu 1.0.47 → 1.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Menu.js.map +1 -1
- package/dist/MenuDivider.js.map +1 -1
- package/dist/MenuGroup.js.map +1 -1
- package/dist/MenuItem.js.map +1 -1
- package/package.json +7 -7
package/dist/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["StyledModal","Modal","paddingLeft","paddingRight","Menu","ref","closeOnSelect","onClose","children","rest","theme","childrenCount","React","Children","count","menuContext","map","child","index","isValidElement","type","MenuGroup","style","paddingBottom","fontSize","borderBottomWidth","borderBottomColor","menuGroupColorDivider","marginTop","modalBodyPaddingVertical","cloneElement","displayName"],"sources":["../src/Menu.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useMemo } from 'react';\nimport { View } from 'react-native';\nimport Modal, { ModalProps } from '@os-design-mobile/modal';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport styled from '@emotion/native';\nimport { clr, useTheme } from '@os-design-mobile/theming';\nimport MenuGroup from './MenuGroup';\n\nexport interface MenuProps extends PropsWithChildren<ModalProps> {\n /**\n * Whether the menu closes when the user selects a menu item.\n * @default true\n */\n closeOnSelect?: boolean;\n}\n\nconst StyledModal = styled(Modal)({\n paddingLeft: 0,\n paddingRight: 0,\n});\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<View, MenuProps>(\n ({ closeOnSelect = true, onClose = () => {}, children, ...rest }, ref) => {\n const { theme } = useTheme();\n const childrenCount = useMemo(\n () => React.Children.count(children),\n [children]\n );\n const menuContext = useMemo(\n () => ({ closeOnSelect, onClose }),\n [closeOnSelect, onClose]\n );\n\n return (\n <MenuContext.Provider value={menuContext}>\n <StyledModal footer={null} onClose={onClose} {...rest} ref={ref}>\n <SafeAreaProvider>\n {React.Children.map(children, (child, index) => {\n if (!React.isValidElement(child) || child.type !== MenuGroup)\n return child;\n let style = {};\n if (index < childrenCount - 1) {\n style = {\n paddingBottom: 0.4 * theme.fontSize,\n borderBottomWidth: 1,\n borderBottomColor: clr(theme.menuGroupColorDivider),\n };\n }\n if (index > 0) {\n style = {\n marginTop: theme.modalBodyPaddingVertical * theme.fontSize,\n };\n }\n return React.cloneElement(child, { style });\n })}\n </SafeAreaProvider>\n </StyledModal>\n </MenuContext.Provider>\n );\n }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"mWAAA,qDAEA,sEACA,gDACA,0EACA,+DACA,kDACA,8D,+iCAUA,GAAMA,
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["StyledModal","styled","Modal","paddingLeft","paddingRight","Menu","forwardRef","ref","closeOnSelect","onClose","children","rest","useTheme","theme","childrenCount","useMemo","React","Children","count","menuContext","map","child","index","isValidElement","type","MenuGroup","style","paddingBottom","fontSize","borderBottomWidth","borderBottomColor","clr","menuGroupColorDivider","marginTop","modalBodyPaddingVertical","cloneElement","displayName"],"sources":["../src/Menu.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useMemo } from 'react';\nimport { View } from 'react-native';\nimport Modal, { ModalProps } from '@os-design-mobile/modal';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport styled from '@emotion/native';\nimport { clr, useTheme } from '@os-design-mobile/theming';\nimport MenuGroup from './MenuGroup';\n\nexport interface MenuProps extends PropsWithChildren<ModalProps> {\n /**\n * Whether the menu closes when the user selects a menu item.\n * @default true\n */\n closeOnSelect?: boolean;\n}\n\nconst StyledModal = styled(Modal)({\n paddingLeft: 0,\n paddingRight: 0,\n});\n\n/**\n * The dropdown menu.\n */\nconst Menu = forwardRef<View, MenuProps>(\n ({ closeOnSelect = true, onClose = () => {}, children, ...rest }, ref) => {\n const { theme } = useTheme();\n const childrenCount = useMemo(\n () => React.Children.count(children),\n [children]\n );\n const menuContext = useMemo(\n () => ({ closeOnSelect, onClose }),\n [closeOnSelect, onClose]\n );\n\n return (\n <MenuContext.Provider value={menuContext}>\n <StyledModal footer={null} onClose={onClose} {...rest} ref={ref}>\n <SafeAreaProvider>\n {React.Children.map(children, (child, index) => {\n if (!React.isValidElement(child) || child.type !== MenuGroup)\n return child;\n let style = {};\n if (index < childrenCount - 1) {\n style = {\n paddingBottom: 0.4 * theme.fontSize,\n borderBottomWidth: 1,\n borderBottomColor: clr(theme.menuGroupColorDivider),\n };\n }\n if (index > 0) {\n style = {\n marginTop: theme.modalBodyPaddingVertical * theme.fontSize,\n };\n }\n return React.cloneElement(child, { style });\n })}\n </SafeAreaProvider>\n </StyledModal>\n </MenuContext.Provider>\n );\n }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"mWAAA,qDAEA,sEACA,gDACA,0EACA,+DACA,kDACA,8D,+iCAUA,GAAMA,YAAW,CAAG,GAAAC,eAAA,EAAOC,cAAP,EAAc,CAChCC,WAAW,CAAE,CADmB,CAEhCC,YAAY,CAAE,CAFkB,CAAd,CAApB,CAQA,GAAMC,KAAI,CAAG,GAAAC,iBAAA,EACX,cAAkEC,GAAlE,CAA0E,6BAAvEC,aAAuE,CAAvEA,aAAuE,6BAAvD,IAAuD,sCAAjDC,OAAiD,CAAjDA,OAAiD,uBAAvC,UAAM,CAAE,CAA+B,cAA7BC,QAA6B,MAA7BA,QAA6B,CAAhBC,IAAgB,uDACxE,cAAkB,GAAAC,iBAAA,GAAlB,CAAQC,KAAR,WAAQA,KAAR,CACA,GAAMC,cAAa,CAAG,GAAAC,cAAA,EACpB,iBAAMC,eAAA,CAAMC,QAAN,CAAeC,KAAf,CAAqBR,QAArB,CAAN,EADoB,CAEpB,CAACA,QAAD,CAFoB,CAAtB,CAIA,GAAMS,YAAW,CAAG,GAAAJ,cAAA,EAClB,iBAAO,CAAEP,aAAa,CAAbA,aAAF,CAAiBC,OAAO,CAAPA,OAAjB,CAAP,EADkB,CAElB,CAACD,aAAD,CAAgBC,OAAhB,CAFkB,CAApB,CAKA,MACE,8BAAC,sBAAD,CAAa,QAAb,EAAsB,KAAK,CAAEU,WAA7B,EACE,6BAAC,WAAD,wBAAa,MAAM,CAAE,IAArB,CAA2B,OAAO,CAAEV,OAApC,EAAiDE,IAAjD,EAAuD,GAAG,CAAEJ,GAA5D,GACE,6BAAC,4CAAD,MACGS,cAAA,CAAMC,QAAN,CAAeG,GAAf,CAAmBV,QAAnB,CAA6B,SAACW,KAAD,CAAQC,KAAR,CAAkB,CAC9C,GAAI,CAACN,cAAA,CAAMO,cAAN,CAAqBF,KAArB,CAAD,EAAgCA,KAAK,CAACG,IAAN,GAAeC,kBAAnD,CACE,MAAOJ,MAAP,CACF,GAAIK,MAAK,CAAG,EAAZ,CACA,GAAIJ,KAAK,CAAGR,aAAa,CAAG,CAA5B,CAA+B,CAC7BY,KAAK,CAAG,CACNC,aAAa,CAAE,IAAMd,KAAK,CAACe,QADrB,CAENC,iBAAiB,CAAE,CAFb,CAGNC,iBAAiB,CAAE,GAAAC,YAAA,EAAIlB,KAAK,CAACmB,qBAAV,CAHb,CAAR,CAKD,CACD,GAAIV,KAAK,CAAG,CAAZ,CAAe,CACbI,KAAK,CAAG,CACNO,SAAS,CAAEpB,KAAK,CAACqB,wBAAN,CAAiCrB,KAAK,CAACe,QAD5C,CAAR,CAGD,CACD,MAAOZ,eAAA,CAAMmB,YAAN,CAAmBd,KAAnB,CAA0B,CAAEK,KAAK,CAALA,KAAF,CAA1B,CAAP,CACD,CAjBA,CADH,CADF,CADF,CADF,CA0BD,CAtCU,CAAb,CAyCArB,IAAI,CAAC+B,WAAL,CAAmB,MAAnB,C,aAEe/B,I"}
|
package/dist/MenuDivider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuDivider.js","names":["StyledView","styled","View","p","paddingTop","theme","menuDividerIndent","fontSize","borderBottomWidth","borderBottomColor","menuDividerColor","marginBottom","MenuDivider","props","ref","displayName"],"sources":["../src/MenuDivider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport styled from '@emotion/native';\nimport { clr } from '@os-design-mobile/theming';\n\nexport type MenuDividerProps = ViewProps;\n\nconst StyledView = styled.View((p) => ({\n paddingTop: p.theme.menuDividerIndent * p.theme.fontSize,\n borderBottomWidth: 1,\n borderBottomColor: clr(p.theme.menuDividerColor),\n marginBottom: p.theme.menuDividerIndent * p.theme.fontSize,\n}));\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<View, MenuDividerProps>((props, ref) => (\n <StyledView {...props} ref={ref} />\n));\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":"mPAAA,qDAEA,+DACA,kD,0/BAIA,GAAMA,
|
|
1
|
+
{"version":3,"file":"MenuDivider.js","names":["StyledView","styled","View","p","paddingTop","theme","menuDividerIndent","fontSize","borderBottomWidth","borderBottomColor","clr","menuDividerColor","marginBottom","MenuDivider","forwardRef","props","ref","displayName"],"sources":["../src/MenuDivider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport styled from '@emotion/native';\nimport { clr } from '@os-design-mobile/theming';\n\nexport type MenuDividerProps = ViewProps;\n\nconst StyledView = styled.View((p) => ({\n paddingTop: p.theme.menuDividerIndent * p.theme.fontSize,\n borderBottomWidth: 1,\n borderBottomColor: clr(p.theme.menuDividerColor),\n marginBottom: p.theme.menuDividerIndent * p.theme.fontSize,\n}));\n\n/**\n * The divider of menu items.\n */\nconst MenuDivider = forwardRef<View, MenuDividerProps>((props, ref) => (\n <StyledView {...props} ref={ref} />\n));\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport default MenuDivider;\n"],"mappings":"mPAAA,qDAEA,+DACA,kD,0/BAIA,GAAMA,WAAU,CAAGC,eAAA,CAAOC,IAAP,CAAY,SAACC,CAAD,QAAQ,CACrCC,UAAU,CAAED,CAAC,CAACE,KAAF,CAAQC,iBAAR,CAA4BH,CAAC,CAACE,KAAF,CAAQE,QADX,CAErCC,iBAAiB,CAAE,CAFkB,CAGrCC,iBAAiB,CAAE,GAAAC,YAAA,EAAIP,CAAC,CAACE,KAAF,CAAQM,gBAAZ,CAHkB,CAIrCC,YAAY,CAAET,CAAC,CAACE,KAAF,CAAQC,iBAAR,CAA4BH,CAAC,CAACE,KAAF,CAAQE,QAJb,CAAR,EAAZ,CAAnB,CAUA,GAAMM,YAAW,CAAG,GAAAC,iBAAA,EAAmC,SAACC,KAAD,CAAQC,GAAR,QACrD,8BAAC,UAAD,0BAAgBD,KAAhB,EAAuB,GAAG,CAAEC,GAA5B,GADqD,EAAnC,CAApB,CAIAH,WAAW,CAACI,WAAZ,CAA0B,aAA1B,C,aAEeJ,W"}
|
package/dist/MenuGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuGroup.js","names":["Title","styled","Text","p","fontWeight","fontSize","theme","sizes","small","color","menuGroupColorTitle","marginBottom","paddingHorizontal","modalBodyPaddingHorizontal","MenuGroup","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","forwardedValue","setForwardedValue","safeAreaInsets","onSelect","menuItems","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnPress","onPress","cloneElement","key","selected","includes","e","left","paddingLeft","right","paddingRight","displayName"],"sources":["../src/MenuGroup.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useMemo } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport styled from '@emotion/native';\nimport { clr } from '@os-design-mobile/theming';\nimport useForwardedState from '@os-design/use-forwarded-state';\nimport { useSelectHandler } from '@os-design/menu-utils';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport MenuItem from './MenuItem';\n\nexport interface MenuGroupProps extends PropsWithChildren<ViewProps> {\n /**\n * The title of the menu group.\n * @default undefined\n */\n title?: string;\n /**\n * The max number of menu items that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * Selected menu items.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.Text((p) => ({\n fontWeight: '500',\n fontSize: p.theme.sizes.small * p.theme.fontSize,\n color: clr(p.theme.menuGroupColorTitle),\n marginBottom: 0.4 * p.theme.fontSize,\n paddingHorizontal: p.theme.modalBodyPaddingHorizontal * p.theme.fontSize,\n}));\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<View, MenuGroupProps>(\n (\n {\n title,\n maxSelectedItems = 1,\n value,\n defaultValue,\n onChange = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n const safeAreaInsets = useSafeAreaInsets();\n\n const onSelect = useSelectHandler({\n value: forwardedValue || [],\n onChange: setForwardedValue,\n maxSelectedItems,\n });\n\n const menuItems = useMemo(() => {\n const selectedItems = forwardedValue || [];\n return React.Children.map(children, (child) => {\n if (!React.isValidElement(child) || child.type !== MenuItem)\n return child;\n const { value: childValue, onPress: childOnPress } = child.props;\n return React.cloneElement(child, {\n key: childValue,\n selected: selectedItems.includes(childValue),\n onPress: (e) => {\n if (!childValue) return;\n onSelect(childValue);\n if (childOnPress) childOnPress(e);\n },\n });\n });\n }, [children, forwardedValue, onSelect]);\n\n return (\n <View {...rest} ref={ref}>\n {title && (\n <Title\n numberOfLines={1}\n style={{\n ...(safeAreaInsets.left > 0\n ? { paddingLeft: safeAreaInsets.left }\n : {}),\n ...(safeAreaInsets.right > 0\n ? { paddingRight: safeAreaInsets.right }\n : {}),\n }}\n >\n {title}\n </Title>\n )}\n {menuItems}\n </View>\n );\n }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"+bAAA,qDACA,yCACA,+DACA,kDACA,0FACA,gDACA,0EACA,4D,klCA8BA,GAAMA,
|
|
1
|
+
{"version":3,"file":"MenuGroup.js","names":["Title","styled","Text","p","fontWeight","fontSize","theme","sizes","small","color","clr","menuGroupColorTitle","marginBottom","paddingHorizontal","modalBodyPaddingHorizontal","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useForwardedState","forwardedValue","setForwardedValue","safeAreaInsets","useSafeAreaInsets","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnPress","onPress","cloneElement","key","selected","includes","e","left","paddingLeft","right","paddingRight","displayName"],"sources":["../src/MenuGroup.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useMemo } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport styled from '@emotion/native';\nimport { clr } from '@os-design-mobile/theming';\nimport useForwardedState from '@os-design/use-forwarded-state';\nimport { useSelectHandler } from '@os-design/menu-utils';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport MenuItem from './MenuItem';\n\nexport interface MenuGroupProps extends PropsWithChildren<ViewProps> {\n /**\n * The title of the menu group.\n * @default undefined\n */\n title?: string;\n /**\n * The max number of menu items that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * Selected menu items.\n * @default undefined\n */\n value?: string[];\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string[];\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.Text((p) => ({\n fontWeight: '500',\n fontSize: p.theme.sizes.small * p.theme.fontSize,\n color: clr(p.theme.menuGroupColorTitle),\n marginBottom: 0.4 * p.theme.fontSize,\n paddingHorizontal: p.theme.modalBodyPaddingHorizontal * p.theme.fontSize,\n}));\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<View, MenuGroupProps>(\n (\n {\n title,\n maxSelectedItems = 1,\n value,\n defaultValue,\n onChange = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n const safeAreaInsets = useSafeAreaInsets();\n\n const onSelect = useSelectHandler({\n value: forwardedValue || [],\n onChange: setForwardedValue,\n maxSelectedItems,\n });\n\n const menuItems = useMemo(() => {\n const selectedItems = forwardedValue || [];\n return React.Children.map(children, (child) => {\n if (!React.isValidElement(child) || child.type !== MenuItem)\n return child;\n const { value: childValue, onPress: childOnPress } = child.props;\n return React.cloneElement(child, {\n key: childValue,\n selected: selectedItems.includes(childValue),\n onPress: (e) => {\n if (!childValue) return;\n onSelect(childValue);\n if (childOnPress) childOnPress(e);\n },\n });\n });\n }, [children, forwardedValue, onSelect]);\n\n return (\n <View {...rest} ref={ref}>\n {title && (\n <Title\n numberOfLines={1}\n style={{\n ...(safeAreaInsets.left > 0\n ? { paddingLeft: safeAreaInsets.left }\n : {}),\n ...(safeAreaInsets.right > 0\n ? { paddingRight: safeAreaInsets.right }\n : {}),\n }}\n >\n {title}\n </Title>\n )}\n {menuItems}\n </View>\n );\n }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
|
package/dist/MenuItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","names":["selectedStyles","p","selected","backgroundColor","theme","menuItemSelectedColorBg","StyledButton","Button","MenuItem","ref","value","right","viewProps","textProps","onPress","rest","MenuContext","closeOnSelect","onClose","onPressRef","safeAreaInsets","current","clickHandler","e","t","buttonGhostColorText","colorText","borderRadius","buttonHeight","menuItemHeight","buttonPaddingHorizontal","menuItemPaddingHorizontal","menuItemSelectedColorIcon","style","left","paddingLeft","paddingRight","flex","textAlign","fontWeight","displayName"],"sources":["../src/MenuItem.tsx"],"sourcesContent":["import React, {\n forwardRef,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport { clr, ThemeOverrider, useTheme } from '@os-design-mobile/theming';\nimport { Check } from '@os-design-mobile/icons';\nimport Button, { ButtonProps } from '@os-design-mobile/button';\nimport { RectButton } from 'react-native-gesture-handler';\nimport styled from '@emotion/native';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nexport interface MenuItemProps\n extends PropsWithChildren<Omit<ButtonProps, 'type' | 'size'>> {\n /**\n * Whether the menu item is selected.\n * @default false\n */\n selected?: boolean;\n /**\n * The value of the menu item.\n * @default undefined\n */\n value?: string;\n}\n\nconst selectedStyles = (p) =>\n p.selected\n ? {\n backgroundColor: clr(p.theme.menuItemSelectedColorBg),\n }\n : {};\n\ntype StyledButtonProps = Required<Pick<MenuItemProps, 'selected'>>;\nconst StyledButton = styled(Button)<StyledButtonProps>(selectedStyles);\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<RectButton, MenuItemProps>(\n (\n {\n selected = false,\n value,\n right,\n viewProps = {},\n textProps = {},\n onPress = () => {},\n ...rest\n },\n ref\n ) => {\n const { closeOnSelect, onClose } = useContext(MenuContext);\n const onPressRef = useRef<MenuItemProps['onPress']>();\n const { theme } = useTheme();\n const safeAreaInsets = useSafeAreaInsets();\n\n useEffect(() => {\n onPressRef.current = onPress;\n }, [onPress]);\n\n const clickHandler = useCallback(\n (e) => {\n if (onPressRef.current) onPressRef.current(e);\n if (closeOnSelect) onClose();\n },\n [closeOnSelect, onClose]\n );\n\n return (\n <ThemeOverrider\n overrides={(t) => ({\n buttonGhostColorText: t.colorText,\n borderRadius: 0,\n buttonHeight: theme.menuItemHeight,\n buttonPaddingHorizontal: theme.menuItemPaddingHorizontal,\n })}\n >\n <StyledButton\n selected={selected}\n right={\n selected ? (\n <ThemeOverrider\n overrides={(t) => ({ colorText: t.menuItemSelectedColorIcon })}\n >\n <Check />\n </ThemeOverrider>\n ) : (\n right\n )\n }\n type='ghost'\n onPress={clickHandler}\n viewProps={{\n ...viewProps,\n style: {\n ...(safeAreaInsets.left > 0\n ? { paddingLeft: safeAreaInsets.left }\n : {}),\n ...(safeAreaInsets.right > 0\n ? { paddingRight: safeAreaInsets.right }\n : {}),\n ...(typeof viewProps?.style === 'object' ? viewProps.style : {}),\n },\n }}\n textProps={{\n ...textProps,\n style: {\n flex: 1,\n textAlign: 'left',\n fontWeight: 'normal',\n ...(typeof textProps?.style === 'object' ? textProps.style : {}),\n },\n }}\n {...rest}\n ref={ref}\n />\n </ThemeOverrider>\n );\n }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":"mWAAA,qDAQA,kDACA,8CACA,wEAEA,+DACA,gDACA,0E,ukCAgBA,GAAMA,
|
|
1
|
+
{"version":3,"file":"MenuItem.js","names":["selectedStyles","p","selected","backgroundColor","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","MenuItem","forwardRef","ref","value","right","viewProps","textProps","onPress","rest","useContext","MenuContext","closeOnSelect","onClose","onPressRef","useRef","useTheme","safeAreaInsets","useSafeAreaInsets","useEffect","current","clickHandler","useCallback","e","t","buttonGhostColorText","colorText","borderRadius","buttonHeight","menuItemHeight","buttonPaddingHorizontal","menuItemPaddingHorizontal","menuItemSelectedColorIcon","style","left","paddingLeft","paddingRight","flex","textAlign","fontWeight","displayName"],"sources":["../src/MenuItem.tsx"],"sourcesContent":["import React, {\n forwardRef,\n PropsWithChildren,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport { clr, ThemeOverrider, useTheme } from '@os-design-mobile/theming';\nimport { Check } from '@os-design-mobile/icons';\nimport Button, { ButtonProps } from '@os-design-mobile/button';\nimport { RectButton } from 'react-native-gesture-handler';\nimport styled from '@emotion/native';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nexport interface MenuItemProps\n extends PropsWithChildren<Omit<ButtonProps, 'type' | 'size'>> {\n /**\n * Whether the menu item is selected.\n * @default false\n */\n selected?: boolean;\n /**\n * The value of the menu item.\n * @default undefined\n */\n value?: string;\n}\n\nconst selectedStyles = (p) =>\n p.selected\n ? {\n backgroundColor: clr(p.theme.menuItemSelectedColorBg),\n }\n : {};\n\ntype StyledButtonProps = Required<Pick<MenuItemProps, 'selected'>>;\nconst StyledButton = styled(Button)<StyledButtonProps>(selectedStyles);\n\n/**\n * The base menu item.\n */\nconst MenuItem = forwardRef<RectButton, MenuItemProps>(\n (\n {\n selected = false,\n value,\n right,\n viewProps = {},\n textProps = {},\n onPress = () => {},\n ...rest\n },\n ref\n ) => {\n const { closeOnSelect, onClose } = useContext(MenuContext);\n const onPressRef = useRef<MenuItemProps['onPress']>();\n const { theme } = useTheme();\n const safeAreaInsets = useSafeAreaInsets();\n\n useEffect(() => {\n onPressRef.current = onPress;\n }, [onPress]);\n\n const clickHandler = useCallback(\n (e) => {\n if (onPressRef.current) onPressRef.current(e);\n if (closeOnSelect) onClose();\n },\n [closeOnSelect, onClose]\n );\n\n return (\n <ThemeOverrider\n overrides={(t) => ({\n buttonGhostColorText: t.colorText,\n borderRadius: 0,\n buttonHeight: theme.menuItemHeight,\n buttonPaddingHorizontal: theme.menuItemPaddingHorizontal,\n })}\n >\n <StyledButton\n selected={selected}\n right={\n selected ? (\n <ThemeOverrider\n overrides={(t) => ({ colorText: t.menuItemSelectedColorIcon })}\n >\n <Check />\n </ThemeOverrider>\n ) : (\n right\n )\n }\n type='ghost'\n onPress={clickHandler}\n viewProps={{\n ...viewProps,\n style: {\n ...(safeAreaInsets.left > 0\n ? { paddingLeft: safeAreaInsets.left }\n : {}),\n ...(safeAreaInsets.right > 0\n ? { paddingRight: safeAreaInsets.right }\n : {}),\n ...(typeof viewProps?.style === 'object' ? viewProps.style : {}),\n },\n }}\n textProps={{\n ...textProps,\n style: {\n flex: 1,\n textAlign: 'left',\n fontWeight: 'normal',\n ...(typeof textProps?.style === 'object' ? textProps.style : {}),\n },\n }}\n {...rest}\n ref={ref}\n />\n </ThemeOverrider>\n );\n }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design-mobile/menu",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.48",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -19,25 +19,25 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@os-design-mobile/button": "^1.0.
|
|
23
|
-
"@os-design-mobile/icons": "^1.0.
|
|
24
|
-
"@os-design-mobile/modal": "^1.0.
|
|
22
|
+
"@os-design-mobile/button": "^1.0.35",
|
|
23
|
+
"@os-design-mobile/icons": "^1.0.34",
|
|
24
|
+
"@os-design-mobile/modal": "^1.0.52",
|
|
25
25
|
"@os-design-mobile/theming": "^1.0.24",
|
|
26
26
|
"@os-design/menu-utils": "^1.0.6",
|
|
27
27
|
"@os-design/use-forwarded-state": "^1.0.5"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@os-design-mobile/text": "^1.0.
|
|
30
|
+
"@os-design-mobile/text": "^1.0.31"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@emotion/native": ">=11",
|
|
34
34
|
"@emotion/react": ">=11",
|
|
35
35
|
"@react-native-async-storage/async-storage": ">=1",
|
|
36
36
|
"react": "17.0.2",
|
|
37
|
-
"react-native": "0.68.
|
|
37
|
+
"react-native": "0.68.2",
|
|
38
38
|
"react-native-gesture-handler": ">=2",
|
|
39
39
|
"react-native-safe-area-context": ">=3",
|
|
40
40
|
"react-native-svg": ">=12"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "10794f4092d328163c44559dd4f5791c717b98fb"
|
|
43
43
|
}
|