@fluentui-react-native/drawer 0.4.5 → 0.4.6
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/CHANGELOG.json +36 -1
- package/CHANGELOG.md +10 -2
- package/eslint.config.js +3 -0
- package/lib/Drawer.js +14 -31
- package/lib/Drawer.js.map +1 -1
- package/lib/Drawer.styling.js +7 -7
- package/lib/Drawer.styling.js.map +1 -1
- package/lib/Drawer.types.js +1 -1
- package/lib/Drawer.types.js.map +1 -1
- package/lib/DrawerTokens.js +33 -35
- package/lib/DrawerTokens.js.map +1 -1
- package/lib/__tests__/Drawer.test.js +3 -3
- package/lib/__tests__/Drawer.test.js.map +1 -1
- package/lib/useDrawer.js +31 -44
- package/lib/useDrawer.js.map +1 -1
- package/lib-commonjs/Drawer.js +19 -36
- package/lib-commonjs/Drawer.js.map +1 -1
- package/lib-commonjs/Drawer.styling.js +9 -9
- package/lib-commonjs/Drawer.styling.js.map +1 -1
- package/lib-commonjs/DrawerTokens.js +34 -36
- package/lib-commonjs/DrawerTokens.js.map +1 -1
- package/lib-commonjs/__tests__/Drawer.test.js +6 -6
- package/lib-commonjs/__tests__/Drawer.test.js.map +1 -1
- package/lib-commonjs/useDrawer.js +33 -46
- package/lib-commonjs/useDrawer.js.map +1 -1
- package/package.json +19 -6
- package/.eslintrc.js +0 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,42 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/drawer",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 10 Jul 2025 20:30:41 GMT",
|
|
6
|
+
"version": "0.4.6",
|
|
7
|
+
"tag": "@fluentui-react-native/drawer_v0.4.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "jasonmo@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/drawer",
|
|
13
|
+
"commit": "479b93cea460a26df70c55b5d3335927ed374713",
|
|
14
|
+
"comment": "update builds to use node16 settings and modern export maps"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"none": [
|
|
18
|
+
{
|
|
19
|
+
"author": "jasonmo@microsoft.com",
|
|
20
|
+
"package": "@fluentui-react-native/drawer",
|
|
21
|
+
"commit": "54087dca787180bbf34630470cd0d06e88366b30",
|
|
22
|
+
"comment": "update eslint to 9.x and use new flat config format with security rules"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "ruaraki@microsoft.com",
|
|
26
|
+
"package": "@fluentui-react-native/drawer",
|
|
27
|
+
"commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
|
|
28
|
+
"comment": "Run bump-versions"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
32
|
+
"package": "@fluentui-react-native/drawer",
|
|
33
|
+
"commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
|
|
34
|
+
"comment": "Fixed `align-deps` warnings"
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"date": "Thu, 10 Jul 2025 19:20:26 GMT",
|
|
6
41
|
"version": "0.4.5",
|
|
7
42
|
"tag": "@fluentui-react-native/drawer_v0.4.5",
|
|
8
43
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/drawer
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on Thu,
|
|
3
|
+
<!-- This log was last generated on Thu, 10 Jul 2025 20:30:41 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.4.6
|
|
8
|
+
|
|
9
|
+
Thu, 10 Jul 2025 20:30:41 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.4.5
|
|
8
16
|
|
|
9
|
-
Thu,
|
|
17
|
+
Thu, 10 Jul 2025 19:20:26 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/eslint.config.js
ADDED
package/lib/Drawer.js
CHANGED
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
/** @jsxRuntime classic */
|
|
24
2
|
/** @jsx withSlots */
|
|
25
3
|
import { Animated, Modal, TouchableWithoutFeedback, View } from 'react-native';
|
|
@@ -27,26 +5,31 @@ import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework
|
|
|
27
5
|
import { stylingSettings } from './Drawer.styling';
|
|
28
6
|
import { DrawerName } from './Drawer.types';
|
|
29
7
|
import { useDrawer } from './useDrawer';
|
|
30
|
-
export
|
|
8
|
+
export const drawerLookup = (layer, userProps) => {
|
|
31
9
|
return userProps[layer] || layer === userProps['drawerPosition'];
|
|
32
10
|
};
|
|
33
|
-
export
|
|
11
|
+
export const Drawer = compose({
|
|
12
|
+
displayName: DrawerName,
|
|
13
|
+
...stylingSettings,
|
|
14
|
+
slots: {
|
|
34
15
|
modal: Modal,
|
|
35
16
|
scrim: TouchableWithoutFeedback,
|
|
36
17
|
scrimContent: Animated.View,
|
|
37
18
|
content: Animated.View,
|
|
38
19
|
handle: View,
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
},
|
|
21
|
+
useRender: (userProps, useSlots) => {
|
|
22
|
+
const drawerProps = useDrawer(userProps).props;
|
|
23
|
+
const Slots = useSlots(userProps, (layer) => drawerLookup(layer, drawerProps));
|
|
24
|
+
return (final, children) => {
|
|
25
|
+
const { open, onClose, onScrimClick, animationConfig, drawerPosition, showHandle, ...rest } = mergeProps(drawerProps, final);
|
|
26
|
+
return (withSlots(Slots.modal, { ...rest, visible: open, onRequestClose: onClose, supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'], animationType: "none", transparent: true },
|
|
45
27
|
withSlots(Slots.scrim, { onPress: onScrimClick },
|
|
46
28
|
withSlots(Slots.scrimContent, { style: [{ opacity: animationConfig.animatedOpacity }] })),
|
|
47
29
|
withSlots(Slots.content, { style: animationConfig.animatedStyle },
|
|
48
30
|
drawerPosition === 'bottom' && showHandle && withSlots(Slots.handle, null),
|
|
49
31
|
children)));
|
|
50
32
|
};
|
|
51
|
-
}
|
|
33
|
+
},
|
|
34
|
+
});
|
|
52
35
|
//# sourceMappingURL=Drawer.js.map
|
package/lib/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,SAAsB,EAAW,EAAE;IAC7E,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,gBAAgB,CAAC,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAa;IACxC,WAAW,EAAE,UAAU;IACvB,GAAG,eAAe;IAClB,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,wBAAwB;QAC/B,YAAY,EAAE,QAAQ,CAAC,IAAI;QAC3B,OAAO,EAAE,QAAQ,CAAC,IAAI;QACtB,MAAM,EAAE,IAAI;KACb;IACD,SAAS,EAAE,CAAC,SAAsB,EAAE,QAA8B,EAAE,EAAE;QACpE,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;QAC/C,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;QAC/E,OAAO,CAAC,KAAkB,EAAE,QAAyB,EAAE,EAAE;YACvD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YAC7H,OAAO,CACL,UAAC,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;gBAEX,UAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,YAAY;oBAChC,UAAC,KAAK,CAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,eAAe,EAAE,CAAC,GAAI,CACjE;gBACd,UAAC,KAAK,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,aAAa;oBAChD,cAAc,KAAK,QAAQ,IAAI,UAAU,IAAI,UAAC,KAAK,CAAC,MAAM,OAAG;oBAC7D,QAAQ,CACK,CACJ,CACf,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
package/lib/Drawer.styling.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { buildProps } from '@fluentui-react-native/framework';
|
|
2
2
|
import { DrawerName } from './Drawer.types';
|
|
3
3
|
import { defaultDrawerTokens } from './DrawerTokens';
|
|
4
|
-
export
|
|
4
|
+
export const stylingSettings = {
|
|
5
5
|
tokens: [defaultDrawerTokens, DrawerName],
|
|
6
6
|
tokensThatAreAlsoProps: 'all',
|
|
7
7
|
states: ['left', 'right', 'bottom'],
|
|
8
8
|
slotProps: {
|
|
9
|
-
scrimContent: buildProps(
|
|
9
|
+
scrimContent: buildProps((tokens, _theme) => ({
|
|
10
10
|
style: {
|
|
11
11
|
position: 'absolute',
|
|
12
12
|
top: 0,
|
|
@@ -16,8 +16,8 @@ export var stylingSettings = {
|
|
|
16
16
|
backgroundColor: tokens.scrimColor,
|
|
17
17
|
opacity: tokens.scrimOpacity,
|
|
18
18
|
},
|
|
19
|
-
})
|
|
20
|
-
content: buildProps(
|
|
19
|
+
}), ['scrimColor']),
|
|
20
|
+
content: buildProps((tokens, _theme) => ({
|
|
21
21
|
style: {
|
|
22
22
|
position: 'absolute',
|
|
23
23
|
height: tokens.height,
|
|
@@ -31,8 +31,8 @@ export var stylingSettings = {
|
|
|
31
31
|
top: tokens.topPosition,
|
|
32
32
|
backgroundColor: tokens.drawerBackgroundColor,
|
|
33
33
|
},
|
|
34
|
-
})
|
|
35
|
-
handle: buildProps(
|
|
34
|
+
}), ['drawerBackgroundColor', 'drawerElevation', 'height', 'width']),
|
|
35
|
+
handle: buildProps((tokens, _theme) => ({
|
|
36
36
|
style: {
|
|
37
37
|
width: tokens.handleWidth,
|
|
38
38
|
height: tokens.handleHeight,
|
|
@@ -41,7 +41,7 @@ export var stylingSettings = {
|
|
|
41
41
|
alignSelf: tokens.handleAlignment,
|
|
42
42
|
marginTop: tokens.handleMarginTop,
|
|
43
43
|
},
|
|
44
|
-
})
|
|
44
|
+
}), ['handleWidth', 'handleHeight', 'handleCornerRadius', 'handleBackgroundColor', 'handleAlignment', 'handleMarginTop']),
|
|
45
45
|
},
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=Drawer.styling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.styling.js","sourceRoot":"","sources":["../src/Drawer.styling.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Drawer.styling.js","sourceRoot":"","sources":["../src/Drawer.styling.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,eAAe,GAAkE;IAC5F,MAAM,EAAE,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACzC,sBAAsB,EAAE,KAAK;IAC7B,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC;IACnC,SAAS,EAAE;QACT,YAAY,EAAE,UAAU,CACtB,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,UAAU,CACjB,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,UAAU,CAChB,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"}
|
package/lib/Drawer.types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const DrawerName = 'Drawer';
|
|
2
2
|
//# sourceMappingURL=Drawer.types.js.map
|
package/lib/Drawer.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.types.js","sourceRoot":"","sources":["../src/Drawer.types.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Drawer.types.js","sourceRoot":"","sources":["../src/Drawer.types.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC"}
|
package/lib/DrawerTokens.js
CHANGED
|
@@ -1,37 +1,35 @@
|
|
|
1
1
|
import { globalTokens } from '@fluentui-react-native/theme-tokens';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
});
|
|
36
|
-
};
|
|
2
|
+
export const defaultDrawerTokens = (t) => ({
|
|
3
|
+
scrimColor: '#00000080',
|
|
4
|
+
drawerBackgroundColor: t.colors.neutralBackground2,
|
|
5
|
+
handleBackgroundColor: t.colors.neutralStroke1,
|
|
6
|
+
handleWidth: globalTokens.size360,
|
|
7
|
+
handleHeight: globalTokens.size40,
|
|
8
|
+
handleCornerRadius: globalTokens.size20,
|
|
9
|
+
handleAlignment: 'center',
|
|
10
|
+
handleMarginTop: globalTokens.size80,
|
|
11
|
+
handleMarginBottom: globalTokens.sizeNone,
|
|
12
|
+
handleMarginEnd: globalTokens.sizeNone,
|
|
13
|
+
handleMarginStart: globalTokens.sizeNone,
|
|
14
|
+
drawerElevation: globalTokens.size100,
|
|
15
|
+
topPosition: 0,
|
|
16
|
+
left: {
|
|
17
|
+
height: '100%',
|
|
18
|
+
width: '80%',
|
|
19
|
+
leftPosition: 0,
|
|
20
|
+
drawerCornerRadius: 0,
|
|
21
|
+
},
|
|
22
|
+
right: {
|
|
23
|
+
height: '100%',
|
|
24
|
+
width: '80%',
|
|
25
|
+
rightPosition: 0,
|
|
26
|
+
drawerCornerRadius: 0,
|
|
27
|
+
},
|
|
28
|
+
bottom: {
|
|
29
|
+
bottomPosition: 0,
|
|
30
|
+
width: '100%',
|
|
31
|
+
drawerCornerRadius: globalTokens.corner.radius120,
|
|
32
|
+
height: '50%',
|
|
33
|
+
},
|
|
34
|
+
});
|
|
37
35
|
//# sourceMappingURL=DrawerTokens.js.map
|
package/lib/DrawerTokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerTokens.js","sourceRoot":"","sources":["../src/DrawerTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAKnE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"DrawerTokens.js","sourceRoot":"","sources":["../src/DrawerTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAKnE,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,CAAQ,EAAE,EAAE,CAClF,CAAC;IACC,UAAU,EAAE,WAAW;IACvB,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,kBAAkB;IAClD,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;IAC9C,WAAW,EAAE,YAAY,CAAC,OAAO;IACjC,YAAY,EAAE,YAAY,CAAC,MAAM;IACjC,kBAAkB,EAAE,YAAY,CAAC,MAAM;IACvC,eAAe,EAAE,QAAQ;IACzB,eAAe,EAAE,YAAY,CAAC,MAAM;IACpC,kBAAkB,EAAE,YAAY,CAAC,QAAQ;IACzC,eAAe,EAAE,YAAY,CAAC,QAAQ;IACtC,iBAAiB,EAAE,YAAY,CAAC,QAAQ;IACxC,eAAe,EAAE,YAAY,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,YAAY,CAAC,MAAM,CAAC,SAAS;QACjD,MAAM,EAAE,KAAK;KACd;CACe,CAAA,CAAC"}
|
|
@@ -5,9 +5,9 @@ import * as renderer from 'react-test-renderer';
|
|
|
5
5
|
// mocks out setTimeout and other timer functions with mock functions , test will fail without this as we're using Animated API
|
|
6
6
|
jest.useFakeTimers();
|
|
7
7
|
// Disable Drawer test, as it's still failing despite the line above
|
|
8
|
-
describe('Drawer component tests',
|
|
9
|
-
it('Drawer default',
|
|
10
|
-
|
|
8
|
+
describe('Drawer component tests', () => {
|
|
9
|
+
it('Drawer default', () => {
|
|
10
|
+
const tree = renderer
|
|
11
11
|
.create(
|
|
12
12
|
// <Drawer open={false} drawerPosition="left">
|
|
13
13
|
React.createElement(Text, null, "Hello"))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../src/__tests__/Drawer.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,sCAAsC;AAEtC,+HAA+H;AAC/H,IAAI,CAAC,aAAa,EAAE,CAAC;AAErB,oEAAoE;AACpE,QAAQ,CAAC,wBAAwB,EAAE;
|
|
1
|
+
{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../src/__tests__/Drawer.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,sCAAsC;AAEtC,+HAA+H;AAC/H,IAAI,CAAC,aAAa,EAAE,CAAC;AAErB,oEAAoE;AACpE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;QACxB,MAAM,IAAI,GAAG,QAAQ;aAClB,MAAM;QACL,8CAA8C;QAC9C,oBAAC,IAAI,gBAAa,CAEnB;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/lib/useDrawer.js
CHANGED
|
@@ -1,34 +1,12 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
import { useRef, useEffect, useState, useCallback } from 'react';
|
|
24
2
|
import { Animated, Dimensions } from 'react-native';
|
|
25
|
-
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
useEffect(
|
|
3
|
+
const { height, width } = Dimensions.get('window');
|
|
4
|
+
export const useDrawer = (props) => {
|
|
5
|
+
const { onBlur, onFocus, accessibilityLabel, open, drawerPosition = 'left', showHandle = true, children, ...rest } = props;
|
|
6
|
+
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
7
|
+
const [internalOpen, setInternalOpen] = useState(open);
|
|
8
|
+
const [isFirstOpen, setIsFirstOpen] = useState(true);
|
|
9
|
+
useEffect(() => {
|
|
32
10
|
if (open) {
|
|
33
11
|
setInternalOpen(true);
|
|
34
12
|
Animated.timing(animatedValue, {
|
|
@@ -48,38 +26,47 @@ export var useDrawer = function (props) {
|
|
|
48
26
|
duration: 300,
|
|
49
27
|
useNativeDriver: true,
|
|
50
28
|
}),
|
|
51
|
-
]).start(
|
|
29
|
+
]).start(() => {
|
|
52
30
|
setInternalOpen(false);
|
|
53
31
|
});
|
|
54
32
|
}
|
|
55
33
|
}
|
|
56
34
|
}, [animatedValue, open]);
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}, [props
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, [props
|
|
63
|
-
|
|
35
|
+
const onClose = useCallback((e) => {
|
|
36
|
+
props?.onClose && props.onClose(e);
|
|
37
|
+
}, [props?.onClose]);
|
|
38
|
+
const onScrimClick = useCallback((e) => {
|
|
39
|
+
props?.onScrimClick && props.onScrimClick(e);
|
|
40
|
+
}, [props?.onScrimClick]);
|
|
41
|
+
const animatedTranslateX = animatedValue.interpolate({
|
|
64
42
|
inputRange: [0, 1],
|
|
65
43
|
outputRange: drawerPosition === 'left' ? [-width * 0.8, 0] : drawerPosition === 'right' ? [width * 0.8, 0] : [0, 0],
|
|
66
44
|
});
|
|
67
|
-
|
|
45
|
+
const animatedTranslateY = animatedValue.interpolate({
|
|
68
46
|
inputRange: [0, 1],
|
|
69
47
|
outputRange: [height, height * 0.5],
|
|
70
48
|
});
|
|
71
|
-
|
|
49
|
+
const animatedOpacity = animatedValue.interpolate({
|
|
72
50
|
inputRange: [0, 1],
|
|
73
51
|
outputRange: [0, 0.5],
|
|
74
52
|
});
|
|
75
|
-
|
|
53
|
+
const animatedStyle = {
|
|
76
54
|
transform: drawerPosition === 'left' || drawerPosition === 'right' ? [{ translateX: animatedTranslateX }] : [{ translateY: animatedTranslateY }],
|
|
77
55
|
};
|
|
78
56
|
return {
|
|
79
|
-
props:
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
57
|
+
props: {
|
|
58
|
+
...rest,
|
|
59
|
+
onClose,
|
|
60
|
+
onScrimClick,
|
|
61
|
+
animationConfig: {
|
|
62
|
+
animatedOpacity,
|
|
63
|
+
animatedStyle,
|
|
64
|
+
},
|
|
65
|
+
drawerPosition: drawerPosition ?? 'left',
|
|
66
|
+
children,
|
|
67
|
+
showHandle,
|
|
68
|
+
open: internalOpen,
|
|
69
|
+
},
|
|
83
70
|
};
|
|
84
71
|
};
|
|
85
72
|
//# sourceMappingURL=useDrawer.js.map
|
package/lib/useDrawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"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"}
|
package/lib-commonjs/Drawer.js
CHANGED
|
@@ -1,56 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
3
|
exports.Drawer = exports.drawerLookup = void 0;
|
|
26
4
|
/** @jsxRuntime classic */
|
|
27
5
|
/** @jsx withSlots */
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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) => {
|
|
34
12
|
return userProps[layer] || layer === userProps['drawerPosition'];
|
|
35
13
|
};
|
|
36
14
|
exports.drawerLookup = drawerLookup;
|
|
37
|
-
exports.Drawer = (0, framework_1.compose)(
|
|
15
|
+
exports.Drawer = (0, framework_1.compose)({
|
|
16
|
+
displayName: Drawer_types_1.DrawerName,
|
|
17
|
+
...Drawer_styling_1.stylingSettings,
|
|
18
|
+
slots: {
|
|
38
19
|
modal: react_native_1.Modal,
|
|
39
20
|
scrim: react_native_1.TouchableWithoutFeedback,
|
|
40
21
|
scrimContent: react_native_1.Animated.View,
|
|
41
22
|
content: react_native_1.Animated.View,
|
|
42
23
|
handle: react_native_1.View,
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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 ((0, framework_1.withSlots)(Slots.modal, { ...rest, visible: open, onRequestClose: onClose, supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'], animationType: "none", transparent: true },
|
|
49
31
|
(0, framework_1.withSlots)(Slots.scrim, { onPress: onScrimClick },
|
|
50
32
|
(0, framework_1.withSlots)(Slots.scrimContent, { style: [{ opacity: animationConfig.animatedOpacity }] })),
|
|
51
33
|
(0, framework_1.withSlots)(Slots.content, { style: animationConfig.animatedStyle },
|
|
52
34
|
drawerPosition === 'bottom' && showHandle && (0, framework_1.withSlots)(Slots.handle, null),
|
|
53
35
|
children)));
|
|
54
36
|
};
|
|
55
|
-
}
|
|
37
|
+
},
|
|
38
|
+
});
|
|
56
39
|
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":";;;AAAA,0BAA0B;AAC1B,qBAAqB;AACrB,+CAA+E;AAG/E,gEAAkF;AAElF,qDAAmD;AAEnD,iDAA4C;AAC5C,2CAAwC;AAEjC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,SAAsB,EAAW,EAAE;IAC7E,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,SAAS,CAAC,gBAAgB,CAAC,CAAC;AACnE,CAAC,CAAC;AAFW,QAAA,YAAY,gBAEvB;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;QACpE,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,oBAAY,EAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;QAC/E,OAAO,CAAC,KAAkB,EAAE,QAAyB,EAAE,EAAE;YACvD,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,2BAAC,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;gBAEX,2BAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,YAAY;oBAChC,2BAAC,KAAK,CAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,eAAe,CAAC,eAAe,EAAE,CAAC,GAAI,CACjE;gBACd,2BAAC,KAAK,CAAC,OAAO,IAAC,KAAK,EAAE,eAAe,CAAC,aAAa;oBAChD,cAAc,KAAK,QAAQ,IAAI,UAAU,IAAI,2BAAC,KAAK,CAAC,MAAM,OAAG;oBAC7D,QAAQ,CACK,CACJ,CACf,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.stylingSettings = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const framework_1 = require("@fluentui-react-native/framework");
|
|
5
|
+
const Drawer_types_1 = require("./Drawer.types");
|
|
6
|
+
const DrawerTokens_1 = require("./DrawerTokens");
|
|
7
7
|
exports.stylingSettings = {
|
|
8
8
|
tokens: [DrawerTokens_1.defaultDrawerTokens, Drawer_types_1.DrawerName],
|
|
9
9
|
tokensThatAreAlsoProps: 'all',
|
|
10
10
|
states: ['left', 'right', 'bottom'],
|
|
11
11
|
slotProps: {
|
|
12
|
-
scrimContent: (0, framework_1.buildProps)(
|
|
12
|
+
scrimContent: (0, framework_1.buildProps)((tokens, _theme) => ({
|
|
13
13
|
style: {
|
|
14
14
|
position: 'absolute',
|
|
15
15
|
top: 0,
|
|
@@ -19,8 +19,8 @@ exports.stylingSettings = {
|
|
|
19
19
|
backgroundColor: tokens.scrimColor,
|
|
20
20
|
opacity: tokens.scrimOpacity,
|
|
21
21
|
},
|
|
22
|
-
})
|
|
23
|
-
content: (0, framework_1.buildProps)(
|
|
22
|
+
}), ['scrimColor']),
|
|
23
|
+
content: (0, framework_1.buildProps)((tokens, _theme) => ({
|
|
24
24
|
style: {
|
|
25
25
|
position: 'absolute',
|
|
26
26
|
height: tokens.height,
|
|
@@ -34,8 +34,8 @@ exports.stylingSettings = {
|
|
|
34
34
|
top: tokens.topPosition,
|
|
35
35
|
backgroundColor: tokens.drawerBackgroundColor,
|
|
36
36
|
},
|
|
37
|
-
})
|
|
38
|
-
handle: (0, framework_1.buildProps)(
|
|
37
|
+
}), ['drawerBackgroundColor', 'drawerElevation', 'height', 'width']),
|
|
38
|
+
handle: (0, framework_1.buildProps)((tokens, _theme) => ({
|
|
39
39
|
style: {
|
|
40
40
|
width: tokens.handleWidth,
|
|
41
41
|
height: tokens.handleHeight,
|
|
@@ -44,7 +44,7 @@ exports.stylingSettings = {
|
|
|
44
44
|
alignSelf: tokens.handleAlignment,
|
|
45
45
|
marginTop: tokens.handleMarginTop,
|
|
46
46
|
},
|
|
47
|
-
})
|
|
47
|
+
}), ['handleWidth', 'handleHeight', 'handleCornerRadius', 'handleBackgroundColor', 'handleAlignment', 'handleMarginTop']),
|
|
48
48
|
},
|
|
49
49
|
};
|
|
50
50
|
//# sourceMappingURL=Drawer.styling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.styling.js","sourceRoot":"","sources":["../src/Drawer.styling.ts"],"names":[],"mappings":";;;AACA,
|
|
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,41 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.defaultDrawerTokens = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
};
|
|
4
|
+
const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
|
|
5
|
+
const defaultDrawerTokens = (t) => ({
|
|
6
|
+
scrimColor: '#00000080',
|
|
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
|
+
});
|
|
40
38
|
exports.defaultDrawerTokens = defaultDrawerTokens;
|
|
41
39
|
//# sourceMappingURL=DrawerTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerTokens.js","sourceRoot":"","sources":["../src/DrawerTokens.ts"],"names":[],"mappings":";;;AACA,
|
|
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;IACvB,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;CACe,CAAA,CAAC;AAjCR,QAAA,mBAAmB,uBAiCX"}
|
|
@@ -23,16 +23,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
const React = __importStar(require("react"));
|
|
27
|
+
const react_native_1 = require("react-native");
|
|
28
|
+
const renderer = __importStar(require("react-test-renderer"));
|
|
29
29
|
// import { Drawer } from '../Drawer';
|
|
30
30
|
// mocks out setTimeout and other timer functions with mock functions , test will fail without this as we're using Animated API
|
|
31
31
|
jest.useFakeTimers();
|
|
32
32
|
// Disable Drawer test, as it's still failing despite the line above
|
|
33
|
-
describe('Drawer component tests',
|
|
34
|
-
it('Drawer default',
|
|
35
|
-
|
|
33
|
+
describe('Drawer component tests', () => {
|
|
34
|
+
it('Drawer default', () => {
|
|
35
|
+
const tree = renderer
|
|
36
36
|
.create(
|
|
37
37
|
// <Drawer open={false} drawerPosition="left">
|
|
38
38
|
React.createElement(react_native_1.Text, null, "Hello"))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../src/__tests__/Drawer.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Drawer.test.js","sourceRoot":"","sources":["../../src/__tests__/Drawer.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,+CAAoC;AAEpC,8DAAgD;AAEhD,sCAAsC;AAEtC,+HAA+H;AAC/H,IAAI,CAAC,aAAa,EAAE,CAAC;AAErB,oEAAoE;AACpE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;QACxB,MAAM,IAAI,GAAG,QAAQ;aAClB,MAAM;QACL,8CAA8C;QAC9C,oBAAC,mBAAI,gBAAa,CAEnB;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,37 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
-
var t = {};
|
|
15
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
-
t[p] = s[p];
|
|
17
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
-
t[p[i]] = s[p[i]];
|
|
21
|
-
}
|
|
22
|
-
return t;
|
|
23
|
-
};
|
|
24
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
3
|
exports.useDrawer = void 0;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
(0, react_1.useEffect)(
|
|
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)(() => {
|
|
35
13
|
if (open) {
|
|
36
14
|
setInternalOpen(true);
|
|
37
15
|
react_native_1.Animated.timing(animatedValue, {
|
|
@@ -51,38 +29,47 @@ var useDrawer = function (props) {
|
|
|
51
29
|
duration: 300,
|
|
52
30
|
useNativeDriver: true,
|
|
53
31
|
}),
|
|
54
|
-
]).start(
|
|
32
|
+
]).start(() => {
|
|
55
33
|
setInternalOpen(false);
|
|
56
34
|
});
|
|
57
35
|
}
|
|
58
36
|
}
|
|
59
37
|
}, [animatedValue, open]);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, [props
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}, [props
|
|
66
|
-
|
|
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({
|
|
67
45
|
inputRange: [0, 1],
|
|
68
46
|
outputRange: drawerPosition === 'left' ? [-width * 0.8, 0] : drawerPosition === 'right' ? [width * 0.8, 0] : [0, 0],
|
|
69
47
|
});
|
|
70
|
-
|
|
48
|
+
const animatedTranslateY = animatedValue.interpolate({
|
|
71
49
|
inputRange: [0, 1],
|
|
72
50
|
outputRange: [height, height * 0.5],
|
|
73
51
|
});
|
|
74
|
-
|
|
52
|
+
const animatedOpacity = animatedValue.interpolate({
|
|
75
53
|
inputRange: [0, 1],
|
|
76
54
|
outputRange: [0, 0.5],
|
|
77
55
|
});
|
|
78
|
-
|
|
56
|
+
const animatedStyle = {
|
|
79
57
|
transform: drawerPosition === 'left' || drawerPosition === 'right' ? [{ translateX: animatedTranslateX }] : [{ translateY: animatedTranslateY }],
|
|
80
58
|
};
|
|
81
59
|
return {
|
|
82
|
-
props:
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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
|
+
},
|
|
86
73
|
};
|
|
87
74
|
};
|
|
88
75
|
exports.useDrawer = useDrawer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDrawer.js","sourceRoot":"","sources":["../src/useDrawer.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/drawer",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6",
|
|
4
4
|
"description": "A cross-platform Drawer component using the Fluent Design System",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./lib/index.js",
|
|
10
|
+
"require": "./lib-commonjs/index.js",
|
|
11
|
+
"types": "./lib/index.d.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
7
14
|
"typings": "lib/index.d.ts",
|
|
8
15
|
"scripts": {
|
|
9
16
|
"build": "fluentui-scripts build",
|
|
@@ -22,10 +29,10 @@
|
|
|
22
29
|
"directory": "packages/components/Drawer"
|
|
23
30
|
},
|
|
24
31
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/framework": "0.14.
|
|
26
|
-
"@fluentui-react-native/interactive-hooks": "0.27.
|
|
27
|
-
"@fluentui-react-native/theme-tokens": "0.27.
|
|
28
|
-
"@fluentui-react-native/use-styling": "0.13.
|
|
32
|
+
"@fluentui-react-native/framework": "0.14.4",
|
|
33
|
+
"@fluentui-react-native/interactive-hooks": "0.27.6",
|
|
34
|
+
"@fluentui-react-native/theme-tokens": "0.27.3",
|
|
35
|
+
"@fluentui-react-native/use-styling": "0.13.4"
|
|
29
36
|
},
|
|
30
37
|
"devDependencies": {
|
|
31
38
|
"@babel/core": "^7.20.0",
|
|
@@ -33,8 +40,11 @@
|
|
|
33
40
|
"@fluentui-react-native/scripts": "0.1.1",
|
|
34
41
|
"@react-native/babel-preset": "^0.74.0",
|
|
35
42
|
"@react-native/metro-config": "^0.74.0",
|
|
43
|
+
"@types/react": "~18.2.0",
|
|
36
44
|
"react": "18.2.0",
|
|
37
|
-
"react-native": "^0.74.0"
|
|
45
|
+
"react-native": "^0.74.0",
|
|
46
|
+
"react-native-macos": "^0.74.0",
|
|
47
|
+
"react-native-windows": "^0.74.0"
|
|
38
48
|
},
|
|
39
49
|
"peerDependencies": {
|
|
40
50
|
"@office-iss/react-native-win32": "^0.74.0",
|
|
@@ -60,9 +70,12 @@
|
|
|
60
70
|
]
|
|
61
71
|
},
|
|
62
72
|
"capabilities": [
|
|
73
|
+
"babel-preset-react-native",
|
|
63
74
|
"core",
|
|
64
75
|
"core-android",
|
|
65
76
|
"core-ios",
|
|
77
|
+
"core-macos",
|
|
78
|
+
"core-windows",
|
|
66
79
|
"react"
|
|
67
80
|
]
|
|
68
81
|
}
|
package/.eslintrc.js
DELETED