@fluentui-react-native/drawer 0.5.1 → 0.5.4
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/.cache/tsconfig.tsbuildinfo +1 -0
- package/CHANGELOG.md +42 -0
- package/jest.config.cjs +1 -0
- package/lib/Drawer.d.ts.map +1 -1
- package/lib/Drawer.js +1 -3
- package/lib/Drawer.js.map +1 -1
- package/lib/__tests__/Drawer.test.js +1 -5
- package/lib/__tests__/Drawer.test.js.map +1 -1
- package/lib/useDrawer.d.ts.map +1 -1
- package/lib/useDrawer.js +6 -6
- package/lib/useDrawer.js.map +1 -1
- package/package.json +24 -29
- package/src/useDrawer.ts +17 -6
- package/tsconfig.json +26 -3
- package/babel.config.js +0 -1
- package/eslint.config.js +0 -3
- package/jest.config.js +0 -2
- package/lib-commonjs/Drawer.d.ts +0 -4
- package/lib-commonjs/Drawer.d.ts.map +0 -1
- package/lib-commonjs/Drawer.js +0 -36
- package/lib-commonjs/Drawer.js.map +0 -1
- package/lib-commonjs/Drawer.styling.d.ts +0 -4
- package/lib-commonjs/Drawer.styling.d.ts.map +0 -1
- package/lib-commonjs/Drawer.styling.js +0 -50
- package/lib-commonjs/Drawer.styling.js.map +0 -1
- package/lib-commonjs/Drawer.types.d.ts +0 -184
- package/lib-commonjs/Drawer.types.d.ts.map +0 -1
- package/lib-commonjs/Drawer.types.js +0 -5
- package/lib-commonjs/Drawer.types.js.map +0 -1
- package/lib-commonjs/DrawerTokens.d.ts +0 -5
- package/lib-commonjs/DrawerTokens.d.ts.map +0 -1
- package/lib-commonjs/DrawerTokens.js +0 -39
- package/lib-commonjs/DrawerTokens.js.map +0 -1
- package/lib-commonjs/__tests__/Drawer.test.d.ts +0 -2
- package/lib-commonjs/__tests__/Drawer.test.d.ts.map +0 -1
- package/lib-commonjs/__tests__/Drawer.test.js +0 -57
- package/lib-commonjs/__tests__/Drawer.test.js.map +0 -1
- package/lib-commonjs/index.d.ts +0 -4
- package/lib-commonjs/index.d.ts.map +0 -1
- package/lib-commonjs/index.js +0 -8
- package/lib-commonjs/index.js.map +0 -1
- package/lib-commonjs/useDrawer.d.ts +0 -3
- package/lib-commonjs/useDrawer.d.ts.map +0 -1
- package/lib-commonjs/useDrawer.js +0 -76
- package/lib-commonjs/useDrawer.js.map +0 -1
package/tsconfig.json
CHANGED
|
@@ -1,7 +1,30 @@
|
|
|
1
1
|
{
|
|
2
|
-
"extends": "@fluentui-react-native/scripts/
|
|
2
|
+
"extends": "@fluentui-react-native/scripts/tsconfig",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
-
"outDir": "lib"
|
|
4
|
+
"outDir": "lib",
|
|
5
|
+
"rootDir": "src",
|
|
6
|
+
"composite": true,
|
|
7
|
+
"tsBuildInfoFile": ".cache/tsconfig.tsbuildinfo"
|
|
5
8
|
},
|
|
6
|
-
"include": ["src", "svgs.d.ts"]
|
|
9
|
+
"include": ["src", "svgs.d.ts"],
|
|
10
|
+
"references": [
|
|
11
|
+
{
|
|
12
|
+
"path": "../../framework-base/tsconfig.json"
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
"path": "../../framework/framework/tsconfig.json"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"path": "../../utils/interactive-hooks/tsconfig.json"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../scripts/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../theming/theme-tokens/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../framework/use-styling/tsconfig.json"
|
|
28
|
+
}
|
|
29
|
+
]
|
|
7
30
|
}
|
package/babel.config.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = require('@fluentui-react-native/babel-config');
|
package/eslint.config.js
DELETED
package/jest.config.js
DELETED
package/lib-commonjs/Drawer.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { DrawerProps } from './Drawer.types';
|
|
2
|
-
export declare const drawerLookup: (layer: string, userProps: DrawerProps) => boolean;
|
|
3
|
-
export declare const Drawer: import("@fluentui-react-native/framework").ComposableComponent<DrawerProps, import("./Drawer.types").DrawerSlotProps, import("./Drawer.types").DrawerTokens, import("@fluentui-react-native/framework").ObjectBase>;
|
|
4
|
-
//# sourceMappingURL=Drawer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAc,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI9D,eAAO,MAAM,YAAY,oDAExB,CAAC;AAEF,eAAO,MAAM,MAAM,qNAmCjB,CAAC"}
|
package/lib-commonjs/Drawer.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Drawer = exports.drawerLookup = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("@fluentui-react-native/framework-base/jsx-runtime");
|
|
5
|
-
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
6
|
-
const react_native_1 = require("react-native");
|
|
7
|
-
const framework_1 = require("@fluentui-react-native/framework");
|
|
8
|
-
const Drawer_styling_1 = require("./Drawer.styling");
|
|
9
|
-
const Drawer_types_1 = require("./Drawer.types");
|
|
10
|
-
const useDrawer_1 = require("./useDrawer");
|
|
11
|
-
const drawerLookup = (layer, userProps) => {
|
|
12
|
-
return userProps[layer] || layer === userProps['drawerPosition'];
|
|
13
|
-
};
|
|
14
|
-
exports.drawerLookup = drawerLookup;
|
|
15
|
-
exports.Drawer = (0, framework_1.compose)({
|
|
16
|
-
displayName: Drawer_types_1.DrawerName,
|
|
17
|
-
...Drawer_styling_1.stylingSettings,
|
|
18
|
-
slots: {
|
|
19
|
-
modal: react_native_1.Modal,
|
|
20
|
-
scrim: react_native_1.TouchableWithoutFeedback,
|
|
21
|
-
scrimContent: react_native_1.Animated.View,
|
|
22
|
-
content: react_native_1.Animated.View,
|
|
23
|
-
handle: react_native_1.View,
|
|
24
|
-
},
|
|
25
|
-
useRender: (userProps, useSlots) => {
|
|
26
|
-
const drawerProps = (0, useDrawer_1.useDrawer)(userProps).props;
|
|
27
|
-
const Slots = useSlots(userProps, (layer) => (0, exports.drawerLookup)(layer, drawerProps));
|
|
28
|
-
return (final, children) => {
|
|
29
|
-
const { open, onClose, onScrimClick, animationConfig, drawerPosition, showHandle, ...rest } = (0, framework_1.mergeProps)(drawerProps, final);
|
|
30
|
-
return (jsx_runtime_1.jsxs(Slots.modal, { ...rest, visible: open, onRequestClose: onClose, supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'], animationType: "none", transparent: true, children: [
|
|
31
|
-
jsx_runtime_1.jsx(Slots.scrim, { onPress: onScrimClick, children: jsx_runtime_1.jsx(Slots.scrimContent, { style: [{ opacity: animationConfig.animatedOpacity }] }) }), jsx_runtime_1.jsxs(Slots.content, { style: animationConfig.animatedStyle, children: [drawerPosition === 'bottom' && showHandle && jsx_runtime_1.jsx(Slots.handle, {}), children] })
|
|
32
|
-
] }));
|
|
33
|
-
};
|
|
34
|
-
},
|
|
35
|
-
});
|
|
36
|
-
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":";;;;AAAA,6DAA6D;AAC7D,+CAA+E;AAG/E,gEAAuE;AAEvE,qDAAmD;AAEnD,iDAA4C;AAC5C,2CAAwC;AAEjC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,SAAsB,EAAW,EAAE,CAAC;IAC9E,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,gBAAgB,CAAC,CAAC;AAAA,CAClE,CAAC;AAFW,QAAA,YAAY,GAAZ,YAAY,CAEvB;AAEW,QAAA,MAAM,GAAG,IAAA,mBAAO,EAAa;IACxC,WAAW,EAAE,yBAAU;IACvB,GAAG,gCAAe;IAClB,KAAK,EAAE;QACL,KAAK,EAAE,oBAAK;QACZ,KAAK,EAAE,uCAAwB;QAC/B,YAAY,EAAE,uBAAQ,CAAC,IAAI;QAC3B,OAAO,EAAE,uBAAQ,CAAC,IAAI;QACtB,MAAM,EAAE,mBAAI;KACb;IACD,SAAS,EAAE,CAAC,SAAsB,EAAE,QAA8B,EAAE,EAAE,CAAC;QACrE,MAAM,WAAW,GAAG,IAAA,qBAAS,EAAC,SAAS,CAAC,CAAC,KAAK,CAAC;QAC/C,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAA,QAAA,YAAY,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;QAC/E,OAAO,CAAC,KAAkB,EAAE,QAAyB,EAAE,EAAE,CAAC;YACxD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,IAAA,sBAAU,EAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YAC7H,OAAO,CACL,mBAAC,KAAK,CAAC,KAAK,OACN,IAAI,EACR,OAAO,EAAE,IAAI,EACb,cAAc,EAAE,OAAO,EACvB,qBAAqB,EAAE,CAAC,UAAU,EAAE,sBAAsB,EAAE,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,CAAC,EAC7G,aAAa,EAAC,MAAM,EACpB,WAAW;oBAEX,kBAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,YAAY,YAChC,kBAAC,KAAK,CAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,eAAe,EAAE,CAAC,GAAI,GACjE,EACd,mBAAC,KAAK,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,aAAa,aAChD,cAAc,KAAK,QAAQ,IAAI,UAAU,IAAI,kBAAC,KAAK,CAAC,MAAM,KAAG,EAC7D,QAAQ,IACK;oBACJ,CACf,CAAC;QAAA,CACH,CAAC;IAAA,CACH;CACF,CAAC,CAAC"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { UseStylingOptions } from '@fluentui-react-native/framework';
|
|
2
|
-
import type { DrawerTokens, DrawerSlotProps, DrawerProps } from './Drawer.types';
|
|
3
|
-
export declare const stylingSettings: UseStylingOptions<DrawerProps, DrawerSlotProps, DrawerTokens>;
|
|
4
|
-
//# sourceMappingURL=Drawer.styling.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.styling.d.ts","sourceRoot":"","sources":["../src/Drawer.styling.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAS,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAIjF,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGjF,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,WAAW,EAAE,eAAe,EAAE,YAAY,CAmDzF,CAAC"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.stylingSettings = void 0;
|
|
4
|
-
const framework_1 = require("@fluentui-react-native/framework");
|
|
5
|
-
const Drawer_types_1 = require("./Drawer.types");
|
|
6
|
-
const DrawerTokens_1 = require("./DrawerTokens");
|
|
7
|
-
exports.stylingSettings = {
|
|
8
|
-
tokens: [DrawerTokens_1.defaultDrawerTokens, Drawer_types_1.DrawerName],
|
|
9
|
-
tokensThatAreAlsoProps: 'all',
|
|
10
|
-
states: ['left', 'right', 'bottom'],
|
|
11
|
-
slotProps: {
|
|
12
|
-
scrimContent: (0, framework_1.buildProps)((tokens, _theme) => ({
|
|
13
|
-
style: {
|
|
14
|
-
position: 'absolute',
|
|
15
|
-
top: 0,
|
|
16
|
-
left: 0,
|
|
17
|
-
width: '100%',
|
|
18
|
-
height: '100%',
|
|
19
|
-
backgroundColor: tokens.scrimColor,
|
|
20
|
-
opacity: tokens.scrimOpacity,
|
|
21
|
-
},
|
|
22
|
-
}), ['scrimColor']),
|
|
23
|
-
content: (0, framework_1.buildProps)((tokens, _theme) => ({
|
|
24
|
-
style: {
|
|
25
|
-
position: 'absolute',
|
|
26
|
-
height: tokens.height,
|
|
27
|
-
width: tokens.width,
|
|
28
|
-
elevation: tokens.drawerElevation,
|
|
29
|
-
borderTopEndRadius: tokens.drawerCornerRadius,
|
|
30
|
-
borderTopStartRadius: tokens.drawerCornerRadius,
|
|
31
|
-
right: tokens.rightPosition,
|
|
32
|
-
left: tokens.leftPosition,
|
|
33
|
-
bottom: tokens.bottomPosition,
|
|
34
|
-
top: tokens.topPosition,
|
|
35
|
-
backgroundColor: tokens.drawerBackgroundColor,
|
|
36
|
-
},
|
|
37
|
-
}), ['drawerBackgroundColor', 'drawerElevation', 'height', 'width']),
|
|
38
|
-
handle: (0, framework_1.buildProps)((tokens, _theme) => ({
|
|
39
|
-
style: {
|
|
40
|
-
width: tokens.handleWidth,
|
|
41
|
-
height: tokens.handleHeight,
|
|
42
|
-
borderRadius: tokens.handleCornerRadius,
|
|
43
|
-
backgroundColor: tokens.handleBackgroundColor,
|
|
44
|
-
alignSelf: tokens.handleAlignment,
|
|
45
|
-
marginTop: tokens.handleMarginTop,
|
|
46
|
-
},
|
|
47
|
-
}), ['handleWidth', 'handleHeight', 'handleCornerRadius', 'handleBackgroundColor', 'handleAlignment', 'handleMarginTop']),
|
|
48
|
-
},
|
|
49
|
-
};
|
|
50
|
-
//# sourceMappingURL=Drawer.styling.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.styling.js","sourceRoot":"","sources":["../src/Drawer.styling.ts"],"names":[],"mappings":";;;AACA,gEAA8D;AAE9D,iDAA4C;AAE5C,iDAAqD;AAExC,QAAA,eAAe,GAAkE;IAC5F,MAAM,EAAE,CAAC,kCAAmB,EAAE,yBAAU,CAAC;IACzC,sBAAsB,EAAE,KAAK;IAC7B,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC;IACnC,SAAS,EAAE;QACT,YAAY,EAAE,IAAA,sBAAU,EACtB,CAAC,MAAoB,EAAE,MAAa,EAAE,EAAE,CAAC,CAAC;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,eAAe,EAAE,MAAM,CAAC,UAAU;gBAClC,OAAO,EAAE,MAAM,CAAC,YAAY;aAC7B;SACF,CAAC,EACF,CAAC,YAAY,CAAC,CACf;QACD,OAAO,EAAE,IAAA,sBAAU,EACjB,CAAC,MAAoB,EAAE,MAAa,EAAE,EAAE,CAAC,CAAC;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,SAAS,EAAE,MAAM,CAAC,eAAe;gBACjC,kBAAkB,EAAE,MAAM,CAAC,kBAAkB;gBAC7C,oBAAoB,EAAE,MAAM,CAAC,kBAAkB;gBAC/C,KAAK,EAAE,MAAM,CAAC,aAAa;gBAC3B,IAAI,EAAE,MAAM,CAAC,YAAY;gBACzB,MAAM,EAAE,MAAM,CAAC,cAAc;gBAC7B,GAAG,EAAE,MAAM,CAAC,WAAW;gBACvB,eAAe,EAAE,MAAM,CAAC,qBAAqB;aAC9C;SACF,CAAC,EACF,CAAC,uBAAuB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAChE;QACD,MAAM,EAAE,IAAA,sBAAU,EAChB,CAAC,MAAoB,EAAE,MAAa,EAAE,EAAE,CAAC,CAAC;YACxC,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM,CAAC,WAAW;gBACzB,MAAM,EAAE,MAAM,CAAC,YAAY;gBAC3B,YAAY,EAAE,MAAM,CAAC,kBAAkB;gBACvC,eAAe,EAAE,MAAM,CAAC,qBAAqB;gBAC7C,SAAS,EAAE,MAAM,CAAC,eAAe;gBACjC,SAAS,EAAE,MAAM,CAAC,eAAe;aAClC;SACF,CAAC,EACF,CAAC,aAAa,EAAE,cAAc,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CACrH;KACF;CACF,CAAC"}
|
|
@@ -1,184 +0,0 @@
|
|
|
1
|
-
import type { AnimatableNumericValue, Animated, ColorValue, DimensionValue, FlexAlignType, ModalProps, TouchableWithoutFeedbackProps, ViewProps } from 'react-native';
|
|
2
|
-
import type { InteractionEvent, PressableFocusProps } from '@fluentui-react-native/interactive-hooks';
|
|
3
|
-
export declare const DrawerName = "Drawer";
|
|
4
|
-
/**
|
|
5
|
-
* Specifies the possible position of the Drawer.
|
|
6
|
-
*/
|
|
7
|
-
export type DrawerPositionType = 'bottom' | 'left' | 'right';
|
|
8
|
-
export interface DrawerTokens {
|
|
9
|
-
/**
|
|
10
|
-
* The color of the scrim.
|
|
11
|
-
* */
|
|
12
|
-
scrimColor?: ColorValue;
|
|
13
|
-
/**
|
|
14
|
-
* The opacity of the scrim.
|
|
15
|
-
* */
|
|
16
|
-
scrimOpacity?: number;
|
|
17
|
-
/**
|
|
18
|
-
* Width of the handle.
|
|
19
|
-
*/
|
|
20
|
-
handleWidth?: number;
|
|
21
|
-
/**
|
|
22
|
-
* Height of the handle.
|
|
23
|
-
*/
|
|
24
|
-
handleHeight?: number;
|
|
25
|
-
/**
|
|
26
|
-
* The background color of the handle.
|
|
27
|
-
* */
|
|
28
|
-
handleBackgroundColor?: ColorValue;
|
|
29
|
-
/**
|
|
30
|
-
* The corner radius of the handle.
|
|
31
|
-
* */
|
|
32
|
-
handleCornerRadius?: AnimatableNumericValue | string;
|
|
33
|
-
/**
|
|
34
|
-
* The top margin of the handle.
|
|
35
|
-
* */
|
|
36
|
-
handleMarginTop?: number;
|
|
37
|
-
/**
|
|
38
|
-
* The bottom margin of the handle.
|
|
39
|
-
* */
|
|
40
|
-
handleMarginBottom?: number;
|
|
41
|
-
/**
|
|
42
|
-
* The start margin of the handle.
|
|
43
|
-
* */
|
|
44
|
-
handleMarginStart?: number;
|
|
45
|
-
/**
|
|
46
|
-
* The end margin of the handle.
|
|
47
|
-
* */
|
|
48
|
-
handleMarginEnd?: number;
|
|
49
|
-
/**
|
|
50
|
-
* The flex alignment of the handle.
|
|
51
|
-
* */
|
|
52
|
-
handleAlignment?: FlexAlignType;
|
|
53
|
-
/**
|
|
54
|
-
* The background for drawer
|
|
55
|
-
* */
|
|
56
|
-
drawerBackgroundColor?: ColorValue;
|
|
57
|
-
/**
|
|
58
|
-
* The corner radius of the Drawer
|
|
59
|
-
* @default 0
|
|
60
|
-
* */
|
|
61
|
-
drawerCornerRadius?: AnimatableNumericValue | string;
|
|
62
|
-
/**
|
|
63
|
-
* The elevation of the Drawer
|
|
64
|
-
* @default 5
|
|
65
|
-
* @platform android
|
|
66
|
-
* */
|
|
67
|
-
drawerElevation?: number;
|
|
68
|
-
/**
|
|
69
|
-
* The width of the Drawer
|
|
70
|
-
* Note: Only applicable when position is 'left' or 'right'
|
|
71
|
-
* @default '100%'
|
|
72
|
-
* */
|
|
73
|
-
width?: DimensionValue;
|
|
74
|
-
/**
|
|
75
|
-
* The height of the Drawer
|
|
76
|
-
* Note: Only applicable when position is 'bottom'
|
|
77
|
-
* @default '40%'
|
|
78
|
-
* */
|
|
79
|
-
height?: DimensionValue;
|
|
80
|
-
/**
|
|
81
|
-
* The shadow color of the Drawer
|
|
82
|
-
* @platform iOS
|
|
83
|
-
* */
|
|
84
|
-
shadowColor?: ColorValue;
|
|
85
|
-
/**
|
|
86
|
-
* The shadow offset of the Drawer
|
|
87
|
-
* @platform iOS
|
|
88
|
-
* */
|
|
89
|
-
shadowOffset?: {
|
|
90
|
-
width: number;
|
|
91
|
-
height: number;
|
|
92
|
-
};
|
|
93
|
-
/**
|
|
94
|
-
* The shadow opacity of the Drawer
|
|
95
|
-
* @platform iOS
|
|
96
|
-
* */
|
|
97
|
-
shadowOpacity?: number;
|
|
98
|
-
/**
|
|
99
|
-
* The shadow radius of the Drawer
|
|
100
|
-
* @platform iOS
|
|
101
|
-
* */
|
|
102
|
-
shadowRadius?: AnimatableNumericValue | string;
|
|
103
|
-
/**
|
|
104
|
-
* Positions/Behaviours of the Drawer, This is used to apply different tokens for different positions.
|
|
105
|
-
*/
|
|
106
|
-
left?: DrawerTokens;
|
|
107
|
-
right?: DrawerTokens;
|
|
108
|
-
bottom?: DrawerTokens;
|
|
109
|
-
/**
|
|
110
|
-
* Coordinate position of the Drawer, This is used to position the Drawer at a particular coordinate.
|
|
111
|
-
*/
|
|
112
|
-
leftPosition?: number;
|
|
113
|
-
rightPosition?: number;
|
|
114
|
-
bottomPosition?: number;
|
|
115
|
-
topPosition?: number;
|
|
116
|
-
}
|
|
117
|
-
export interface DrawerProps extends PressableFocusProps {
|
|
118
|
-
accessibilityLabel?: string;
|
|
119
|
-
/**
|
|
120
|
-
* Visibility of the Drawer
|
|
121
|
-
*/
|
|
122
|
-
open?: boolean;
|
|
123
|
-
/**
|
|
124
|
-
* Callback when the Drawer is closed
|
|
125
|
-
* */
|
|
126
|
-
onClose?: (e: InteractionEvent) => void;
|
|
127
|
-
/**
|
|
128
|
-
* Callback when the Drawer is opened
|
|
129
|
-
* */
|
|
130
|
-
onOpen?: (e: InteractionEvent) => void;
|
|
131
|
-
/**
|
|
132
|
-
* Callback when the scrim is clicked
|
|
133
|
-
* */
|
|
134
|
-
onScrimClick?: (e: InteractionEvent) => void;
|
|
135
|
-
/**
|
|
136
|
-
* The content of the Drawer
|
|
137
|
-
* */
|
|
138
|
-
children?: React.ReactNode;
|
|
139
|
-
/**
|
|
140
|
-
* The behavior of the Drawer
|
|
141
|
-
* @default 'left'
|
|
142
|
-
* */
|
|
143
|
-
drawerPosition?: DrawerPositionType;
|
|
144
|
-
/**
|
|
145
|
-
* The behavior is for only bottom drawer in which content is scrollable without expanding the bottom drawer
|
|
146
|
-
* @default false
|
|
147
|
-
* */
|
|
148
|
-
isContentScrollableUnexpanded?: boolean;
|
|
149
|
-
/**
|
|
150
|
-
* The behavior is for only bottom drawer in which handle can be hidden for some usecases
|
|
151
|
-
* @default true
|
|
152
|
-
* */
|
|
153
|
-
showHandle?: boolean;
|
|
154
|
-
/**
|
|
155
|
-
* The width of the Drawer
|
|
156
|
-
* Animation configuration for the Drawer
|
|
157
|
-
* */
|
|
158
|
-
animationConfig?: {
|
|
159
|
-
animatedOpacity: Animated.AnimatedInterpolation<number>;
|
|
160
|
-
animatedStyle: {
|
|
161
|
-
transform: {
|
|
162
|
-
translateX: Animated.AnimatedInterpolation<number>;
|
|
163
|
-
}[] | {
|
|
164
|
-
translateY: Animated.AnimatedInterpolation<number>;
|
|
165
|
-
}[];
|
|
166
|
-
};
|
|
167
|
-
};
|
|
168
|
-
}
|
|
169
|
-
export interface DrawerInfo {
|
|
170
|
-
props: DrawerProps;
|
|
171
|
-
}
|
|
172
|
-
export interface DrawerSlotProps {
|
|
173
|
-
modal: ModalProps;
|
|
174
|
-
scrim: TouchableWithoutFeedbackProps;
|
|
175
|
-
scrimContent: Animated.AnimatedProps<ViewProps>;
|
|
176
|
-
content: Animated.AnimatedProps<ViewProps>;
|
|
177
|
-
handle: ViewProps;
|
|
178
|
-
}
|
|
179
|
-
export interface DrawerType {
|
|
180
|
-
props: DrawerProps;
|
|
181
|
-
tokens: DrawerTokens;
|
|
182
|
-
slotProps: DrawerSlotProps;
|
|
183
|
-
}
|
|
184
|
-
//# sourceMappingURL=Drawer.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../src/Drawer.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.types.js","sourceRoot":"","sources":["../src/Drawer.types.ts"],"names":[],"mappings":";;;AAaa,QAAA,UAAU,GAAG,QAAQ,CAAC"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { Theme } from '@fluentui-react-native/framework';
|
|
2
|
-
import type { TokenSettings } from '@fluentui-react-native/use-styling';
|
|
3
|
-
import type { DrawerTokens } from './Drawer.types';
|
|
4
|
-
export declare const defaultDrawerTokens: TokenSettings<DrawerTokens, Theme>;
|
|
5
|
-
//# sourceMappingURL=DrawerTokens.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerTokens.d.ts","sourceRoot":"","sources":["../src/DrawerTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAExE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,YAAY,EAAE,KAAK,CAiC/C,CAAC"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.defaultDrawerTokens = void 0;
|
|
4
|
-
const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
|
|
5
|
-
const defaultDrawerTokens = (t) => ({
|
|
6
|
-
scrimColor: '#00000080', // to be replace with token in future based on design guidance
|
|
7
|
-
drawerBackgroundColor: t.colors.neutralBackground2,
|
|
8
|
-
handleBackgroundColor: t.colors.neutralStroke1,
|
|
9
|
-
handleWidth: theme_tokens_1.globalTokens.size360,
|
|
10
|
-
handleHeight: theme_tokens_1.globalTokens.size40,
|
|
11
|
-
handleCornerRadius: theme_tokens_1.globalTokens.size20,
|
|
12
|
-
handleAlignment: 'center',
|
|
13
|
-
handleMarginTop: theme_tokens_1.globalTokens.size80,
|
|
14
|
-
handleMarginBottom: theme_tokens_1.globalTokens.sizeNone,
|
|
15
|
-
handleMarginEnd: theme_tokens_1.globalTokens.sizeNone,
|
|
16
|
-
handleMarginStart: theme_tokens_1.globalTokens.sizeNone,
|
|
17
|
-
drawerElevation: theme_tokens_1.globalTokens.size100,
|
|
18
|
-
topPosition: 0,
|
|
19
|
-
left: {
|
|
20
|
-
height: '100%',
|
|
21
|
-
width: '80%',
|
|
22
|
-
leftPosition: 0,
|
|
23
|
-
drawerCornerRadius: 0,
|
|
24
|
-
},
|
|
25
|
-
right: {
|
|
26
|
-
height: '100%',
|
|
27
|
-
width: '80%',
|
|
28
|
-
rightPosition: 0,
|
|
29
|
-
drawerCornerRadius: 0,
|
|
30
|
-
},
|
|
31
|
-
bottom: {
|
|
32
|
-
bottomPosition: 0,
|
|
33
|
-
width: '100%',
|
|
34
|
-
drawerCornerRadius: theme_tokens_1.globalTokens.corner.radius120,
|
|
35
|
-
height: '50%',
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
|
-
exports.defaultDrawerTokens = defaultDrawerTokens;
|
|
39
|
-
//# sourceMappingURL=DrawerTokens.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerTokens.js","sourceRoot":"","sources":["../src/DrawerTokens.ts"],"names":[],"mappings":";;;AACA,sEAAmE;AAK5D,MAAM,mBAAmB,GAAuC,CAAC,CAAQ,EAAE,EAAE,CAClF,CAAC;IACC,UAAU,EAAE,WAAW,EAAE,8DAA8D;IACvF,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,kBAAkB;IAClD,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;IAC9C,WAAW,EAAE,2BAAY,CAAC,OAAO;IACjC,YAAY,EAAE,2BAAY,CAAC,MAAM;IACjC,kBAAkB,EAAE,2BAAY,CAAC,MAAM;IACvC,eAAe,EAAE,QAAQ;IACzB,eAAe,EAAE,2BAAY,CAAC,MAAM;IACpC,kBAAkB,EAAE,2BAAY,CAAC,QAAQ;IACzC,eAAe,EAAE,2BAAY,CAAC,QAAQ;IACtC,iBAAiB,EAAE,2BAAY,CAAC,QAAQ;IACxC,eAAe,EAAE,2BAAY,CAAC,OAAO;IACrC,WAAW,EAAE,CAAC;IACd,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,KAAK;QACZ,YAAY,EAAE,CAAC;QACf,kBAAkB,EAAE,CAAC;KACtB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,KAAK;QACZ,aAAa,EAAE,CAAC;QAChB,kBAAkB,EAAE,CAAC;KACtB;IACD,MAAM,EAAE;QACN,cAAc,EAAE,CAAC;QACjB,KAAK,EAAE,MAAM;QACb,kBAAkB,EAAE,2BAAY,CAAC,MAAM,CAAC,SAAS;QACjD,MAAM,EAAE,KAAK;KACd;CACF,CAAiB,CAAC;AAjCR,QAAA,mBAAmB,GAAnB,mBAAmB,CAiCX"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/Drawer.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
37
|
-
const react_1 = require("react");
|
|
38
|
-
const react_native_1 = require("react-native");
|
|
39
|
-
const renderer = __importStar(require("react-test-renderer"));
|
|
40
|
-
// import { Drawer } from '../Drawer';
|
|
41
|
-
// mocks out setTimeout and other timer functions with mock functions , test will fail without this as we're using Animated API
|
|
42
|
-
jest.useFakeTimers();
|
|
43
|
-
// Disable Drawer test, as it's still failing despite the line above
|
|
44
|
-
describe('Drawer component tests', () => {
|
|
45
|
-
it('Drawer default', () => {
|
|
46
|
-
let component;
|
|
47
|
-
(0, react_1.act)(() => {
|
|
48
|
-
component = renderer.create(
|
|
49
|
-
// <Drawer open={false} drawerPosition="left">
|
|
50
|
-
jsx_runtime_1.jsx(react_native_1.Text, { children: "Hello" })
|
|
51
|
-
// </Drawer>,
|
|
52
|
-
);
|
|
53
|
-
});
|
|
54
|
-
expect(component.toJSON()).toMatchSnapshot();
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
//# sourceMappingURL=Drawer.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../src/__tests__/Drawer.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA4B;AAC5B,+CAAoC;AAEpC,MAAY,QAAQ,gDAA4B;AAEhD,sCAAsC;AAEtC,+HAA+H;AAC/H,IAAI,CAAC,aAAa,EAAE,CAAC;AAErB,oEAAoE;AACpE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC;IACvC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE,CAAC;QACzB,IAAI,SAAqC,CAAC;QAC1C,IAAA,WAAG,EAAC,GAAG,EAAE,CAAC;YACR,SAAS,GAAG,QAAQ,CAAC,MAAM;YACzB,8CAA8C;YAC9C,kBAAC,mBAAI,wBAAa;YAClB,aAAa;aACd,CAAC;QAAA,CACH,CAAC,CAAC;QACH,MAAM,CAAC,SAAU,CAAC,MAAM,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC;IAAA,CAC/C,CAAC,CAAC;AAAA,CACJ,CAAC,CAAC"}
|
package/lib-commonjs/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}
|
package/lib-commonjs/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DrawerName = exports.Drawer = void 0;
|
|
4
|
-
const Drawer_1 = require("./Drawer");
|
|
5
|
-
Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
|
|
6
|
-
const Drawer_types_1 = require("./Drawer.types");
|
|
7
|
-
Object.defineProperty(exports, "DrawerName", { enumerable: true, get: function () { return Drawer_types_1.DrawerName; } });
|
|
8
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qCAAkC;AAAzB,gGAAA,MAAM,OAAA;AAEf,iDAA4C;AAAnC,0GAAA,UAAU,OAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawer.d.ts","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI9D,eAAO,MAAM,SAAS,oCAgFrB,CAAC"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useDrawer = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
const react_native_1 = require("react-native");
|
|
6
|
-
const { height, width } = react_native_1.Dimensions.get('window');
|
|
7
|
-
const useDrawer = (props) => {
|
|
8
|
-
const { onBlur, onFocus, accessibilityLabel, open, drawerPosition = 'left', showHandle = true, children, ...rest } = props;
|
|
9
|
-
const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
|
|
10
|
-
const [internalOpen, setInternalOpen] = (0, react_1.useState)(open);
|
|
11
|
-
const [isFirstOpen, setIsFirstOpen] = (0, react_1.useState)(true);
|
|
12
|
-
(0, react_1.useEffect)(() => {
|
|
13
|
-
if (open) {
|
|
14
|
-
setInternalOpen(true);
|
|
15
|
-
react_native_1.Animated.timing(animatedValue, {
|
|
16
|
-
toValue: 1,
|
|
17
|
-
duration: 300,
|
|
18
|
-
useNativeDriver: true,
|
|
19
|
-
}).start();
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
if (isFirstOpen) {
|
|
23
|
-
setIsFirstOpen(false);
|
|
24
|
-
}
|
|
25
|
-
else {
|
|
26
|
-
react_native_1.Animated.parallel([
|
|
27
|
-
react_native_1.Animated.timing(animatedValue, {
|
|
28
|
-
toValue: 0,
|
|
29
|
-
duration: 300,
|
|
30
|
-
useNativeDriver: true,
|
|
31
|
-
}),
|
|
32
|
-
]).start(() => {
|
|
33
|
-
setInternalOpen(false);
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}, [animatedValue, open]);
|
|
38
|
-
const onClose = (0, react_1.useCallback)((e) => {
|
|
39
|
-
props?.onClose && props.onClose(e);
|
|
40
|
-
}, [props?.onClose]);
|
|
41
|
-
const onScrimClick = (0, react_1.useCallback)((e) => {
|
|
42
|
-
props?.onScrimClick && props.onScrimClick(e);
|
|
43
|
-
}, [props?.onScrimClick]);
|
|
44
|
-
const animatedTranslateX = animatedValue.interpolate({
|
|
45
|
-
inputRange: [0, 1],
|
|
46
|
-
outputRange: drawerPosition === 'left' ? [-width * 0.8, 0] : drawerPosition === 'right' ? [width * 0.8, 0] : [0, 0],
|
|
47
|
-
});
|
|
48
|
-
const animatedTranslateY = animatedValue.interpolate({
|
|
49
|
-
inputRange: [0, 1],
|
|
50
|
-
outputRange: [height, height * 0.5],
|
|
51
|
-
});
|
|
52
|
-
const animatedOpacity = animatedValue.interpolate({
|
|
53
|
-
inputRange: [0, 1],
|
|
54
|
-
outputRange: [0, 0.5],
|
|
55
|
-
});
|
|
56
|
-
const animatedStyle = {
|
|
57
|
-
transform: drawerPosition === 'left' || drawerPosition === 'right' ? [{ translateX: animatedTranslateX }] : [{ translateY: animatedTranslateY }],
|
|
58
|
-
};
|
|
59
|
-
return {
|
|
60
|
-
props: {
|
|
61
|
-
...rest,
|
|
62
|
-
onClose,
|
|
63
|
-
onScrimClick,
|
|
64
|
-
animationConfig: {
|
|
65
|
-
animatedOpacity,
|
|
66
|
-
animatedStyle,
|
|
67
|
-
},
|
|
68
|
-
drawerPosition: drawerPosition ?? 'left',
|
|
69
|
-
children,
|
|
70
|
-
showHandle,
|
|
71
|
-
open: internalOpen,
|
|
72
|
-
},
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
exports.useDrawer = useDrawer;
|
|
76
|
-
//# sourceMappingURL=useDrawer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"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"}
|