@os-design-mobile/menu 1.0.59 → 1.0.60
Sign up to get free protection for your applications and to get access to all the features.
- 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/dist/index.js.map +1 -1
- package/package.json +9 -9
package/dist/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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<any>(child, { style });\n })}\n </SafeAreaProvider>\n </StyledModal>\n </MenuContext.Provider>\n );\n }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"mRAAA,qDAEA,sEACA,gDACA,0EACA,+DACA,kDACA,
|
|
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<any>(child, { style });\n })}\n </SafeAreaProvider>\n </StyledModal>\n </MenuContext.Provider>\n );\n }\n);\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"],"mappings":"mRAAA,qDAEA,sEACA,gDACA,0EACA,+DACA,kDACA,8DAAoC,4lCAUpC,GAAMA,YAAW,CAAG,GAAAC,eAAM,EAACC,cAAK,CAAC,CAAC,CAChCC,WAAW,CAAE,CAAC,CACdC,YAAY,CAAE,CAChB,CAAC,CAAC,CAKF,GAAMC,KAAI,CAAG,GAAAC,iBAAU,EACrB,cAAkEC,GAAG,CAAK,6BAAvEC,aAAa,CAAbA,aAAa,6BAAG,IAAI,sCAAEC,OAAO,CAAPA,OAAO,uBAAG,UAAM,CAAC,CAAC,cAAEC,QAAQ,MAARA,QAAQ,CAAKC,IAAI,uDAC5D,cAAkB,GAAAC,iBAAQ,GAAE,CAApBC,KAAK,WAALA,KAAK,CACb,GAAMC,cAAa,CAAG,GAAAC,cAAO,EAC3B,iBAAMC,eAAK,CAACC,QAAQ,CAACC,KAAK,CAACR,QAAQ,CAAC,GACpC,CAACA,QAAQ,CAAC,CACX,CACD,GAAMS,YAAW,CAAG,GAAAJ,cAAO,EACzB,iBAAO,CAAEP,aAAa,CAAbA,aAAa,CAAEC,OAAO,CAAPA,OAAQ,CAAC,EAAC,CAClC,CAACD,aAAa,CAAEC,OAAO,CAAC,CACzB,CAED,MACE,oBAAC,sBAAW,CAAC,QAAQ,EAAC,KAAK,CAAEU,WAAY,UACvC,oBAAC,WAAW,gBAAC,MAAM,CAAE,IAAK,CAAC,OAAO,CAAEV,OAAQ,EAAKE,IAAI,EAAE,GAAG,CAAEJ,GAAI,UAC9D,oBAAC,4CAAgB,WACdS,cAAK,CAACC,QAAQ,CAACG,GAAG,CAACV,QAAQ,CAAE,SAACW,KAAK,CAAEC,KAAK,CAAK,CAC9C,GAAI,CAACN,cAAK,CAACO,cAAc,CAACF,KAAK,CAAC,EAAIA,KAAK,CAACG,IAAI,GAAKC,kBAAS,CAC1D,MAAOJ,MAAK,CACd,GAAIK,MAAK,CAAG,CAAC,CAAC,CACd,GAAIJ,KAAK,CAAGR,aAAa,CAAG,CAAC,CAAE,CAC7BY,KAAK,CAAG,CACNC,aAAa,CAAE,GAAG,CAAGd,KAAK,CAACe,QAAQ,CACnCC,iBAAiB,CAAE,CAAC,CACpBC,iBAAiB,CAAE,GAAAC,YAAG,EAAClB,KAAK,CAACmB,qBAAqB,CACpD,CAAC,CACH,CACA,GAAIV,KAAK,CAAG,CAAC,CAAE,CACbI,KAAK,CAAG,CACNO,SAAS,CAAEpB,KAAK,CAACqB,wBAAwB,CAAGrB,KAAK,CAACe,QACpD,CAAC,CACH,CACA,MAAOZ,eAAK,CAACmB,YAAY,CAAMd,KAAK,CAAE,CAAEK,KAAK,CAALA,KAAM,CAAC,CAAC,CAClD,CAAC,CAAC,EACe,GACP,EACO,CAE3B,CAAC,CACF,CAEDrB,IAAI,CAAC+B,WAAW,CAAG,MAAM,CAAC,aAEX/B,IAAI"}
|
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","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":"mKAAA,qDAEA,+DACA,
|
|
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":"mKAAA,qDAEA,+DACA,kDAAgD,uiCAIhD,GAAMA,WAAU,CAAGC,eAAM,CAACC,IAAI,CAAC,SAACC,CAAC,QAAM,CACrCC,UAAU,CAAED,CAAC,CAACE,KAAK,CAACC,iBAAiB,CAAGH,CAAC,CAACE,KAAK,CAACE,QAAQ,CACxDC,iBAAiB,CAAE,CAAC,CACpBC,iBAAiB,CAAE,GAAAC,YAAG,EAACP,CAAC,CAACE,KAAK,CAACM,gBAAgB,CAAC,CAChDC,YAAY,CAAET,CAAC,CAACE,KAAK,CAACC,iBAAiB,CAAGH,CAAC,CAACE,KAAK,CAACE,QACpD,CAAC,EAAC,CAAC,CAKH,GAAMM,YAAW,CAAG,GAAAC,iBAAU,EAAyB,SAACC,KAAK,CAAEC,GAAG,QAChE,oBAAC,UAAU,kBAAKD,KAAK,EAAE,GAAG,CAAEC,GAAI,GAAG,EACpC,CAAC,CAEFH,WAAW,CAACI,WAAW,CAAG,aAAa,CAAC,aAEzBJ,WAAW"}
|
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","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<any>(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":"+WAAA,qDACA,yCACA,+DACA,kDACA,0FACA,gDACA,0EACA,
|
|
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<any>(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","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":"mRAAA,qDAQA,kDACA,8CACA,wEAEA,+DACA,gDACA,
|
|
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/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as Menu } from './Menu';\nexport { default as MenuDivider } from './MenuDivider';\nexport { default as MenuGroup } from './MenuGroup';\nexport { default as MenuItem } from './MenuItem';\n\nexport * from './Menu';\nexport * from './MenuDivider';\nexport * from './MenuGroup';\nexport * from './MenuItem';\n"],"mappings":"4iBAAA,qDAKA,2SAJA,mEAKA,gUAJA,+DAKA,0TAJA,6DAKA,
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as Menu } from './Menu';\nexport { default as MenuDivider } from './MenuDivider';\nexport { default as MenuGroup } from './MenuGroup';\nexport { default as MenuItem } from './MenuItem';\n\nexport * from './Menu';\nexport * from './MenuDivider';\nexport * from './MenuGroup';\nexport * from './MenuItem';\n"],"mappings":"4iBAAA,qDAKA,2SAJA,mEAKA,gUAJA,+DAKA,0TAJA,6DAKA,uTAA2B"}
|
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.60",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -19,15 +19,15 @@
|
|
|
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.
|
|
25
|
-
"@os-design-mobile/theming": "^1.0.
|
|
26
|
-
"@os-design/menu-utils": "^1.0.
|
|
27
|
-
"@os-design/use-forwarded-state": "^1.0.
|
|
22
|
+
"@os-design-mobile/button": "^1.0.43",
|
|
23
|
+
"@os-design-mobile/icons": "^1.0.42",
|
|
24
|
+
"@os-design-mobile/modal": "^1.0.64",
|
|
25
|
+
"@os-design-mobile/theming": "^1.0.31",
|
|
26
|
+
"@os-design/menu-utils": "^1.0.11",
|
|
27
|
+
"@os-design/use-forwarded-state": "^1.0.10"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@os-design-mobile/text": "^1.0.
|
|
30
|
+
"@os-design-mobile/text": "^1.0.40"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@emotion/native": ">=11",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react-native-safe-area-context": ">=3",
|
|
40
40
|
"react-native-svg": ">=12"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "2c6957821e9eb66c1075bda0302bad3ed4f71c54"
|
|
43
43
|
}
|