@fluentui-react-native/experimental-shadow 0.2.11 → 0.2.14

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.
Files changed (18) hide show
  1. package/CHANGELOG.json +46 -1
  2. package/CHANGELOG.md +26 -2
  3. package/SPEC.md +45 -1
  4. package/lib/Shadow.d.ts.map +1 -1
  5. package/lib/Shadow.js +3 -0
  6. package/lib/Shadow.js.map +1 -1
  7. package/lib/shadowStyle.d.ts.map +1 -1
  8. package/lib/shadowStyle.js +0 -15
  9. package/lib/shadowStyle.js.map +1 -1
  10. package/lib-commonjs/Shadow.d.ts.map +1 -1
  11. package/lib-commonjs/Shadow.js +3 -0
  12. package/lib-commonjs/Shadow.js.map +1 -1
  13. package/lib-commonjs/shadowStyle.d.ts.map +1 -1
  14. package/lib-commonjs/shadowStyle.js +0 -15
  15. package/lib-commonjs/shadowStyle.js.map +1 -1
  16. package/package.json +2 -2
  17. package/src/Shadow.tsx +4 -0
  18. package/src/shadowStyle.ts +0 -17
package/CHANGELOG.json CHANGED
@@ -2,7 +2,52 @@
2
2
  "name": "@fluentui-react-native/experimental-shadow",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 15 Aug 2022 22:11:32 GMT",
