@uifabricshared/foundation-compose 1.15.17 → 1.16.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.md +86 -1
- package/lib/compose.d.ts +7 -2
- package/lib/compose.js +26 -26
- package/lib/compose.js.map +1 -1
- package/lib/compose.types.d.ts +90 -47
- package/lib/compose.types.js +1 -1
- package/lib/index.d.ts +14 -2
- package/lib/index.js +1 -1
- package/lib/useStyling.d.ts +8 -2
- package/lib/useStyling.js +30 -30
- package/lib/useStyling.js.map +1 -1
- package/lib-commonjs/compose.d.ts +7 -2
- package/lib-commonjs/compose.js +31 -32
- package/lib-commonjs/compose.js.map +1 -1
- package/lib-commonjs/compose.types.d.ts +90 -47
- package/lib-commonjs/compose.types.js +3 -3
- package/lib-commonjs/index.d.ts +14 -2
- package/lib-commonjs/index.js +17 -7
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/useStyling.d.ts +8 -2
- package/lib-commonjs/useStyling.js +48 -41
- package/lib-commonjs/useStyling.js.map +1 -1
- package/package.json +54 -59
- package/babel.config.js +0 -1
|
@@ -8,5 +8,10 @@ import { INativeSlotType, IExtractProps, IExtractSlotProps, IExtractState } from
|
|
|
8
8
|
* @param inputComponent - component definition for the component to be created. See IComposeOptions for more details.
|
|
9
9
|
* @param base - optional base component to compose, this can be an intrinsic, a stock element, or another composable
|
|
10
10
|
*/
|
|
11
|
-
export declare function compose<TType>(
|
|
12
|
-
|
|
11
|
+
export declare function compose<TType>(
|
|
12
|
+
inputComponent: Partial<
|
|
13
|
+
IComposeOptions<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>
|
|
14
|
+
>,
|
|
15
|
+
base?: INativeSlotType,
|
|
16
|
+
): IComposeReturnType<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>;
|
|
17
|
+
//# sourceMappingURL=compose.d.ts.map
|
package/lib-commonjs/compose.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
/* eslint-disable */
|
|
3
|
-
Object.defineProperty(exports,
|
|
4
|
-
exports.compose =
|
|
5
|
-
const foundation_composable_1 = require(
|
|
6
|
-
const useStyling_1 = require(
|
|
7
|
-
const framework_base_1 = require(
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
exports.compose = compose;
|
|
5
|
+
const foundation_composable_1 = require('@uifabricshared/foundation-composable');
|
|
6
|
+
const useStyling_1 = require('./useStyling');
|
|
7
|
+
const framework_base_1 = require('@fluentui-react-native/framework-base');
|
|
8
8
|
/**
|
|
9
9
|
* Merge current and base options together to form the new object definition. These objects will merge with the
|
|
10
10
|
* exception of settings which will be appended
|
|
@@ -13,11 +13,11 @@ const framework_base_1 = require("@fluentui-react-native/framework-base");
|
|
|
13
13
|
* @param base - component to use as a baseline (if it exists)
|
|
14
14
|
*/
|
|
15
15
|
function _getComponentOptions(inputComponent, base) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
if (base) {
|
|
17
|
+
const mergedSettings = { settings: [].concat(base.settings || [], inputComponent.settings || []).filter((v) => v) };
|
|
18
|
+
return (0, framework_base_1.immutableMerge)(base, inputComponent, mergedSettings);
|
|
19
|
+
}
|
|
20
|
+
return inputComponent;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
23
|
* Assembles a higher order component, optionally composing a base HOC or base primitive control. The compose pattern
|
|
@@ -28,25 +28,24 @@ function _getComponentOptions(inputComponent, base) {
|
|
|
28
28
|
* @param base - optional base component to compose, this can be an intrinsic, a stock element, or another composable
|
|
29
29
|
*/
|
|
30
30
|
function compose(inputComponent, base) {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
31
|
+
// get merged options for the component
|
|
32
|
+
const options = _getComponentOptions(inputComponent, base && (0, useStyling_1.getOptionsFromObj)(base));
|
|
33
|
+
// set up the styling injection function
|
|
34
|
+
options.useStyling = (0, useStyling_1.initializeStyling)(options);
|
|
35
|
+
// use composable to create the function implementation
|
|
36
|
+
const Component = (0, foundation_composable_1.composable)(options);
|
|
37
|
+
// attach extra information to the returned function component
|
|
38
|
+
Component.displayName = options.displayName;
|
|
39
|
+
Object.assign(Component, options.statics);
|
|
40
|
+
// set up the customize handler
|
|
41
|
+
Component.customize = (...settings) => {
|
|
42
|
+
return compose({ settings }, Component);
|
|
43
|
+
};
|
|
44
|
+
// set up the compose handler
|
|
45
|
+
Component.compose = (newOptions) => {
|
|
46
|
+
return compose(newOptions, Component);
|
|
47
|
+
};
|
|
48
|
+
// now return the newly created component
|
|
49
|
+
return Component;
|
|
50
50
|
}
|
|
51
|
-
|
|
52
|
-
//# sourceMappingURL=compose.js.map
|
|
51
|
+
//# sourceMappingURL=compose.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.tsx"],"names":[],"mappings":";AAAA,oBAAoB;;;AAGpB,iFAO+C;AAC/C,6CAAoE;AACpE,0EAAuE;AAGvE;;;;;;GAMG;AACH,SAAS,oBAAoB,CAO3B,cAAuF,EACvF,IAAqE;
|
|
1
|
+
{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.tsx"],"names":[],"mappings":";AAAA,oBAAoB;;;AAGpB,iFAO+C;AAC/C,6CAAoE;AACpE,0EAAuE;AAGvE;;;;;;GAMG;AACH,SAAS,oBAAoB,CAO3B,cAAuF,EACvF,IAAqE,EACL;IAChE,IAAI,IAAI,EAAE,CAAC;QACT,MAAM,cAAc,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACpH,OAAO,IAAA,+BAAc,EAAC,IAAI,EAAE,cAAc,EAAE,cAAc,CAAmE,CAAC;IAChI,CAAC;IACD,OAAO,cAAgF,CAAC;AAAA,CACzF;AAED;;;;;;;GAOG;AACH,iBACE,cAEC,EACD,IAAsB,EACmH;IASzI,uCAAuC;IACvC,MAAM,OAAO,GAAG,oBAAoB,CAAqD,cAAc,EAAE,IAAI,IAAI,IAAA,8BAAiB,EAAC,IAAI,CAAC,CAAC,CAAC;IAE1I,wCAAwC;IACxC,OAAO,CAAC,UAAU,GAAG,IAAA,8BAAiB,EAAqD,OAAO,CAAC,CAAC;IAEpG,uDAAuD;IACvD,MAAM,SAAS,GAAG,IAAA,kCAAU,EAAiD,OAAc,CAAgB,CAAC;IAE5G,8DAA8D;IAC9D,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE1C,+BAA+B;IAC/B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,QAAuD,EAAE,EAAE,CAAC;QACpF,OAAO,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,CAAC,CAAC;IAAA,CACzC,CAAC;IAEF,6BAA6B;IAC7B,SAAS,CAAC,OAAO,GAAG,CAAC,UAAwF,EAAE,EAAE,CAAC;QAChH,OAAO,OAAO,CAAQ,UAAU,EAAE,SAAS,CAAC,CAAC;IAAA,CAC9C,CAAC;IAEF,yCAAyC;IACzC,OAAO,SAAS,CAAC;AAAA,CAClB"}
|
|
@@ -1,32 +1,48 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
IRenderData,
|
|
3
|
+
IComposableDefinition,
|
|
4
|
+
IComposableType,
|
|
5
|
+
IExtractSlotProps,
|
|
6
|
+
IExtractProps,
|
|
7
|
+
IExtractState,
|
|
8
|
+
} from '@uifabricshared/foundation-composable';
|
|
2
9
|
import { ISlotProps, IComponentSettings, IWithTokens, IOverrideLookup } from '@uifabricshared/foundation-settings';
|
|
3
10
|
import { ISettingsEntry } from '@uifabricshared/themed-settings';
|
|
4
11
|
import { ITheme } from '@uifabricshared/theming-ramp';
|
|
5
12
|
import { IStyleFactories, IComponentTokens } from '@uifabricshared/foundation-tokens';
|
|
6
13
|
import * as React from 'react';
|
|
7
|
-
export interface IComposeType<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
export interface IComposeType<
|
|
15
|
+
TProps extends object = object,
|
|
16
|
+
TSlotProps extends ISlotProps = ISlotProps<TProps>,
|
|
17
|
+
TState extends object = object,
|
|
18
|
+
TTokens extends object = object,
|
|
19
|
+
TStatics extends object = object,
|
|
20
|
+
> extends IComposableType<TProps, TSlotProps, TState> {
|
|
21
|
+
/**
|
|
22
|
+
* Any statics to attach to the component
|
|
23
|
+
*/
|
|
24
|
+
statics: TStatics;
|
|
25
|
+
/**
|
|
26
|
+
* Token props for this component
|
|
27
|
+
*/
|
|
28
|
+
tokens: TTokens;
|
|
16
29
|
}
|
|
17
30
|
type IStaticsFragment<TStatics extends object> = {
|
|
18
|
-
|
|
31
|
+
statics: TStatics;
|
|
19
32
|
};
|
|
20
33
|
export type IExtractStatics<T> = T extends IStaticsFragment<infer U> ? U : object;
|
|
21
34
|
type ITokensFragment<TTokens extends object> = {
|
|
22
|
-
|
|
35
|
+
tokens: TTokens;
|
|
23
36
|
};
|
|
24
37
|
export type IExtractTokens<T> = T extends ITokensFragment<infer U> ? U : object;
|
|
25
38
|
/**
|
|
26
39
|
* Function signature for useStyling as implemented by compose. This adds the lookup function to enable
|
|
27
40
|
* more control over how overrides are applied.
|
|
28
41
|
*/
|
|
29
|
-
export type IDefineUseComposeStyling<TProps, TSlotProps extends ISlotProps, TTokens extends object> = (
|
|
42
|
+
export type IDefineUseComposeStyling<TProps, TSlotProps extends ISlotProps, TTokens extends object> = (
|
|
43
|
+
props: TProps,
|
|
44
|
+
lookup?: IOverrideLookup,
|
|
45
|
+
) => IWithTokens<TSlotProps, TTokens>;
|
|
30
46
|
export type IUseComposeStyling<T> = IDefineUseComposeStyling<IExtractProps<T>, IExtractSlotProps<T>, IExtractTokens<T>>;
|
|
31
47
|
/**
|
|
32
48
|
* Array of:
|
|
@@ -36,50 +52,67 @@ export type IUseComposeStyling<T> = IDefineUseComposeStyling<IExtractProps<T>, I
|
|
|
36
52
|
*
|
|
37
53
|
* These settings are layered together in order to produce the merged settings for a component
|
|
38
54
|
*/
|
|
39
|
-
export type IDefineComposeSettings<TSlotProps extends ISlotProps, TTokens extends object> = ISettingsEntry<
|
|
55
|
+
export type IDefineComposeSettings<TSlotProps extends ISlotProps, TTokens extends object> = ISettingsEntry<
|
|
56
|
+
IComponentSettings<IWithTokens<TSlotProps, TTokens>>,
|
|
57
|
+
ITheme
|
|
58
|
+
>[];
|
|
40
59
|
export type IComposeSettings<T> = IDefineComposeSettings<IExtractSlotProps<T>, IExtractTokens<T>>;
|
|
41
60
|
/**
|
|
42
61
|
* Settings which dictate the behavior of useStyling, as implemented by the compose package. These are
|
|
43
62
|
* separated from IComponentOptions to allow the styling portion to be used independently if so desired.
|
|
44
63
|
*/
|
|
45
64
|
export interface IStylingSettings<TSlotProps extends ISlotProps, TTokens extends object> {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
65
|
+
/**
|
|
66
|
+
* settings used to build up the style definitions
|
|
67
|
+
*/
|
|
68
|
+
settings?: IDefineComposeSettings<TSlotProps, TTokens>;
|
|
69
|
+
/**
|
|
70
|
+
* factories for producing styles from tokens
|
|
71
|
+
*/
|
|
72
|
+
styles?: IStyleFactories<TSlotProps, TTokens, ITheme>;
|
|
73
|
+
/**
|
|
74
|
+
* The input tokens processed, built into functions, with the keys built into a map.
|
|
75
|
+
*
|
|
76
|
+
* This gets set automatically when the component is set up for the first time and should not be set by hand.
|
|
77
|
+
*/
|
|
78
|
+
resolvedTokens?: IComponentTokens<TSlotProps, TTokens, ITheme>;
|
|
60
79
|
}
|
|
61
80
|
/**
|
|
62
81
|
* Options to be used with compose. These drive the actual behavior of the component and are comprised of styling
|
|
63
82
|
* options as well as options which configure composable.
|
|
64
83
|
*/
|
|
65
|
-
export interface IComposeOptions<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
84
|
+
export interface IComposeOptions<
|
|
85
|
+
TProps extends object = object,
|
|
86
|
+
TSlotProps extends ISlotProps = ISlotProps<TProps>,
|
|
87
|
+
TTokens extends object = object,
|
|
88
|
+
TState extends object = object,
|
|
89
|
+
TStatics extends object = object,
|
|
90
|
+
> extends IComposableDefinition<TProps, TSlotProps, TState>,
|
|
91
|
+
IStylingSettings<TSlotProps, TTokens> {
|
|
92
|
+
/**
|
|
93
|
+
* Add an additional option to use styling to allow for injecting override lookup functions
|
|
94
|
+
*/
|
|
95
|
+
useStyling?: IDefineUseComposeStyling<TProps, TSlotProps, TTokens>;
|
|
96
|
+
/**
|
|
97
|
+
* Use prepare props will take the more opinionated version of useStyling
|
|
98
|
+
*/
|
|
99
|
+
usePrepareProps?: (props: TProps, useStyling: IDefineUseComposeStyling<TProps, TSlotProps, TTokens>) => IRenderData<TSlotProps, TState>;
|
|
100
|
+
/**
|
|
101
|
+
* Optional statics to attach to the component. This is primary used to attach a sub-component to a parent component
|
|
102
|
+
*/
|
|
103
|
+
statics?: TStatics;
|
|
78
104
|
}
|
|
79
105
|
/**
|
|
80
106
|
* The signature of the component returned from compose.
|
|
81
107
|
*/
|
|
82
|
-
export type IComposeReturnType<
|
|
108
|
+
export type IComposeReturnType<
|
|
109
|
+
TProps extends object,
|
|
110
|
+
TSlotProps extends ISlotProps,
|
|
111
|
+
TTokens extends object,
|
|
112
|
+
TState extends object = object,
|
|
113
|
+
TStatics extends object = object,
|
|
114
|
+
> = React.FunctionComponent<TProps> &
|
|
115
|
+
TStatics & {
|
|
83
116
|
/**
|
|
84
117
|
* composable options, used by composable for chaining objects. For compose this also includes the extensions
|
|
85
118
|
* such as settings or token information.
|
|
@@ -88,17 +121,27 @@ export type IComposeReturnType<TProps extends object, TSlotProps extends ISlotPr
|
|
|
88
121
|
/**
|
|
89
122
|
* shorthand function for doing quick customizations of a component by appending to settings
|
|
90
123
|
*/
|
|
91
|
-
customize: (
|
|
124
|
+
customize: (
|
|
125
|
+
...settings: IDefineComposeSettings<TSlotProps, TTokens>
|
|
126
|
+
) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
92
127
|
/**
|
|
93
128
|
* helper function to quickly add new partial options to the base component. The primary advantage is that
|
|
94
129
|
* this is strongly typed for the component type which avoids needing to pass all the type parameters correctly.
|
|
95
130
|
*/
|
|
96
|
-
compose: (
|
|
97
|
-
|
|
131
|
+
compose: (
|
|
132
|
+
newOptions: Partial<IComposeOptions<TProps, TSlotProps, TTokens, TState, TStatics>>,
|
|
133
|
+
) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
134
|
+
};
|
|
98
135
|
/**
|
|
99
136
|
* A shorthand for typecasting a component into a more specific type, used for dealing with multiple platforms in
|
|
100
137
|
* react-native
|
|
101
138
|
*/
|
|
102
|
-
export type IComposeTypecast<TType> = IComposeReturnType<
|
|
139
|
+
export type IComposeTypecast<TType> = IComposeReturnType<
|
|
140
|
+
IExtractProps<TType>,
|
|
141
|
+
IExtractSlotProps<TType>,
|
|
142
|
+
IExtractTokens<TType>,
|
|
143
|
+
IExtractState<TType>,
|
|
144
|
+
IExtractStatics<TType>
|
|
145
|
+
>;
|
|
103
146
|
export {};
|
|
104
|
-
//# sourceMappingURL=compose.types.d.ts.map
|
|
147
|
+
//# sourceMappingURL=compose.types.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
/* eslint-disable */
|
|
3
|
-
Object.defineProperty(exports,
|
|
4
|
-
//# sourceMappingURL=compose.types.js.map
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
//# sourceMappingURL=compose.types.js.map
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,4 +1,16 @@
|
|
|
1
|
-
export type {
|
|
1
|
+
export type {
|
|
2
|
+
IComposeOptions,
|
|
3
|
+
IComposeReturnType,
|
|
4
|
+
IComposeSettings,
|
|
5
|
+
IComposeType,
|
|
6
|
+
IComposeTypecast,
|
|
7
|
+
IDefineComposeSettings,
|
|
8
|
+
IDefineUseComposeStyling,
|
|
9
|
+
IExtractStatics,
|
|
10
|
+
IExtractTokens,
|
|
11
|
+
IStylingSettings,
|
|
12
|
+
IUseComposeStyling,
|
|
13
|
+
} from './compose.types';
|
|
2
14
|
export { compose } from './compose';
|
|
3
15
|
export { initializeStyling } from './useStyling';
|
|
4
|
-
//# sourceMappingURL=index.d.ts.map
|
|
16
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
3
|
exports.initializeStyling = exports.compose = void 0;
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
const compose_1 = require('./compose');
|
|
5
|
+
Object.defineProperty(exports, 'compose', {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function () {
|
|
8
|
+
return compose_1.compose;
|
|
9
|
+
},
|
|
10
|
+
});
|
|
11
|
+
const useStyling_1 = require('./useStyling');
|
|
12
|
+
Object.defineProperty(exports, 'initializeStyling', {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return useStyling_1.initializeStyling;
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
//# 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,uCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,6CAAiD;AAAxC,+GAAA,iBAAiB,OAAA"}
|
|
@@ -8,5 +8,11 @@ export declare function getOptionsFromObj<TComponent>(obj: any): TComponent | un
|
|
|
8
8
|
* @param options - style settings to configure this function. Note that this should be scoped to a single component.
|
|
9
9
|
* @param name - optional base name to use as a cache key
|
|
10
10
|
*/
|
|
11
|
-
export declare function initializeStyling<
|
|
12
|
-
|
|
11
|
+
export declare function initializeStyling<
|
|
12
|
+
TProps extends object,
|
|
13
|
+
TSlotProps extends ISlotProps,
|
|
14
|
+
TTokens extends object,
|
|
15
|
+
TState extends object,
|
|
16
|
+
TStatics extends object,
|
|
17
|
+
>(options: IComposeOptions<TProps, TSlotProps, TTokens, TState, TStatics>): IDefineUseComposeStyling<TProps, TSlotProps, TTokens>;
|
|
18
|
+
//# sourceMappingURL=useStyling.d.ts.map
|
|
@@ -1,42 +1,50 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
/* eslint-disable */
|
|
3
|
-
Object.defineProperty(exports,
|
|
4
|
-
exports.
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
exports.getOptionsFromObj = getOptionsFromObj;
|
|
5
|
+
exports.initializeStyling = initializeStyling;
|
|
6
|
+
const themed_settings_1 = require('@uifabricshared/themed-settings');
|
|
7
|
+
const theming_ramp_1 = require('@uifabricshared/theming-ramp');
|
|
8
|
+
const foundation_tokens_1 = require('@uifabricshared/foundation-tokens');
|
|
9
|
+
const theme_types_1 = require('@fluentui-react-native/theme-types');
|
|
10
|
+
const default_theme_1 = require('@fluentui-react-native/default-theme');
|
|
11
|
+
const framework_base_1 = require('@fluentui-react-native/framework-base');
|
|
11
12
|
/* tslint:disable-next-line no-any */
|
|
12
13
|
function getOptionsFromObj(obj) {
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
const objType = obj && typeof obj;
|
|
15
|
+
return ((objType === 'object' || objType === 'function') && obj.__composable) || undefined;
|
|
15
16
|
}
|
|
16
|
-
exports.getOptionsFromObj = getOptionsFromObj;
|
|
17
17
|
function _getSettingsFromTheme(theme, name) {
|
|
18
|
-
|
|
18
|
+
return (0, theming_ramp_1.getSettings)(theme, name);
|
|
19
19
|
}
|
|
20
20
|
function _getHasToken(slots) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
const slotTokens = {};
|
|
22
|
+
Object.keys(slots).forEach((slotName) => {
|
|
23
|
+
const slot = slots[slotName];
|
|
24
|
+
const slotType = typeof slot !== 'object' ? slot : slot.slotType;
|
|
25
|
+
const options = getOptionsFromObj(slotType);
|
|
26
|
+
slotTokens[slotName] = (options && options.resolvedTokens && options.resolvedTokens.tokenKeys) || undefined;
|
|
27
|
+
});
|
|
28
|
+
return (target, key) => {
|
|
29
|
+
return slotTokens[target] && slotTokens[target].hasOwnProperty(key);
|
|
30
|
+
};
|
|
31
31
|
}
|
|
32
32
|
function useStylingCore(props, options, instanceMemoCache, lookupOverride) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
33
|
+
// get the theme value from the context (or the default theme if it is not set)
|
|
34
|
+
const theme = (0, theme_types_1.useTheme)() || default_theme_1.defaultFluentTheme;
|
|
35
|
+
// resolve the array of settings for these options
|
|
36
|
+
lookupOverride = lookupOverride || props;
|
|
37
|
+
const { settings, getMemoValue } = (0, themed_settings_1.getThemedSettings)(
|
|
38
|
+
options.settings,
|
|
39
|
+
theme,
|
|
40
|
+
instanceMemoCache,
|
|
41
|
+
lookupOverride,
|
|
42
|
+
_getSettingsFromTheme,
|
|
43
|
+
);
|
|
44
|
+
// finish by processing the tokens and turning IComponentSettings into ISlotProps (this removes things like _overrides)
|
|
45
|
+
return (0, theming_ramp_1.returnAsSlotProps)(
|
|
46
|
+
(0, foundation_tokens_1.processTokens)(props, theme, settings, options.resolvedTokens, getMemoValue),
|
|
47
|
+
);
|
|
40
48
|
}
|
|
41
49
|
/**
|
|
42
50
|
* return a useStyling implementation, in the form of IUseComposeStyling, based on the passed in styleSettings. The
|
|
@@ -46,15 +54,14 @@ function useStylingCore(props, options, instanceMemoCache, lookupOverride) {
|
|
|
46
54
|
* @param name - optional base name to use as a cache key
|
|
47
55
|
*/
|
|
48
56
|
function initializeStyling(options) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
// process the tokens and get them ready to render
|
|
58
|
+
const { styles, slots } = options;
|
|
59
|
+
options.resolvedTokens = (0, foundation_tokens_1.buildComponentTokens)(styles, _getHasToken(slots));
|
|
60
|
+
// memo cache root for this component, keyed on options
|
|
61
|
+
const getMemoValue = (0, framework_base_1.getMemoCache)(options);
|
|
62
|
+
// create a useStyling implementation for this component type (per type, not per instance)
|
|
63
|
+
return (props, lookupOverride) => {
|
|
64
|
+
return useStylingCore(props, options, getMemoValue, lookupOverride);
|
|
65
|
+
};
|
|
58
66
|
}
|
|
59
|
-
|
|
60
|
-
//# sourceMappingURL=useStyling.js.map
|
|
67
|
+
//# sourceMappingURL=useStyling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyling.js","sourceRoot":"","sources":["../src/useStyling.ts"],"names":[],"mappings":";AAAA,oBAAoB
|
|
1
|
+
{"version":3,"file":"useStyling.js","sourceRoot":"","sources":["../src/useStyling.ts"],"names":[],"mappings":";AAAA,oBAAoB;;;;AAGpB,qEAAoE;AACpE,+DAAsF;AACtF,yEAA2H;AAC3H,oEAA8D;AAC9D,wEAA0E;AAG1E,0EAAmF;AAEnF,qCAAqC;AACrC,2BAA8C,GAAQ,EAA0B;IAC9E,MAAM,OAAO,GAAG,GAAG,IAAI,OAAO,GAAG,CAAC;IAClC,OAAO,CAAC,CAAC,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,UAAU,CAAC,IAAK,GAA2C,CAAC,YAAY,CAAC,IAAI,SAAS,CAAC;AAAA,CACrI;AAED,SAAS,qBAAqB,CAAC,KAAa,EAAE,IAAY,EAAsB;IAC9E,OAAO,IAAA,0BAAW,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAAA,CACjC;AAED,SAAS,YAAY,CACnB,KAAiE,EAChD;IACjB,MAAM,UAAU,GAA8F,EAAE,CAAC;IACjH,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC7B,MAAM,QAAQ,GAAG,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAoB,CAAC;QACtF,MAAM,OAAO,GAAkD,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC3F,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,IAAI,OAAO,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;IAAA,CAC7G,CAAC,CAAC;IACH,OAAO,CAAC,MAAc,EAAE,GAAW,EAAE,EAAE,CAAC;QACtC,OAAO,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAAA,CACrE,CAAC;AAAA,CACH;AAED,SAAS,cAAc,CACrB,KAAa,EACb,OAA8C,EAC9C,iBAA+B,EAC/B,cAAgC,EACE;IAClC,+EAA+E;IAC/E,MAAM,KAAK,GAAG,IAAA,sBAAQ,GAAE,IAAI,kCAAkB,CAAC;IAE/C,kDAAkD;IAClD,cAAc,GAAG,cAAc,IAAI,KAAK,CAAC;IAEzC,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAA,mCAAiB,EAClD,OAAO,CAAC,QAAQ,EAChB,KAAK,EACL,iBAAiC,EACjC,cAAc,EACd,qBAA4B,CAC7B,CAAC;IAEF,uHAAuH;IACvH,OAAO,IAAA,gCAAiB,EACtB,IAAA,iCAAa,EAA8B,KAA2B,EAAE,KAAK,EAAE,QAAe,EAAE,OAAO,CAAC,cAAc,EAAE,YAAY,CAAC,CAClG,CAAC;AAAA,CACvC;AAED;;;;;;GAMG;AACH,2BAME,OAAuE,EAAyD;IAChI,kDAAkD;IAClD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,cAAc,GAAG,IAAA,wCAAoB,EAA8B,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAExG,uDAAuD;IACvD,MAAM,YAAY,GAAG,IAAA,6BAAY,EAAC,OAAO,CAAC,CAAC;IAE3C,0FAA0F;IAC1F,OAAO,CAAC,KAAa,EAAE,cAAgC,EAAE,EAAE,CAAC;QAC1D,OAAO,cAAc,CAA8B,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;IAAA,CAClG,CAAC;AAAA,CACH"}
|