@fluentui-react-native/use-tokens 0.6.11 → 0.7.0
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 +15 -0
- package/CHANGELOG.md +45 -1
- package/README.md +1 -1
- package/babel.config.js +1 -1
- package/lib/applyPropsToTokens.d.ts +7 -2
- package/lib/applyPropsToTokens.js +7 -7
- package/lib/applyPropsToTokens.js.map +1 -1
- package/lib/applyPropsToTokens.test.d.ts +1 -1
- package/lib/applyPropsToTokens.test.js +19 -19
- package/lib/applyPropsToTokens.test.js.map +1 -1
- package/lib/applyTokenLayers.d.ts +7 -2
- package/lib/applyTokenLayers.js +16 -13
- package/lib/applyTokenLayers.js.map +1 -1
- package/lib/applyTokenLayers.test.d.ts +1 -1
- package/lib/applyTokenLayers.test.js +42 -42
- package/lib/applyTokenLayers.test.js.map +1 -1
- package/lib/buildUseTokens.d.ts +6 -3
- package/lib/buildUseTokens.js +22 -22
- package/lib/buildUseTokens.js.map +1 -1
- package/lib/buildUseTokens.test.d.ts +1 -1
- package/lib/buildUseTokens.test.js +68 -68
- package/lib/buildUseTokens.test.js.map +1 -1
- package/lib/customizable.d.ts +9 -5
- package/lib/customizable.d.ts.map +1 -1
- package/lib/customizable.js +8 -8
- package/lib/customizable.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/patchTokens.d.ts +6 -2
- package/lib/patchTokens.js +12 -12
- package/lib/patchTokens.js.map +1 -1
- package/lib/patchTokens.test.d.ts +1 -1
- package/lib/patchTokens.test.js +32 -32
- package/lib/patchTokens.test.js.map +1 -1
- package/lib/useTokens.samples.test.d.ts +1 -1
- package/lib/useTokens.samples.test.js +134 -111
- package/lib/useTokens.samples.test.js.map +1 -1
- package/lib-commonjs/applyPropsToTokens.d.ts +7 -2
- package/lib-commonjs/applyPropsToTokens.js +10 -11
- package/lib-commonjs/applyPropsToTokens.js.map +1 -1
- package/lib-commonjs/applyPropsToTokens.test.d.ts +1 -1
- package/lib-commonjs/applyPropsToTokens.test.js +23 -23
- package/lib-commonjs/applyPropsToTokens.test.js.map +1 -1
- package/lib-commonjs/applyTokenLayers.d.ts +7 -2
- package/lib-commonjs/applyTokenLayers.js +20 -18
- package/lib-commonjs/applyTokenLayers.js.map +1 -1
- package/lib-commonjs/applyTokenLayers.test.d.ts +1 -1
- package/lib-commonjs/applyTokenLayers.test.js +46 -46
- package/lib-commonjs/applyTokenLayers.test.js.map +1 -1
- package/lib-commonjs/buildUseTokens.d.ts +6 -3
- package/lib-commonjs/buildUseTokens.js +30 -28
- package/lib-commonjs/buildUseTokens.js.map +1 -1
- package/lib-commonjs/buildUseTokens.test.d.ts +1 -1
- package/lib-commonjs/buildUseTokens.test.js +71 -71
- package/lib-commonjs/buildUseTokens.test.js.map +1 -1
- package/lib-commonjs/customizable.d.ts +9 -5
- package/lib-commonjs/customizable.d.ts.map +1 -1
- package/lib-commonjs/customizable.js +11 -12
- package/lib-commonjs/customizable.js.map +1 -1
- package/lib-commonjs/index.d.ts +1 -1
- package/lib-commonjs/index.js +38 -13
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/patchTokens.d.ts +6 -2
- package/lib-commonjs/patchTokens.js +15 -16
- package/lib-commonjs/patchTokens.js.map +1 -1
- package/lib-commonjs/patchTokens.test.d.ts +1 -1
- package/lib-commonjs/patchTokens.test.js +36 -36
- package/lib-commonjs/patchTokens.test.js.map +1 -1
- package/lib-commonjs/useTokens.samples.test.d.ts +1 -1
- package/lib-commonjs/useTokens.samples.test.js +195 -119
- package/lib-commonjs/useTokens.samples.test.js.map +1 -1
- package/package.json +49 -43
- package/src/customizable.ts +3 -2
- package/src/useTokens.samples.test.tsx +24 -15
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export type { GetComponentInfo, TokenSettings, TokensFromTheme, UseTokens, UseTo
|
|
|
6
6
|
export { customizable } from './customizable';
|
|
7
7
|
export type { CustomizableComponent, InjectableComponent } from './customizable';
|
|
8
8
|
export { patchTokens } from './patchTokens';
|
|
9
|
-
//# sourceMappingURL=index.d.ts.map
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,14 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
3
|
exports.patchTokens = exports.customizable = exports.buildUseTokens = exports.applyTokenLayers = exports.applyPropsToTokens = void 0;
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
4
|
+
const applyPropsToTokens_1 = require('./applyPropsToTokens');
|
|
5
|
+
Object.defineProperty(exports, 'applyPropsToTokens', {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function () {
|
|
8
|
+
return applyPropsToTokens_1.applyPropsToTokens;
|
|
9
|
+
},
|
|
10
|
+
});
|
|
11
|
+
const applyTokenLayers_1 = require('./applyTokenLayers');
|
|
12
|
+
Object.defineProperty(exports, 'applyTokenLayers', {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return applyTokenLayers_1.applyTokenLayers;
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
const buildUseTokens_1 = require('./buildUseTokens');
|
|
19
|
+
Object.defineProperty(exports, 'buildUseTokens', {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return buildUseTokens_1.buildUseTokens;
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
const customizable_1 = require('./customizable');
|
|
26
|
+
Object.defineProperty(exports, 'customizable', {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function () {
|
|
29
|
+
return customizable_1.customizable;
|
|
30
|
+
},
|
|
31
|
+
});
|
|
32
|
+
const patchTokens_1 = require('./patchTokens');
|
|
33
|
+
Object.defineProperty(exports, 'patchTokens', {
|
|
34
|
+
enumerable: true,
|
|
35
|
+
get: function () {
|
|
36
|
+
return patchTokens_1.patchTokens;
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,6DAA0D;AAAjD,wHAAA,kBAAkB,OAAA;AAC3B,yDAAsD;AAA7C,oHAAA,gBAAgB,OAAA;AAEzB,qDAAkD;AAAzC,gHAAA,cAAc,OAAA;AAEvB,iDAA8C;AAArC,4GAAA,YAAY,OAAA;AAErB,+CAA4C;AAAnC,0GAAA,WAAW,OAAA"}
|
|
@@ -8,5 +8,9 @@ import type { GetTypedMemoValue } from '@fluentui-react-native/framework-base';
|
|
|
8
8
|
* @param patchValues - new values to apply, values will be obtained via keys in the object
|
|
9
9
|
* @returns - a tuple consisting of a new tokens object and a new memo-cache
|
|
10
10
|
*/
|
|
11
|
-
export declare function patchTokens<TTokens>(
|
|
12
|
-
|
|
11
|
+
export declare function patchTokens<TTokens>(
|
|
12
|
+
tokens: TTokens,
|
|
13
|
+
cache: GetTypedMemoValue<TTokens>,
|
|
14
|
+
patchValues: TTokens,
|
|
15
|
+
): [TTokens, GetTypedMemoValue<TTokens>];
|
|
16
|
+
//# sourceMappingURL=patchTokens.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
3
|
-
exports.patchTokens =
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
+
exports.patchTokens = patchTokens;
|
|
4
4
|
/**
|
|
5
5
|
* Take a set of tokens (and a memo-cache) and apply changes to those tokens from an additional set of tokens. Only keys which are
|
|
6
6
|
* not undefined will be applied and if no changes are detected the token object will be unchanged.
|
|
@@ -11,17 +11,16 @@ exports.patchTokens = void 0;
|
|
|
11
11
|
* @returns - a tuple consisting of a new tokens object and a new memo-cache
|
|
12
12
|
*/
|
|
13
13
|
function patchTokens(tokens, cache, patchValues) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
14
|
+
// reduce the patch values to the set of keys that are defined, and sort them to ensure consistent ordering
|
|
15
|
+
const keys = Object.keys(patchValues)
|
|
16
|
+
.filter((v) => patchValues[v] !== undefined)
|
|
17
|
+
.sort();
|
|
18
|
+
// for each key get an updated tokens collection based on key + value. Value alone isn't sufficient as the values
|
|
19
|
+
// are not necessarily unique. i.e. { a: 'blue' } and { b: 'blue' } would cache to the same without the key
|
|
20
|
+
for (const key of keys) {
|
|
21
|
+
[tokens, cache] = cache(() => ({ ...tokens, [key]: patchValues[key] }), [key, patchValues[key]]);
|
|
22
|
+
}
|
|
23
|
+
// return the updated tokens and cache (if there were any keys applied)
|
|
24
|
+
return [tokens, cache];
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
//# sourceMappingURL=patchTokens.js.map
|
|
26
|
+
//# sourceMappingURL=patchTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"patchTokens.js","sourceRoot":"","sources":["../src/patchTokens.ts"],"names":[],"mappings":";;;AAEA;;;;;;;;GAQG;AACH,
|
|
1
|
+
{"version":3,"file":"patchTokens.js","sourceRoot":"","sources":["../src/patchTokens.ts"],"names":[],"mappings":";;;AAEA;;;;;;;;GAQG;AACH,qBACE,MAAe,EACf,KAAiC,EACjC,WAAoB,EACmB;IACvC,2GAA2G;IAC3G,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;SAClC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;SAC3C,IAAI,EAAE,CAAC;IAEV,iHAAiH;IACjH,2GAA2G;IAC3G,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnG,CAAC;IAED,uEAAuE;IACvE,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAAA,CACxB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=patchTokens.test.d.ts.map
|
|
2
|
+
//# sourceMappingURL=patchTokens.test.d.ts.map
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
3
|
-
const framework_base_1 = require(
|
|
4
|
-
const patchTokens_1 = require(
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
+
const framework_base_1 = require('@fluentui-react-native/framework-base');
|
|
4
|
+
const patchTokens_1 = require('./patchTokens');
|
|
5
5
|
const themeTokens = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
uno: 'uno',
|
|
7
|
+
dos: 'dos',
|
|
8
|
+
tres: 3,
|
|
9
|
+
quatro: 4,
|
|
10
|
+
cinco: true,
|
|
11
11
|
};
|
|
12
12
|
describe('patchTokens tests', () => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
13
|
+
test('props get copied', () => {
|
|
14
|
+
const cache = (0, framework_base_1.getMemoCache)();
|
|
15
|
+
const patchValues = { uno: 'one', quatro: 'quatro' };
|
|
16
|
+
const [tokens] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues);
|
|
17
|
+
expect(tokens).not.toBe(themeTokens);
|
|
18
|
+
for (const key in patchValues) {
|
|
19
|
+
expect(tokens[key]).toEqual(patchValues[key]);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
test('no copied props does not change tokens', () => {
|
|
23
|
+
const cache = (0, framework_base_1.getMemoCache)();
|
|
24
|
+
const patchValues1 = {};
|
|
25
|
+
const [tokens] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues1);
|
|
26
|
+
expect(tokens).toBe(themeTokens);
|
|
27
|
+
const patchValues2 = { tres: undefined };
|
|
28
|
+
const [tokens2] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patchValues2);
|
|
29
|
+
expect(tokens2).toBe(themeTokens);
|
|
30
|
+
});
|
|
31
|
+
test('patching tokens cache independent of order', () => {
|
|
32
|
+
const cache = (0, framework_base_1.getMemoCache)();
|
|
33
|
+
const patch1 = { uno: 'one', cinco: false };
|
|
34
|
+
const patch2 = { cinco: false, uno: 'one' };
|
|
35
|
+
const [tokens1] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patch1);
|
|
36
|
+
const [tokens2] = (0, patchTokens_1.patchTokens)(themeTokens, cache, patch2);
|
|
37
|
+
expect(tokens1).toBe(tokens2);
|
|
38
|
+
});
|
|
39
39
|
});
|
|
40
|
-
//# sourceMappingURL=patchTokens.test.js.map
|
|
40
|
+
//# sourceMappingURL=patchTokens.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"patchTokens.test.js","sourceRoot":"","sources":["../src/patchTokens.test.ts"],"names":[],"mappings":";;AAAA,0EAAqE;AAErE,+CAA4C;AAU5C,MAAM,WAAW,GAAW;IAC1B,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"patchTokens.test.js","sourceRoot":"","sources":["../src/patchTokens.test.ts"],"names":[],"mappings":";;AAAA,0EAAqE;AAErE,+CAA4C;AAU5C,MAAM,WAAW,GAAW;IAC1B,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,IAAI;CACZ,CAAC;AAEF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC;IAClC,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAA,6BAAY,GAAE,CAAC;QAC7B,MAAM,WAAW,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;QACrD,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,yBAAW,EAAC,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;QAC9D,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;QAChD,CAAC;IAAA,CACF,CAAC,CAAC;IAEH,IAAI,CAAC,wCAAwC,EAAE,GAAG,EAAE,CAAC;QACnD,MAAM,KAAK,GAAG,IAAA,6BAAY,GAAE,CAAC;QAC7B,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,MAAM,CAAC,MAAM,CAAC,GAAG,IAAA,yBAAW,EAAC,WAAW,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEjC,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QACzC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAA,yBAAW,EAAC,WAAW,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;QAChE,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAAA,CACnC,CAAC,CAAC;IAEH,IAAI,CAAC,4CAA4C,EAAE,GAAG,EAAE,CAAC;QACvD,MAAM,KAAK,GAAG,IAAA,6BAAY,GAAE,CAAC;QAC7B,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;QAC5C,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;QAC5C,MAAM,CAAC,OAAO,CAAC,GAAG,IAAA,yBAAW,EAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAC1D,MAAM,CAAC,OAAO,CAAC,GAAG,IAAA,yBAAW,EAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAC1D,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAAA,CAC/B,CAAC,CAAC;AAAA,CACJ,CAAC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=useTokens.samples.test.d.ts.map
|
|
2
|
+
//# sourceMappingURL=useTokens.samples.test.d.ts.map
|
|
@@ -1,29 +1,79 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
var __createBinding =
|
|
3
|
+
(this && this.__createBinding) ||
|
|
4
|
+
(Object.create
|
|
5
|
+
? function (o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
8
|
+
if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
9
|
+
desc = {
|
|
10
|
+
enumerable: true,
|
|
11
|
+
get: function () {
|
|
12
|
+
return m[k];
|
|
13
|
+
},
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
Object.defineProperty(o, k2, desc);
|
|
17
|
+
}
|
|
18
|
+
: function (o, m, k, k2) {
|
|
19
|
+
if (k2 === undefined) k2 = k;
|
|
20
|
+
o[k2] = m[k];
|
|
21
|
+
});
|
|
22
|
+
var __setModuleDefault =
|
|
23
|
+
(this && this.__setModuleDefault) ||
|
|
24
|
+
(Object.create
|
|
25
|
+
? function (o, v) {
|
|
26
|
+
Object.defineProperty(o, 'default', { enumerable: true, value: v });
|
|
27
|
+
}
|
|
28
|
+
: function (o, v) {
|
|
29
|
+
o['default'] = v;
|
|
30
|
+
});
|
|
31
|
+
var __importStar =
|
|
32
|
+
(this && this.__importStar) ||
|
|
33
|
+
(function () {
|
|
34
|
+
var ownKeys = function (o) {
|
|
35
|
+
ownKeys =
|
|
36
|
+
Object.getOwnPropertyNames ||
|
|
37
|
+
function (o) {
|
|
38
|
+
var ar = [];
|
|
39
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
40
|
+
return ar;
|
|
41
|
+
};
|
|
42
|
+
return ownKeys(o);
|
|
43
|
+
};
|
|
44
|
+
return function (mod) {
|
|
45
|
+
if (mod && mod.__esModule) return mod;
|
|
46
|
+
var result = {};
|
|
47
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
|
|
48
|
+
__setModuleDefault(result, mod);
|
|
49
|
+
return result;
|
|
50
|
+
};
|
|
51
|
+
})();
|
|
52
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
53
|
+
const jsx_runtime_1 = require('react/jsx-runtime');
|
|
54
|
+
const react_1 = require('react');
|
|
55
|
+
const react_native_1 = require('react-native');
|
|
56
|
+
const framework_base_1 = require('@fluentui-react-native/framework-base');
|
|
57
|
+
const framework_base_2 = require('@fluentui-react-native/framework-base');
|
|
58
|
+
const renderer = __importStar(require('react-test-renderer'));
|
|
59
|
+
const buildUseTokens_1 = require('./buildUseTokens');
|
|
10
60
|
/**
|
|
11
61
|
* The default/base theme just contains base values
|
|
12
62
|
*/
|
|
13
63
|
const baseTheme = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
64
|
+
globals: {
|
|
65
|
+
backgroundColor: 'white',
|
|
66
|
+
color: 'black',
|
|
67
|
+
borderColor: 'blue',
|
|
68
|
+
fontFamily: 'Arial',
|
|
69
|
+
fontSize: 12,
|
|
70
|
+
},
|
|
71
|
+
components: {},
|
|
22
72
|
};
|
|
23
73
|
const current = { theme: baseTheme };
|
|
24
74
|
const useTheme = () => current.theme;
|
|
25
75
|
const setActiveTheme = (theme) => {
|
|
26
|
-
|
|
76
|
+
current.theme = (theme && (0, framework_base_1.immutableMerge)(baseTheme, theme)) || baseTheme;
|
|
27
77
|
};
|
|
28
78
|
/**
|
|
29
79
|
* Helper function used to look up a component in the theme. Having this injected allows this module to not be dependent on the shape of
|
|
@@ -31,113 +81,139 @@ const setActiveTheme = (theme) => {
|
|
|
31
81
|
*/
|
|
32
82
|
const getComponentInfo = (theme, name) => theme.components[name];
|
|
33
83
|
describe('useTokens samples', () => {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
84
|
+
/**
|
|
85
|
+
* Sample #1 - Themeable text element
|
|
86
|
+
*
|
|
87
|
+
* This adds some default opinions for how a text element should be styled but only allows for customization
|
|
88
|
+
* via theming
|
|
89
|
+
*/
|
|
90
|
+
const useTokensSample1 = (0, buildUseTokens_1.buildUseTokens)(
|
|
91
|
+
getComponentInfo,
|
|
41
92
|
/** first the default values should come from the global theme section */
|
|
42
93
|
(t) => ({
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}),
|
|
94
|
+
color: t.globals.color,
|
|
95
|
+
fontFamily: t.globals.fontFamily,
|
|
96
|
+
fontSize: t.globals.fontSize,
|
|
97
|
+
}),
|
|
47
98
|
/** next we should look for a component reference to overlay */
|
|
48
|
-
'SampleText'
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
99
|
+
'SampleText',
|
|
100
|
+
);
|
|
101
|
+
const SampleText1 = (props) => {
|
|
102
|
+
// standard props splitting
|
|
103
|
+
const { style, children, ...rest } = props;
|
|
104
|
+
// typically this would start with a call to retrieve the theme from the context via whatever method is appropriate
|
|
105
|
+
const theme = useTheme();
|
|
106
|
+
// next the tokens are resolved from the theme, a cache specific to this theme is returned as well to allow for
|
|
107
|
+
// style objects to not be rebuilt unnecessarily
|
|
108
|
+
const [tokens, cache] = useTokensSample1(theme);
|
|
109
|
+
// build up the text style, or the full props as appropriate
|
|
110
|
+
const [styleFromTokens] = cache(
|
|
111
|
+
/**
|
|
112
|
+
* first build the style object
|
|
113
|
+
* - this executes once for every unique set of keys.
|
|
114
|
+
* - The cache is already unique for this theme
|
|
115
|
+
*/
|
|
116
|
+
() => ({ ...tokens }),
|
|
117
|
+
/**
|
|
118
|
+
* now specify the keys
|
|
119
|
+
* - because the only changing variable is the theme
|
|
120
|
+
* - ...and all the style properties are either constant or come from the tokens
|
|
121
|
+
* - ...no keys need to be specified
|
|
122
|
+
* - this means that only one style object will be created per component + theme pair
|
|
123
|
+
*/
|
|
124
|
+
[],
|
|
125
|
+
);
|
|
126
|
+
// merge the props from the tokens with anything passed in via style. This is internally cached via object identity
|
|
127
|
+
// so the merged style object won't change identity unless one of the two inputs changes identity.
|
|
128
|
+
const mergedStyle = (0, framework_base_2.mergeStyles)(styleFromTokens, style);
|
|
129
|
+
// now just render the element, forwarding the props, setting the merged style, then passing the children as appropriate
|
|
130
|
+
return jsx_runtime_1.jsx(react_native_1.Text, { ...rest, style: mergedStyle, children: children });
|
|
131
|
+
};
|
|
132
|
+
beforeEach(() => {
|
|
133
|
+
setActiveTheme();
|
|
134
|
+
});
|
|
135
|
+
/** first render the component with no updates */
|
|
136
|
+
it('Sample1Text rendering with no overrides', () => {
|
|
137
|
+
let component;
|
|
138
|
+
(0, react_1.act)(() => {
|
|
139
|
+
component = renderer.create(jsx_runtime_1.jsx(SampleText1, { children: 'Sample1a' }));
|
|
81
140
|
});
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
141
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
142
|
+
});
|
|
143
|
+
/** now re-theme the component via the components in the theme */
|
|
144
|
+
it('Sample1Text rendering with some custom settings in the theme', () => {
|
|
145
|
+
setActiveTheme({
|
|
146
|
+
components: {
|
|
147
|
+
SampleText: {
|
|
148
|
+
color: 'pink',
|
|
149
|
+
fontSize: 24,
|
|
150
|
+
},
|
|
151
|
+
},
|
|
86
152
|
});
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
components: {
|
|
91
|
-
SampleText: {
|
|
92
|
-
color: 'pink',
|
|
93
|
-
fontSize: 24,
|
|
94
|
-
},
|
|
95
|
-
},
|
|
96
|
-
});
|
|
97
|
-
const tree = renderer.create(React.createElement(SampleText1, null, "Sample1b")).toJSON();
|
|
98
|
-
expect(tree).toMatchSnapshot();
|
|
153
|
+
let component;
|
|
154
|
+
(0, react_1.act)(() => {
|
|
155
|
+
component = renderer.create(jsx_runtime_1.jsx(SampleText1, { children: 'Sample1b' }));
|
|
99
156
|
});
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
React.createElement(SampleText2, { color: "green" }, "Sample2 with color override via prop")))
|
|
122
|
-
.toJSON();
|
|
123
|
-
expect(tree).toMatchSnapshot();
|
|
157
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
158
|
+
});
|
|
159
|
+
// the Sample2Text component is built the same way as sample1, just using the new hook that has been created
|
|
160
|
+
const SampleText2 = (props) => {
|
|
161
|
+
const { color, style, children, ...rest } = props;
|
|
162
|
+
const theme = useTheme();
|
|
163
|
+
// this starts the same as sample1, extract tokens from the theme and get a theme specific cache object
|
|
164
|
+
const [tokens, cache] = useTokensSample1(theme);
|
|
165
|
+
// now when building up the style this time, the resulting style object is based upon both the theme and the passed
|
|
166
|
+
// in value of colors. Because the theme is already part of the cache definition, only color needs to be a key
|
|
167
|
+
const styleFromTokens = cache(
|
|
168
|
+
/** build the style, only patch the color if it has a value, otherwise the theme value would get stomped if color was undefined */
|
|
169
|
+
() => ({ ...tokens, ...(color && { color }) }),
|
|
170
|
+
/** use color as an additional key for the style */
|
|
171
|
+
[color],
|
|
172
|
+
);
|
|
173
|
+
// now just render, this time merging styles inline to make it a bit shorter
|
|
174
|
+
return jsx_runtime_1.jsx(react_native_1.Text, {
|
|
175
|
+
...rest,
|
|
176
|
+
style: (0, framework_base_2.mergeStyles)(styleFromTokens, style),
|
|
177
|
+
children: children,
|
|
124
178
|
});
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
},
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
179
|
+
};
|
|
180
|
+
/** rendering the Sample2 component with the base theme */
|
|
181
|
+
it('Sample2Text rendering with defaults and a color override', () => {
|
|
182
|
+
let component;
|
|
183
|
+
(0, react_1.act)(() => {
|
|
184
|
+
component = renderer.create(
|
|
185
|
+
jsx_runtime_1.jsxs(react_native_1.View, {
|
|
186
|
+
children: [
|
|
187
|
+
jsx_runtime_1.jsx(SampleText2, { children: 'Sample2 with defaults' }),
|
|
188
|
+
jsx_runtime_1.jsx(SampleText2, { color: 'green', children: 'Sample2 with color override via prop' }),
|
|
189
|
+
],
|
|
190
|
+
}),
|
|
191
|
+
);
|
|
192
|
+
});
|
|
193
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
194
|
+
});
|
|
195
|
+
/** now re-theme the component via the components in the theme */
|
|
196
|
+
it('Sample2Text rendering with some custom settings in the theme', () => {
|
|
197
|
+
setActiveTheme({
|
|
198
|
+
components: {
|
|
199
|
+
SampleText: {
|
|
200
|
+
fontSize: 18,
|
|
201
|
+
fontFamily: 'Helvetica',
|
|
202
|
+
},
|
|
203
|
+
},
|
|
204
|
+
});
|
|
205
|
+
let component;
|
|
206
|
+
(0, react_1.act)(() => {
|
|
207
|
+
component = renderer.create(
|
|
208
|
+
jsx_runtime_1.jsxs(react_native_1.View, {
|
|
209
|
+
children: [
|
|
210
|
+
jsx_runtime_1.jsx(SampleText2, { children: 'Sample2 with theme overrides set' }),
|
|
211
|
+
jsx_runtime_1.jsx(SampleText2, { color: 'purple', children: 'Sample2 with theme and color prop override' }),
|
|
212
|
+
],
|
|
213
|
+
}),
|
|
214
|
+
);
|
|
141
215
|
});
|
|
216
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
217
|
+
});
|
|
142
218
|
});
|
|
143
|
-
//# sourceMappingURL=useTokens.samples.test.js.map
|
|
219
|
+
//# sourceMappingURL=useTokens.samples.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTokens.samples.test.js","sourceRoot":"","sources":["../src/useTokens.samples.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useTokens.samples.test.js","sourceRoot":"","sources":["../src/useTokens.samples.test.tsx"],"names":[],"mappings":"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"}
|