5
+ "date": "Mon, 29 Aug 2022 23:19:48 GMT",
6
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.14",
7
+ "version": "0.2.14",
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.1",
14
+ "commit": "370259af6f245b97a9a9129d8defbdd30a0bbd9d"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Fri, 26 Aug 2022 18:15:16 GMT",
21
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.13",
22
+ "version": "0.2.13",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "78454019+lyzhan7@users.noreply.github.com",
27
+ "package": "@fluentui-react-native/experimental-shadow",
28
+ "commit": "661eeca6abbf496a2b36f2ecd4ae8dd6a6ae2f58",
29
+ "comment": "Use undefined shadowToken in NotificationTokens"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Mon, 15 Aug 2022 23:29:03 GMT",
36
+ "tag": "@fluentui-react-native/experimental-shadow_v0.2.12",
37
+ "version": "0.2.12",
38
+ "comments": {
39
+ "patch": [
40
+ {
41
+ "author": "78454019+lyzhan7@users.noreply.github.com",
42
+ "package": "@fluentui-react-native/experimental-shadow",
43
+ "commit": "0f96f121a70581779472908ff4e00a914dcd1bf0",
44
+ "comment": "Initial SPEC.md for shadows"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Mon, 15 Aug 2022 22:12:03 GMT",
6
51
  "tag": "@fluentui-react-native/experimental-shadow_v0.2.11",
7
52
  "version": "0.2.11",
8
53
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui-react-native/experimental-shadow
2
2
 
3
- This log was last generated on Mon, 15 Aug 2022 22:11:32 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 29 Aug 2022 23:19:48 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 0.2.14
8
+
9
+ Mon, 29 Aug 2022 23:19:48 GMT
10
+
11
+ ### Patches
12
+
13
+ - Bump @fluentui-react-native/framework to v0.8.1
14
+
15
+ ## 0.2.13
16
+
17
+ Fri, 26 Aug 2022 18:15:16 GMT
18
+
19
+ ### Patches
20
+
21
+ - Use undefined shadowToken in NotificationTokens (78454019+lyzhan7@users.noreply.github.com)
22
+
23
+ ## 0.2.12
24
+
25
+ Mon, 15 Aug 2022 23:29:03 GMT
26
+
27
+ ### Patches
28
+
29
+ - Initial SPEC.md for shadows (78454019+lyzhan7@users.noreply.github.com)
30
+
7
31
  ## 0.2.11
8
32
 
9
- Mon, 15 Aug 2022 22:11:32 GMT
33
+ Mon, 15 Aug 2022 22:12:03 GMT
10
34
 
11
35
  ### Patches
12
36
 
package/SPEC.md CHANGED
@@ -2,4 +2,48 @@
2
2
 
3
3
  ## Background
4
4
 
5
- Please write here you documentation...
5
+ A `Shadow` is a component that can be used to add Fluent shadows to other components.
6
+
7
+ Shadows defined in the Fluent design system are actually comprised of two shadows. The **key shadow** is used to create a feeling of distance, and the **ambient shadow** is used to define the edges of the shape.
8
+
9
+ ## Shadow Depth Ramp
10
+
11
+ These are the current `Shadow` variants:
12
+
13
+ | | Light mode | Dark mode |
14
+ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
15
+ | Regular shadows | <img width="801" alt="Screen Shot 2022-08-12 at 10 46 45 AM" src="https://user-images.githubusercontent.com/78454019/184426272-fe23d23f-3c60-4811-82d8-16ae8dc501d9.png"> | <img width="788" alt="Screen Shot 2022-08-12 at 12 08 56 PM" src="https://user-images.githubusercontent.com/78454019/184427236-0b93d797-fdde-4367-9caa-751bcf335eea.png"> |
16
+ | Brand shadows | <img width="802" alt="Screen Shot 2022-08-12 at 12 09 15 PM" src="https://user-images.githubusercontent.com/78454019/184427300-06dacedc-5f39-4dc1-b07b-536186115d2e.png"> | <img width="789" alt="Screen Shot 2022-08-12 at 12 09 03 PM" src="https://user-images.githubusercontent.com/78454019/184427338-c322d223-4719-4593-a550-8360c45aa2e5.png"> |
17
+
18
+ ## Sample Code
19
+
20
+ Examples adding some Shadows to some text:
21
+
22
+ ```tsx
23
+ <Shadow shadowToken={theme.shadows.shadow8}>
24
+ <Text>Text box with shadow8</Text>
25
+ </Shadow>
26
+ ```
27
+
28
+ ```tsx
29
+ <Shadow shadowToken={theme.shadows.shadow8brand}>
30
+ <Text>Text box with shadow8brand</Text>
31
+ </Shadow>
32
+ ```
33
+
34
+ For more examples of using Shadow, please see the [ShadowTest test page](https://github.com/microsoft/fluentui-react-native/tree/main/apps/fluent-tester/src/TestComponents/Shadow) in the [Fluent Tester app](https://github.com/microsoft/fluentui-react-native/blob/main/apps/fluent-tester/README.md).
35
+
36
+ For an example of adding a Shadow as a slot to a Fluent component, please see the [FAB component](https://github.com/microsoft/fluentui-react-native/tree/main/packages/components/Button/src/FAB) - this component exists on both iOS and Android, but currently only the iOS version uses the Shadow component. The [Notification component](https://github.com/microsoft/fluentui-react-native/tree/main/packages/components/Notification) is another example that uses the Shadow component.
37
+
38
+ ## API
39
+
40
+ ### Props
41
+
42
+ The `Shadow` component takes in one prop called `ShadowToken`. The variants of ShadowToken are all defined in the theme.
43
+ If `undefined` is passed into the `shadowToken` prop, no shadow will be rendered.
44
+
45
+ `Shadow` must take exactly one child, which must support a style that derives from ViewStyle (ex. View, Text)
46
+
47
+ ## Notes
48
+
49
+ - Known issue: there may be some slight rounding discrepancies due to hex to decimal rounding errors, ex. opacity 0.24 may end up at 0.25.
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;AAIzD,eAAO,MAAM,MAAM,4EAkBjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAsBjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
package/lib/Shadow.js CHANGED
@@ -16,6 +16,9 @@ import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
16
16
  import { getShadowTokenStyleSet } from './shadowStyle';
17
17
  export var Shadow = stagedComponent(function (props) {
18
18
  return function (final, children) {
19
+ if (!props.shadowToken) {
20
+ return React.createElement(React.Fragment, null, children);
21
+ }
19
22
  var shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
20
23
  var mergedProps = mergeProps(final, { style: shadowTokenStyleSet.ambient });
21
24
  var childrenArray = React.Children.toArray(children);
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,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;QAE9E,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAC/E,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;SACF;QAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAElH,OAAO,oBAAC,IAAI,eAAK,WAAW,GAAG,kBAAkB,CAAQ,CAAC;IAC5D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC;AAEhC,eAAe,MAAM,CAAC"}
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,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACtB,OAAO,0CAAG,QAAQ,CAAI,CAAC;SACxB;QAED,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;QAE9E,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAC/E,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;SACF;QAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAElH,OAAO,oBAAC,IAAI,eAAK,WAAW,GAAG,kBAAkB,CAAQ,CAAC;IAC5D,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":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+B7D"}
1
+ {"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAwB7D"}
package/lib/shadowStyle.js CHANGED
@@ -1,12 +1,6 @@
1
1
  import { memoize } from '@fluentui-react-native/framework';
2
2
  export var getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
3
3
  function getShadowTokenStyleSetWorker(shadowToken) {
4
- if (!shadowToken) {
5
- return {
6
- key: emptyShadowStyle,
7
- ambient: emptyShadowStyle,
8
- };
9
- }
10
4
  var keyShadow = shadowToken.key;
11
5
  var ambientShadow = shadowToken.ambient;
12
6
  return {
@@ -39,13 +33,4 @@ var shadowOpacityFromRGBAColor = function (rgbaColor) {
39
33
  // Round to two decimal places
40
34
  return Math.round(opacityAsDecimal * 100) / 100;
41
35
  };
42
- var emptyShadowStyle = {
43
- shadowColor: '000000',
44
- shadowOpacity: 0,
45
- shadowRadius: 0,
46
- shadowOffset: {
47
- width: 0,
48
- height: 0,
49
- },
50
- };
51
36
  //# 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,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAI3D,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAE1C,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"}
1
+ {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAI3D,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;IAE1C,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"}
package/lib-commonjs/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;AAIzD,eAAO,MAAM,MAAM,4EAkBjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAsBjB,CAAC;AAIH,eAAe,MAAM,CAAC"}
package/lib-commonjs/Shadow.js CHANGED
@@ -38,6 +38,9 @@ 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
  return function (final, children) {
41
+ if (!props.shadowToken) {
42
+ return React.createElement(React.Fragment, null, children);
43
+ }
41
44
  var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(props.shadowToken);
42
45
  var mergedProps = (0, framework_1.mergeProps)(final, { style: shadowTokenStyleSet.ambient });
43
46
  var childrenArray = React.Children.toArray(children);
package/lib-commonjs/Shadow.js.map CHANGED
@@ -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+E;AAC/E,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;QAE9E,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAC/E,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;SACF;QAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,IAAA,sBAAU,EAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAElH,OAAO,oBAAC,mBAAI,eAAK,WAAW,GAAG,kBAAkB,CAAQ,CAAC;IAC5D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}
1
+ {"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+E;AAC/E,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACtB,OAAO,0CAAG,QAAQ,CAAI,CAAC;SACxB;QAED,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,EAAE,CAAC,CAAC;QAE9E,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAC/E,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;SACF;QAED,IAAM,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,IAAA,sBAAU,EAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAElH,OAAO,oBAAC,mBAAI,eAAK,WAAW,GAAG,kBAAkB,CAAQ,CAAC;IAC5D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}
package/lib-commonjs/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;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+B7D"}
1
+ {"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAwB7D"}
package/lib-commonjs/shadowStyle.js CHANGED
@@ -4,12 +4,6 @@ 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(shadowToken) {
7
- if (!shadowToken) {
8
- return {
9
- key: emptyShadowStyle,
10
- ambient: emptyShadowStyle,
11
- };
12
- }
13
7
  var keyShadow = shadowToken.key;
14
8
  var ambientShadow = shadowToken.ambient;
15
9
  return {
@@ -42,13 +36,4 @@ var shadowOpacityFromRGBAColor = function (rgbaColor) {
42
36
  // Round to two decimal places
43
37
  return Math.round(opacityAsDecimal * 100) / 100;
44
38
  };
45
- var emptyShadowStyle = {
46
- shadowColor: '000000',
47
- shadowOpacity: 0,
48
- shadowRadius: 0,
49
- shadowOffset: {
50
- width: 0,
51
- height: 0,
52
- },
53
- };
54
39
  //# sourceMappingURL=shadowStyle.js.map
package/lib-commonjs/shadowStyle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAI9C,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAE1C,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"}
1
+ {"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAI9C,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;IAE1C,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/experimental-shadow",
3
- "version": "0.2.11",
3
+ "version": "0.2.14",
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,7 +22,7 @@
22
22
  "directory": "packages/experimental/Shadow"
23
23
  },
24
24
  "dependencies": {
25
- "@fluentui-react-native/framework": "0.8.0",
25
+ "@fluentui-react-native/framework": "0.8.1",
26
26
  "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0"
27
27
  },
28
28
  "devDependencies": {
package/src/Shadow.tsx CHANGED
@@ -6,6 +6,10 @@ import { getShadowTokenStyleSet } from './shadowStyle';
6
6
 
7
7
  export const Shadow = stagedComponent((props: ShadowProps) => {
8
8
  return (final: ShadowProps, children: React.ReactNode) => {
9
+ if (!props.shadowToken) {
10
+ return <>{children}</>;
11
+ }
12
+
9
13
  const shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
10
14
  const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.ambient });
11
15
 
package/src/shadowStyle.ts CHANGED
@@ -5,13 +5,6 @@ import { ColorValue } from 'react-native';
5
5
  export const getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
6
6
 
7
7
  function getShadowTokenStyleSetWorker(shadowToken: ShadowToken) {
8
- if (!shadowToken) {
9
- return {
10
- key: emptyShadowStyle,
11
- ambient: emptyShadowStyle,
12
- };
13
- }
14
-
15
8
  const keyShadow = shadowToken.key;
16
9
  const ambientShadow = shadowToken.ambient;
17
10
 
@@ -48,13 +41,3 @@ const shadowOpacityFromRGBAColor = (rgbaColor: ColorValue) => {
48
41
  // Round to two decimal places
49
42
  return Math.round(opacityAsDecimal * 100) / 100;
50
43
  };
51
-
52
- const emptyShadowStyle = {
53
- shadowColor: '000000',
54
- shadowOpacity: 0,
55
- shadowRadius: 0,
56
- shadowOffset: {
57
- width: 0,
58
- height: 0,
59
- },
60
- };