@fluentui-react-native/experimental-shadow 0.6.5 → 0.6.7
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 +42 -1
- package/CHANGELOG.md +10 -2
- package/eslint.config.js +3 -0
- package/lib/Shadow.js +59 -44
- package/lib/Shadow.js.map +1 -1
- package/lib/Shadow.types.js +1 -1
- package/lib/Shadow.types.js.map +1 -1
- package/lib/__tests__/Shadow.test.js +45 -45
- package/lib/__tests__/Shadow.test.js.map +1 -1
- package/lib/shadowStyle.js +10 -10
- package/lib/shadowStyle.js.map +1 -1
- package/lib-commonjs/Shadow.js +65 -50
- package/lib-commonjs/Shadow.js.map +1 -1
- package/lib-commonjs/__tests__/Shadow.test.js +51 -51
- package/lib-commonjs/__tests__/Shadow.test.js.map +1 -1
- package/lib-commonjs/shadowStyle.js +11 -11
- package/lib-commonjs/shadowStyle.js.map +1 -1
- package/package.json +17 -5
- package/.eslintrc.js +0 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,48 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 11 Jul 2025 19:50:54 GMT",
|
|
6
|
+
"version": "0.6.7",
|
|
7
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.6.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "jasonmo@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
|
+
"commit": "479b93cea460a26df70c55b5d3335927ed374713",
|
|
14
|
+
"comment": "update builds to use node16 settings and modern export maps"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"none": [
|
|
18
|
+
{
|
|
19
|
+
"author": "4123478+tido64@users.noreply.github.com",
|
|
20
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
21
|
+
"commit": "79bb06f6bbfd0a36f9d2ef371f4857be9660f027",
|
|
22
|
+
"comment": "Fixed `align-deps` warnings"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "ruaraki@microsoft.com",
|
|
26
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
27
|
+
"commit": "a245202877ef7f2be9ab5f0e1356b2270957e693",
|
|
28
|
+
"comment": "Run bump-versions"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "jasonmo@microsoft.com",
|
|
32
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
33
|
+
"commit": "54087dca787180bbf34630470cd0d06e88366b30",
|
|
34
|
+
"comment": "update eslint to 9.x and use new flat config format with security rules"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "sanajmi@microsoft.com",
|
|
38
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
39
|
+
"commit": "405ca368dc3f2963bfc252a1952b1e14ff503499",
|
|
40
|
+
"comment": "fix: run `beachball sync` to sync package versions with NPM"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Thu, 10 Jul 2025 19:20:23 GMT",
|
|
6
47
|
"version": "0.6.5",
|
|
7
48
|
"tag": "@fluentui-react-native/experimental-shadow_v0.6.5",
|
|
8
49
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-shadow
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Fri, 11 Jul 2025 19:50:54 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.6.7
|
|
8
|
+
|
|
9
|
+
Fri, 11 Jul 2025 19:50:54 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- update builds to use node16 settings and modern export maps (jasonmo@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.6.5
|
|
8
16
|
|
|
9
|
-
Thu,
|
|
17
|
+
Thu, 10 Jul 2025 19:20:23 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/eslint.config.js
ADDED
package/lib/Shadow.js
CHANGED
|
@@ -1,76 +1,91 @@
|
|
|
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 * as React from 'react';
|
|
24
2
|
import { View } from 'react-native';
|
|
25
3
|
import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
|
|
26
4
|
import { memoize } from '@fluentui-react-native/framework';
|
|
27
5
|
import { shadowName } from './Shadow.types';
|
|
28
6
|
import { getShadowTokenStyleSet } from './shadowStyle';
|
|
29
|
-
export
|
|
30
|
-
return
|
|
7
|
+
export const Shadow = stagedComponent((props) => {
|
|
8
|
+
return (final, children) => {
|
|
31
9
|
if (!props.shadowToken) {
|
|
32
10
|
return React.createElement(React.Fragment, null, children);
|
|
33
11
|
}
|
|
34
|
-
|
|
35
|
-
|
|
12
|
+
const childrenArray = React.Children.toArray(children);
|
|
13
|
+
const child = childrenArray[0];
|
|
36
14
|
if (__DEV__) {
|
|
37
15
|
if (childrenArray.length !== 1) {
|
|
38
16
|
console.warn('Shadow must only have one child');
|
|
39
17
|
}
|
|
40
18
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
return React.createElement(View,
|
|
19
|
+
const { style: childStyle, ...restOfChildProps } = child.props;
|
|
20
|
+
const shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
|
|
21
|
+
const innerShadowViewProps = mergeProps(restOfChildProps, shadowViewStyleProps.inner);
|
|
22
|
+
const outerShadowViewProps = mergeProps(final, shadowViewStyleProps.outer);
|
|
23
|
+
const childWithInnerShadow = React.cloneElement(child, innerShadowViewProps);
|
|
24
|
+
return React.createElement(View, { ...outerShadowViewProps }, childWithInnerShadow);
|
|
47
25
|
};
|
|
48
26
|
});
|
|
49
|
-
|
|
50
|
-
function getStylePropsForShadowViewsWorker(childStyleProps, shadowToken) {
|
|
51
|
-
|
|
52
|
-
var shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
|
|
27
|
+
const getStylePropsForShadowViews = memoize(getStylePropsForShadowViewsWorker);
|
|
28
|
+
function getStylePropsForShadowViewsWorker(childStyleProps = {}, shadowToken) {
|
|
29
|
+
const shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
|
|
53
30
|
if (__DEV__) {
|
|
54
31
|
if (!childStyleProps.backgroundColor) {
|
|
55
32
|
console.warn('The View that the Shadow is set on must have a background color set');
|
|
56
33
|
}
|
|
57
34
|
}
|
|
58
|
-
|
|
35
|
+
const { borderBottomWidth, borderEndWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderTopWidth, borderWidth, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, alignItems, flexWrap, flexDirection, start, end, left, right, top, bottom, ...restOfChildStyleProps } = childStyleProps;
|
|
59
36
|
// Remove undefined properties, otherwise every prop will be added and be set to
|
|
60
37
|
// undefined, which can cause unexpected behaviour with some of the styles
|
|
61
|
-
|
|
62
|
-
|
|
38
|
+
const innerStyle = removeUndefinedProperties({
|
|
39
|
+
borderBottomWidth,
|
|
40
|
+
borderEndWidth,
|
|
41
|
+
borderLeftWidth,
|
|
42
|
+
borderRightWidth,
|
|
43
|
+
borderStartWidth,
|
|
44
|
+
borderTopWidth,
|
|
45
|
+
borderWidth,
|
|
46
|
+
padding,
|
|
47
|
+
paddingBottom,
|
|
48
|
+
paddingEnd,
|
|
49
|
+
paddingHorizontal,
|
|
50
|
+
paddingLeft,
|
|
51
|
+
paddingRight,
|
|
52
|
+
paddingStart,
|
|
53
|
+
paddingTop,
|
|
54
|
+
paddingVertical,
|
|
55
|
+
alignItems,
|
|
56
|
+
flexWrap,
|
|
57
|
+
flexDirection,
|
|
58
|
+
...shadowTokenStyleSet.key,
|
|
59
|
+
...restOfChildStyleProps,
|
|
60
|
+
});
|
|
61
|
+
const outerStyle = removeUndefinedProperties({
|
|
62
|
+
margin,
|
|
63
|
+
marginBottom,
|
|
64
|
+
marginEnd,
|
|
65
|
+
marginHorizontal,
|
|
66
|
+
marginLeft,
|
|
67
|
+
marginRight,
|
|
68
|
+
marginStart,
|
|
69
|
+
marginTop,
|
|
70
|
+
marginVertical,
|
|
71
|
+
start,
|
|
72
|
+
end,
|
|
73
|
+
left,
|
|
74
|
+
right,
|
|
75
|
+
top,
|
|
76
|
+
bottom,
|
|
77
|
+
...shadowTokenStyleSet.ambient,
|
|
78
|
+
...restOfChildStyleProps,
|
|
79
|
+
});
|
|
63
80
|
return { inner: { style: innerStyle }, outer: { style: outerStyle } };
|
|
64
81
|
}
|
|
65
|
-
function withObjectAssign(object,
|
|
66
|
-
var _b;
|
|
67
|
-
var key = _a[0], value = _a[1];
|
|
82
|
+
function withObjectAssign(object, [key, value]) {
|
|
68
83
|
if (value !== undefined) {
|
|
69
|
-
return Object.assign(object,
|
|
84
|
+
return Object.assign(object, { [key]: value });
|
|
70
85
|
}
|
|
71
86
|
return object;
|
|
72
87
|
}
|
|
73
|
-
|
|
88
|
+
const removeUndefinedProperties = (object) => {
|
|
74
89
|
return Object.entries(object).reduce(withObjectAssign, {});
|
|
75
90
|
};
|
|
76
91
|
Shadow.displayName = shadowName;
|
package/lib/Shadow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"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"}
|
package/lib/Shadow.types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export const shadowName = 'Shadow';
|
|
2
2
|
//# sourceMappingURL=Shadow.types.js.map
|
package/lib/Shadow.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.types.js","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"Shadow.types.js","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC"}
|
|
@@ -4,99 +4,99 @@ import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
|
|
|
4
4
|
import { Pressable } from '@fluentui-react-native/pressable';
|
|
5
5
|
import * as renderer from 'react-test-renderer';
|
|
6
6
|
import { Shadow } from '../Shadow';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
const backgroundColor = { backgroundColor: 'red' };
|
|
8
|
+
const TestShadow = (props) => {
|
|
9
|
+
const theme = useFluentTheme();
|
|
10
10
|
return (React.createElement(Shadow, { shadowToken: theme.shadows[props.depth] },
|
|
11
11
|
React.createElement(View, { style: backgroundColor },
|
|
12
12
|
React.createElement(Text, null, props.displayText))));
|
|
13
13
|
};
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
const TestPressableWithAndWithoutShadow = () => {
|
|
15
|
+
const theme = useFluentTheme();
|
|
16
16
|
return (React.createElement(View, null,
|
|
17
17
|
React.createElement(Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
18
18
|
React.createElement(Pressable, { style: backgroundColor })),
|
|
19
19
|
React.createElement(View, null,
|
|
20
20
|
React.createElement(Pressable, { style: backgroundColor }))));
|
|
21
21
|
};
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
const TestShadowOnChildViewWithProps = (props) => {
|
|
23
|
+
const theme = useFluentTheme();
|
|
24
24
|
return (React.createElement(Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
25
25
|
React.createElement(View, { style: mergeStyles(props.childViewStyleProps, backgroundColor) },
|
|
26
26
|
React.createElement(Text, null, JSON.stringify(props.childViewStyleProps)))));
|
|
27
27
|
};
|
|
28
|
-
describe('Shadow component tests',
|
|
29
|
-
beforeAll(
|
|
30
|
-
jest.mock('react-native/Libraries/Utilities/Platform',
|
|
28
|
+
describe('Shadow component tests', () => {
|
|
29
|
+
beforeAll(() => {
|
|
30
|
+
jest.mock('react-native/Libraries/Utilities/Platform', () => ({
|
|
31
31
|
OS: 'macos',
|
|
32
|
-
select:
|
|
33
|
-
})
|
|
32
|
+
select: () => null,
|
|
33
|
+
}));
|
|
34
34
|
});
|
|
35
|
-
it('Shadow (depth=2)',
|
|
36
|
-
|
|
35
|
+
it('Shadow (depth=2)', () => {
|
|
36
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
|
|
37
37
|
expect(tree).toMatchSnapshot();
|
|
38
38
|
});
|
|
39
|
-
it('Shadow (depth=4)',
|
|
40
|
-
|
|
39
|
+
it('Shadow (depth=4)', () => {
|
|
40
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=4)", depth: "shadow4" })).toJSON();
|
|
41
41
|
expect(tree).toMatchSnapshot();
|
|
42
42
|
});
|
|
43
|
-
it('Shadow (depth=8)',
|
|
44
|
-
|
|
43
|
+
it('Shadow (depth=8)', () => {
|
|
44
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=8)", depth: "shadow8" })).toJSON();
|
|
45
45
|
expect(tree).toMatchSnapshot();
|
|
46
46
|
});
|
|
47
|
-
it('Shadow (depth=16)',
|
|
48
|
-
|
|
47
|
+
it('Shadow (depth=16)', () => {
|
|
48
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=16)", depth: "shadow16" })).toJSON();
|
|
49
49
|
expect(tree).toMatchSnapshot();
|
|
50
50
|
});
|
|
51
|
-
it('Shadow (depth=28)',
|
|
52
|
-
|
|
51
|
+
it('Shadow (depth=28)', () => {
|
|
52
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=28)", depth: "shadow28" })).toJSON();
|
|
53
53
|
expect(tree).toMatchSnapshot();
|
|
54
54
|
});
|
|
55
|
-
it('Shadow (depth=64)',
|
|
56
|
-
|
|
55
|
+
it('Shadow (depth=64)', () => {
|
|
56
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=64)", depth: "shadow64" })).toJSON();
|
|
57
57
|
expect(tree).toMatchSnapshot();
|
|
58
58
|
});
|
|
59
|
-
it('Brand shadow (depth=2)',
|
|
60
|
-
|
|
59
|
+
it('Brand shadow (depth=2)', () => {
|
|
60
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=2)", depth: "shadow2brand" })).toJSON();
|
|
61
61
|
expect(tree).toMatchSnapshot();
|
|
62
62
|
});
|
|
63
|
-
it('Brand shadow (depth=4)',
|
|
64
|
-
|
|
63
|
+
it('Brand shadow (depth=4)', () => {
|
|
64
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=4)", depth: "shadow4brand" })).toJSON();
|
|
65
65
|
expect(tree).toMatchSnapshot();
|
|
66
66
|
});
|
|
67
|
-
it('Brand shadow (depth=8)',
|
|
68
|
-
|
|
67
|
+
it('Brand shadow (depth=8)', () => {
|
|
68
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=8)", depth: "shadow8brand" })).toJSON();
|
|
69
69
|
expect(tree).toMatchSnapshot();
|
|
70
70
|
});
|
|
71
|
-
it('Brand shadow (depth=16)',
|
|
72
|
-
|
|
71
|
+
it('Brand shadow (depth=16)', () => {
|
|
72
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=16)", depth: "shadow16brand" })).toJSON();
|
|
73
73
|
expect(tree).toMatchSnapshot();
|
|
74
74
|
});
|
|
75
|
-
it('Brand shadow (depth=28)',
|
|
76
|
-
|
|
75
|
+
it('Brand shadow (depth=28)', () => {
|
|
76
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=28)", depth: "shadow28brand" })).toJSON();
|
|
77
77
|
expect(tree).toMatchSnapshot();
|
|
78
78
|
});
|
|
79
|
-
it('Brand shadow (depth=64)',
|
|
80
|
-
|
|
79
|
+
it('Brand shadow (depth=64)', () => {
|
|
80
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" })).toJSON();
|
|
81
81
|
expect(tree).toMatchSnapshot();
|
|
82
82
|
});
|
|
83
|
-
it('Pressable that has a shadow vs. pressable without shadow',
|
|
84
|
-
|
|
83
|
+
it('Pressable that has a shadow vs. pressable without shadow', () => {
|
|
84
|
+
const tree = renderer.create(React.createElement(TestPressableWithAndWithoutShadow, null)).toJSON();
|
|
85
85
|
expect(tree).toMatchSnapshot();
|
|
86
86
|
});
|
|
87
|
-
it('Shadow on a child with margin and padding',
|
|
88
|
-
|
|
87
|
+
it('Shadow on a child with margin and padding', () => {
|
|
88
|
+
const tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { margin: 2, padding: 2 } })).toJSON();
|
|
89
89
|
expect(tree).toMatchSnapshot();
|
|
90
90
|
});
|
|
91
|
-
it('Shadow on a child with border radius',
|
|
92
|
-
|
|
91
|
+
it('Shadow on a child with border radius', () => {
|
|
92
|
+
const tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderRadius: 2 } })).toJSON();
|
|
93
93
|
expect(tree).toMatchSnapshot();
|
|
94
94
|
});
|
|
95
|
-
it('Shadow on a child with border width',
|
|
96
|
-
|
|
95
|
+
it('Shadow on a child with border width', () => {
|
|
96
|
+
const tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderWidth: 2 } })).toJSON();
|
|
97
97
|
expect(tree).toMatchSnapshot();
|
|
98
98
|
});
|
|
99
|
-
afterAll(
|
|
99
|
+
afterAll(() => {
|
|
100
100
|
jest.unmock('react-native/Libraries/Utilities/Platform');
|
|
101
101
|
});
|
|
102
102
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,
|
|
1
|
+
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
|
package/lib/shadowStyle.js
CHANGED
|
@@ -6,13 +6,13 @@ import { memoize } from '@fluentui-react-native/framework';
|
|
|
6
6
|
*
|
|
7
7
|
* See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
|
|
8
8
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
export
|
|
9
|
+
const appleShadowBlurAdjustment = 0.5;
|
|
10
|
+
const defaultShadowBlurAdjustment = 1;
|
|
11
|
+
export const getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
|
|
12
12
|
function getShadowTokenStyleSetWorker(shadowToken) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const keyShadow = shadowToken.key;
|
|
14
|
+
const ambientShadow = shadowToken.ambient;
|
|
15
|
+
const shadowBlurAdjustment = Platform.OS === 'macos' || Platform.OS === 'ios' ? appleShadowBlurAdjustment : defaultShadowBlurAdjustment;
|
|
16
16
|
return {
|
|
17
17
|
key: {
|
|
18
18
|
shadowColor: shadowColorFromRGBAColor(keyShadow.color),
|
|
@@ -34,12 +34,12 @@ function getShadowTokenStyleSetWorker(shadowToken) {
|
|
|
34
34
|
},
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
const shadowColorFromRGBAColor = (rgbaColor) => {
|
|
38
38
|
return rgbaColor.toString().substring(0, 7);
|
|
39
39
|
};
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
const shadowOpacityFromRGBAColor = (rgbaColor) => {
|
|
41
|
+
const opacityAsHex = '0x' + rgbaColor.toString().substring(7);
|
|
42
|
+
const opacityAsDecimal = Number(opacityAsHex) / 255.0;
|
|
43
43
|
// Round to two decimal places
|
|
44
44
|
return Math.round(opacityAsDecimal * 100) / 100;
|
|
45
45
|
};
|
package/lib/shadowStyle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAG3D;;;;;GAKG;AACH,
|
|
1
|
+
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAG3D;;;;;GAKG;AACH,MAAM,yBAAyB,GAAG,GAAG,CAAC;AACtC,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,MAAM,oBAAoB,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAExI,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI,GAAG,oBAAoB;YACnD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI,GAAG,oBAAoB;YACvD,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,CAAC,SAAqB,EAAE,EAAE;IACzD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,SAAqB,EAAE,EAAE;IAC3D,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
|
package/lib-commonjs/Shadow.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
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
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -33,70 +22,96 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
33
22
|
__setModuleDefault(result, mod);
|
|
34
23
|
return result;
|
|
35
24
|
};
|
|
36
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
37
|
-
var t = {};
|
|
38
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
39
|
-
t[p] = s[p];
|
|
40
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
41
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
42
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
43
|
-
t[p[i]] = s[p[i]];
|
|
44
|
-
}
|
|
45
|
-
return t;
|
|
46
|
-
};
|
|
47
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
48
26
|
exports.Shadow = void 0;
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
exports.Shadow = (0, framework_1.stagedComponent)(
|
|
56
|
-
return
|
|
27
|
+
const React = __importStar(require("react"));
|
|
28
|
+
const react_native_1 = require("react-native");
|
|
29
|
+
const framework_1 = require("@fluentui-react-native/framework");
|
|
30
|
+
const framework_2 = require("@fluentui-react-native/framework");
|
|
31
|
+
const Shadow_types_1 = require("./Shadow.types");
|
|
32
|
+
const shadowStyle_1 = require("./shadowStyle");
|
|
33
|
+
exports.Shadow = (0, framework_1.stagedComponent)((props) => {
|
|
34
|
+
return (final, children) => {
|
|
57
35
|
if (!props.shadowToken) {
|
|
58
36
|
return React.createElement(React.Fragment, null, children);
|
|
59
37
|
}
|
|
60
|
-
|
|
61
|
-
|
|
38
|
+
const childrenArray = React.Children.toArray(children);
|
|
39
|
+
const child = childrenArray[0];
|
|
62
40
|
if (__DEV__) {
|
|
63
41
|
if (childrenArray.length !== 1) {
|
|
64
42
|
console.warn('Shadow must only have one child');
|
|
65
43
|
}
|
|
66
44
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
return React.createElement(react_native_1.View,
|
|
45
|
+
const { style: childStyle, ...restOfChildProps } = child.props;
|
|
46
|
+
const shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
|
|
47
|
+
const innerShadowViewProps = (0, framework_1.mergeProps)(restOfChildProps, shadowViewStyleProps.inner);
|
|
48
|
+
const outerShadowViewProps = (0, framework_1.mergeProps)(final, shadowViewStyleProps.outer);
|
|
49
|
+
const childWithInnerShadow = React.cloneElement(child, innerShadowViewProps);
|
|
50
|
+
return React.createElement(react_native_1.View, { ...outerShadowViewProps }, childWithInnerShadow);
|
|
73
51
|
};
|
|
74
52
|
});
|
|
75
|
-
|
|
76
|
-
function getStylePropsForShadowViewsWorker(childStyleProps, shadowToken) {
|
|
77
|
-
|
|
78
|
-
var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(shadowToken);
|
|
53
|
+
const getStylePropsForShadowViews = (0, framework_2.memoize)(getStylePropsForShadowViewsWorker);
|
|
54
|
+
function getStylePropsForShadowViewsWorker(childStyleProps = {}, shadowToken) {
|
|
55
|
+
const shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(shadowToken);
|
|
79
56
|
if (__DEV__) {
|
|
80
57
|
if (!childStyleProps.backgroundColor) {
|
|
81
58
|
console.warn('The View that the Shadow is set on must have a background color set');
|
|
82
59
|
}
|
|
83
60
|
}
|
|
84
|
-
|
|
61
|
+
const { borderBottomWidth, borderEndWidth, borderLeftWidth, borderRightWidth, borderStartWidth, borderTopWidth, borderWidth, margin, marginBottom, marginEnd, marginHorizontal, marginLeft, marginRight, marginStart, marginTop, marginVertical, padding, paddingBottom, paddingEnd, paddingHorizontal, paddingLeft, paddingRight, paddingStart, paddingTop, paddingVertical, alignItems, flexWrap, flexDirection, start, end, left, right, top, bottom, ...restOfChildStyleProps } = childStyleProps;
|
|
85
62
|
// Remove undefined properties, otherwise every prop will be added and be set to
|
|
86
63
|
// undefined, which can cause unexpected behaviour with some of the styles
|
|
87
|
-
|
|
88
|
-
|
|
64
|
+
const innerStyle = removeUndefinedProperties({
|
|
65
|
+
borderBottomWidth,
|
|
66
|
+
borderEndWidth,
|
|
67
|
+
borderLeftWidth,
|
|
68
|
+
borderRightWidth,
|
|
69
|
+
borderStartWidth,
|
|
70
|
+
borderTopWidth,
|
|
71
|
+
borderWidth,
|
|
72
|
+
padding,
|
|
73
|
+
paddingBottom,
|
|
74
|
+
paddingEnd,
|
|
75
|
+
paddingHorizontal,
|
|
76
|
+
paddingLeft,
|
|
77
|
+
paddingRight,
|
|
78
|
+
paddingStart,
|
|
79
|
+
paddingTop,
|
|
80
|
+
paddingVertical,
|
|
81
|
+
alignItems,
|
|
82
|
+
flexWrap,
|
|
83
|
+
flexDirection,
|
|
84
|
+
...shadowTokenStyleSet.key,
|
|
85
|
+
...restOfChildStyleProps,
|
|
86
|
+
});
|
|
87
|
+
const outerStyle = removeUndefinedProperties({
|
|
88
|
+
margin,
|
|
89
|
+
marginBottom,
|
|
90
|
+
marginEnd,
|
|
91
|
+
marginHorizontal,
|
|
92
|
+
marginLeft,
|
|
93
|
+
marginRight,
|
|
94
|
+
marginStart,
|
|
95
|
+
marginTop,
|
|
96
|
+
marginVertical,
|
|
97
|
+
start,
|
|
98
|
+
end,
|
|
99
|
+
left,
|
|
100
|
+
right,
|
|
101
|
+
top,
|
|
102
|
+
bottom,
|
|
103
|
+
...shadowTokenStyleSet.ambient,
|
|
104
|
+
...restOfChildStyleProps,
|
|
105
|
+
});
|
|
89
106
|
return { inner: { style: innerStyle }, outer: { style: outerStyle } };
|
|
90
107
|
}
|
|
91
|
-
function withObjectAssign(object,
|
|
92
|
-
var _b;
|
|
93
|
-
var key = _a[0], value = _a[1];
|
|
108
|
+
function withObjectAssign(object, [key, value]) {
|
|
94
109
|
if (value !== undefined) {
|
|
95
|
-
return Object.assign(object,
|
|
110
|
+
return Object.assign(object, { [key]: value });
|
|
96
111
|
}
|
|
97
112
|
return object;
|
|
98
113
|
}
|
|
99
|
-
|
|
114
|
+
const removeUndefinedProperties = (object) => {
|
|
100
115
|
return Object.entries(object).reduce(withObjectAssign, {});
|
|
101
116
|
};
|
|
102
117
|
exports.Shadow.displayName = Shadow_types_1.shadowName;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,105 +23,105 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
const React = __importStar(require("react"));
|
|
27
|
+
const react_native_1 = require("react-native");
|
|
28
|
+
const framework_1 = require("@fluentui-react-native/framework");
|
|
29
|
+
const pressable_1 = require("@fluentui-react-native/pressable");
|
|
30
|
+
const renderer = __importStar(require("react-test-renderer"));
|
|
31
|
+
const Shadow_1 = require("../Shadow");
|
|
32
|
+
const backgroundColor = { backgroundColor: 'red' };
|
|
33
|
+
const TestShadow = (props) => {
|
|
34
|
+
const theme = (0, framework_1.useFluentTheme)();
|
|
35
35
|
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows[props.depth] },
|
|
36
36
|
React.createElement(react_native_1.View, { style: backgroundColor },
|
|
37
37
|
React.createElement(react_native_1.Text, null, props.displayText))));
|
|
38
38
|
};
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
const TestPressableWithAndWithoutShadow = () => {
|
|
40
|
+
const theme = (0, framework_1.useFluentTheme)();
|
|
41
41
|
return (React.createElement(react_native_1.View, null,
|
|
42
42
|
React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
43
43
|
React.createElement(pressable_1.Pressable, { style: backgroundColor })),
|
|
44
44
|
React.createElement(react_native_1.View, null,
|
|
45
45
|
React.createElement(pressable_1.Pressable, { style: backgroundColor }))));
|
|
46
46
|
};
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
const TestShadowOnChildViewWithProps = (props) => {
|
|
48
|
+
const theme = (0, framework_1.useFluentTheme)();
|
|
49
49
|
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
50
50
|
React.createElement(react_native_1.View, { style: (0, framework_1.mergeStyles)(props.childViewStyleProps, backgroundColor) },
|
|
51
51
|
React.createElement(react_native_1.Text, null, JSON.stringify(props.childViewStyleProps)))));
|
|
52
52
|
};
|
|
53
|
-
describe('Shadow component tests',
|
|
54
|
-
beforeAll(
|
|
55
|
-
jest.mock('react-native/Libraries/Utilities/Platform',
|
|
53
|
+
describe('Shadow component tests', () => {
|
|
54
|
+
beforeAll(() => {
|
|
55
|
+
jest.mock('react-native/Libraries/Utilities/Platform', () => ({
|
|
56
56
|
OS: 'macos',
|
|
57
|
-
select:
|
|
58
|
-
})
|
|
57
|
+
select: () => null,
|
|
58
|
+
}));
|
|
59
59
|
});
|
|
60
|
-
it('Shadow (depth=2)',
|
|
61
|
-
|
|
60
|
+
it('Shadow (depth=2)', () => {
|
|
61
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
|
|
62
62
|
expect(tree).toMatchSnapshot();
|
|
63
63
|
});
|
|
64
|
-
it('Shadow (depth=4)',
|
|
65
|
-
|
|
64
|
+
it('Shadow (depth=4)', () => {
|
|
65
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=4)", depth: "shadow4" })).toJSON();
|
|
66
66
|
expect(tree).toMatchSnapshot();
|
|
67
67
|
});
|
|
68
|
-
it('Shadow (depth=8)',
|
|
69
|
-
|
|
68
|
+
it('Shadow (depth=8)', () => {
|
|
69
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=8)", depth: "shadow8" })).toJSON();
|
|
70
70
|
expect(tree).toMatchSnapshot();
|
|
71
71
|
});
|
|
72
|
-
it('Shadow (depth=16)',
|
|
73
|
-
|
|
72
|
+
it('Shadow (depth=16)', () => {
|
|
73
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=16)", depth: "shadow16" })).toJSON();
|
|
74
74
|
expect(tree).toMatchSnapshot();
|
|
75
75
|
});
|
|
76
|
-
it('Shadow (depth=28)',
|
|
77
|
-
|
|
76
|
+
it('Shadow (depth=28)', () => {
|
|
77
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=28)", depth: "shadow28" })).toJSON();
|
|
78
78
|
expect(tree).toMatchSnapshot();
|
|
79
79
|
});
|
|
80
|
-
it('Shadow (depth=64)',
|
|
81
|
-
|
|
80
|
+
it('Shadow (depth=64)', () => {
|
|
81
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=64)", depth: "shadow64" })).toJSON();
|
|
82
82
|
expect(tree).toMatchSnapshot();
|
|
83
83
|
});
|
|
84
|
-
it('Brand shadow (depth=2)',
|
|
85
|
-
|
|
84
|
+
it('Brand shadow (depth=2)', () => {
|
|
85
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=2)", depth: "shadow2brand" })).toJSON();
|
|
86
86
|
expect(tree).toMatchSnapshot();
|
|
87
87
|
});
|
|
88
|
-
it('Brand shadow (depth=4)',
|
|
89
|
-
|
|
88
|
+
it('Brand shadow (depth=4)', () => {
|
|
89
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=4)", depth: "shadow4brand" })).toJSON();
|
|
90
90
|
expect(tree).toMatchSnapshot();
|
|
91
91
|
});
|
|
92
|
-
it('Brand shadow (depth=8)',
|
|
93
|
-
|
|
92
|
+
it('Brand shadow (depth=8)', () => {
|
|
93
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=8)", depth: "shadow8brand" })).toJSON();
|
|
94
94
|
expect(tree).toMatchSnapshot();
|
|
95
95
|
});
|
|
96
|
-
it('Brand shadow (depth=16)',
|
|
97
|
-
|
|
96
|
+
it('Brand shadow (depth=16)', () => {
|
|
97
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=16)", depth: "shadow16brand" })).toJSON();
|
|
98
98
|
expect(tree).toMatchSnapshot();
|
|
99
99
|
});
|
|
100
|
-
it('Brand shadow (depth=28)',
|
|
101
|
-
|
|
100
|
+
it('Brand shadow (depth=28)', () => {
|
|
101
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=28)", depth: "shadow28brand" })).toJSON();
|
|
102
102
|
expect(tree).toMatchSnapshot();
|
|
103
103
|
});
|
|
104
|
-
it('Brand shadow (depth=64)',
|
|
105
|
-
|
|
104
|
+
it('Brand shadow (depth=64)', () => {
|
|
105
|
+
const tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" })).toJSON();
|
|
106
106
|
expect(tree).toMatchSnapshot();
|
|
107
107
|
});
|
|
108
|
-
it('Pressable that has a shadow vs. pressable without shadow',
|
|
109
|
-
|
|
108
|
+
it('Pressable that has a shadow vs. pressable without shadow', () => {
|
|
109
|
+
const tree = renderer.create(React.createElement(TestPressableWithAndWithoutShadow, null)).toJSON();
|
|
110
110
|
expect(tree).toMatchSnapshot();
|
|
111
111
|
});
|
|
112
|
-
it('Shadow on a child with margin and padding',
|
|
113
|
-
|
|
112
|
+
it('Shadow on a child with margin and padding', () => {
|
|
113
|
+
const tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { margin: 2, padding: 2 } })).toJSON();
|
|
114
114
|
expect(tree).toMatchSnapshot();
|
|
115
115
|
});
|
|
116
|
-
it('Shadow on a child with border radius',
|
|
117
|
-
|
|
116
|
+
it('Shadow on a child with border radius', () => {
|
|
117
|
+
const tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderRadius: 2 } })).toJSON();
|
|
118
118
|
expect(tree).toMatchSnapshot();
|
|
119
119
|
});
|
|
120
|
-
it('Shadow on a child with border width',
|
|
121
|
-
|
|
120
|
+
it('Shadow on a child with border width', () => {
|
|
121
|
+
const tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderWidth: 2 } })).toJSON();
|
|
122
122
|
expect(tree).toMatchSnapshot();
|
|
123
123
|
});
|
|
124
|
-
afterAll(
|
|
124
|
+
afterAll(() => {
|
|
125
125
|
jest.unmock('react-native/Libraries/Utilities/Platform');
|
|
126
126
|
});
|
|
127
127
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getShadowTokenStyleSet = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
const react_native_1 = require("react-native");
|
|
5
|
+
const framework_1 = require("@fluentui-react-native/framework");
|
|
6
6
|
/**
|
|
7
7
|
* For iOS/macOS, the blur property from the token is not the same as the shadow radius value,
|
|
8
8
|
* it needs to be divided by 2 to achieve the same effect.
|
|
9
9
|
*
|
|
10
10
|
* See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
|
|
11
11
|
*/
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
const appleShadowBlurAdjustment = 0.5;
|
|
13
|
+
const defaultShadowBlurAdjustment = 1;
|
|
14
14
|
exports.getShadowTokenStyleSet = (0, framework_1.memoize)(getShadowTokenStyleSetWorker);
|
|
15
15
|
function getShadowTokenStyleSetWorker(shadowToken) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
const keyShadow = shadowToken.key;
|
|
17
|
+
const ambientShadow = shadowToken.ambient;
|
|
18
|
+
const shadowBlurAdjustment = react_native_1.Platform.OS === 'macos' || react_native_1.Platform.OS === 'ios' ? appleShadowBlurAdjustment : defaultShadowBlurAdjustment;
|
|
19
19
|
return {
|
|
20
20
|
key: {
|
|
21
21
|
shadowColor: shadowColorFromRGBAColor(keyShadow.color),
|
|
@@ -37,12 +37,12 @@ function getShadowTokenStyleSetWorker(shadowToken) {
|
|
|
37
37
|
},
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
|
-
|
|
40
|
+
const shadowColorFromRGBAColor = (rgbaColor) => {
|
|
41
41
|
return rgbaColor.toString().substring(0, 7);
|
|
42
42
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
const shadowOpacityFromRGBAColor = (rgbaColor) => {
|
|
44
|
+
const opacityAsHex = '0x' + rgbaColor.toString().substring(7);
|
|
45
|
+
const opacityAsDecimal = Number(opacityAsHex) / 255.0;
|
|
46
46
|
// Round to two decimal places
|
|
47
47
|
return Math.round(opacityAsDecimal * 100) / 100;
|
|
48
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AACA
|
|
1
|
+
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AACA,+CAAwC;AAExC,gEAA2D;AAG3D;;;;;GAKG;AACH,MAAM,yBAAyB,GAAG,GAAG,CAAC;AACtC,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAEzB,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,MAAM,oBAAoB,GAAG,uBAAQ,CAAC,EAAE,KAAK,OAAO,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,2BAA2B,CAAC;IAExI,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI,GAAG,oBAAoB;YACnD,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI,GAAG,oBAAoB;YACvD,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,CAAC,SAAqB,EAAE,EAAE;IACzD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,SAAqB,EAAE,EAAE;IAC3D,MAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.7",
|
|
4
4
|
"description": "A cross-platform Shadow 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,9 +29,9 @@
|
|
|
22
29
|
"directory": "packages/experimental/Shadow"
|
|
23
30
|
},
|
|
24
31
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/framework": "0.14.
|
|
26
|
-
"@fluentui-react-native/pressable": "0.12.
|
|
27
|
-
"@fluentui-react-native/theme-types": "0.39.
|
|
32
|
+
"@fluentui-react-native/framework": "0.14.5",
|
|
33
|
+
"@fluentui-react-native/pressable": "0.12.7",
|
|
34
|
+
"@fluentui-react-native/theme-types": "0.39.4"
|
|
28
35
|
},
|
|
29
36
|
"devDependencies": {
|
|
30
37
|
"@babel/core": "^7.20.0",
|
|
@@ -35,7 +42,9 @@
|
|
|
35
42
|
"@react-native/metro-config": "^0.74.0",
|
|
36
43
|
"@types/react": "~18.2.0",
|
|
37
44
|
"react": "18.2.0",
|
|
38
|
-
"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"
|
|
39
48
|
},
|
|
40
49
|
"peerDependencies": {
|
|
41
50
|
"@office-iss/react-native-win32": "^0.74.0",
|
|
@@ -61,9 +70,12 @@
|
|
|
61
70
|
]
|
|
62
71
|
},
|
|
63
72
|
"capabilities": [
|
|
73
|
+
"babel-preset-react-native",
|
|
64
74
|
"core",
|
|
65
75
|
"core-android",
|
|
66
76
|
"core-ios",
|
|
77
|
+
"core-macos",
|
|
78
|
+
"core-windows",
|
|
67
79
|
"react"
|
|
68
80
|
]
|
|
69
81
|
}
|
package/.eslintrc.js
DELETED