@fluentui-react-native/experimental-shadow 0.2.2 → 0.2.3
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 +16 -1
- package/CHANGELOG.md +10 -2
- package/lib/Shadow.js +1 -5
- package/lib/Shadow.js.map +1 -1
- package/lib/shadowStyle.d.ts.map +1 -1
- package/lib/shadowStyle.js +15 -0
- package/lib/shadowStyle.js.map +1 -1
- package/lib-commonjs/Shadow.js +1 -5
- package/lib-commonjs/Shadow.js.map +1 -1
- package/lib-commonjs/shadowStyle.d.ts.map +1 -1
- package/lib-commonjs/shadowStyle.js +15 -0
- package/lib-commonjs/shadowStyle.js.map +1 -1
- package/package.json +1 -1
- package/src/Shadow.tsx +1 -1
- package/src/shadowStyle.ts +17 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,22 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/experimental-shadow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 13 Jul 2022 23:23:25 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/experimental-shadow_v0.2.3",
|
|
7
|
+
"version": "0.2.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "78454019+lyzhan7@users.noreply.github.com",
|
|
12
|
+
"package": "@fluentui-react-native/experimental-shadow",
|
|
13
|
+
"commit": "d4320c9f7385a7f37dc8ce521c413071b8cb55a0",
|
|
14
|
+
"comment": "Add shadow to FAB"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Fri, 08 Jul 2022 21:23:37 GMT",
|
|
6
21
|
"tag": "@fluentui-react-native/experimental-shadow_v0.2.2",
|
|
7
22
|
"version": "0.2.2",
|
|
8
23
|
"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 Wed, 13 Jul 2022 23:23:25 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.2.3
|
|
8
|
+
|
|
9
|
+
Wed, 13 Jul 2022 23:23:25 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Add shadow to FAB (78454019+lyzhan7@users.noreply.github.com)
|
|
14
|
+
|
|
7
15
|
## 0.2.2
|
|
8
16
|
|
|
9
|
-
Fri, 08 Jul 2022 21:
|
|
17
|
+
Fri, 08 Jul 2022 21:23:37 GMT
|
|
10
18
|
|
|
11
19
|
### Patches
|
|
12
20
|
|
package/lib/Shadow.js
CHANGED
|
@@ -16,11 +16,7 @@ import { useFluentTheme, mergeProps, stagedComponent } from '@fluentui-react-nat
|
|
|
16
16
|
import { getShadowTokenStyleSet } from './shadowStyle';
|
|
17
17
|
export var Shadow = stagedComponent(function (props) {
|
|
18
18
|
var theme = useFluentTheme();
|
|
19
|
-
return function (final) {
|
|
20
|
-
var children = [];
|
|
21
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
22
|
-
children[_i - 1] = arguments[_i];
|
|
23
|
-
}
|
|
19
|
+
return function (final, children) {
|
|
24
20
|
var shadowTokenStyleSet = getShadowTokenStyleSet(theme, props.depth);
|
|
25
21
|
var mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
|
|
26
22
|
return (React.createElement(View, { style: shadowTokenStyleSet.ambient },
|
package/lib/Shadow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAe,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,UAAC,KAAkB
|
|
1
|
+
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAe,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,IAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC;AAEhC,eAAe,MAAM,CAAC"}
|
package/lib/shadowStyle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+BjE"}
|
package/lib/shadowStyle.js
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { memoize } from '@fluentui-react-native/framework';
|
|
2
2
|
export var getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
|
|
3
3
|
function getShadowTokenStyleSetWorker(t, depth) {
|
|
4
|
+
if (!depth) {
|
|
5
|
+
return {
|
|
6
|
+
key: emptyShadowStyle,
|
|
7
|
+
ambient: emptyShadowStyle,
|
|
8
|
+
};
|
|
9
|
+
}
|
|
4
10
|
var keyShadow = t.shadows[depth.toString()].key;
|
|
5
11
|
var ambientShadow = t.shadows[depth.toString()].ambient;
|
|
6
12
|
return {
|
|
@@ -33,4 +39,13 @@ var shadowOpacityFromRGBAColor = function (rgbaColor) {
|
|
|
33
39
|
// Round to two decimal places
|
|
34
40
|
return Math.round(opacityAsDecimal * 100) / 100;
|
|
35
41
|
};
|
|
42
|
+
var emptyShadowStyle = {
|
|
43
|
+
shadowColor: '000000',
|
|
44
|
+
shadowOpacity: 0,
|
|
45
|
+
shadowRadius: 0,
|
|
46
|
+
shadowOffset: {
|
|
47
|
+
width: 0,
|
|
48
|
+
height: 0,
|
|
49
|
+
},
|
|
50
|
+
};
|
|
36
51
|
//# sourceMappingURL=shadowStyle.js.map
|
package/lib/shadowStyle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAIlE,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,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;YAC5B,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;YAChC,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
|
+
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAIlE,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,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;YAC5B,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;YAChC,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;AAEF,IAAM,gBAAgB,GAAG;IACvB,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}
|
package/lib-commonjs/Shadow.js
CHANGED
|
@@ -38,11 +38,7 @@ var framework_1 = require("@fluentui-react-native/framework");
|
|
|
38
38
|
var shadowStyle_1 = require("./shadowStyle");
|
|
39
39
|
exports.Shadow = (0, framework_1.stagedComponent)(function (props) {
|
|
40
40
|
var theme = (0, framework_1.useFluentTheme)();
|
|
41
|
-
return function (final) {
|
|
42
|
-
var children = [];
|
|
43
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
44
|
-
children[_i - 1] = arguments[_i];
|
|
45
|
-
}
|
|
41
|
+
return function (final, children) {
|
|
46
42
|
var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(theme, props.depth);
|
|
47
43
|
var mergedProps = (0, framework_1.mergeProps)(final, { style: shadowTokenStyleSet.key });
|
|
48
44
|
return (React.createElement(react_native_1.View, { style: shadowTokenStyleSet.ambient },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+F;AAC/F,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,UAAC,KAAkB
|
|
1
|
+
{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+F;AAC/F,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,mBAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+BjE"}
|
|
@@ -4,6 +4,12 @@ exports.getShadowTokenStyleSet = void 0;
|
|
|
4
4
|
var framework_1 = require("@fluentui-react-native/framework");
|
|
5
5
|
exports.getShadowTokenStyleSet = (0, framework_1.memoize)(getShadowTokenStyleSetWorker);
|
|
6
6
|
function getShadowTokenStyleSetWorker(t, depth) {
|
|
7
|
+
if (!depth) {
|
|
8
|
+
return {
|
|
9
|
+
key: emptyShadowStyle,
|
|
10
|
+
ambient: emptyShadowStyle,
|
|
11
|
+
};
|
|
12
|
+
}
|
|
7
13
|
var keyShadow = t.shadows[depth.toString()].key;
|
|
8
14
|
var ambientShadow = t.shadows[depth.toString()].ambient;
|
|
9
15
|
return {
|
|
@@ -36,4 +42,13 @@ var shadowOpacityFromRGBAColor = function (rgbaColor) {
|
|
|
36
42
|
// Round to two decimal places
|
|
37
43
|
return Math.round(opacityAsDecimal * 100) / 100;
|
|
38
44
|
};
|
|
45
|
+
var emptyShadowStyle = {
|
|
46
|
+
shadowColor: '000000',
|
|
47
|
+
shadowOpacity: 0,
|
|
48
|
+
shadowRadius: 0,
|
|
49
|
+
shadowOffset: {
|
|
50
|
+
width: 0,
|
|
51
|
+
height: 0,
|
|
52
|
+
},
|
|
53
|
+
};
|
|
39
54
|
//# sourceMappingURL=shadowStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAAkE;AAIrD,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,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;YAC5B,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;YAChC,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
|
+
{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAAkE;AAIrD,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAI,CAAC,KAAK,EAAE;QACV,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,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;YAC5B,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;YAChC,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;AAEF,IAAM,gBAAgB,GAAG;IACvB,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}
|
package/package.json
CHANGED
package/src/Shadow.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import { getShadowTokenStyleSet } from './shadowStyle';
|
|
|
7
7
|
export const Shadow = stagedComponent((props: ShadowProps) => {
|
|
8
8
|
const theme = useFluentTheme();
|
|
9
9
|
|
|
10
|
-
return (final: ShadowProps,
|
|
10
|
+
return (final: ShadowProps, children: React.ReactNode) => {
|
|
11
11
|
const shadowTokenStyleSet = getShadowTokenStyleSet(theme, props.depth);
|
|
12
12
|
const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
|
|
13
13
|
|
package/src/shadowStyle.ts
CHANGED
|
@@ -5,6 +5,13 @@ import { ShadowDepth } from './Shadow.types';
|
|
|
5
5
|
export const getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
|
|
6
6
|
|
|
7
7
|
function getShadowTokenStyleSetWorker(t: Theme, depth: ShadowDepth) {
|
|
8
|
+
if (!depth) {
|
|
9
|
+
return {
|
|
10
|
+
key: emptyShadowStyle,
|
|
11
|
+
ambient: emptyShadowStyle,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
|
|
8
15
|
const keyShadow = t.shadows[depth.toString()].key;
|
|
9
16
|
const ambientShadow = t.shadows[depth.toString()].ambient;
|
|
10
17
|
|
|
@@ -41,3 +48,13 @@ const shadowOpacityFromRGBAColor = (rgbaColor: ColorValue) => {
|
|
|
41
48
|
// Round to two decimal places
|
|
42
49
|
return Math.round(opacityAsDecimal * 100) / 100;
|
|
43
50
|
};
|
|
51
|
+
|
|
52
|
+
const emptyShadowStyle = {
|
|
53
|
+
shadowColor: '000000',
|
|
54
|
+
shadowOpacity: 0,
|
|
55
|
+
shadowRadius: 0,
|
|
56
|
+
shadowOffset: {
|
|
57
|
+
width: 0,
|
|
58
|
+
height: 0,
|
|
59
|
+
},
|
|
60
|
+
};
|