@os-design-mobile/menu 1.0.35 → 1.0.38
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/README.md +1 -0
- package/dist/MenuGroup.d.ts.map +1 -1
- package/dist/MenuGroup.js +1 -1
- package/dist/MenuGroup.js.map +1 -1
- package/dist/MenuItem.d.ts +2 -2
- package/dist/MenuItem.d.ts.map +1 -1
- package/dist/MenuItem.js +1 -1
- package/dist/MenuItem.js.map +1 -1
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@ yarn add @os-design-mobile/menu
|
|
|
12
12
|
|
|
13
13
|
Make sure you have the following packages installed:
|
|
14
14
|
|
|
15
|
+
- [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)
|
|
15
16
|
- [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context)
|
|
16
17
|
- [react-native-svg](https://github.com/react-native-svg/react-native-svg)
|
|
17
18
|
|
package/dist/MenuGroup.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuGroup.d.ts","sourceRoot":"","sources":["../src/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuGroup.d.ts","sourceRoot":"","sources":["../src/MenuGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,WAAW,cAAe,SAAQ,iBAAiB,CAAC,SAAS,CAAC;IAKlE,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAKlC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAKjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAaD,QAAA,MAAM,SAAS,6EAiEd,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
package/dist/MenuGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _native=_interopRequireDefault(require("@emotion/native"));var _theming=require("@os-design-mobile/theming");var _useForwardedState3=_interopRequireDefault(require("@os-design/use-forwarded-state"));var _menuUtils=require("@os-design/menu-utils");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _MenuItem=_interopRequireDefault(require("./MenuItem"));var _excluded=["title","maxSelectedItems","value","defaultValue","onChange","children"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=_native.default.Text(function(p){return{fontWeight:'500',fontSize:p.theme.sizes.small*p.theme.fontSize,color:(0,_theming.clr)(p.theme.menuGroupColorTitle),marginBottom:0.4*p.theme.fontSize,paddingHorizontal:p.theme.modalBodyPaddingHorizontal*p.theme.fontSize};});var MenuGroup=(0,_react.forwardRef)(function(_ref,ref){var title=_ref.title,_ref$maxSelectedItems=_ref.maxSelectedItems,maxSelectedItems=_ref$maxSelectedItems===void 0?1:_ref$maxSelectedItems,value=_ref.value,defaultValue=_ref.defaultValue,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?function(){}:_ref$onChange,children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _native=_interopRequireDefault(require("@emotion/native"));var _theming=require("@os-design-mobile/theming");var _useForwardedState3=_interopRequireDefault(require("@os-design/use-forwarded-state"));var _menuUtils=require("@os-design/menu-utils");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _MenuItem=_interopRequireDefault(require("./MenuItem"));var _excluded=["title","maxSelectedItems","value","defaultValue","onChange","children"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Title=_native.default.Text(function(p){return{fontWeight:'500',fontSize:p.theme.sizes.small*p.theme.fontSize,color:(0,_theming.clr)(p.theme.menuGroupColorTitle),marginBottom:0.4*p.theme.fontSize,paddingHorizontal:p.theme.modalBodyPaddingHorizontal*p.theme.fontSize};});var MenuGroup=(0,_react.forwardRef)(function(_ref,ref){var title=_ref.title,_ref$maxSelectedItems=_ref.maxSelectedItems,maxSelectedItems=_ref$maxSelectedItems===void 0?1:_ref$maxSelectedItems,value=_ref.value,defaultValue=_ref.defaultValue,_ref$onChange=_ref.onChange,onChange=_ref$onChange===void 0?function(){}:_ref$onChange,children=_ref.children,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useForwardedState=(0,_useForwardedState3.default)({value:value,defaultValue:defaultValue,onChange:onChange}),_useForwardedState2=(0,_slicedToArray2.default)(_useForwardedState,2),forwardedValue=_useForwardedState2[0],setForwardedValue=_useForwardedState2[1];var safeAreaInsets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();var onSelect=(0,_menuUtils.useSelectHandler)({value:forwardedValue||[],onChange:setForwardedValue,maxSelectedItems:maxSelectedItems});var menuItems=(0,_react.useMemo)(function(){var selectedItems=forwardedValue||[];return _react.default.Children.map(children,function(child){if(!_react.default.isValidElement(child)||child.type!==_MenuItem.default)return child;var _child$props=child.props,childValue=_child$props.value,childOnPress=_child$props.onPress;return _react.default.cloneElement(child,{key:childValue,selected:selectedItems.includes(childValue),onPress:function onPress(e){if(!childValue)return;onSelect(childValue);if(childOnPress)childOnPress(e);}});});},[children,forwardedValue,onSelect]);return _react.default.createElement(_reactNative.View,(0,_extends2.default)({},rest,{ref:ref}),title&&_react.default.createElement(Title,{numberOfLines:1,style:Object.assign({},safeAreaInsets.left>0?{paddingLeft:safeAreaInsets.left}:{},safeAreaInsets.right>0?{paddingRight:safeAreaInsets.right}:{})},title),menuItems);});MenuGroup.displayName='MenuGroup';var _default=MenuGroup;exports.default=_default;
|
|
2
2
|
//# sourceMappingURL=MenuGroup.js.map
|
package/dist/MenuGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/MenuGroup.tsx"],"names":["Title","styled","Text","p","fontWeight","fontSize","theme","sizes","small","color","menuGroupColorTitle","marginBottom","paddingHorizontal","modalBodyPaddingHorizontal","MenuGroup","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","
|
|
1
|
+
{"version":3,"sources":["../src/MenuGroup.tsx"],"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"],"mappings":"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","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"],"file":"MenuGroup.js"}
|
package/dist/MenuItem.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { PropsWithChildren } from 'react';
|
|
2
|
-
import { TouchableHighlight } from 'react-native';
|
|
3
2
|
import { ButtonProps } from '@os-design-mobile/button';
|
|
3
|
+
import { RectButton } from 'react-native-gesture-handler';
|
|
4
4
|
export interface MenuItemProps extends PropsWithChildren<Omit<ButtonProps, 'type' | 'size'>> {
|
|
5
5
|
selected?: boolean;
|
|
6
6
|
value?: string;
|
|
7
7
|
}
|
|
8
|
-
declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<
|
|
8
|
+
declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<RectButton>>;
|
|
9
9
|
export default MenuItem;
|
|
10
10
|
//# sourceMappingURL=MenuItem.d.ts.map
|
package/dist/MenuItem.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAe,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAK1D,MAAM,WAAW,aACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAK7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeD,QAAA,MAAM,QAAQ,kFAiFb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
package/dist/MenuItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _theming=require("@os-design-mobile/theming");var _icons=require("@os-design-mobile/icons");var _button=_interopRequireDefault(require("@os-design-mobile/button"));var _native=_interopRequireDefault(require("@emotion/native"));var _menuUtils=require("@os-design/menu-utils");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _excluded=["selected","value","right","viewProps","textProps","onPress"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var selectedStyles=function selectedStyles(p){return p.selected?{backgroundColor:(0,_theming.clr)(p.theme.menuItemSelectedColorBg)}:{};};var StyledButton=(0,_native.default)(_button.default)(selectedStyles);var MenuItem=(0,_react.forwardRef)(function(_ref,ref){var _ref$selected=_ref.selected,selected=_ref$selected===void 0?false:_ref$selected,value=_ref.value,right=_ref.right,_ref$viewProps=_ref.viewProps,viewProps=_ref$viewProps===void 0?{}:_ref$viewProps,_ref$textProps=_ref.textProps,textProps=_ref$textProps===void 0?{}:_ref$textProps,_ref$onPress=_ref.onPress,onPress=_ref$onPress===void 0?function(){}:_ref$onPress,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useContext=(0,_react.useContext)(_menuUtils.MenuContext),closeOnSelect=_useContext.closeOnSelect,onClose=_useContext.onClose;var onPressRef=(0,_react.useRef)();var _useTheme=(0,_theming.useTheme)(),theme=_useTheme.theme;var safeAreaInsets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();(0,_react.useEffect)(function(){onPressRef.current=onPress;},[onPress]);var clickHandler=(0,_react.useCallback)(function(e){if(onPressRef.current)onPressRef.current(e);if(closeOnSelect)onClose();},[closeOnSelect,onClose]);return _react.default.createElement(_theming.ThemeOverrider,{overrides:function overrides(t){return{buttonGhostColorText:t.colorText,borderRadius:0,buttonHeight:theme.menuItemHeight,buttonPaddingHorizontal:theme.menuItemPaddingHorizontal};}},_react.default.createElement(StyledButton,(0,_extends2.default)({selected:selected,right:selected?_react.default.createElement(_theming.ThemeOverrider,{overrides:function overrides(t){return{colorText:t.menuItemSelectedColorIcon};}},_react.default.createElement(_icons.Check,null)):right,type:"ghost",onPress:clickHandler,
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _theming=require("@os-design-mobile/theming");var _icons=require("@os-design-mobile/icons");var _button=_interopRequireDefault(require("@os-design-mobile/button"));var _native=_interopRequireDefault(require("@emotion/native"));var _menuUtils=require("@os-design/menu-utils");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _excluded=["selected","value","right","viewProps","textProps","onPress"];function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var selectedStyles=function selectedStyles(p){return p.selected?{backgroundColor:(0,_theming.clr)(p.theme.menuItemSelectedColorBg)}:{};};var StyledButton=(0,_native.default)(_button.default)(selectedStyles);var MenuItem=(0,_react.forwardRef)(function(_ref,ref){var _ref$selected=_ref.selected,selected=_ref$selected===void 0?false:_ref$selected,value=_ref.value,right=_ref.right,_ref$viewProps=_ref.viewProps,viewProps=_ref$viewProps===void 0?{}:_ref$viewProps,_ref$textProps=_ref.textProps,textProps=_ref$textProps===void 0?{}:_ref$textProps,_ref$onPress=_ref.onPress,onPress=_ref$onPress===void 0?function(){}:_ref$onPress,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useContext=(0,_react.useContext)(_menuUtils.MenuContext),closeOnSelect=_useContext.closeOnSelect,onClose=_useContext.onClose;var onPressRef=(0,_react.useRef)();var _useTheme=(0,_theming.useTheme)(),theme=_useTheme.theme;var safeAreaInsets=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();(0,_react.useEffect)(function(){onPressRef.current=onPress;},[onPress]);var clickHandler=(0,_react.useCallback)(function(e){if(onPressRef.current)onPressRef.current(e);if(closeOnSelect)onClose();},[closeOnSelect,onClose]);return _react.default.createElement(_theming.ThemeOverrider,{overrides:function overrides(t){return{buttonGhostColorText:t.colorText,borderRadius:0,buttonHeight:theme.menuItemHeight,buttonPaddingHorizontal:theme.menuItemPaddingHorizontal};}},_react.default.createElement(StyledButton,(0,_extends2.default)({selected:selected,right:selected?_react.default.createElement(_theming.ThemeOverrider,{overrides:function overrides(t){return{colorText:t.menuItemSelectedColorIcon};}},_react.default.createElement(_icons.Check,null)):right,type:"ghost",onPress:clickHandler,viewProps:Object.assign({},viewProps,{style:Object.assign({},safeAreaInsets.left>0?{paddingLeft:safeAreaInsets.left}:{},safeAreaInsets.right>0?{paddingRight:safeAreaInsets.right}:{},typeof(viewProps==null?void 0:viewProps.style)==='object'?viewProps.style:{})}),textProps:Object.assign({},textProps,{style:Object.assign({flex:1,textAlign:'left',fontWeight:'normal'},typeof(textProps==null?void 0:textProps.style)==='object'?textProps.style:{})})},rest,{ref:ref})));});MenuItem.displayName='MenuItem';var _default=MenuItem;exports.default=_default;
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
package/dist/MenuItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/MenuItem.tsx"],"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"],"mappings":"mWAAA,
|
|
1
|
+
{"version":3,"sources":["../src/MenuItem.tsx"],"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"],"mappings":"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","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"],"file":"MenuItem.js"}
|
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.38",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -19,24 +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.
|
|
26
|
-
"@os-design/menu-utils": "^1.0.
|
|
27
|
-
"@os-design/use-forwarded-state": "^1.0.
|
|
22
|
+
"@os-design-mobile/button": "^1.0.30",
|
|
23
|
+
"@os-design-mobile/icons": "^1.0.29",
|
|
24
|
+
"@os-design-mobile/modal": "^1.0.42",
|
|
25
|
+
"@os-design-mobile/theming": "^1.0.21",
|
|
26
|
+
"@os-design/menu-utils": "^1.0.5",
|
|
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.27"
|
|
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.
|
|
37
|
+
"react-native": "0.68.1",
|
|
38
|
+
"react-native-gesture-handler": ">=2",
|
|
38
39
|
"react-native-safe-area-context": ">=3",
|
|
39
40
|
"react-native-svg": ">=12"
|
|
40
41
|
},
|
|
41
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "040e052c94d4f25499d7fea9984c9a9e99359b85"
|
|
42
43
|
}
|