@fluentui-react-native/use-styling 0.7.0 → 0.8.1
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 +96 -1
- package/CHANGELOG.md +40 -2
- package/README.md +19 -17
- package/lib/buildProps.d.ts +10 -10
- package/lib/buildProps.d.ts.map +1 -1
- package/lib/buildProps.js +10 -28
- package/lib/buildProps.js.map +1 -1
- package/lib/buildProps.test.js +11 -30
- package/lib/buildProps.test.js.map +1 -1
- package/lib/buildUseStyling.d.ts +1 -1
- package/lib/buildUseStyling.d.ts.map +1 -1
- package/lib/buildUseStyling.js +5 -23
- package/lib/buildUseStyling.js.map +1 -1
- package/lib/buildUseStyling.test.js +1 -11
- package/lib/buildUseStyling.test.js.map +1 -1
- package/lib/useStyling.samples.test.js +2 -19
- package/lib/useStyling.samples.test.js.map +1 -1
- package/lib-commonjs/buildProps.d.ts +10 -10
- package/lib-commonjs/buildProps.d.ts.map +1 -1
- package/lib-commonjs/buildProps.js +11 -28
- package/lib-commonjs/buildProps.js.map +1 -1
- package/lib-commonjs/buildProps.test.js +15 -34
- package/lib-commonjs/buildProps.test.js.map +1 -1
- package/lib-commonjs/buildUseStyling.d.ts +1 -1
- package/lib-commonjs/buildUseStyling.d.ts.map +1 -1
- package/lib-commonjs/buildUseStyling.js +10 -27
- package/lib-commonjs/buildUseStyling.js.map +1 -1
- package/lib-commonjs/buildUseStyling.test.js +5 -15
- package/lib-commonjs/buildUseStyling.test.js.map +1 -1
- package/lib-commonjs/index.js +5 -6
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/useStyling.samples.test.js +18 -45
- package/lib-commonjs/useStyling.samples.test.js.map +1 -1
- package/package.json +7 -6
- package/src/buildProps.test.ts +10 -22
- package/src/buildProps.ts +32 -57
- package/src/buildUseStyling.ts +7 -9
|
@@ -16,36 +16,36 @@ export declare type TokensThatAreAlsoProps<TTokens> = (keyof TTokens)[] | 'all'
|
|
|
16
16
|
* The provided
|
|
17
17
|
* cache will be scoped to the theme, slot, and tokens that are coming out of the theme.
|
|
18
18
|
*/
|
|
19
|
-
export declare type BuildPropsBase<TProps, TTokens, TTheme
|
|
19
|
+
export declare type BuildPropsBase<TProps, TTokens, TTheme> = (tokens: TTokens, theme: TTheme, cache: GetMemoValue<any>) => Partial<TProps>;
|
|
20
20
|
/**
|
|
21
21
|
* A refine function allows style functions to be updated based on tokens that are also props. Only those tokens that are also
|
|
22
22
|
* props need to be considered as a key for caching
|
|
23
23
|
*/
|
|
24
|
-
export declare type RefineFunctionBase<TProps, TTokens, TTheme
|
|
24
|
+
export declare type RefineFunctionBase<TProps, TTokens, TTheme> = (mask?: TokensThatAreAlsoProps<TTokens>) => BuildPropsBase<TProps, TTokens, TTheme>;
|
|
25
25
|
/**
|
|
26
26
|
* Signature for a style function which can be optionally refined by the styling hook if prop masks are provided
|
|
27
27
|
*/
|
|
28
|
-
export declare type RefinableBuildPropsBase<TProps, TTokens, TTheme
|
|
29
|
-
refine?: RefineFunctionBase<TProps, TTokens, TTheme
|
|
28
|
+
export declare type RefinableBuildPropsBase<TProps, TTokens, TTheme> = BuildPropsBase<TProps, TTokens, TTheme> & {
|
|
29
|
+
refine?: RefineFunctionBase<TProps, TTokens, TTheme>;
|
|
30
30
|
};
|
|
31
31
|
/**
|
|
32
32
|
* Style functions can be plain functions, refinable functions, or just raw props
|
|
33
33
|
*/
|
|
34
|
-
export declare type BuildSlotProps<TSlotProps, TTokens, TTheme
|
|
35
|
-
[K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme
|
|
34
|
+
export declare type BuildSlotProps<TSlotProps, TTokens, TTheme> = {
|
|
35
|
+
[K in keyof TSlotProps]?: RefinableBuildPropsBase<TSlotProps[K], TTokens, TTheme> | TSlotProps[K];
|
|
36
36
|
};
|
|
37
37
|
/**
|
|
38
38
|
* Standard wrapper for a function that provides props for a component based on tokens and theme.
|
|
39
39
|
*
|
|
40
|
-
* @param fn - function which does the work of producing props for the tokens
|
|
41
|
-
* @param keys - which token
|
|
40
|
+
* @param fn - function which does the work of producing props for the tokens and theme provided
|
|
41
|
+
* @param keys - which token properties are used by this style, this determines the keys to use for caching
|
|
42
42
|
*/
|
|
43
|
-
export declare function buildProps<TProps, TTokens, TTheme
|
|
43
|
+
export declare function buildProps<TProps, TTokens, TTheme>(fn: (tokens: TTokens, theme: TTheme) => TProps, keys?: (keyof TTokens)[]): RefinableBuildPropsBase<TProps, TTokens, TTheme>;
|
|
44
44
|
/**
|
|
45
45
|
* Utility function to check the type and refinement capabilities of a styleFunction and refine it if appropriate
|
|
46
46
|
*
|
|
47
47
|
* @param fn - function or props to potentially refine
|
|
48
48
|
* @param mask - prop mask to use for refinement
|
|
49
49
|
*/
|
|
50
|
-
export declare function refinePropsFunctions<TSlotProps, TTokens, TTheme
|
|
50
|
+
export declare function refinePropsFunctions<TSlotProps, TTokens, TTheme>(styles: BuildSlotProps<TSlotProps, TTokens, TTheme>, mask: TokensThatAreAlsoProps<TTokens>): BuildSlotProps<TSlotProps, TTokens, TTheme>;
|
|
51
51
|
//# sourceMappingURL=buildProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildProps.d.ts","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;GAOG;AACH,oBAAY,sBAAsB,CAAC,OAAO,IAAI,CAAC,MAAM,OAAO,CAAC,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC;AAEjF;;;;;;;GAOG;AACH,oBAAY,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"buildProps.d.ts","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;GAOG;AACH,oBAAY,sBAAsB,CAAC,OAAO,IAAI,CAAC,MAAM,OAAO,CAAC,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC;AAEjF;;;;;;;GAOG;AACH,oBAAY,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAEpI;;;GAGG;AACH,oBAAY,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,CACxD,IAAI,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,KACnC,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAE7C;;GAEG;AACH,oBAAY,uBAAuB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG;IACvG,MAAM,CAAC,EAAE,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;CACtD,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI;KACvD,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,EAAE,uBAAuB,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;CAClG,CAAC;AAqBF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAChD,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,EAC9C,IAAI,CAAC,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,GACvB,uBAAuB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAclD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAC9D,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,EACnD,IAAI,EAAE,sBAAsB,CAAC,OAAO,CAAC,GACpC,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAQ7C"}
|
|
@@ -1,39 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
* Caches and returns the function based on the current keys.
|
|
5
|
-
*
|
|
6
|
-
* @param fn Function which does the work of producing props for the tokens, theme, and props provided
|
|
7
|
-
* @param keys Set of input values the function is dependent on
|
|
8
|
-
* @returns Cached function
|
|
9
|
-
*/
|
|
3
|
+
exports.refinePropsFunctions = exports.buildProps = void 0;
|
|
10
4
|
function cacheStyleClosure(fn, keys) {
|
|
11
|
-
return function (tokens, theme,
|
|
12
|
-
return cache(function () { return fn(tokens, theme
|
|
13
|
-
if (Object.keys(tokens).includes(key)) {
|
|
14
|
-
return tokens[key];
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
return props[key];
|
|
18
|
-
}
|
|
19
|
-
}))[0];
|
|
5
|
+
return function (tokens, theme, cache) {
|
|
6
|
+
return cache(function () { return fn(tokens, theme); }, (keys || []).map(function (key) { return tokens[key]; }))[0];
|
|
20
7
|
};
|
|
21
8
|
}
|
|
22
|
-
/**
|
|
23
|
-
* Reduce keys to the set that are also part of the mask.
|
|
24
|
-
*
|
|
25
|
-
* @param keys - which token and prop properties are used by this style, this determines the keys to use for caching
|
|
26
|
-
* @param mask - the set of tokens that are also props
|
|
27
|
-
* @returns An array of keys that are part of the mask to be used as a caching key
|
|
28
|
-
*/
|
|
29
9
|
function refineKeys(keys, mask) {
|
|
30
|
-
return typeof mask === 'object' && Array.isArray(mask)
|
|
10
|
+
return typeof mask === 'object' && Array.isArray(mask)
|
|
11
|
+
? keys.filter(function (key) { return mask.findIndex(function (val) { return val === key; }) !== -1; })
|
|
12
|
+
: mask
|
|
13
|
+
? keys
|
|
14
|
+
: [];
|
|
31
15
|
}
|
|
32
16
|
/**
|
|
33
17
|
* Standard wrapper for a function that provides props for a component based on tokens and theme.
|
|
34
18
|
*
|
|
35
|
-
* @param fn - function which does the work of producing props for the tokens
|
|
36
|
-
* @param keys - which token
|
|
19
|
+
* @param fn - function which does the work of producing props for the tokens and theme provided
|
|
20
|
+
* @param keys - which token properties are used by this style, this determines the keys to use for caching
|
|
37
21
|
*/
|
|
38
22
|
function buildProps(fn, keys) {
|
|
39
23
|
// wrap the provided function in the standard caching layer, basing it upon the provided keys
|
|
@@ -58,8 +42,7 @@ exports.buildProps = buildProps;
|
|
|
58
42
|
function refinePropsFunctions(styles, mask) {
|
|
59
43
|
var result = {};
|
|
60
44
|
Object.keys(styles).forEach(function (key) {
|
|
61
|
-
var refine = typeof styles[key] === 'function' &&
|
|
62
|
-
styles[key].refine;
|
|
45
|
+
var refine = typeof styles[key] === 'function' && styles[key].refine;
|
|
63
46
|
result[key] = refine ? refine(mask) : styles[key];
|
|
64
47
|
});
|
|
65
48
|
return result;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buildProps.js","sourceRoot":"","sources":["../src/buildProps.ts"],"names":[],"mappings":";;;AA4CA,SAAS,iBAAiB,CACxB,EAA8C,EAC9C,IAAwB;IAExB,OAAO,UAAC,MAAe,EAAE,KAAa,EAAE,KAA2B;QACjE,OAAA,KAAK,CACH,cAAM,OAAA,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EAAjB,CAAiB,EACvB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAC,GAAG,IAAK,OAAA,MAAM,CAAC,GAAG,CAAC,EAAX,CAAW,CAAC,CACvC,CAAC,CAAC,CAAC;IAHJ,CAGI,CAAC;AACT,CAAC;AAED,SAAS,UAAU,CAAU,IAAuB,EAAE,IAAsC;IAC1F,OAAO,OAAO,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QACpD,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,IAAK,OAAA,IAAI,CAAC,SAAS,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,KAAK,GAAG,EAAX,CAAW,CAAC,KAAK,CAAC,CAAC,EAA3C,CAA2C,CAAC;QACnE,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,SAAgB,UAAU,CACxB,EAA8C,EAC9C,IAAwB;IAExB,6FAA6F;IAC7F,IAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IAE3C,8GAA8G;IAC9G,MAAM,CAAC,MAAM;QACX,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,UAAC,IAAsC;gBACrC,OAAO,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;YACvD,CAAC;YACH,CAAC,CAAC,SAAS,CAAC;IAEhB,+DAA+D;IAC/D,OAAO,MAAM,CAAC;AAChB,CAAC;AAjBD,gCAiBC;AAED;;;;;GAKG;AACH,SAAgB,oBAAoB,CAClC,MAAmD,EACnD,IAAqC;IAErC,IAAM,MAAM,GAAG,EAAE,CAAC;IAClB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;QAC9B,IAAM,MAAM,GACV,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,UAAU,IAAK,MAAM,CAAC,GAAG,CAA4E,CAAC,MAAM,CAAC;QACtI,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAXD,oDAWC"}
|
|
@@ -1,54 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
14
4
|
var memo_cache_1 = require("@fluentui-react-native/memo-cache");
|
|
15
5
|
var buildProps_1 = require("./buildProps");
|
|
16
6
|
var theme = { foo: 'foo', bar: 'bar' };
|
|
17
7
|
var instanceCount = 0;
|
|
18
|
-
function munge(tokens, theme
|
|
19
|
-
return
|
|
8
|
+
function munge(tokens, theme) {
|
|
9
|
+
return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), tokens), { instance: instanceCount++ });
|
|
20
10
|
}
|
|
21
11
|
describe('props function tests', function () {
|
|
22
12
|
test('basic build props function caches as expected', function () {
|
|
23
|
-
var cache = memo_cache_1.getMemoCache();
|
|
24
|
-
var styleFn = buildProps_1.buildProps(munge, ['a', 'b']);
|
|
25
|
-
var p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme,
|
|
26
|
-
expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme,
|
|
27
|
-
var p2 = styleFn({ a: 'b', b: 'b' }, theme,
|
|
13
|
+
var cache = (0, memo_cache_1.getMemoCache)();
|
|
14
|
+
var styleFn = (0, buildProps_1.buildProps)(munge, ['a', 'b']);
|
|
15
|
+
var p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, cache);
|
|
16
|
+
expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, cache)).toBe(p1);
|
|
17
|
+
var p2 = styleFn({ a: 'b', b: 'b' }, theme, cache);
|
|
28
18
|
expect(p2).not.toBe(p1);
|
|
29
|
-
expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme,
|
|
19
|
+
expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, cache)).toBe(p2);
|
|
30
20
|
});
|
|
31
21
|
test('build props function refinement works with explicit keys', function () {
|
|
32
|
-
var cache = memo_cache_1.getMemoCache();
|
|
33
|
-
var styleFn = buildProps_1.buildProps(munge, ['a', 'b', 'c', 'd']);
|
|
22
|
+
var cache = (0, memo_cache_1.getMemoCache)();
|
|
23
|
+
var styleFn = (0, buildProps_1.buildProps)(munge, ['a', 'b', 'c', 'd']);
|
|
34
24
|
var refinedFn = styleFn.refine(['a', 'b']);
|
|
35
25
|
var t1 = { a: 'a', b: 'b', c: 'c', d: 'd' };
|
|
36
26
|
var t2 = { a: 'a', b: 'b', c: 'foo', d: 'bar' };
|
|
37
|
-
var p1 = styleFn(t1, theme,
|
|
38
|
-
var p2 = styleFn(t2, theme,
|
|
27
|
+
var p1 = styleFn(t1, theme, cache);
|
|
28
|
+
var p2 = styleFn(t2, theme, cache);
|
|
39
29
|
expect(p2).not.toBe(p1);
|
|
40
|
-
var rp1 = refinedFn(t1, theme,
|
|
41
|
-
var rp2 = refinedFn(t2, theme,
|
|
30
|
+
var rp1 = refinedFn(t1, theme, cache);
|
|
31
|
+
var rp2 = refinedFn(t2, theme, cache);
|
|
42
32
|
expect(rp2).toBe(rp1);
|
|
43
33
|
});
|
|
44
|
-
test('build props with outer props function caches as expected', function () {
|
|
45
|
-
var cache = memo_cache_1.getMemoCache();
|
|
46
|
-
var styleFn = buildProps_1.buildProps(munge, ['a', 'b', 'banana']);
|
|
47
|
-
var p1 = styleFn({ a: 'a', b: 'b', c: 'c' }, theme, { banana: 'banana' }, cache);
|
|
48
|
-
expect(styleFn({ a: 'a', b: 'b', c: 'foo' }, theme, { banana: 'banana', potato: 'potato' }, cache)).toBe(p1);
|
|
49
|
-
var p2 = styleFn({ a: 'b', b: 'b' }, theme, { banana: 'potato' }, cache);
|
|
50
|
-
expect(p2).not.toBe(p1);
|
|
51
|
-
expect(styleFn({ a: 'b', b: 'b', c: 'bar' }, theme, { banana: 'potato', potato: 'potato' }, cache)).toBe(p2);
|
|
52
|
-
});
|
|
53
34
|
});
|
|
54
35
|
//# sourceMappingURL=buildProps.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buildProps.test.js","sourceRoot":"","sources":["../src/buildProps.test.ts"],"names":[],"mappings":";;;AAAA,gEAAiE;AACjE,2CAA0C;AAM1C,IAAM,KAAK,GAAW,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;AAEjD,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,SAAS,KAAK,CAAC,MAAe,EAAE,KAAa;IAC3C,6EACK,KAAK,GACL,MAAM,KACT,QAAQ,EAAE,aAAa,EAAE,IACzB;AACJ,CAAC;AAED,QAAQ,CAAC,sBAAsB,EAAE;IAC/B,IAAI,CAAC,+CAA+C,EAAE;QACpD,IAAM,KAAK,GAAG,IAAA,yBAAY,GAAE,CAAC;QAC7B,IAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC9C,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QAC7D,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrE,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE;QAC/D,IAAM,KAAK,GAAG,IAAA,yBAAY,GAAE,CAAC;QAC7B,IAAM,OAAO,GAAG,IAAA,uBAAU,EAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACxD,IAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QAC7C,IAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;QAC9C,IAAM,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC;QAElD,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,IAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,IAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,IAAM,GAAG,GAAG,SAAS,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -16,7 +16,7 @@ export declare type UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> = {
|
|
|
16
16
|
/**
|
|
17
17
|
* Functions which build up the props for each slot
|
|
18
18
|
*/
|
|
19
|
-
slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme
|
|
19
|
+
slotProps?: BuildSlotProps<TSlotProps, TTokens, TTheme>;
|
|
20
20
|
/**
|
|
21
21
|
* Which props should be considered to be tokens.
|
|
22
22
|
* - If an array of keys this will ensure these props are promoted to tokens
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildUseStyling.d.ts","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,cAAc,EAAwB,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAwD,QAAQ,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElI;;GAEG;AACH,oBAAY,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI;IACnE;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC;IAE1C;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"buildUseStyling.d.ts","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,cAAc,EAAwB,MAAM,cAAc,CAAC;AAC5F,OAAO,EAAwD,QAAQ,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAElI;;GAEG;AACH,oBAAY,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI;IACnE;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC;IAE1C;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,OAAO,CAAC,EAAE,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAExD;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAEzD,gHAAgH;IAChH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,oBAAY,UAAU,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,UAAU,CAAC;AAE9F;;GAEG;AACH,oBAAY,WAAW,CAAC,MAAM,IAAI;IAChC,4FAA4F;IAC5F,QAAQ,EAAE,MAAM,MAAM,CAAC;IAEvB,iDAAiD;IACjD,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC;CACxD,CAAC;AAwBF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EACjE,OAAO,EAAE,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,EAC/D,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,GAC/B,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,CA6BhC"}
|
|
@@ -1,23 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
14
|
-
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
15
|
-
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
16
|
-
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
17
|
-
r[k] = a[j];
|
|
18
|
-
return r;
|
|
19
|
-
};
|
|
20
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.buildUseStyling = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
21
5
|
var buildProps_1 = require("./buildProps");
|
|
22
6
|
var use_tokens_1 = require("@fluentui-react-native/use-tokens");
|
|
23
7
|
/**
|
|
@@ -26,14 +10,13 @@ var use_tokens_1 = require("@fluentui-react-native/use-tokens");
|
|
|
26
10
|
* @param styles - refined style functions or props to use for processing
|
|
27
11
|
* @param tokens - token inputs for the style functions
|
|
28
12
|
* @param theme - theme to resolve against
|
|
29
|
-
* @param props - props from outer component
|
|
30
13
|
* @param cache - cache to use for the base of slot caching
|
|
31
14
|
*/
|
|
32
|
-
function resolveToSlotProps(styles, tokens, theme,
|
|
15
|
+
function resolveToSlotProps(styles, tokens, theme, cache) {
|
|
33
16
|
var slotProps = {};
|
|
34
17
|
Object.keys(styles).forEach(function (key) {
|
|
35
18
|
var style = styles[key];
|
|
36
|
-
slotProps[key] = typeof style === 'function' ? style(tokens, theme,
|
|
19
|
+
slotProps[key] = typeof style === 'function' ? style(tokens, theme, cache(null, [key])[1]) : style;
|
|
37
20
|
});
|
|
38
21
|
return slotProps;
|
|
39
22
|
}
|
|
@@ -47,8 +30,8 @@ function buildUseStyling(options, themeHelper) {
|
|
|
47
30
|
// create a cache instance for this use styling implementation
|
|
48
31
|
var useTheme = themeHelper.useTheme, getComponentInfo = themeHelper.getComponentInfo;
|
|
49
32
|
var tokens = options.tokens, tokenProps = options.tokensThatAreAlsoProps;
|
|
50
|
-
var styles = buildProps_1.refinePropsFunctions(options.slotProps || {}, tokenProps);
|
|
51
|
-
var useTokens = use_tokens_1.buildUseTokens.apply(void 0,
|
|
33
|
+
var styles = (0, buildProps_1.refinePropsFunctions)(options.slotProps || {}, tokenProps);
|
|
34
|
+
var useTokens = use_tokens_1.buildUseTokens.apply(void 0, (0, tslib_1.__spreadArray)([getComponentInfo], tokens, false));
|
|
52
35
|
return function (props, lookup) {
|
|
53
36
|
var _a, _b;
|
|
54
37
|
// query the theme
|
|
@@ -57,17 +40,17 @@ function buildUseStyling(options, themeHelper) {
|
|
|
57
40
|
var _c = useTokens(theme), mergedTokens = _c[0], cache = _c[1];
|
|
58
41
|
// resolve overrides as appropriate
|
|
59
42
|
if (options.states) {
|
|
60
|
-
_a = use_tokens_1.applyTokenLayers(mergedTokens, options.states, cache, lookup || (function (val) { return props[val]; })), mergedTokens = _a[0], cache = _a[1];
|
|
43
|
+
_a = (0, use_tokens_1.applyTokenLayers)(mergedTokens, options.states, cache, lookup || (function (val) { return props[val]; })), mergedTokens = _a[0], cache = _a[1];
|
|
61
44
|
}
|
|
62
45
|
// now resolve tokens
|
|
63
46
|
if (typeof tokenProps === 'object' && Array.isArray(tokenProps)) {
|
|
64
|
-
_b = use_tokens_1.applyPropsToTokens(props, mergedTokens, cache, tokenProps), mergedTokens = _b[0], cache = _b[1];
|
|
47
|
+
_b = (0, use_tokens_1.applyPropsToTokens)(props, mergedTokens, cache, tokenProps), mergedTokens = _b[0], cache = _b[1];
|
|
65
48
|
}
|
|
66
49
|
else if (tokenProps === 'all') {
|
|
67
|
-
mergedTokens = __assign(__assign({}, mergedTokens), props);
|
|
50
|
+
mergedTokens = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mergedTokens), props);
|
|
68
51
|
}
|
|
69
52
|
// finally produce slotProps from calling the style functions on each entry
|
|
70
|
-
return resolveToSlotProps(styles, mergedTokens, theme,
|
|
53
|
+
return resolveToSlotProps(styles, mergedTokens, theme, cache);
|
|
71
54
|
};
|
|
72
55
|
}
|
|
73
56
|
exports.buildUseStyling = buildUseStyling;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buildUseStyling.js","sourceRoot":"","sources":["../src/buildUseStyling.ts"],"names":[],"mappings":";;;;AACA,2CAA4F;AAC5F,gEAAkI;AAiDlI;;;;;;;GAOG;AACH,SAAS,kBAAkB,CACzB,MAAmD,EACnD,MAAe,EACf,KAAa,EACb,KAA4B;IAE5B,IAAM,SAAS,GAAG,EAAE,CAAC;IACrB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,GAAG;QAC9B,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrG,CAAC,CAAC,CAAC;IACH,OAAO,SAAuB,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,SAAgB,eAAe,CAC7B,OAA+D,EAC/D,WAAgC;IAEhC,8DAA8D;IACtD,IAAA,QAAQ,GAAuB,WAAW,SAAlC,EAAE,gBAAgB,GAAK,WAAW,iBAAhB,CAAiB;IAC3C,IAAA,MAAM,GAAyC,OAAO,OAAhD,EAA0B,UAAU,GAAK,OAAO,uBAAZ,CAAa;IAC/D,IAAM,MAAM,GAAG,IAAA,iCAAoB,EAAC,OAAO,CAAC,SAAS,IAAI,EAAE,EAAE,UAAU,CAAC,CAAC;IACzE,IAAM,SAAS,GAAG,2BAAc,2CAAkB,gBAAgB,GAAK,MAAM,SAAC,CAAC;IAE/E,OAAO,UAAC,KAAa,EAAE,MAAiB;;QACtC,kBAAkB;QAClB,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QAEzB,uCAAuC;QACnC,IAAA,KAAwB,SAAS,CAAC,KAAK,CAAC,EAAvC,YAAY,QAAA,EAAE,KAAK,QAAoB,CAAC;QAE7C,mCAAmC;QACnC,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,KAAwB,IAAA,6BAAgB,EAAC,YAAY,EAAE,OAAO,CAAC,MAAkB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,KAAK,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,EAAzH,YAAY,QAAA,EAAE,KAAK,QAAA,CAAuG;SAC5H;QAED,qBAAqB;QACrB,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YAC/D,KAAwB,IAAA,+BAAkB,EAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,EAAjF,YAAY,QAAA,EAAE,KAAK,QAAA,CAA+D;SACpF;aAAM,IAAI,UAAU,KAAK,KAAK,EAAE;YAC/B,YAAY,mDAAQ,YAAY,GAAK,KAAK,CAAE,CAAC;SAC9C;QAED,2EAA2E;QAC3E,OAAO,kBAAkB,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC,CAAC;AACJ,CAAC;AAhCD,0CAgCC"}
|
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
14
4
|
var buildUseStyling_1 = require("./buildUseStyling");
|
|
15
5
|
var memo_cache_1 = require("@fluentui-react-native/memo-cache");
|
|
16
6
|
var buildProps_1 = require("./buildProps");
|
|
@@ -48,10 +38,10 @@ var themeHelper = {
|
|
|
48
38
|
};
|
|
49
39
|
var slotFn1 = function (tokens, theme) {
|
|
50
40
|
return {
|
|
51
|
-
style: __assign(__assign({ a: tokens.a, b: tokens.b, c: tokens.c }, theme.vals), { instance: lastInstance++ }),
|
|
41
|
+
style: (0, tslib_1.__assign)((0, tslib_1.__assign)({ a: tokens.a, b: tokens.b, c: tokens.c }, theme.vals), { instance: lastInstance++ }),
|
|
52
42
|
};
|
|
53
43
|
};
|
|
54
|
-
var extraCache = memo_cache_1.getMemoCache();
|
|
44
|
+
var extraCache = (0, memo_cache_1.getMemoCache)();
|
|
55
45
|
var slotFn2 = function (tokens) {
|
|
56
46
|
return extraCache(function () { return ({
|
|
57
47
|
style: {
|
|
@@ -76,14 +66,14 @@ var baseOptions = {
|
|
|
76
66
|
instance: lastInstance++,
|
|
77
67
|
},
|
|
78
68
|
},
|
|
79
|
-
slot2: buildProps_1.buildProps(slotFn1, ['a', 'b', 'c']),
|
|
69
|
+
slot2: (0, buildProps_1.buildProps)(slotFn1, ['a', 'b', 'c']),
|
|
80
70
|
slot3: slotFn2,
|
|
81
71
|
},
|
|
82
72
|
tokensThatAreAlsoProps: ['b'],
|
|
83
73
|
};
|
|
84
74
|
describe('useStyling test suite', function () {
|
|
85
75
|
test('basic built hook', function () {
|
|
86
|
-
var useStyling = buildUseStyling_1.buildUseStyling(baseOptions, themeHelper);
|
|
76
|
+
var useStyling = (0, buildUseStyling_1.buildUseStyling)(baseOptions, themeHelper);
|
|
87
77
|
var slotProps = useStyling({});
|
|
88
78
|
var slotProps2 = useStyling({ p1: 2, p2: 'bar' });
|
|
89
79
|
Object.keys(slotProps).forEach(function (key) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildUseStyling.test.js","sourceRoot":"","sources":["../src/buildUseStyling.test.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buildUseStyling.test.js","sourceRoot":"","sources":["../src/buildUseStyling.test.ts"],"names":[],"mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
function __export(m) {
|
|
3
|
-
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
|
4
|
-
}
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
exports.applyTokenLayers = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
(0, tslib_1.__exportStar)(require("./buildUseStyling"), exports);
|
|
6
|
+
(0, tslib_1.__exportStar)(require("./buildProps"), exports);
|
|
8
7
|
var use_tokens_1 = require("@fluentui-react-native/use-tokens");
|
|
9
|
-
exports
|
|
8
|
+
Object.defineProperty(exports, "applyTokenLayers", { enumerable: true, get: function () { return use_tokens_1.applyTokenLayers; } });
|
|
10
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,iEAAkC;AAClC,4DAA6B;AAC7B,gEAA+G;AAA5F,8GAAA,gBAAgB,OAAA"}
|
|
@@ -1,38 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
14
|
-
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
|
15
|
-
for (var r = Array(s), k = 0, i = 0; i < il; i++)
|
|
16
|
-
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
|
|
17
|
-
r[k] = a[j];
|
|
18
|
-
return r;
|
|
19
|
-
};
|
|
20
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
21
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
22
|
-
};
|
|
23
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
24
|
-
if (mod && mod.__esModule) return mod;
|
|
25
|
-
var result = {};
|
|
26
|
-
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
|
|
27
|
-
result["default"] = mod;
|
|
28
|
-
return result;
|
|
29
|
-
};
|
|
30
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
31
4
|
var buildUseStyling_1 = require("./buildUseStyling");
|
|
32
5
|
var react_native_1 = require("react-native");
|
|
33
6
|
var buildProps_1 = require("./buildProps");
|
|
34
|
-
var enzyme_to_json_1 = __importDefault(require("enzyme-to-json"));
|
|
35
|
-
var React = __importStar(require("react"));
|
|
7
|
+
var enzyme_to_json_1 = (0, tslib_1.__importDefault)(require("enzyme-to-json"));
|
|
8
|
+
var React = (0, tslib_1.__importStar)(require("react"));
|
|
36
9
|
var enzyme_1 = require("enzyme");
|
|
37
10
|
/**
|
|
38
11
|
* The default/base theme just contains base values
|
|
@@ -52,7 +25,7 @@ var current = { theme: baseTheme };
|
|
|
52
25
|
* this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
|
|
53
26
|
*/
|
|
54
27
|
function snapshotTestTree(tree) {
|
|
55
|
-
expect(enzyme_to_json_1.default(tree)).toMatchSnapshot();
|
|
28
|
+
expect((0, enzyme_to_json_1.default)(tree)).toMatchSnapshot();
|
|
56
29
|
}
|
|
57
30
|
/**
|
|
58
31
|
* Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
|
|
@@ -63,7 +36,7 @@ var themeHelper = {
|
|
|
63
36
|
useTheme: function () { return current.theme; },
|
|
64
37
|
getComponentInfo: function (theme, name) { return theme.components[name]; },
|
|
65
38
|
setActive: function (theme) {
|
|
66
|
-
current.theme = theme ? __assign(__assign({}, baseTheme), theme) : baseTheme;
|
|
39
|
+
current.theme = theme ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseTheme), theme) : baseTheme;
|
|
67
40
|
},
|
|
68
41
|
};
|
|
69
42
|
describe('useStyling samples', function () {
|
|
@@ -93,13 +66,13 @@ describe('useStyling samples', function () {
|
|
|
93
66
|
*/
|
|
94
67
|
slotProps: {
|
|
95
68
|
/** only one sub-component, a Text element called content, as a result this needs to build up TextProps */
|
|
96
|
-
content: buildProps_1.buildProps(
|
|
69
|
+
content: (0, buildProps_1.buildProps)(
|
|
97
70
|
/**
|
|
98
71
|
* first input for buildProps is a function which takes tokens and a theme and returns props
|
|
99
72
|
*/
|
|
100
73
|
function (tokens /*, theme: Theme */) {
|
|
101
74
|
return {
|
|
102
|
-
style: __assign({}, tokens),
|
|
75
|
+
style: (0, tslib_1.__assign)({}, tokens),
|
|
103
76
|
};
|
|
104
77
|
},
|
|
105
78
|
/**
|
|
@@ -110,16 +83,16 @@ describe('useStyling samples', function () {
|
|
|
110
83
|
},
|
|
111
84
|
};
|
|
112
85
|
// now build the actual hook from the options and theme helper
|
|
113
|
-
var useStylingSample1 = buildUseStyling_1.buildUseStyling(sample1StylingOptions, themeHelper);
|
|
86
|
+
var useStylingSample1 = (0, buildUseStyling_1.buildUseStyling)(sample1StylingOptions, themeHelper);
|
|
114
87
|
// now the sample 1 component becomes simple to build, just merge the styled props with the input props
|
|
115
88
|
var Sample1Text = function (props) {
|
|
116
89
|
var styledProps = useStylingSample1(props).content;
|
|
117
|
-
var merged = __assign(__assign({}, props), styledProps);
|
|
118
|
-
return React.createElement(react_native_1.Text, __assign({}, merged), props.children);
|
|
90
|
+
var merged = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), styledProps);
|
|
91
|
+
return React.createElement(react_native_1.Text, (0, tslib_1.__assign)({}, merged), props.children);
|
|
119
92
|
};
|
|
120
93
|
/** first render the component with no updates */
|
|
121
94
|
it('Sample1Text rendering with no overrides', function () {
|
|
122
|
-
var tree = enzyme_1.mount(React.createElement(Sample1Text, null, "Sample1a"));
|
|
95
|
+
var tree = (0, enzyme_1.mount)(React.createElement(Sample1Text, null, "Sample1a"));
|
|
123
96
|
snapshotTestTree(tree);
|
|
124
97
|
});
|
|
125
98
|
/** now re-theme the component via the components in the theme */
|
|
@@ -132,14 +105,14 @@ describe('useStyling samples', function () {
|
|
|
132
105
|
},
|
|
133
106
|
},
|
|
134
107
|
});
|
|
135
|
-
var tree = enzyme_1.mount(React.createElement(Sample1Text, null, "Sample1b"));
|
|
108
|
+
var tree = (0, enzyme_1.mount)(React.createElement(Sample1Text, null, "Sample1b"));
|
|
136
109
|
snapshotTestTree(tree);
|
|
137
110
|
});
|
|
138
111
|
/**
|
|
139
112
|
* Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
|
|
140
113
|
* than using a separate options object. Both are fine.
|
|
141
114
|
*/
|
|
142
|
-
var useStylingSample2 = buildUseStyling_1.buildUseStyling(__assign(__assign({}, sample1StylingOptions), {
|
|
115
|
+
var useStylingSample2 = (0, buildUseStyling_1.buildUseStyling)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, sample1StylingOptions), {
|
|
143
116
|
/**
|
|
144
117
|
* In sample1 tokens are set to defaults from the global theme section, then patched with any values looked up with
|
|
145
118
|
* the string 'Sample1'
|
|
@@ -151,7 +124,7 @@ describe('useStyling samples', function () {
|
|
|
151
124
|
* If we didn't want to add the extra 'Sample2' lookup this line would be omitted. If we didn't want to look up 'Sample1' first
|
|
152
125
|
* that could be filtered out of the array that is being copied
|
|
153
126
|
*/
|
|
154
|
-
tokens:
|
|
127
|
+
tokens: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], sample1StylingOptions.tokens, true), ['Sample2'], false),
|
|
155
128
|
/**
|
|
156
129
|
* This is the final bit of magic. The tokens will already have values set from the global theme, they will then be patched with
|
|
157
130
|
* any customizations set into Sample1 and/or Sample2.
|
|
@@ -164,16 +137,16 @@ describe('useStyling samples', function () {
|
|
|
164
137
|
// the Sample2Text component is built the same way as sample1, just using the new hook that has been created
|
|
165
138
|
var Sample2Text = function (props) {
|
|
166
139
|
var styledProps = useStylingSample2(props).content;
|
|
167
|
-
var merged = __assign(__assign({}, props), styledProps);
|
|
140
|
+
var merged = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), styledProps);
|
|
168
141
|
// delete the color key to not pass it through to the text props, could be done via destructuring, filtering, or any number of ways
|
|
169
142
|
delete merged.color;
|
|
170
143
|
// render the text
|
|
171
|
-
return React.createElement(react_native_1.Text, __assign({}, merged), props.children);
|
|
144
|
+
return React.createElement(react_native_1.Text, (0, tslib_1.__assign)({}, merged), props.children);
|
|
172
145
|
};
|
|
173
146
|
/** rendering the Sample2 component with the base theme */
|
|
174
147
|
it('Sample2Text rendering with defaults and a color override', function () {
|
|
175
148
|
themeHelper.setActive();
|
|
176
|
-
var tree = enzyme_1.mount(React.createElement(react_native_1.View, null,
|
|
149
|
+
var tree = (0, enzyme_1.mount)(React.createElement(react_native_1.View, null,
|
|
177
150
|
React.createElement(Sample2Text, null, "Sample2 with defaults"),
|
|
178
151
|
React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")));
|
|
179
152
|
snapshotTestTree(tree);
|
|
@@ -192,7 +165,7 @@ describe('useStyling samples', function () {
|
|
|
192
165
|
},
|
|
193
166
|
},
|
|
194
167
|
});
|
|
195
|
-
var tree = enzyme_1.mount(React.createElement(react_native_1.View, null,
|
|
168
|
+
var tree = (0, enzyme_1.mount)(React.createElement(react_native_1.View, null,
|
|
196
169
|
React.createElement(Sample2Text, null, "Sample2 with theme overrides set"),
|
|
197
170
|
React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")));
|
|
198
171
|
snapshotTestTree(tree);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":";;;AAAA,qDAAoF;AACpF,6CAAiE;AACjE,2CAA0C;AAC1C,+EAAoC;AACpC,wDAA+B;AAC/B,iCAA+B;AAuB/B;;GAEG;AACH,IAAM,SAAS,GAAU;IACvB,OAAO,EAAE;QACP,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,EAAE;KACb;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,IAAM,OAAO,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAErC;;GAEG;AACH,SAAS,gBAAgB,CAAC,IAAS;IAChC,MAAM,CAAC,IAAA,wBAAM,EAAC,IAAI,CAAC,CAAS,CAAC,eAAe,EAAE,CAAC;AAClD,CAAC;AAED;;;;GAIG;AACH,IAAM,WAAW,GAAyE;IACxF,QAAQ,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,EAAb,CAAa;IAC7B,gBAAgB,EAAE,UAAC,KAAY,EAAE,IAAY,IAAK,OAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAtB,CAAsB;IACxE,SAAS,EAAE,UAAC,KAAsB;QAChC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,iDAAM,SAAS,GAAK,KAAK,EAAG,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;CACF,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE;IAC7B;;;;;OAKG;IAeH,6EAA6E;IAC7E,IAAM,qBAAqB,GAA4E;QACrG;;WAEG;QACH,MAAM,EAAE;YACN,yEAAyE;YACzE,UAAC,CAAQ,IAAK,OAAA,CAAC;gBACb,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK;gBACtB,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU;gBAChC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ;aAC7B,CAAC,EAJY,CAIZ;YACF,+DAA+D;YAC/D,SAAS;SACV;QACD;;WAEG;QACH,SAAS,EAAE;YACT,0GAA0G;YAC1G,OAAO,EAAE,IAAA,uBAAU;YACjB;;eAEG;YACH,UAAC,MAAqB,CAAC,mBAAmB;gBACxC,OAAO;oBACL,KAAK,4BAAO,MAAM,CAAE;iBACrB,CAAC;YACJ,CAAC;YACD;;;eAGG;YACH,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,CACpC;SACF;KACF,CAAC;IAEF,8DAA8D;IAC9D,IAAM,iBAAiB,GAAG,IAAA,iCAAe,EAAC,qBAAqB,EAAE,WAAW,CAAC,CAAC;IAE9E,uGAAuG;IACvG,IAAM,WAAW,GAA0C,UAAC,KAAK;QAC/D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACrD,IAAM,MAAM,mDAAQ,KAAK,GAAK,WAAW,CAAE,CAAC;QAC5C,OAAO,oBAAC,mBAAI,4BAAK,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACnD,CAAC,CAAC;IAEF,iDAAiD;IACjD,EAAE,CAAC,yCAAyC,EAAE;QAC5C,IAAM,IAAI,GAAG,IAAA,cAAK,EAAC,oBAAC,WAAW,mBAAuB,CAAC,CAAC;QACxD,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,iEAAiE;IACjE,EAAE,CAAC,8DAA8D,EAAE;QACjE,WAAW,CAAC,SAAS,CAAC;YACpB,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,EAAE;iBACb;aACF;SACF,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,IAAA,cAAK,EAAC,oBAAC,WAAW,mBAAuB,CAAC,CAAC;QACxD,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAYH;;;OAGG;IACH,IAAM,iBAAiB,GAAG,IAAA,iCAAe,kDAUlC,qBAAqB;QACxB;;;;;;;;;;WAUG;QACH,MAAM,4DAAM,qBAAqB,CAAC,MAAM,UAAE,SAAS;QACnD;;;;;;;WAOG;QACH,sBAAsB,EAAE,CAAC,OAAO,CAAC,KAEnC,WAAW,CACZ,CAAC;IAEF,4GAA4G;IAC5G,IAAM,WAAW,GAA0C,UAAC,KAAK;QAC/D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACrD,IAAM,MAAM,mDAAQ,KAAK,GAAK,WAAW,CAAE,CAAC;QAC5C,mIAAmI;QACnI,OAAO,MAAM,CAAC,KAAK,CAAC;QACpB,kBAAkB;QAClB,OAAO,oBAAC,mBAAI,4BAAK,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACnD,CAAC,CAAC;IAEF,0DAA0D;IAC1D,EAAE,CAAC,0DAA0D,EAAE;QAC7D,WAAW,CAAC,SAAS,EAAE,CAAC;QACxB,IAAM,IAAI,GAAG,IAAA,cAAK,EAChB,oBAAC,mBAAI;YACH,oBAAC,WAAW,gCAAoC;YAChD,oBAAC,WAAW,IAAC,KAAK,EAAC,OAAO,2CAAmD,CACxE,CACR,CAAC;QACF,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,iEAAiE;IACjE,EAAE,CAAC,8DAA8D,EAAE;QACjE,WAAW,CAAC,SAAS,CAAC;YACpB,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,EAAE;iBACb;gBACD,OAAO,EAAE;oBACP,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,WAAW;iBACxB;aACF;SACF,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,IAAA,cAAK,EAChB,oBAAC,mBAAI;YACH,oBAAC,WAAW,2CAA+C;YAC3D,oBAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,iDAAyD,CAC/E,CACR,CAAC;QACF,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/use-styling",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"description": "Opinionated use styling hook implementation",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -28,14 +28,15 @@
|
|
|
28
28
|
"author": "",
|
|
29
29
|
"license": "MIT",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@fluentui-react-native/memo-cache": "^1.1.
|
|
32
|
-
"@fluentui-react-native/use-tokens": "^0.1
|
|
31
|
+
"@fluentui-react-native/memo-cache": "^1.1.6",
|
|
32
|
+
"@fluentui-react-native/use-tokens": "^0.2.1",
|
|
33
|
+
"tslib": "^2.3.1"
|
|
33
34
|
},
|
|
34
35
|
"devDependencies": {
|
|
35
36
|
"@types/jest": "^26.0.0",
|
|
36
|
-
"@types/react-native": "^0.
|
|
37
|
+
"@types/react-native": "^0.64.0",
|
|
37
38
|
"@uifabricshared/build-native": "^0.1.1",
|
|
38
|
-
"react": "
|
|
39
|
-
"react-native": "^0.
|
|
39
|
+
"react": "17.0.1",
|
|
40
|
+
"react-native": "^0.64.3"
|
|
40
41
|
}
|
|
41
42
|
}
|