@fluentui-react-native/experimental-shadow 0.2.18 → 0.2.20
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 +43 -1
- package/CHANGELOG.md +20 -2
- package/lib/Shadow.d.ts.map +1 -1
- package/lib/Shadow.js +37 -4
- package/lib/Shadow.js.map +1 -1
- package/lib/__tests__/Shadow.test.js +22 -3
- package/lib/__tests__/Shadow.test.js.map +1 -1
- package/lib/shadowStyle.d.ts.map +1 -1
- package/lib/shadowStyle.js +6 -2
- package/lib/shadowStyle.js.map +1 -1
- package/lib-commonjs/Shadow.d.ts.map +1 -1
- package/lib-commonjs/Shadow.js +37 -4
- package/lib-commonjs/Shadow.js.map +1 -1
- package/lib-commonjs/__tests__/Shadow.test.js +21 -2
- package/lib-commonjs/__tests__/Shadow.test.js.map +1 -1
- package/lib-commonjs/shadowStyle.d.ts.map +1 -1
- package/lib-commonjs/shadowStyle.js +6 -2
- package/lib-commonjs/shadowStyle.js.map +1 -1
- package/package.json +4 -4
- package/src/Shadow.tsx +94 -6
- package/src/__tests__/Shadow.test.tsx +34 -3
- package/src/__tests__/__snapshots__/Shadow.test.tsx.snap +536 -0
- package/src/shadowStyle.ts +6 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,49 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 21 Sep 2022 20:58:28 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.20",
|
|
7
|
+
"version": "0.2.20",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
|
+
"comment": "Bump @fluentui-react-native/framework to v0.8.4",
|
|
14
|
+
"commit": "6706e18d88a521539fdc717100516ec3ee4bb5e2"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
19
|
+
"comment": "Bump @fluentui-react-native/pressable to v0.9.12",
|
|
20
|
+
"commit": "6706e18d88a521539fdc717100516ec3ee4bb5e2"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
25
|
+
"comment": "Bump @fluentui-react-native/theme-types to v0.19.1",
|
|
26
|
+
"commit": "6706e18d88a521539fdc717100516ec3ee4bb5e2"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Tue, 20 Sep 2022 20:05:27 GMT",
|
|
33
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.19",
|
|
34
|
+
"version": "0.2.19",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
39
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
40
|
+
"commit": "c738f985915d011ced8cb7b713a3b5ca3f04cbd9",
|
|
41
|
+
"comment": "Add border width test"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"date": "Fri, 16 Sep 2022 01:53:06 GMT",
|
|
6
48
|
"tag": "@fluentui-react-native/experimental-shadow_v0.2.18",
|
|
7
49
|
"version": "0.2.18",
|
|
8
50
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
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 Wed, 21 Sep 2022 20:58:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.2.20
|
|
8
|
+
|
|
9
|
+
Wed, 21 Sep 2022 20:58:28 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @fluentui-react-native/framework to v0.8.4
|
|
14
|
+
- Bump @fluentui-react-native/pressable to v0.9.12
|
|
15
|
+
- Bump @fluentui-react-native/theme-types to v0.19.1
|
|
16
|
+
|
|
17
|
+
## 0.2.19
|
|
18
|
+
|
|
19
|
+
Tue, 20 Sep 2022 20:05:27 GMT
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- Add border width test (78454019+lyzhan7@users.noreply.github.com)
|
|
24
|
+
|
|
7
25
|
## 0.2.18
|
|
8
26
|
|
|
9
|
-
Fri, 16 Sep 2022 01:
|
|
27
|
+
Fri, 16 Sep 2022 01:53:06 GMT
|
|
10
28
|
|
|
11
29
|
### Patches
|
|
12
30
|
|
package/lib/Shadow.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAMzD,eAAO,MAAM,MAAM,4EAyBjB,CAAC;AAuFH,eAAe,MAAM,CAAC"}
|
package/lib/Shadow.js
CHANGED
|
@@ -9,18 +9,28 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
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
|
+
};
|
|
12
23
|
import * as React from 'react';
|
|
13
24
|
import { View } from 'react-native';
|
|
14
25
|
import { shadowName } from './Shadow.types';
|
|
15
26
|
import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
|
|
16
27
|
import { getShadowTokenStyleSet } from './shadowStyle';
|
|
28
|
+
import { memoize } from '@fluentui-react-native/framework';
|
|
17
29
|
export var Shadow = stagedComponent(function (props) {
|
|
18
30
|
return function (final, children) {
|
|
19
31
|
if (!props.shadowToken) {
|
|
20
32
|
return React.createElement(React.Fragment, null, children);
|
|
21
33
|
}
|
|
22
|
-
var shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
|
|
23
|
-
var mergedProps = mergeProps(final, { style: shadowTokenStyleSet.ambient });
|
|
24
34
|
var childrenArray = React.Children.toArray(children);
|
|
25
35
|
var child = childrenArray[0];
|
|
26
36
|
if (__DEV__) {
|
|
@@ -28,10 +38,33 @@ export var Shadow = stagedComponent(function (props) {
|
|
|
28
38
|
console.warn('Shadow must only have one child');
|
|
29
39
|
}
|
|
30
40
|
}
|
|
31
|
-
var
|
|
32
|
-
|
|
41
|
+
var _a = child.props, childStyle = _a.style, restOfChildProps = __rest(_a, ["style"]);
|
|
42
|
+
var shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
|
|
43
|
+
var innerShadowViewProps = mergeProps(restOfChildProps, shadowViewStyleProps.inner);
|
|
44
|
+
var outerShadowViewProps = mergeProps(final, shadowViewStyleProps.outer);
|
|
45
|
+
var childWithInnerShadow = React.cloneElement(child, innerShadowViewProps);
|
|
46
|
+
return React.createElement(View, __assign({}, outerShadowViewProps), childWithInnerShadow);
|
|
33
47
|
};
|
|
34
48
|
});
|
|
49
|
+
var getStylePropsForShadowViews = memoize(getStylePropsForShadowViewsWorker);
|
|
50
|
+
function getStylePropsForShadowViewsWorker(childStyleProps, shadowToken) {
|
|
51
|
+
if (childStyleProps === void 0) { childStyleProps = {}; }
|
|
52
|
+
var shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
|
|
53
|
+
var borderBottomWidth = childStyleProps.borderBottomWidth, borderEndWidth = childStyleProps.borderEndWidth, borderLeftWidth = childStyleProps.borderLeftWidth, borderRightWidth = childStyleProps.borderRightWidth, borderStartWidth = childStyleProps.borderStartWidth, borderTopWidth = childStyleProps.borderTopWidth, borderWidth = childStyleProps.borderWidth, margin = childStyleProps.margin, marginBottom = childStyleProps.marginBottom, marginEnd = childStyleProps.marginEnd, marginHorizontal = childStyleProps.marginHorizontal, marginLeft = childStyleProps.marginLeft, marginRight = childStyleProps.marginRight, marginStart = childStyleProps.marginStart, marginTop = childStyleProps.marginTop, marginVertical = childStyleProps.marginVertical, padding = childStyleProps.padding, paddingBottom = childStyleProps.paddingBottom, paddingEnd = childStyleProps.paddingEnd, paddingHorizontal = childStyleProps.paddingHorizontal, paddingLeft = childStyleProps.paddingLeft, paddingRight = childStyleProps.paddingRight, paddingStart = childStyleProps.paddingStart, paddingTop = childStyleProps.paddingTop, paddingVertical = childStyleProps.paddingVertical, restOfChildStyleProps = __rest(childStyleProps, ["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"]);
|
|
54
|
+
if (__DEV__) {
|
|
55
|
+
if (!childStyleProps.backgroundColor) {
|
|
56
|
+
console.warn('The View that the Shadow is set on must have a background color set');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
return {
|
|
60
|
+
inner: {
|
|
61
|
+
style: __assign(__assign({ borderBottomWidth: borderBottomWidth, borderEndWidth: borderEndWidth, borderLeftWidth: borderLeftWidth, borderRightWidth: borderRightWidth, borderStartWidth: borderStartWidth, borderTopWidth: borderTopWidth, borderWidth: borderWidth, padding: padding, paddingBottom: paddingBottom, paddingEnd: paddingEnd, paddingHorizontal: paddingHorizontal, paddingLeft: paddingLeft, paddingRight: paddingRight, paddingStart: paddingStart, paddingTop: paddingTop, paddingVertical: paddingVertical }, shadowTokenStyleSet.key), restOfChildStyleProps),
|
|
62
|
+
},
|
|
63
|
+
outer: {
|
|
64
|
+
style: __assign(__assign({ margin: margin, marginBottom: marginBottom, marginEnd: marginEnd, marginHorizontal: marginHorizontal, marginLeft: marginLeft, marginRight: marginRight, marginStart: marginStart, marginTop: marginTop, marginVertical: marginVertical }, shadowTokenStyleSet.ambient), restOfChildStyleProps),
|
|
65
|
+
},
|
|
66
|
+
};
|
|
67
|
+
}
|
|
35
68
|
Shadow.displayName = shadowName;
|
|
36
69
|
export default Shadow;
|
|
37
70
|
//# sourceMappingURL=Shadow.js.map
|
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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"}
|
|
@@ -1,20 +1,27 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Text, View } from 'react-native';
|
|
3
3
|
import { Shadow } from '../Shadow';
|
|
4
|
-
import { useFluentTheme } from '@fluentui-react-native/framework';
|
|
4
|
+
import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
|
|
5
5
|
import * as renderer from 'react-test-renderer';
|
|
6
6
|
import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
|
|
7
7
|
import { Pressable } from '@fluentui-react-native/pressable';
|
|
8
|
+
var backgroundColor = { backgroundColor: 'red' };
|
|
8
9
|
var TestShadow = function (props) {
|
|
9
10
|
var theme = useFluentTheme();
|
|
10
11
|
return (React.createElement(Shadow, { shadowToken: theme.shadows[props.depth] },
|
|
11
|
-
React.createElement(View,
|
|
12
|
+
React.createElement(View, { style: backgroundColor },
|
|
12
13
|
React.createElement(Text, null, props.displayText))));
|
|
13
14
|
};
|
|
14
15
|
var TestPressableWithShadow = function () {
|
|
15
16
|
var theme = useFluentTheme();
|
|
16
17
|
return (React.createElement(Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
17
|
-
React.createElement(Pressable,
|
|
18
|
+
React.createElement(Pressable, { style: backgroundColor })));
|
|
19
|
+
};
|
|
20
|
+
var TestShadowOnChildViewWithProps = function (props) {
|
|
21
|
+
var theme = useFluentTheme();
|
|
22
|
+
return (React.createElement(Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
23
|
+
React.createElement(View, { style: mergeStyles(props.childViewStyleProps, backgroundColor) },
|
|
24
|
+
React.createElement(Text, null, JSON.stringify(props.childViewStyleProps)))));
|
|
18
25
|
};
|
|
19
26
|
describe('Shadow component tests', function () {
|
|
20
27
|
beforeAll(function () {
|
|
@@ -75,6 +82,18 @@ describe('Shadow component tests', function () {
|
|
|
75
82
|
var tree = renderer.create(React.createElement(TestPressableWithShadow, null)).toJSON();
|
|
76
83
|
expect(tree).toMatchSnapshot();
|
|
77
84
|
});
|
|
85
|
+
it('Shadow on a child with margin and padding', function () {
|
|
86
|
+
var tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { margin: 2, padding: 2 } })).toJSON();
|
|
87
|
+
expect(tree).toMatchSnapshot();
|
|
88
|
+
});
|
|
89
|
+
it('Shadow on a child with border radius', function () {
|
|
90
|
+
var tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderRadius: 2 } })).toJSON();
|
|
91
|
+
expect(tree).toMatchSnapshot();
|
|
92
|
+
});
|
|
93
|
+
it('Shadow on a child with border width', function () {
|
|
94
|
+
var tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderWidth: 2 } })).toJSON();
|
|
95
|
+
expect(tree).toMatchSnapshot();
|
|
96
|
+
});
|
|
78
97
|
it('Shadow simple rendering does not invalidate styling', function () {
|
|
79
98
|
checkRenderConsistency(function () { return React.createElement(TestShadow, { displayText: "Shadow render test", depth: "shadow2" }); }, 2);
|
|
80
99
|
});
|
|
@@ -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;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
|
package/lib/shadowStyle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAYjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAyB7D"}
|
package/lib/shadowStyle.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { memoize } from '@fluentui-react-native/framework';
|
|
2
2
|
import { Platform } from 'react-native';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* For iOS/macOS, the blur property from the token is not the same as the shadow radius value,
|
|
5
|
+
* it needs to be divided by 2 to achieve the same effect.
|
|
6
|
+
*
|
|
7
|
+
* See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
|
|
8
|
+
*/
|
|
5
9
|
var appleShadowBlurAdjustment = 0.5;
|
|
6
10
|
var defaultShadowBlurAdjustment = 1;
|
|
7
11
|
export var getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
|
package/lib/shadowStyle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAc,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEpD
|
|
1
|
+
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,OAAO,EAAc,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEpD;;;;;GAKG;AACH,IAAM,yBAAyB,GAAG,GAAG,CAAC;AACtC,IAAM,2BAA2B,GAAG,CAAC,CAAC;AAEtC,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,IAAM,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,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAMzD,eAAO,MAAM,MAAM,4EAyBjB,CAAC;AAuFH,eAAe,MAAM,CAAC"}
|
package/lib-commonjs/Shadow.js
CHANGED
|
@@ -29,6 +29,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
__setModuleDefault(result, mod);
|
|
30
30
|
return result;
|
|
31
31
|
};
|
|
32
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
33
|
+
var t = {};
|
|
34
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
35
|
+
t[p] = s[p];
|
|
36
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
37
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
38
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
39
|
+
t[p[i]] = s[p[i]];
|
|
40
|
+
}
|
|
41
|
+
return t;
|
|
42
|
+
};
|
|
32
43
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
44
|
exports.Shadow = void 0;
|
|
34
45
|
var React = __importStar(require("react"));
|
|
@@ -36,13 +47,12 @@ var react_native_1 = require("react-native");
|
|
|
36
47
|
var Shadow_types_1 = require("./Shadow.types");
|
|
37
48
|
var framework_1 = require("@fluentui-react-native/framework");
|
|
38
49
|
var shadowStyle_1 = require("./shadowStyle");
|
|
50
|
+
var framework_2 = require("@fluentui-react-native/framework");
|
|
39
51
|
exports.Shadow = (0, framework_1.stagedComponent)(function (props) {
|
|
40
52
|
return function (final, children) {
|
|
41
53
|
if (!props.shadowToken) {
|
|
42
54
|
return React.createElement(React.Fragment, null, children);
|
|
43
55
|
}
|
|
44
|
-
var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(props.shadowToken);
|
|
45
|
-
var mergedProps = (0, framework_1.mergeProps)(final, { style: shadowTokenStyleSet.ambient });
|
|
46
56
|
var childrenArray = React.Children.toArray(children);
|
|
47
57
|
var child = childrenArray[0];
|
|
48
58
|
if (__DEV__) {
|
|
@@ -50,10 +60,33 @@ exports.Shadow = (0, framework_1.stagedComponent)(function (props) {
|
|
|
50
60
|
console.warn('Shadow must only have one child');
|
|
51
61
|
}
|
|
52
62
|
}
|
|
53
|
-
var
|
|
54
|
-
|
|
63
|
+
var _a = child.props, childStyle = _a.style, restOfChildProps = __rest(_a, ["style"]);
|
|
64
|
+
var shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
|
|
65
|
+
var innerShadowViewProps = (0, framework_1.mergeProps)(restOfChildProps, shadowViewStyleProps.inner);
|
|
66
|
+
var outerShadowViewProps = (0, framework_1.mergeProps)(final, shadowViewStyleProps.outer);
|
|
67
|
+
var childWithInnerShadow = React.cloneElement(child, innerShadowViewProps);
|
|
68
|
+
return React.createElement(react_native_1.View, __assign({}, outerShadowViewProps), childWithInnerShadow);
|
|
55
69
|
};
|
|
56
70
|
});
|
|
71
|
+
var getStylePropsForShadowViews = (0, framework_2.memoize)(getStylePropsForShadowViewsWorker);
|
|
72
|
+
function getStylePropsForShadowViewsWorker(childStyleProps, shadowToken) {
|
|
73
|
+
if (childStyleProps === void 0) { childStyleProps = {}; }
|
|
74
|
+
var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(shadowToken);
|
|
75
|
+
var borderBottomWidth = childStyleProps.borderBottomWidth, borderEndWidth = childStyleProps.borderEndWidth, borderLeftWidth = childStyleProps.borderLeftWidth, borderRightWidth = childStyleProps.borderRightWidth, borderStartWidth = childStyleProps.borderStartWidth, borderTopWidth = childStyleProps.borderTopWidth, borderWidth = childStyleProps.borderWidth, margin = childStyleProps.margin, marginBottom = childStyleProps.marginBottom, marginEnd = childStyleProps.marginEnd, marginHorizontal = childStyleProps.marginHorizontal, marginLeft = childStyleProps.marginLeft, marginRight = childStyleProps.marginRight, marginStart = childStyleProps.marginStart, marginTop = childStyleProps.marginTop, marginVertical = childStyleProps.marginVertical, padding = childStyleProps.padding, paddingBottom = childStyleProps.paddingBottom, paddingEnd = childStyleProps.paddingEnd, paddingHorizontal = childStyleProps.paddingHorizontal, paddingLeft = childStyleProps.paddingLeft, paddingRight = childStyleProps.paddingRight, paddingStart = childStyleProps.paddingStart, paddingTop = childStyleProps.paddingTop, paddingVertical = childStyleProps.paddingVertical, restOfChildStyleProps = __rest(childStyleProps, ["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"]);
|
|
76
|
+
if (__DEV__) {
|
|
77
|
+
if (!childStyleProps.backgroundColor) {
|
|
78
|
+
console.warn('The View that the Shadow is set on must have a background color set');
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return {
|
|
82
|
+
inner: {
|
|
83
|
+
style: __assign(__assign({ borderBottomWidth: borderBottomWidth, borderEndWidth: borderEndWidth, borderLeftWidth: borderLeftWidth, borderRightWidth: borderRightWidth, borderStartWidth: borderStartWidth, borderTopWidth: borderTopWidth, borderWidth: borderWidth, padding: padding, paddingBottom: paddingBottom, paddingEnd: paddingEnd, paddingHorizontal: paddingHorizontal, paddingLeft: paddingLeft, paddingRight: paddingRight, paddingStart: paddingStart, paddingTop: paddingTop, paddingVertical: paddingVertical }, shadowTokenStyleSet.key), restOfChildStyleProps),
|
|
84
|
+
},
|
|
85
|
+
outer: {
|
|
86
|
+
style: __assign(__assign({ margin: margin, marginBottom: marginBottom, marginEnd: marginEnd, marginHorizontal: marginHorizontal, marginLeft: marginLeft, marginRight: marginRight, marginStart: marginStart, marginTop: marginTop, marginVertical: marginVertical }, shadowTokenStyleSet.ambient), restOfChildStyleProps),
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
}
|
|
57
90
|
exports.Shadow.displayName = Shadow_types_1.shadowName;
|
|
58
91
|
exports.default = exports.Shadow;
|
|
59
92
|
//# sourceMappingURL=Shadow.js.map
|
|
@@ -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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"}
|
|
@@ -26,16 +26,23 @@ var framework_1 = require("@fluentui-react-native/framework");
|
|
|
26
26
|
var renderer = __importStar(require("react-test-renderer"));
|
|
27
27
|
var test_tools_1 = require("@fluentui-react-native/test-tools");
|
|
28
28
|
var pressable_1 = require("@fluentui-react-native/pressable");
|
|
29
|
+
var backgroundColor = { backgroundColor: 'red' };
|
|
29
30
|
var TestShadow = function (props) {
|
|
30
31
|
var theme = (0, framework_1.useFluentTheme)();
|
|
31
32
|
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows[props.depth] },
|
|
32
|
-
React.createElement(react_native_1.View,
|
|
33
|
+
React.createElement(react_native_1.View, { style: backgroundColor },
|
|
33
34
|
React.createElement(react_native_1.Text, null, props.displayText))));
|
|
34
35
|
};
|
|
35
36
|
var TestPressableWithShadow = function () {
|
|
36
37
|
var theme = (0, framework_1.useFluentTheme)();
|
|
37
38
|
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
38
|
-
React.createElement(pressable_1.Pressable,
|
|
39
|
+
React.createElement(pressable_1.Pressable, { style: backgroundColor })));
|
|
40
|
+
};
|
|
41
|
+
var TestShadowOnChildViewWithProps = function (props) {
|
|
42
|
+
var theme = (0, framework_1.useFluentTheme)();
|
|
43
|
+
return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows['shadow16'] },
|
|
44
|
+
React.createElement(react_native_1.View, { style: (0, framework_1.mergeStyles)(props.childViewStyleProps, backgroundColor) },
|
|
45
|
+
React.createElement(react_native_1.Text, null, JSON.stringify(props.childViewStyleProps)))));
|
|
39
46
|
};
|
|
40
47
|
describe('Shadow component tests', function () {
|
|
41
48
|
beforeAll(function () {
|
|
@@ -96,6 +103,18 @@ describe('Shadow component tests', function () {
|
|
|
96
103
|
var tree = renderer.create(React.createElement(TestPressableWithShadow, null)).toJSON();
|
|
97
104
|
expect(tree).toMatchSnapshot();
|
|
98
105
|
});
|
|
106
|
+
it('Shadow on a child with margin and padding', function () {
|
|
107
|
+
var tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { margin: 2, padding: 2 } })).toJSON();
|
|
108
|
+
expect(tree).toMatchSnapshot();
|
|
109
|
+
});
|
|
110
|
+
it('Shadow on a child with border radius', function () {
|
|
111
|
+
var tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderRadius: 2 } })).toJSON();
|
|
112
|
+
expect(tree).toMatchSnapshot();
|
|
113
|
+
});
|
|
114
|
+
it('Shadow on a child with border width', function () {
|
|
115
|
+
var tree = renderer.create(React.createElement(TestShadowOnChildViewWithProps, { childViewStyleProps: { borderWidth: 2 } })).toJSON();
|
|
116
|
+
expect(tree).toMatchSnapshot();
|
|
117
|
+
});
|
|
99
118
|
it('Shadow simple rendering does not invalidate styling', function () {
|
|
100
119
|
(0, test_tools_1.checkRenderConsistency)(function () { return React.createElement(TestShadow, { displayText: "Shadow render test", depth: "shadow2" }); }, 2);
|
|
101
120
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAA0C;AAC1C,oCAAmC;AACnC,
|
|
1
|
+
{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAYjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAyB7D"}
|
|
@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.getShadowTokenStyleSet = void 0;
|
|
4
4
|
var framework_1 = require("@fluentui-react-native/framework");
|
|
5
5
|
var react_native_1 = require("react-native");
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* For iOS/macOS, the blur property from the token is not the same as the shadow radius value,
|
|
8
|
+
* it needs to be divided by 2 to achieve the same effect.
|
|
9
|
+
*
|
|
10
|
+
* See https://github.com/microsoft/apple-ux-guide/blob/gh-pages/Shadows.md
|
|
11
|
+
*/
|
|
8
12
|
var appleShadowBlurAdjustment = 0.5;
|
|
9
13
|
var defaultShadowBlurAdjustment = 1;
|
|
10
14
|
exports.getShadowTokenStyleSet = (0, framework_1.memoize)(getShadowTokenStyleSetWorker);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAE3D,6CAAoD;AAEpD
|
|
1
|
+
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAE3D,6CAAoD;AAEpD;;;;;GAKG;AACH,IAAM,yBAAyB,GAAG,GAAG,CAAC;AACtC,IAAM,2BAA2B,GAAG,CAAC,CAAC;AAEzB,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,IAAM,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,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.20",
|
|
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",
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
"directory": "packages/experimental/Shadow"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@fluentui-react-native/framework": "0.8.
|
|
26
|
-
"@fluentui-react-native/pressable": "0.9.
|
|
27
|
-
"@fluentui-react-native/theme-types": "0.19.
|
|
25
|
+
"@fluentui-react-native/framework": "0.8.4",
|
|
26
|
+
"@fluentui-react-native/pressable": "0.9.12",
|
|
27
|
+
"@fluentui-react-native/theme-types": "0.19.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui-react-native/eslint-config-rules": "^0.1.1",
|
package/src/Shadow.tsx
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
2
|
+
import { View, ViewStyle } from 'react-native';
|
|
3
3
|
import { ShadowProps, shadowName } from './Shadow.types';
|
|
4
4
|
import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
|
|
5
5
|
import { getShadowTokenStyleSet } from './shadowStyle';
|
|
6
|
+
import { memoize } from '@fluentui-react-native/framework';
|
|
7
|
+
import { ShadowToken } from '@fluentui-react-native/theme-types';
|
|
6
8
|
|
|
7
9
|
export const Shadow = stagedComponent((props: ShadowProps) => {
|
|
8
10
|
return (final: ShadowProps, children: React.ReactNode) => {
|
|
@@ -10,9 +12,6 @@ export const Shadow = stagedComponent((props: ShadowProps) => {
|
|
|
10
12
|
return <>{children}</>;
|
|
11
13
|
}
|
|
12
14
|
|
|
13
|
-
const shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
|
|
14
|
-
const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.ambient });
|
|
15
|
-
|
|
16
15
|
const childrenArray = React.Children.toArray(children) as React.ReactElement[];
|
|
17
16
|
const child = childrenArray[0];
|
|
18
17
|
|
|
@@ -22,12 +21,101 @@ export const Shadow = stagedComponent((props: ShadowProps) => {
|
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
|
|
25
|
-
const
|
|
24
|
+
const { style: childStyle, ...restOfChildProps } = child.props;
|
|
25
|
+
|
|
26
|
+
const shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
|
|
27
|
+
const innerShadowViewProps = mergeProps(restOfChildProps, shadowViewStyleProps.inner);
|
|
28
|
+
const outerShadowViewProps = mergeProps(final, shadowViewStyleProps.outer);
|
|
29
|
+
|
|
30
|
+
const childWithInnerShadow = React.cloneElement(child, innerShadowViewProps);
|
|
26
31
|
|
|
27
|
-
return <View {...
|
|
32
|
+
return <View {...outerShadowViewProps}>{childWithInnerShadow}</View>;
|
|
28
33
|
};
|
|
29
34
|
});
|
|
30
35
|
|
|
36
|
+
const getStylePropsForShadowViews = memoize(getStylePropsForShadowViewsWorker);
|
|
37
|
+
function getStylePropsForShadowViewsWorker(childStyleProps: ViewStyle = {}, shadowToken: ShadowToken) {
|
|
38
|
+
const shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
|
|
39
|
+
|
|
40
|
+
const {
|
|
41
|
+
borderBottomWidth,
|
|
42
|
+
borderEndWidth,
|
|
43
|
+
borderLeftWidth,
|
|
44
|
+
borderRightWidth,
|
|
45
|
+
borderStartWidth,
|
|
46
|
+
borderTopWidth,
|
|
47
|
+
borderWidth,
|
|
48
|
+
|
|
49
|
+
margin,
|
|
50
|
+
marginBottom,
|
|
51
|
+
marginEnd,
|
|
52
|
+
marginHorizontal,
|
|
53
|
+
marginLeft,
|
|
54
|
+
marginRight,
|
|
55
|
+
marginStart,
|
|
56
|
+
marginTop,
|
|
57
|
+
marginVertical,
|
|
58
|
+
|
|
59
|
+
padding,
|
|
60
|
+
paddingBottom,
|
|
61
|
+
paddingEnd,
|
|
62
|
+
paddingHorizontal,
|
|
63
|
+
paddingLeft,
|
|
64
|
+
paddingRight,
|
|
65
|
+
paddingStart,
|
|
66
|
+
paddingTop,
|
|
67
|
+
paddingVertical,
|
|
68
|
+
|
|
69
|
+
...restOfChildStyleProps
|
|
70
|
+
} = childStyleProps;
|
|
71
|
+
|
|
72
|
+
if (__DEV__) {
|
|
73
|
+
if (!childStyleProps.backgroundColor) {
|
|
74
|
+
console.warn('The View that the Shadow is set on must have a background color set');
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return {
|
|
79
|
+
inner: {
|
|
80
|
+
style: {
|
|
81
|
+
borderBottomWidth,
|
|
82
|
+
borderEndWidth,
|
|
83
|
+
borderLeftWidth,
|
|
84
|
+
borderRightWidth,
|
|
85
|
+
borderStartWidth,
|
|
86
|
+
borderTopWidth,
|
|
87
|
+
borderWidth,
|
|
88
|
+
padding,
|
|
89
|
+
paddingBottom,
|
|
90
|
+
paddingEnd,
|
|
91
|
+
paddingHorizontal,
|
|
92
|
+
paddingLeft,
|
|
93
|
+
paddingRight,
|
|
94
|
+
paddingStart,
|
|
95
|
+
paddingTop,
|
|
96
|
+
paddingVertical,
|
|
97
|
+
...shadowTokenStyleSet.key,
|
|
98
|
+
...restOfChildStyleProps,
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
outer: {
|
|
102
|
+
style: {
|
|
103
|
+
margin,
|
|
104
|
+
marginBottom,
|
|
105
|
+
marginEnd,
|
|
106
|
+
marginHorizontal,
|
|
107
|
+
marginLeft,
|
|
108
|
+
marginRight,
|
|
109
|
+
marginStart,
|
|
110
|
+
marginTop,
|
|
111
|
+
marginVertical,
|
|
112
|
+
...shadowTokenStyleSet.ambient,
|
|
113
|
+
...restOfChildStyleProps,
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
|
|
31
119
|
Shadow.displayName = shadowName;
|
|
32
120
|
|
|
33
121
|
export default Shadow;
|