@os-design-mobile/menu 1.0.34 → 1.0.37
Sign up to get free protection for your applications and to get access to all the features.
- 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 +9 -8
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.37",
|
|
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.
|
|
22
|
+
"@os-design-mobile/button": "^1.0.29",
|
|
23
|
+
"@os-design-mobile/icons": "^1.0.28",
|
|
24
|
+
"@os-design-mobile/modal": "^1.0.41",
|
|
25
|
+
"@os-design-mobile/theming": "^1.0.20",
|
|
26
26
|
"@os-design/menu-utils": "^1.0.4",
|
|
27
27
|
"@os-design/use-forwarded-state": "^1.0.4"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@os-design-mobile/text": "^1.0.
|
|
30
|
+
"@os-design-mobile/text": "^1.0.26"
|
|
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.67.4",
|
|
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": "cb2c24aadb214ad2907151f14318a703b196f319"
|
|
42
43
|
}
|