@os-design-mobile/menu 1.0.101 → 1.0.103
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Menu.d.ts +16 -0
- package/dist/Menu.d.ts.map +1 -0
- package/dist/MenuDivider.d.ts +9 -0
- package/dist/MenuDivider.d.ts.map +1 -0
- package/dist/MenuDivider.js +1 -1
- package/dist/MenuDivider.js.map +1 -1
- package/dist/MenuGroup.d.ts +51 -0
- package/dist/MenuGroup.d.ts.map +1 -0
- package/dist/MenuItem.d.ts +20 -0
- package/dist/MenuItem.d.ts.map +1 -0
- package/dist/MenuItem.js +1 -1
- package/dist/MenuItem.js.map +1 -1
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/package.json +13 -12
- package/src/MenuDivider.tsx +1 -1
- package/src/MenuItem.tsx +1 -1
package/dist/Menu.d.ts
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
import React, { type PropsWithChildren } from 'react';
|
2
|
+
import { View } from 'react-native';
|
3
|
+
import { type ModalProps } from '@os-design-mobile/modal';
|
4
|
+
export interface MenuProps extends PropsWithChildren<ModalProps> {
|
5
|
+
/**
|
6
|
+
* Whether the menu closes when the user selects a menu item.
|
7
|
+
* @default true
|
8
|
+
*/
|
9
|
+
closeOnSelect?: boolean;
|
10
|
+
}
|
11
|
+
/**
|
12
|
+
* The dropdown menu.
|
13
|
+
*/
|
14
|
+
declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<View>>;
|
15
|
+
export default Menu;
|
16
|
+
//# sourceMappingURL=Menu.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAOjE,MAAM,WAAW,SAAU,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAC9D;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAOD;;GAEG;AACH,QAAA,MAAM,IAAI,wEAwCT,CAAC;AAIF,eAAe,IAAI,CAAC"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { View, type ViewProps } from 'react-native';
|
3
|
+
export type MenuDividerProps = ViewProps;
|
4
|
+
/**
|
5
|
+
* The divider of menu items.
|
6
|
+
*/
|
7
|
+
declare const MenuDivider: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<View>>;
|
8
|
+
export default MenuDivider;
|
9
|
+
//# sourceMappingURL=MenuDivider.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../src/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AASzC;;GAEG;AACH,QAAA,MAAM,WAAW,wEAEf,CAAC;AAIH,eAAe,WAAW,CAAC"}
|
package/dist/MenuDivider.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 _react=require("react");var _native=_interopRequireDefault(require("@emotion/native"));var _theming=require("@os-design-mobile/theming");var _jsxRuntime=require("react/jsx-runtime");var StyledView=_native.default.View(function(p){return{paddingTop:p.theme.menuDividerIndent*p.theme.fontSize,borderBottomWidth:1,borderBottomColor:(0,_theming.clr)(p.theme.menuDividerColor),marginBottom:p.theme.menuDividerIndent*p.theme.fontSize};});var MenuDivider=(0,_react.forwardRef)(function(props,ref){return(0,_jsxRuntime.jsx)(StyledView,Object.assign({},props,{ref:ref}));});MenuDivider.displayName='MenuDivider';var _default=exports.default=MenuDivider;
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _native=_interopRequireDefault(require("@emotion/native"));var _theming=require("@os-design-mobile/theming");var _jsxRuntime=require("react/jsx-runtime");function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}var StyledView=_native.default.View(function(p){return{paddingTop:p.theme.menuDividerIndent*p.theme.fontSize,borderBottomWidth:1,borderBottomColor:(0,_theming.clr)(p.theme.menuDividerColor),marginBottom:p.theme.menuDividerIndent*p.theme.fontSize};});var MenuDivider=(0,_react.forwardRef)(function(props,ref){return(0,_jsxRuntime.jsx)(StyledView,Object.assign({},props,{ref:ref}));});MenuDivider.displayName='MenuDivider';var _default=exports.default=MenuDivider;
|
2
2
|
//# sourceMappingURL=MenuDivider.js.map
|
package/dist/MenuDivider.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuDivider.js","names":["_react","require","_native","_interopRequireDefault","_theming","_jsxRuntime","StyledView","styled","View","p","paddingTop","theme","menuDividerIndent","fontSize","borderBottomWidth","borderBottomColor","clr","menuDividerColor","marginBottom","MenuDivider","forwardRef","props","ref","jsx","
|
1
|
+
{"version":3,"file":"MenuDivider.js","names":["_react","_interopRequireWildcard","require","_native","_interopRequireDefault","_theming","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledView","styled","View","p","paddingTop","theme","menuDividerIndent","fontSize","borderBottomWidth","borderBottomColor","clr","menuDividerColor","marginBottom","MenuDivider","forwardRef","props","ref","jsx","assign","displayName","_default","exports"],"sources":["../src/MenuDivider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { View, type 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,IAAAA,MAAA,CAAAC,uBAAA,CAAAC,OAAA,WAEA,IAAAC,OAAA,CAAAC,sBAAA,CAAAF,OAAA,qBACA,IAAAG,QAAA,CAAAH,OAAA,8BAAgD,IAAAI,WAAA,CAAAJ,OAAA,+BAAAK,yBAAAC,CAAA,wBAAAC,OAAA,iBAAAC,CAAA,KAAAD,OAAA,GAAAE,CAAA,KAAAF,OAAA,UAAAF,wBAAA,UAAAA,yBAAAC,CAAA,SAAAA,CAAA,CAAAG,CAAA,CAAAD,CAAA,IAAAF,CAAA,YAAAP,wBAAAO,CAAA,CAAAE,CAAA,MAAAA,CAAA,EAAAF,CAAA,EAAAA,CAAA,CAAAI,UAAA,QAAAJ,CAAA,WAAAA,CAAA,mBAAAA,CAAA,qBAAAA,CAAA,QAAAK,OAAA,CAAAL,CAAA,MAAAG,CAAA,CAAAJ,wBAAA,CAAAG,CAAA,KAAAC,CAAA,EAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,SAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,MAAAQ,CAAA,EAAAC,SAAA,OAAAC,CAAA,CAAAC,MAAA,CAAAC,cAAA,EAAAD,MAAA,CAAAE,wBAAA,SAAAC,CAAA,IAAAd,CAAA,gBAAAc,CAAA,KAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,CAAAc,CAAA,OAAAG,CAAA,CAAAP,CAAA,CAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,CAAAc,CAAA,OAAAG,CAAA,GAAAA,CAAA,CAAAV,GAAA,EAAAU,CAAA,CAAAC,GAAA,EAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,CAAAM,CAAA,CAAAG,CAAA,EAAAT,CAAA,CAAAM,CAAA,EAAAd,CAAA,CAAAc,CAAA,UAAAN,CAAA,CAAAH,OAAA,CAAAL,CAAA,CAAAG,CAAA,EAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,CAAAQ,CAAA,EAAAA,CAAA,EAIhD,GAAM,CAAAW,UAAU,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,GAAM,CAAAM,WAAW,CAAG,GAAAC,iBAAU,EAAyB,SAACC,KAAK,CAAEC,GAAG,QAChE,GAAArC,WAAA,CAAAsC,GAAA,EAACjB,UAAU,CAAAR,MAAA,CAAA0B,MAAA,IAAKH,KAAK,EAAEC,GAAG,CAAEA,GAAI,EAAE,CAAC,EACpC,CAAC,CAEFH,WAAW,CAACM,WAAW,CAAG,aAAa,CAAC,IAAAC,QAAA,CAAAC,OAAA,CAAAnC,OAAA,CAEzB2B,WAAW","ignoreList":[]}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import React, { type PropsWithChildren } from 'react';
|
2
|
+
import { View, type ViewProps } from 'react-native';
|
3
|
+
interface BaseMenuGroupProps<T> extends PropsWithChildren<ViewProps> {
|
4
|
+
/**
|
5
|
+
* The title of the menu group.
|
6
|
+
* @default undefined
|
7
|
+
*/
|
8
|
+
title?: string;
|
9
|
+
/**
|
10
|
+
* The max number of options that the user can select. Zero means unlimited.
|
11
|
+
* Works only when multiple is true.
|
12
|
+
* @default 0
|
13
|
+
*/
|
14
|
+
maxSelectedItems?: number;
|
15
|
+
/**
|
16
|
+
* Selected menu items.
|
17
|
+
* @default undefined
|
18
|
+
*/
|
19
|
+
value?: T;
|
20
|
+
/**
|
21
|
+
* The default value.
|
22
|
+
* @default undefined
|
23
|
+
*/
|
24
|
+
defaultValue?: T;
|
25
|
+
/**
|
26
|
+
* The change event handler.
|
27
|
+
* @default undefined
|
28
|
+
*/
|
29
|
+
onChange?: (value: T) => void;
|
30
|
+
}
|
31
|
+
interface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {
|
32
|
+
/**
|
33
|
+
* Is it possible to select multiple values.
|
34
|
+
* @default false
|
35
|
+
*/
|
36
|
+
multiple?: false;
|
37
|
+
}
|
38
|
+
interface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {
|
39
|
+
/**
|
40
|
+
* Is it possible to select multiple values.
|
41
|
+
* @default false
|
42
|
+
*/
|
43
|
+
multiple: true;
|
44
|
+
}
|
45
|
+
export type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;
|
46
|
+
/**
|
47
|
+
* The group of menu items.
|
48
|
+
*/
|
49
|
+
declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<View>>;
|
50
|
+
export default MenuGroup;
|
51
|
+
//# sourceMappingURL=MenuGroup.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuGroup.d.ts","sourceRoot":"","sources":["../src/MenuGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAEZ,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,UAAU,kBAAkB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,SAAS,CAAC;IAClE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AACD,UAAU,yBAA0B,SAAQ,kBAAkB,CAAC,MAAM,GAAG,IAAI,CAAC;IAC3E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AACD,UAAU,sBAAuB,SAAQ,kBAAkB,CAAC,MAAM,EAAE,CAAC;IACnE;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAC;CAChB;AACD,MAAM,MAAM,cAAc,GAAG,yBAAyB,GAAG,sBAAsB,CAAC;AAUhF;;GAEG;AACH,QAAA,MAAM,SAAS,6EA4Fd,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React, { type PropsWithChildren } from 'react';
|
2
|
+
import { type ButtonProps } from '@os-design-mobile/button';
|
3
|
+
export interface MenuItemProps extends PropsWithChildren<Omit<ButtonProps, 'type' | 'size'>> {
|
4
|
+
/**
|
5
|
+
* Whether the menu item is selected.
|
6
|
+
* @default false
|
7
|
+
*/
|
8
|
+
selected?: boolean;
|
9
|
+
/**
|
10
|
+
* The value of the menu item.
|
11
|
+
* @default undefined
|
12
|
+
*/
|
13
|
+
value?: string;
|
14
|
+
}
|
15
|
+
/**
|
16
|
+
* The base menu item.
|
17
|
+
*/
|
18
|
+
declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<React.ForwardRefExoticComponent<Omit<import("react-native-gesture-handler").RectButtonProps, "innerRef"> & React.RefAttributes<any>>>>;
|
19
|
+
export default MenuItem;
|
20
|
+
//# sourceMappingURL=MenuItem.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AAGf,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAMpE,MAAM,WAAW,aACf,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC7D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD;;GAEG;AACH,QAAA,MAAM,QAAQ,4MAiFb,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 _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=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 _jsxRuntime=require("react/jsx-runtime");var _excluded=["selected","value","right","viewProps","textProps","onPress"];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(0,_jsxRuntime.jsx)(_theming.ThemeOverrider,{overrides:function overrides(t){return{buttonGhostColorText:t.colorText,borderRadius:0,buttonHeight:theme.menuItemHeight,buttonPaddingHorizontal:theme.menuItemPaddingHorizontal};},children:(0,_jsxRuntime.jsx)(StyledButton,Object.assign({selected:selected,right:selected?(0,_jsxRuntime.jsx)(_theming.ThemeOverrider,{overrides:function overrides(t){return{colorText:t.menuItemSelectedColorIcon};},children:(0,_jsxRuntime.jsx)(_icons.Check,{})}):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=exports.default=MenuItem;
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;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 _jsxRuntime=require("react/jsx-runtime");var _excluded=["selected","value","right","viewProps","textProps","onPress"];function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}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(0,_jsxRuntime.jsx)(_theming.ThemeOverrider,{overrides:function overrides(t){return{buttonGhostColorText:t.colorText,borderRadius:0,buttonHeight:theme.menuItemHeight,buttonPaddingHorizontal:theme.menuItemPaddingHorizontal};},children:(0,_jsxRuntime.jsx)(StyledButton,Object.assign({selected:selected,right:selected?(0,_jsxRuntime.jsx)(_theming.ThemeOverrider,{overrides:function overrides(t){return{colorText:t.menuItemSelectedColorIcon};},children:(0,_jsxRuntime.jsx)(_icons.Check,{})}):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=exports.default=MenuItem;
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|
package/dist/MenuItem.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuItem.js","names":["_react","require","_theming","_icons","_button","_interopRequireDefault","_native","_menuUtils","_reactNativeSafeAreaContext","_jsxRuntime","_excluded","selectedStyles","p","selected","backgroundColor","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","MenuItem","forwardRef","_ref","ref","_ref$selected","value","right","_ref$viewProps","viewProps","_ref$textProps","textProps","_ref$onPress","onPress","rest","_objectWithoutProperties2","
|
1
|
+
{"version":3,"file":"MenuItem.js","names":["_react","_interopRequireWildcard","require","_theming","_icons","_button","_interopRequireDefault","_native","_menuUtils","_reactNativeSafeAreaContext","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","selectedStyles","p","selected","backgroundColor","clr","theme","menuItemSelectedColorBg","StyledButton","styled","Button","MenuItem","forwardRef","_ref","ref","_ref$selected","value","right","_ref$viewProps","viewProps","_ref$textProps","textProps","_ref$onPress","onPress","rest","_objectWithoutProperties2","_useContext","useContext","MenuContext","closeOnSelect","onClose","onPressRef","useRef","_useTheme","useTheme","safeAreaInsets","useSafeAreaInsets","useEffect","current","clickHandler","useCallback","jsx","ThemeOverrider","overrides","buttonGhostColorText","colorText","borderRadius","buttonHeight","menuItemHeight","buttonPaddingHorizontal","menuItemPaddingHorizontal","children","assign","menuItemSelectedColorIcon","Check","type","style","left","paddingLeft","paddingRight","flex","textAlign","fontWeight","displayName","_default","exports"],"sources":["../src/MenuItem.tsx"],"sourcesContent":["import React, {\n forwardRef,\n type 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, { type 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<typeof 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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","ignoreList":[]}
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,9 @@
|
|
1
|
+
export { default as Menu } from './Menu';
|
2
|
+
export { default as MenuDivider } from './MenuDivider';
|
3
|
+
export { default as MenuGroup } from './MenuGroup';
|
4
|
+
export { default as MenuItem } from './MenuItem';
|
5
|
+
export * from './Menu';
|
6
|
+
export * from './MenuDivider';
|
7
|
+
export * from './MenuGroup';
|
8
|
+
export * from './MenuItem';
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
|
package/package.json
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "@os-design-mobile/menu",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.103",
|
4
4
|
"license": "UNLICENSED",
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
|
6
6
|
"type": "module",
|
7
|
-
"main": "dist/index.js",
|
8
|
-
"types": "dist/index.d.ts",
|
7
|
+
"main": "./dist/index.js",
|
8
|
+
"types": "./dist/index.d.ts",
|
9
|
+
"react-native": "./src/index.ts",
|
9
10
|
"files": [
|
10
11
|
"dist",
|
11
12
|
"src",
|
@@ -20,7 +21,7 @@
|
|
20
21
|
"scripts": {
|
21
22
|
"clean": "rimraf dist",
|
22
23
|
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist --source-maps",
|
23
|
-
"build:types": "tsc --
|
24
|
+
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist",
|
24
25
|
"build": "yarn clean && npm-run-all 'build:*'",
|
25
26
|
"ncu": "ncu -u '/^(?!(react|react-native)$).*$/'"
|
26
27
|
},
|
@@ -28,15 +29,15 @@
|
|
28
29
|
"access": "public"
|
29
30
|
},
|
30
31
|
"dependencies": {
|
31
|
-
"@os-design-mobile/button": "^1.0.
|
32
|
-
"@os-design-mobile/icons": "^1.0.
|
33
|
-
"@os-design-mobile/modal": "^1.0.
|
34
|
-
"@os-design-mobile/theming": "^1.0.
|
35
|
-
"@os-design/menu-utils": "^1.0.
|
36
|
-
"@os-design/use-forwarded-state": "^1.0.
|
32
|
+
"@os-design-mobile/button": "^1.0.71",
|
33
|
+
"@os-design-mobile/icons": "^1.0.67",
|
34
|
+
"@os-design-mobile/modal": "^1.0.107",
|
35
|
+
"@os-design-mobile/theming": "^1.0.49",
|
36
|
+
"@os-design/menu-utils": "^1.0.26",
|
37
|
+
"@os-design/use-forwarded-state": "^1.0.28"
|
37
38
|
},
|
38
39
|
"devDependencies": {
|
39
|
-
"@os-design-mobile/text": "^1.0.
|
40
|
+
"@os-design-mobile/text": "^1.0.65"
|
40
41
|
},
|
41
42
|
"peerDependencies": {
|
42
43
|
"@emotion/native": ">=11",
|
@@ -48,5 +49,5 @@
|
|
48
49
|
"react-native-safe-area-context": ">=3",
|
49
50
|
"react-native-svg": ">=12"
|
50
51
|
},
|
51
|
-
"gitHead": "
|
52
|
+
"gitHead": "47dde6916b834182f7672f43ac889c7ed308db8f"
|
52
53
|
}
|
package/src/MenuDivider.tsx
CHANGED
package/src/MenuItem.tsx
CHANGED