@os-design-mobile/menu 1.0.46 → 1.0.49
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/package.json +9 -9
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":"+bAAA,qDACA,yCACA,+DACA,kDACA,0FACA,gDACA,0EACA,4D,klCA8BA,GAAMA,MAAK,CAAGC,eAAA,CAAOC,IAAP,CAAY,SAACC,CAAD,QAAQ,CAChCC,UAAU,CAAE,KADoB,CAEhCC,QAAQ,CAAEF,CAAC,CAACG,KAAF,CAAQC,KAAR,CAAcC,KAAd,CAAsBL,CAAC,CAACG,KAAF,CAAQD,QAFR,CAGhCI,KAAK,CAAE,GAAAC,YAAA,EAAIP,CAAC,CAACG,KAAF,CAAQK,mBAAZ,CAHyB,CAIhCC,YAAY,CAAE,IAAMT,CAAC,CAACG,KAAF,CAAQD,QAJI,CAKhCQ,iBAAiB,CAAEV,CAAC,CAACG,KAAF,CAAQQ,0BAAR,CAAqCX,CAAC,CAACG,KAAF,CAAQD,QALhC,CAAR,EAAZ,CAAd,CAWA,GAAMU,UAAS,CAAG,GAAAC,iBAAA,EAChB,cAUEC,GAVF,CAWK,IATDC,MASC,MATDA,KASC,4BARDC,gBAQC,CARDA,gBAQC,gCARkB,CAQlB,uBAPDC,KAOC,MAPDA,KAOC,CANDC,YAMC,MANDA,YAMC,oBALDC,QAKC,CALDA,QAKC,wBALU,UAAM,CAAE,CAKlB,eAJDC,QAIC,MAJDA,QAIC,CAHEC,IAGF,uDACH,uBAA4C,GAAAC,2BAAA,EAAkB,CAC5DL,KAAK,CAALA,KAD4D,CAE5DC,YAAY,CAAZA,YAF4D,CAG5DC,QAAQ,CAARA,QAH4D,CAAlB,CAA5C,uEAAOI,cAAP,wBAAuBC,iBAAvB,wBAKA,GAAMC,eAAc,CAAG,GAAAC,6CAAA,GAAvB,CAEA,GAAMC,SAAQ,CAAG,GAAAC,2BAAA,EAAiB,CAChCX,KAAK,CAAEM,cAAc,EAAI,EADO,CAEhCJ,QAAQ,CAAEK,iBAFsB,CAGhCR,gBAAgB,CAAhBA,gBAHgC,CAAjB,CAAjB,CAMA,GAAMa,UAAS,CAAG,GAAAC,cAAA,EAAQ,UAAM,CAC9B,GAAMC,cAAa,CAAGR,cAAc,EAAI,EAAxC,CACA,MAAOS,eAAA,CAAMC,QAAN,CAAeC,GAAf,CAAmBd,QAAnB,CAA6B,SAACe,KAAD,CAAW,CAC7C,GAAI,CAACH,cAAA,CAAMI,cAAN,CAAqBD,KAArB,CAAD,EAAgCA,KAAK,CAACE,IAAN,GAAeC,iBAAnD,CACE,MAAOH,MAAP,CACF,iBAAqDA,KAAK,CAACI,KAA3D,CAAeC,UAAf,cAAQvB,KAAR,CAAoCwB,YAApC,cAA2BC,OAA3B,CACA,MAAOV,eAAA,CAAMW,YAAN,CAAmBR,KAAnB,CAA0B,CAC/BS,GAAG,CAAEJ,UAD0B,CAE/BK,QAAQ,CAAEd,aAAa,CAACe,QAAd,CAAuBN,UAAvB,CAFqB,CAG/BE,OAAO,CAAE,iBAACK,CAAD,CAAO,CACd,GAAI,CAACP,UAAL,CAAiB,OACjBb,QAAQ,CAACa,UAAD,CAAR,CACA,GAAIC,YAAJ,CAAkBA,YAAY,CAACM,CAAD,CAAZ,CACnB,CAP8B,CAA1B,CAAP,CASD,CAbM,CAAP,CAcD,CAhBiB,CAgBf,CAAC3B,QAAD,CAAWG,cAAX,CAA2BI,QAA3B,CAhBe,CAAlB,CAkBA,MACE,8BAAC,iBAAD,0BAAUN,IAAV,EAAgB,GAAG,CAAEP,GAArB,GACGC,KAAK,EACJ,6BAAC,KAAD,EACE,aAAa,CAAE,CADjB,CAEE,KAAK,kBACCU,cAAc,CAACuB,IAAf,CAAsB,CAAtB,CACA,CAAEC,WAAW,CAAExB,cAAc,CAACuB,IAA9B,CADA,CAEA,EAHD,CAICvB,cAAc,CAACyB,KAAf,CAAuB,CAAvB,CACA,CAAEC,YAAY,CAAE1B,cAAc,CAACyB,KAA/B,CADA,CAEA,EAND,CAFP,EAWGnC,KAXH,CAFJ,CAgBGc,SAhBH,CADF,CAoBD,CAhEe,CAAlB,CAmEAjB,SAAS,CAACwC,WAAV,CAAwB,WAAxB,C,aAEexC,S"}
|
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.49",
|
|
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.
|
|
25
|
-
"@os-design-mobile/theming": "^1.0.
|
|
22
|
+
"@os-design-mobile/button": "^1.0.36",
|
|
23
|
+
"@os-design-mobile/icons": "^1.0.35",
|
|
24
|
+
"@os-design-mobile/modal": "^1.0.53",
|
|
25
|
+
"@os-design-mobile/theming": "^1.0.25",
|
|
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.32"
|
|
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
|
-
"react": "
|
|
37
|
-
"react-native": "0.
|
|
36
|
+
"react": "18.0.0",
|
|
37
|
+
"react-native": "0.69.1",
|
|
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": "3a2359be329eb5512bd5645ca30c72d4a242f7c9"
|
|
43
43
|
}
|