@uifabricshared/foundation-compose 1.16.0 → 1.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -0
- package/etc/foundation-compose.api.md +40 -18
- package/lib/compose.d.ts +2 -7
- package/lib/compose.js +26 -26
- package/lib/compose.types.d.ts +47 -90
- package/lib/compose.types.d.ts.map +1 -1
- package/lib/compose.types.js +1 -1
- package/lib/index.d.ts +2 -14
- package/lib/index.js +1 -1
- package/lib/useStyling.d.ts +2 -8
- package/lib/useStyling.js +30 -30
- package/lib-commonjs/compose.d.ts +2 -7
- package/lib-commonjs/compose.js +30 -30
- package/lib-commonjs/compose.types.d.ts +47 -90
- package/lib-commonjs/compose.types.d.ts.map +1 -1
- package/lib-commonjs/compose.types.js +3 -3
- package/lib-commonjs/index.d.ts +2 -14
- package/lib-commonjs/index.js +7 -17
- package/lib-commonjs/useStyling.d.ts +2 -8
- package/lib-commonjs/useStyling.js +38 -46
- package/package.json +27 -26
- package/src/compose.types.ts +2 -2
- package/eslint.config.js +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
# Change Log - @uifabricshared/foundation-compose
|
|
2
2
|
|
|
3
|
+
## 1.16.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9cf4444: Migrate from ESLint to oxlint
|
|
8
|
+
- Updated dependencies [9cf4444]
|
|
9
|
+
- @uifabricshared/foundation-composable@0.14.3
|
|
10
|
+
- @uifabricshared/foundation-settings@0.16.3
|
|
11
|
+
- @uifabricshared/foundation-tokens@0.16.3
|
|
12
|
+
- @uifabricshared/themed-settings@0.13.3
|
|
13
|
+
- @uifabricshared/theming-ramp@0.21.3
|
|
14
|
+
- @fluentui-react-native/default-theme@0.27.3
|
|
15
|
+
- @fluentui-react-native/theme-types@0.44.3
|
|
16
|
+
- @fluentui-react-native/framework-base@0.3.3
|
|
17
|
+
|
|
18
|
+
## 1.16.2
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- 8a7b549: Update to the latest rnx-kit versions, fix some typing issues, and correct the vscode settings
|
|
23
|
+
- Updated dependencies [8a7b549]
|
|
24
|
+
- @uifabricshared/foundation-composable@0.14.2
|
|
25
|
+
- @uifabricshared/foundation-settings@0.16.2
|
|
26
|
+
- @uifabricshared/foundation-tokens@0.16.2
|
|
27
|
+
- @uifabricshared/themed-settings@0.13.2
|
|
28
|
+
- @uifabricshared/theming-ramp@0.21.2
|
|
29
|
+
- @fluentui-react-native/default-theme@0.27.2
|
|
30
|
+
- @fluentui-react-native/theme-types@0.44.2
|
|
31
|
+
- @fluentui-react-native/framework-base@0.3.2
|
|
32
|
+
|
|
33
|
+
## 1.16.1
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- 0d6e9c1: chore: migrate to `oxfmt`
|
|
38
|
+
- ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
|
|
39
|
+
- Updated dependencies [0d6e9c1]
|
|
40
|
+
- Updated dependencies [ac6e7af]
|
|
41
|
+
- @uifabricshared/foundation-composable@0.14.1
|
|
42
|
+
- @uifabricshared/foundation-settings@0.16.1
|
|
43
|
+
- @uifabricshared/foundation-tokens@0.16.1
|
|
44
|
+
- @uifabricshared/themed-settings@0.13.1
|
|
45
|
+
- @uifabricshared/theming-ramp@0.21.1
|
|
46
|
+
- @fluentui-react-native/default-theme@0.27.1
|
|
47
|
+
- @fluentui-react-native/theme-types@0.44.1
|
|
48
|
+
- @fluentui-react-native/framework-base@0.3.1
|
|
49
|
+
|
|
3
50
|
## 1.16.0
|
|
4
51
|
|
|
5
52
|
### Minor Changes
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
4
|
|
|
5
5
|
```ts
|
|
6
|
-
|
|
7
6
|
import { IComponentSettings } from '@uifabricshared/foundation-settings';
|
|
8
7
|
import { IComponentTokens } from '@uifabricshared/foundation-tokens';
|
|
9
8
|
import { IComposableDefinition } from '@uifabricshared/foundation-composable';
|
|
@@ -18,42 +17,65 @@ import { ITheme } from '@uifabricshared/theming-ramp';
|
|
|
18
17
|
import * as React from 'react';
|
|
19
18
|
|
|
20
19
|
// @public
|
|
21
|
-
export function compose<
|
|
20
|
+
export function compose<
|
|
21
|
+
TProps extends object,
|
|
22
|
+
TSlotProps extends ISlotProps = ISlotProps<TProps>,
|
|
23
|
+
TState extends object = object,
|
|
24
|
+
TStatics extends object = object,
|
|
25
|
+
>(
|
|
26
|
+
inputComponent: Partial<IComposeOptions<TProps, TSlotProps, TState, TStatics>>,
|
|
27
|
+
base?: INativeSlotType,
|
|
28
|
+
): IComposeReturnType<TProps, TSlotProps, TState, TStatics>;
|
|
22
29
|
|
|
23
30
|
// @public
|
|
24
|
-
export interface IComposeOptions<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
31
|
+
export interface IComposeOptions<
|
|
32
|
+
TProps extends object = object,
|
|
33
|
+
TSlotProps extends ISlotProps = ISlotProps<TProps>,
|
|
34
|
+
TState extends object = object,
|
|
35
|
+
TStatics extends object = object,
|
|
36
|
+
>
|
|
37
|
+
extends Omit<IComposableDefinition<TSlotProps['root'], TSlotProps, TState>, 'slots'>, IStylingSettings<TSlotProps> {
|
|
38
|
+
displayName?: string;
|
|
39
|
+
statics?: TStatics;
|
|
40
|
+
usePrepareProps?: (props: TSlotProps['root'], useStyling: IUseComposeStyling<TSlotProps>) => IRenderData<TSlotProps, TState>;
|
|
41
|
+
useStyling?: IUseComposeStyling<TSlotProps>;
|
|
29
42
|
}
|
|
30
43
|
|
|
31
44
|
// @public
|
|
32
|
-
export type IComposeReturnType<
|
|
45
|
+
export type IComposeReturnType<
|
|
46
|
+
TProps extends object,
|
|
47
|
+
TSlotProps extends ISlotProps,
|
|
48
|
+
TState extends object = object,
|
|
49
|
+
TStatics extends object = object,
|
|
50
|
+
> = React.FunctionComponent<TProps> &
|
|
51
|
+
TStatics & {
|
|
33
52
|
__composable: IComposeOptions<TProps, TSlotProps, TState, TStatics>;
|
|
34
53
|
customize: (...settings: IComposeSettings<TSlotProps>) => IComposeReturnType<TProps, TSlotProps, TState, TStatics>;
|
|
35
|
-
compose: (
|
|
36
|
-
|
|
54
|
+
compose: (
|
|
55
|
+
newOptions: Partial<IComposeOptions<TProps, TSlotProps, TState, TStatics>>,
|
|
56
|
+
) => IComposeReturnType<TProps, TSlotProps, TState, TStatics>;
|
|
57
|
+
};
|
|
37
58
|
|
|
38
59
|
// @public
|
|
39
60
|
export type IComposeSettings<TSlotProps extends ISlotProps> = ISettingsEntry<IComponentSettings<TSlotProps>, ITheme>[];
|
|
40
61
|
|
|
41
62
|
// @public
|
|
42
|
-
export function initializeStyling<TSlotProps extends ISlotProps>(
|
|
63
|
+
export function initializeStyling<TSlotProps extends ISlotProps>(
|
|
64
|
+
styleSettings: IStylingSettings<TSlotProps>,
|
|
65
|
+
name?: string,
|
|
66
|
+
): IUseComposeStyling<TSlotProps>;
|
|
43
67
|
|
|
44
68
|
// @public
|
|
45
69
|
export interface IStylingSettings<TSlotProps extends ISlotProps> {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
70
|
+
resolvedTokens?: IComponentTokens<TSlotProps['root'], ITheme>;
|
|
71
|
+
settings?: IComposeSettings<TSlotProps>;
|
|
72
|
+
slots: {
|
|
73
|
+
[K in keyof TSlotProps]: ISlotWithFilter<ISlotStyleFactories<TSlotProps['root'], ITheme>>;
|
|
74
|
+
};
|
|
51
75
|
}
|
|
52
76
|
|
|
53
77
|
// @public
|
|
54
78
|
export type IUseComposeStyling<TSlotProps extends ISlotProps> = (props: TSlotProps['root'], lookup?: IOverrideLookup) => TSlotProps;
|
|
55
79
|
|
|
56
|
-
|
|
57
80
|
// (No @packageDocumentation comment for this package)
|
|
58
|
-
|
|
59
81
|
```
|
package/lib/compose.d.ts
CHANGED
|
@@ -8,10 +8,5 @@ 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
|
-
|
|
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
|
|
11
|
+
export declare function compose<TType>(inputComponent: Partial<IComposeOptions<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>>, base?: INativeSlotType): IComposeReturnType<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>;
|
|
12
|
+
//# sourceMappingURL=compose.d.ts.map
|
package/lib/compose.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
|
-
import { composable } from '@uifabricshared/foundation-composable';
|
|
2
|
+
import { composable, } from '@uifabricshared/foundation-composable';
|
|
3
3
|
import { initializeStyling, getOptionsFromObj } from './useStyling';
|
|
4
4
|
import { immutableMerge } from '@fluentui-react-native/framework-base';
|
|
5
5
|
/**
|
|
@@ -10,11 +10,11 @@ import { immutableMerge } from '@fluentui-react-native/framework-base';
|
|
|
10
10
|
* @param base - component to use as a baseline (if it exists)
|
|
11
11
|
*/
|
|
12
12
|
function _getComponentOptions(inputComponent, base) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
if (base) {
|
|
14
|
+
const mergedSettings = { settings: [].concat(base.settings || [], inputComponent.settings || []).filter((v) => v) };
|
|
15
|
+
return immutableMerge(base, inputComponent, mergedSettings);
|
|
16
|
+
}
|
|
17
|
+
return inputComponent;
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* Assembles a higher order component, optionally composing a base HOC or base primitive control. The compose pattern
|
|
@@ -25,24 +25,24 @@ function _getComponentOptions(inputComponent, base) {
|
|
|
25
25
|
* @param base - optional base component to compose, this can be an intrinsic, a stock element, or another composable
|
|
26
26
|
*/
|
|
27
27
|
export function compose(inputComponent, base) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
28
|
+
// get merged options for the component
|
|
29
|
+
const options = _getComponentOptions(inputComponent, base && getOptionsFromObj(base));
|
|
30
|
+
// set up the styling injection function
|
|
31
|
+
options.useStyling = initializeStyling(options);
|
|
32
|
+
// use composable to create the function implementation
|
|
33
|
+
const Component = composable(options);
|
|
34
|
+
// attach extra information to the returned function component
|
|
35
|
+
Component.displayName = options.displayName;
|
|
36
|
+
Object.assign(Component, options.statics);
|
|
37
|
+
// set up the customize handler
|
|
38
|
+
Component.customize = (...settings) => {
|
|
39
|
+
return compose({ settings }, Component);
|
|
40
|
+
};
|
|
41
|
+
// set up the compose handler
|
|
42
|
+
Component.compose = (newOptions) => {
|
|
43
|
+
return compose(newOptions, Component);
|
|
44
|
+
};
|
|
45
|
+
// now return the newly created component
|
|
46
|
+
return Component;
|
|
47
47
|
}
|
|
48
|
-
//# sourceMappingURL=compose.js.map
|
|
48
|
+
//# sourceMappingURL=compose.js.map
|
package/lib/compose.types.d.ts
CHANGED
|
@@ -1,48 +1,32 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IRenderData,
|
|
3
|
-
IComposableDefinition,
|
|
4
|
-
IComposableType,
|
|
5
|
-
IExtractSlotProps,
|
|
6
|
-
IExtractProps,
|
|
7
|
-
IExtractState,
|
|
8
|
-
} from '@uifabricshared/foundation-composable';
|
|
1
|
+
import { IRenderData, IComposableDefinition, IComposableType, IExtractSlotProps, IExtractProps, IExtractState } from '@uifabricshared/foundation-composable';
|
|
9
2
|
import { ISlotProps, IComponentSettings, IWithTokens, IOverrideLookup } from '@uifabricshared/foundation-settings';
|
|
10
3
|
import { ISettingsEntry } from '@uifabricshared/themed-settings';
|
|
11
4
|
import { ITheme } from '@uifabricshared/theming-ramp';
|
|
12
5
|
import { IStyleFactories, IComponentTokens } from '@uifabricshared/foundation-tokens';
|
|
13
6
|
import * as React from 'react';
|
|
14
|
-
export interface IComposeType<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
*/
|
|
24
|
-
statics: TStatics;
|
|
25
|
-
/**
|
|
26
|
-
* Token props for this component
|
|
27
|
-
*/
|
|
28
|
-
tokens: TTokens;
|
|
7
|
+
export interface IComposeType<TProps extends object = object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState extends object = object, TTokens extends object = object, TStatics extends object = object> extends IComposableType<TProps, TSlotProps, TState> {
|
|
8
|
+
/**
|
|
9
|
+
* Any statics to attach to the component
|
|
10
|
+
*/
|
|
11
|
+
statics: TStatics;
|
|
12
|
+
/**
|
|
13
|
+
* Token props for this component
|
|
14
|
+
*/
|
|
15
|
+
tokens: TTokens;
|
|
29
16
|
}
|
|
30
17
|
type IStaticsFragment<TStatics extends object> = {
|
|
31
|
-
|
|
18
|
+
statics: TStatics;
|
|
32
19
|
};
|
|
33
20
|
export type IExtractStatics<T> = T extends IStaticsFragment<infer U> ? U : object;
|
|
34
21
|
type ITokensFragment<TTokens extends object> = {
|
|
35
|
-
|
|
22
|
+
tokens: TTokens;
|
|
36
23
|
};
|
|
37
24
|
export type IExtractTokens<T> = T extends ITokensFragment<infer U> ? U : object;
|
|
38
25
|
/**
|
|
39
26
|
* Function signature for useStyling as implemented by compose. This adds the lookup function to enable
|
|
40
27
|
* more control over how overrides are applied.
|
|
41
28
|
*/
|
|
42
|
-
export type IDefineUseComposeStyling<TProps, TSlotProps extends ISlotProps, TTokens extends object> = (
|
|
43
|
-
props: TProps,
|
|
44
|
-
lookup?: IOverrideLookup,
|
|
45
|
-
) => IWithTokens<TSlotProps, TTokens>;
|
|
29
|
+
export type IDefineUseComposeStyling<TProps, TSlotProps extends ISlotProps, TTokens extends object> = (props: TProps, lookup?: IOverrideLookup) => IWithTokens<TSlotProps, TTokens>;
|
|
46
30
|
export type IUseComposeStyling<T> = IDefineUseComposeStyling<IExtractProps<T>, IExtractSlotProps<T>, IExtractTokens<T>>;
|
|
47
31
|
/**
|
|
48
32
|
* Array of:
|
|
@@ -52,67 +36,50 @@ export type IUseComposeStyling<T> = IDefineUseComposeStyling<IExtractProps<T>, I
|
|
|
52
36
|
*
|
|
53
37
|
* These settings are layered together in order to produce the merged settings for a component
|
|
54
38
|
*/
|
|
55
|
-
export type IDefineComposeSettings<TSlotProps extends ISlotProps, TTokens extends object> = ISettingsEntry<
|
|
56
|
-
IComponentSettings<IWithTokens<TSlotProps, TTokens>>,
|
|
57
|
-
ITheme
|
|
58
|
-
>[];
|
|
39
|
+
export type IDefineComposeSettings<TSlotProps extends ISlotProps, TTokens extends object> = ISettingsEntry<IComponentSettings<IWithTokens<TSlotProps, TTokens>>, ITheme>[];
|
|
59
40
|
export type IComposeSettings<T> = IDefineComposeSettings<IExtractSlotProps<T>, IExtractTokens<T>>;
|
|
60
41
|
/**
|
|
61
42
|
* Settings which dictate the behavior of useStyling, as implemented by the compose package. These are
|
|
62
43
|
* separated from IComponentOptions to allow the styling portion to be used independently if so desired.
|
|
63
44
|
*/
|
|
64
45
|
export interface IStylingSettings<TSlotProps extends ISlotProps, TTokens extends object> {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
46
|
+
/**
|
|
47
|
+
* settings used to build up the style definitions
|
|
48
|
+
*/
|
|
49
|
+
settings?: IDefineComposeSettings<TSlotProps, TTokens>;
|
|
50
|
+
/**
|
|
51
|
+
* factories for producing styles from tokens
|
|
52
|
+
*/
|
|
53
|
+
styles?: IStyleFactories<TSlotProps, TTokens, ITheme>;
|
|
54
|
+
/**
|
|
55
|
+
* The input tokens processed, built into functions, with the keys built into a map.
|
|
56
|
+
*
|
|
57
|
+
* This gets set automatically when the component is set up for the first time and should not be set by hand.
|
|
58
|
+
*/
|
|
59
|
+
resolvedTokens?: IComponentTokens<TSlotProps, TTokens, ITheme>;
|
|
79
60
|
}
|
|
80
61
|
/**
|
|
81
62
|
* Options to be used with compose. These drive the actual behavior of the component and are comprised of styling
|
|
82
63
|
* options as well as options which configure composable.
|
|
83
64
|
*/
|
|
84
|
-
export interface IComposeOptions<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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;
|
|
65
|
+
export interface IComposeOptions<TProps extends object = object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TTokens extends object = object, TState extends object = object, TStatics extends object = object> extends IComposableDefinition<TProps, TSlotProps, TState>, IStylingSettings<TSlotProps, TTokens> {
|
|
66
|
+
/**
|
|
67
|
+
* Add an additional option to use styling to allow for injecting override lookup functions
|
|
68
|
+
*/
|
|
69
|
+
useStyling?: IDefineUseComposeStyling<TProps, TSlotProps, TTokens>;
|
|
70
|
+
/**
|
|
71
|
+
* Use prepare props will take the more opinionated version of useStyling
|
|
72
|
+
*/
|
|
73
|
+
usePrepareProps?: (props: TProps, useStyling: IDefineUseComposeStyling<TProps, TSlotProps, TTokens>) => IRenderData<TSlotProps, TState>;
|
|
74
|
+
/**
|
|
75
|
+
* Optional statics to attach to the component. This is primary used to attach a sub-component to a parent component
|
|
76
|
+
*/
|
|
77
|
+
statics?: TStatics;
|
|
104
78
|
}
|
|
105
79
|
/**
|
|
106
80
|
* The signature of the component returned from compose.
|
|
107
81
|
*/
|
|
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 & {
|
|
82
|
+
export type IComposeReturnType<TProps extends object, TSlotProps extends ISlotProps, TTokens extends object, TState extends object = object, TStatics extends object = object> = React.FunctionComponent<TProps> & TStatics & {
|
|
116
83
|
/**
|
|
117
84
|
* composable options, used by composable for chaining objects. For compose this also includes the extensions
|
|
118
85
|
* such as settings or token information.
|
|
@@ -121,27 +88,17 @@ export type IComposeReturnType<
|
|
|
121
88
|
/**
|
|
122
89
|
* shorthand function for doing quick customizations of a component by appending to settings
|
|
123
90
|
*/
|
|
124
|
-
customize: (
|
|
125
|
-
...settings: IDefineComposeSettings<TSlotProps, TTokens>
|
|
126
|
-
) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
91
|
+
customize: (...settings: IDefineComposeSettings<TSlotProps, TTokens>) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
127
92
|
/**
|
|
128
93
|
* helper function to quickly add new partial options to the base component. The primary advantage is that
|
|
129
94
|
* this is strongly typed for the component type which avoids needing to pass all the type parameters correctly.
|
|
130
95
|
*/
|
|
131
|
-
compose: (
|
|
132
|
-
|
|
133
|
-
) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
134
|
-
};
|
|
96
|
+
compose: (newOptions: Partial<IComposeOptions<TProps, TSlotProps, TTokens, TState, TStatics>>) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
97
|
+
};
|
|
135
98
|
/**
|
|
136
99
|
* A shorthand for typecasting a component into a more specific type, used for dealing with multiple platforms in
|
|
137
100
|
* react-native
|
|
138
101
|
*/
|
|
139
|
-
export type IComposeTypecast<TType> = IComposeReturnType<
|
|
140
|
-
IExtractProps<TType>,
|
|
141
|
-
IExtractSlotProps<TType>,
|
|
142
|
-
IExtractTokens<TType>,
|
|
143
|
-
IExtractState<TType>,
|
|
144
|
-
IExtractStatics<TType>
|
|
145
|
-
>;
|
|
102
|
+
export type IComposeTypecast<TType> = IComposeReturnType<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>;
|
|
146
103
|
export {};
|
|
147
|
-
//# sourceMappingURL=compose.types.d.ts.map
|
|
104
|
+
//# sourceMappingURL=compose.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compose.types.d.ts","sourceRoot":"","sources":["../src/compose.types.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,aAAa,EACd,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACnH,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,YAAY,CAC3B,MAAM,SAAS,MAAM,GAAG,MAAM,EAC9B,UAAU,SAAS,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,EAClD,MAAM,SAAS,MAAM,GAAG,MAAM,EAC9B,OAAO,SAAS,MAAM,GAAG,MAAM,EAC/B,QAAQ,SAAS,MAAM,GAAG,MAAM,CAChC,SAAQ,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC;IACnD;;OAEG;IACH,OAAO,EAAE,QAAQ,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB;AAGD,KAAK,gBAAgB,CAAC,QAAQ,SAAS,MAAM,IAAI;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC;AACvE,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,gBAAgB,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAGlF,KAAK,eAAe,CAAC,OAAO,SAAS,MAAM,IAAI;IAAE,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AACnE,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAEhF;;;GAGG;AACH,MAAM,MAAM,wBAAwB,CAAC,MAAM,EAAE,UAAU,SAAS,UAAU,EAAE,OAAO,SAAS,MAAM,IAAI,CACpG,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,eAAe,KACrB,WAAW,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AACtC,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,wBAAwB,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAExH;;;;;;;GAOG;AACH,MAAM,MAAM,sBAAsB,CAAC,UAAU,SAAS,UAAU,EAAE,OAAO,SAAS,MAAM,IAAI,cAAc,CACxG,kBAAkB,CAAC,WAAW,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,EACpD,MAAM,CACP,EAAE,CAAC;AACJ,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElG;;;GAGG;AACH,MAAM,WAAW,gBAAgB,CAAC,UAAU,SAAS,UAAU,EAAE,OAAO,SAAS,MAAM;IACrF;;OAEG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAEvD;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAEtD;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;CAChE;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe,CAC9B,MAAM,SAAS,MAAM,GAAG,MAAM,EAC9B,UAAU,SAAS,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,EAClD,OAAO,SAAS,MAAM,GAAG,MAAM,EAC/B,MAAM,SAAS,MAAM,GAAG,MAAM,EAC9B,QAAQ,SAAS,MAAM,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"compose.types.d.ts","sourceRoot":"","sources":["../src/compose.types.ts"],"names":[],"mappings":"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"}
|
package/lib/compose.types.js
CHANGED
package/lib/index.d.ts
CHANGED
|
@@ -1,16 +1,4 @@
|
|
|
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';
|
|
1
|
+
export type { IComposeOptions, IComposeReturnType, IComposeSettings, IComposeType, IComposeTypecast, IDefineComposeSettings, IDefineUseComposeStyling, IExtractStatics, IExtractTokens, IStylingSettings, IUseComposeStyling, } from './compose.types';
|
|
14
2
|
export { compose } from './compose';
|
|
15
3
|
export { initializeStyling } from './useStyling';
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.js
CHANGED
package/lib/useStyling.d.ts
CHANGED
|
@@ -8,11 +8,5 @@ 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
|
-
|
|
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
|
|
11
|
+
export declare function initializeStyling<TProps extends object, TSlotProps extends ISlotProps, TTokens extends object, TState extends object, TStatics extends object>(options: IComposeOptions<TProps, TSlotProps, TTokens, TState, TStatics>): IDefineUseComposeStyling<TProps, TSlotProps, TTokens>;
|
|
12
|
+
//# sourceMappingURL=useStyling.d.ts.map
|
package/lib/useStyling.js
CHANGED
|
@@ -7,32 +7,32 @@ import { defaultFluentTheme } from '@fluentui-react-native/default-theme';
|
|
|
7
7
|
import { getMemoCache } from '@fluentui-react-native/framework-base';
|
|
8
8
|
/* tslint:disable-next-line no-any */
|
|
9
9
|
export function getOptionsFromObj(obj) {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
const objType = obj && typeof obj;
|
|
11
|
+
return ((objType === 'object' || objType === 'function') && obj.__composable) || undefined;
|
|
12
12
|
}
|
|
13
13
|
function _getSettingsFromTheme(theme, name) {
|
|
14
|
-
|
|
14
|
+
return getSettings(theme, name);
|
|
15
15
|
}
|
|
16
16
|
function _getHasToken(slots) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
const slotTokens = {};
|
|
18
|
+
Object.keys(slots).forEach((slotName) => {
|
|
19
|
+
const slot = slots[slotName];
|
|
20
|
+
const slotType = (typeof slot !== 'object' ? slot : slot.slotType);
|
|
21
|
+
const options = getOptionsFromObj(slotType);
|
|
22
|
+
slotTokens[slotName] = (options && options.resolvedTokens && options.resolvedTokens.tokenKeys) || undefined;
|
|
23
|
+
});
|
|
24
|
+
return (target, key) => {
|
|
25
|
+
return slotTokens[target] && slotTokens[target].hasOwnProperty(key);
|
|
26
|
+
};
|
|
27
27
|
}
|
|
28
28
|
function useStylingCore(props, options, instanceMemoCache, lookupOverride) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
// get the theme value from the context (or the default theme if it is not set)
|
|
30
|
+
const theme = useTheme() || defaultFluentTheme;
|
|
31
|
+
// resolve the array of settings for these options
|
|
32
|
+
lookupOverride = lookupOverride || props;
|
|
33
|
+
const { settings, getMemoValue } = getThemedSettings(options.settings, theme, instanceMemoCache, lookupOverride, _getSettingsFromTheme);
|
|
34
|
+
// finish by processing the tokens and turning IComponentSettings into ISlotProps (this removes things like _overrides)
|
|
35
|
+
return returnAsSlotProps(processTokens(props, theme, settings, options.resolvedTokens, getMemoValue));
|
|
36
36
|
}
|
|
37
37
|
/**
|
|
38
38
|
* return a useStyling implementation, in the form of IUseComposeStyling, based on the passed in styleSettings. The
|
|
@@ -42,14 +42,14 @@ function useStylingCore(props, options, instanceMemoCache, lookupOverride) {
|
|
|
42
42
|
* @param name - optional base name to use as a cache key
|
|
43
43
|
*/
|
|
44
44
|
export function initializeStyling(options) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
// process the tokens and get them ready to render
|
|
46
|
+
const { styles, slots } = options;
|
|
47
|
+
options.resolvedTokens = buildComponentTokens(styles, _getHasToken(slots));
|
|
48
|
+
// memo cache root for this component, keyed on options
|
|
49
|
+
const getMemoValue = getMemoCache(options);
|
|
50
|
+
// create a useStyling implementation for this component type (per type, not per instance)
|
|
51
|
+
return (props, lookupOverride) => {
|
|
52
|
+
return useStylingCore(props, options, getMemoValue, lookupOverride);
|
|
53
|
+
};
|
|
54
54
|
}
|
|
55
|
-
//# sourceMappingURL=useStyling.js.map
|
|
55
|
+
//# sourceMappingURL=useStyling.js.map
|
|
@@ -8,10 +8,5 @@ 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
|
-
|
|
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
|
|
11
|
+
export declare function compose<TType>(inputComponent: Partial<IComposeOptions<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>>, base?: INativeSlotType): IComposeReturnType<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>;
|
|
12
|
+
//# 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,
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.compose = compose;
|
|
5
|
-
const foundation_composable_1 = require(
|
|
6
|
-
const useStyling_1 = require(
|
|
7
|
-
const framework_base_1 = require(
|
|
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,24 +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
|
-
//# sourceMappingURL=compose.js.map
|
|
51
|
+
//# sourceMappingURL=compose.js.map
|
|
@@ -1,48 +1,32 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IRenderData,
|
|
3
|
-
IComposableDefinition,
|
|
4
|
-
IComposableType,
|
|
5
|
-
IExtractSlotProps,
|
|
6
|
-
IExtractProps,
|
|
7
|
-
IExtractState,
|
|
8
|
-
} from '@uifabricshared/foundation-composable';
|
|
1
|
+
import { IRenderData, IComposableDefinition, IComposableType, IExtractSlotProps, IExtractProps, IExtractState } from '@uifabricshared/foundation-composable';
|
|
9
2
|
import { ISlotProps, IComponentSettings, IWithTokens, IOverrideLookup } from '@uifabricshared/foundation-settings';
|
|
10
3
|
import { ISettingsEntry } from '@uifabricshared/themed-settings';
|
|
11
4
|
import { ITheme } from '@uifabricshared/theming-ramp';
|
|
12
5
|
import { IStyleFactories, IComponentTokens } from '@uifabricshared/foundation-tokens';
|
|
13
6
|
import * as React from 'react';
|
|
14
|
-
export interface IComposeType<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
*/
|
|
24
|
-
statics: TStatics;
|
|
25
|
-
/**
|
|
26
|
-
* Token props for this component
|
|
27
|
-
*/
|
|
28
|
-
tokens: TTokens;
|
|
7
|
+
export interface IComposeType<TProps extends object = object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TState extends object = object, TTokens extends object = object, TStatics extends object = object> extends IComposableType<TProps, TSlotProps, TState> {
|
|
8
|
+
/**
|
|
9
|
+
* Any statics to attach to the component
|
|
10
|
+
*/
|
|
11
|
+
statics: TStatics;
|
|
12
|
+
/**
|
|
13
|
+
* Token props for this component
|
|
14
|
+
*/
|
|
15
|
+
tokens: TTokens;
|
|
29
16
|
}
|
|
30
17
|
type IStaticsFragment<TStatics extends object> = {
|
|
31
|
-
|
|
18
|
+
statics: TStatics;
|
|
32
19
|
};
|
|
33
20
|
export type IExtractStatics<T> = T extends IStaticsFragment<infer U> ? U : object;
|
|
34
21
|
type ITokensFragment<TTokens extends object> = {
|
|
35
|
-
|
|
22
|
+
tokens: TTokens;
|
|
36
23
|
};
|
|
37
24
|
export type IExtractTokens<T> = T extends ITokensFragment<infer U> ? U : object;
|
|
38
25
|
/**
|
|
39
26
|
* Function signature for useStyling as implemented by compose. This adds the lookup function to enable
|
|
40
27
|
* more control over how overrides are applied.
|
|
41
28
|
*/
|
|
42
|
-
export type IDefineUseComposeStyling<TProps, TSlotProps extends ISlotProps, TTokens extends object> = (
|
|
43
|
-
props: TProps,
|
|
44
|
-
lookup?: IOverrideLookup,
|
|
45
|
-
) => IWithTokens<TSlotProps, TTokens>;
|
|
29
|
+
export type IDefineUseComposeStyling<TProps, TSlotProps extends ISlotProps, TTokens extends object> = (props: TProps, lookup?: IOverrideLookup) => IWithTokens<TSlotProps, TTokens>;
|
|
46
30
|
export type IUseComposeStyling<T> = IDefineUseComposeStyling<IExtractProps<T>, IExtractSlotProps<T>, IExtractTokens<T>>;
|
|
47
31
|
/**
|
|
48
32
|
* Array of:
|
|
@@ -52,67 +36,50 @@ export type IUseComposeStyling<T> = IDefineUseComposeStyling<IExtractProps<T>, I
|
|
|
52
36
|
*
|
|
53
37
|
* These settings are layered together in order to produce the merged settings for a component
|
|
54
38
|
*/
|
|
55
|
-
export type IDefineComposeSettings<TSlotProps extends ISlotProps, TTokens extends object> = ISettingsEntry<
|
|
56
|
-
IComponentSettings<IWithTokens<TSlotProps, TTokens>>,
|
|
57
|
-
ITheme
|
|
58
|
-
>[];
|
|
39
|
+
export type IDefineComposeSettings<TSlotProps extends ISlotProps, TTokens extends object> = ISettingsEntry<IComponentSettings<IWithTokens<TSlotProps, TTokens>>, ITheme>[];
|
|
59
40
|
export type IComposeSettings<T> = IDefineComposeSettings<IExtractSlotProps<T>, IExtractTokens<T>>;
|
|
60
41
|
/**
|
|
61
42
|
* Settings which dictate the behavior of useStyling, as implemented by the compose package. These are
|
|
62
43
|
* separated from IComponentOptions to allow the styling portion to be used independently if so desired.
|
|
63
44
|
*/
|
|
64
45
|
export interface IStylingSettings<TSlotProps extends ISlotProps, TTokens extends object> {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
46
|
+
/**
|
|
47
|
+
* settings used to build up the style definitions
|
|
48
|
+
*/
|
|
49
|
+
settings?: IDefineComposeSettings<TSlotProps, TTokens>;
|
|
50
|
+
/**
|
|
51
|
+
* factories for producing styles from tokens
|
|
52
|
+
*/
|
|
53
|
+
styles?: IStyleFactories<TSlotProps, TTokens, ITheme>;
|
|
54
|
+
/**
|
|
55
|
+
* The input tokens processed, built into functions, with the keys built into a map.
|
|
56
|
+
*
|
|
57
|
+
* This gets set automatically when the component is set up for the first time and should not be set by hand.
|
|
58
|
+
*/
|
|
59
|
+
resolvedTokens?: IComponentTokens<TSlotProps, TTokens, ITheme>;
|
|
79
60
|
}
|
|
80
61
|
/**
|
|
81
62
|
* Options to be used with compose. These drive the actual behavior of the component and are comprised of styling
|
|
82
63
|
* options as well as options which configure composable.
|
|
83
64
|
*/
|
|
84
|
-
export interface IComposeOptions<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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;
|
|
65
|
+
export interface IComposeOptions<TProps extends object = object, TSlotProps extends ISlotProps = ISlotProps<TProps>, TTokens extends object = object, TState extends object = object, TStatics extends object = object> extends IComposableDefinition<TProps, TSlotProps, TState>, IStylingSettings<TSlotProps, TTokens> {
|
|
66
|
+
/**
|
|
67
|
+
* Add an additional option to use styling to allow for injecting override lookup functions
|
|
68
|
+
*/
|
|
69
|
+
useStyling?: IDefineUseComposeStyling<TProps, TSlotProps, TTokens>;
|
|
70
|
+
/**
|
|
71
|
+
* Use prepare props will take the more opinionated version of useStyling
|
|
72
|
+
*/
|
|
73
|
+
usePrepareProps?: (props: TProps, useStyling: IDefineUseComposeStyling<TProps, TSlotProps, TTokens>) => IRenderData<TSlotProps, TState>;
|
|
74
|
+
/**
|
|
75
|
+
* Optional statics to attach to the component. This is primary used to attach a sub-component to a parent component
|
|
76
|
+
*/
|
|
77
|
+
statics?: TStatics;
|
|
104
78
|
}
|
|
105
79
|
/**
|
|
106
80
|
* The signature of the component returned from compose.
|
|
107
81
|
*/
|
|
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 & {
|
|
82
|
+
export type IComposeReturnType<TProps extends object, TSlotProps extends ISlotProps, TTokens extends object, TState extends object = object, TStatics extends object = object> = React.FunctionComponent<TProps> & TStatics & {
|
|
116
83
|
/**
|
|
117
84
|
* composable options, used by composable for chaining objects. For compose this also includes the extensions
|
|
118
85
|
* such as settings or token information.
|
|
@@ -121,27 +88,17 @@ export type IComposeReturnType<
|
|
|
121
88
|
/**
|
|
122
89
|
* shorthand function for doing quick customizations of a component by appending to settings
|
|
123
90
|
*/
|
|
124
|
-
customize: (
|
|
125
|
-
...settings: IDefineComposeSettings<TSlotProps, TTokens>
|
|
126
|
-
) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
91
|
+
customize: (...settings: IDefineComposeSettings<TSlotProps, TTokens>) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
127
92
|
/**
|
|
128
93
|
* helper function to quickly add new partial options to the base component. The primary advantage is that
|
|
129
94
|
* this is strongly typed for the component type which avoids needing to pass all the type parameters correctly.
|
|
130
95
|
*/
|
|
131
|
-
compose: (
|
|
132
|
-
|
|
133
|
-
) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
134
|
-
};
|
|
96
|
+
compose: (newOptions: Partial<IComposeOptions<TProps, TSlotProps, TTokens, TState, TStatics>>) => IComposeReturnType<TProps, TSlotProps, TTokens, TState, TStatics>;
|
|
97
|
+
};
|
|
135
98
|
/**
|
|
136
99
|
* A shorthand for typecasting a component into a more specific type, used for dealing with multiple platforms in
|
|
137
100
|
* react-native
|
|
138
101
|
*/
|
|
139
|
-
export type IComposeTypecast<TType> = IComposeReturnType<
|
|
140
|
-
IExtractProps<TType>,
|
|
141
|
-
IExtractSlotProps<TType>,
|
|
142
|
-
IExtractTokens<TType>,
|
|
143
|
-
IExtractState<TType>,
|
|
144
|
-
IExtractStatics<TType>
|
|
145
|
-
>;
|
|
102
|
+
export type IComposeTypecast<TType> = IComposeReturnType<IExtractProps<TType>, IExtractSlotProps<TType>, IExtractTokens<TType>, IExtractState<TType>, IExtractStatics<TType>>;
|
|
146
103
|
export {};
|
|
147
|
-
//# sourceMappingURL=compose.types.d.ts.map
|
|
104
|
+
//# sourceMappingURL=compose.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compose.types.d.ts","sourceRoot":"","sources":["../src/compose.types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"compose.types.d.ts","sourceRoot":"","sources":["../src/compose.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -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,16 +1,4 @@
|
|
|
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';
|
|
1
|
+
export type { IComposeOptions, IComposeReturnType, IComposeSettings, IComposeType, IComposeTypecast, IDefineComposeSettings, IDefineUseComposeStyling, IExtractStatics, IExtractTokens, IStylingSettings, IUseComposeStyling, } from './compose.types';
|
|
14
2
|
export { compose } from './compose';
|
|
15
3
|
export { initializeStyling } from './useStyling';
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1,18 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.initializeStyling = exports.compose = void 0;
|
|
4
|
-
const compose_1 = require(
|
|
5
|
-
Object.defineProperty(exports,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
|
4
|
+
const compose_1 = require("./compose");
|
|
5
|
+
Object.defineProperty(exports, "compose", { enumerable: true, get: function () { return compose_1.compose; } });
|
|
6
|
+
const useStyling_1 = require("./useStyling");
|
|
7
|
+
Object.defineProperty(exports, "initializeStyling", { enumerable: true, get: function () { return useStyling_1.initializeStyling; } });
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -8,11 +8,5 @@ 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
|
-
|
|
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
|
|
11
|
+
export declare function initializeStyling<TProps extends object, TSlotProps extends ISlotProps, TTokens extends object, TState extends object, TStatics extends object>(options: IComposeOptions<TProps, TSlotProps, TTokens, TState, TStatics>): IDefineUseComposeStyling<TProps, TSlotProps, TTokens>;
|
|
12
|
+
//# sourceMappingURL=useStyling.d.ts.map
|
|
@@ -1,50 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
/* eslint-disable */
|
|
3
|
-
Object.defineProperty(exports,
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.getOptionsFromObj = getOptionsFromObj;
|
|
5
5
|
exports.initializeStyling = initializeStyling;
|
|
6
|
-
const themed_settings_1 = require(
|
|
7
|
-
const theming_ramp_1 = require(
|
|
8
|
-
const foundation_tokens_1 = require(
|
|
9
|
-
const theme_types_1 = require(
|
|
10
|
-
const default_theme_1 = require(
|
|
11
|
-
const framework_base_1 = require(
|
|
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");
|
|
12
12
|
/* tslint:disable-next-line no-any */
|
|
13
13
|
function getOptionsFromObj(obj) {
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
const objType = obj && typeof obj;
|
|
15
|
+
return ((objType === 'object' || objType === 'function') && obj.__composable) || undefined;
|
|
16
16
|
}
|
|
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
|
-
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
|
-
);
|
|
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)(options.settings, theme, instanceMemoCache, lookupOverride, _getSettingsFromTheme);
|
|
38
|
+
// finish by processing the tokens and turning IComponentSettings into ISlotProps (this removes things like _overrides)
|
|
39
|
+
return (0, theming_ramp_1.returnAsSlotProps)((0, foundation_tokens_1.processTokens)(props, theme, settings, options.resolvedTokens, getMemoValue));
|
|
48
40
|
}
|
|
49
41
|
/**
|
|
50
42
|
* return a useStyling implementation, in the form of IUseComposeStyling, based on the passed in styleSettings. The
|
|
@@ -54,14 +46,14 @@ function useStylingCore(props, options, instanceMemoCache, lookupOverride) {
|
|
|
54
46
|
* @param name - optional base name to use as a cache key
|
|
55
47
|
*/
|
|
56
48
|
function initializeStyling(options) {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
49
|
+
// process the tokens and get them ready to render
|
|
50
|
+
const { styles, slots } = options;
|
|
51
|
+
options.resolvedTokens = (0, foundation_tokens_1.buildComponentTokens)(styles, _getHasToken(slots));
|
|
52
|
+
// memo cache root for this component, keyed on options
|
|
53
|
+
const getMemoValue = (0, framework_base_1.getMemoCache)(options);
|
|
54
|
+
// create a useStyling implementation for this component type (per type, not per instance)
|
|
55
|
+
return (props, lookupOverride) => {
|
|
56
|
+
return useStylingCore(props, options, getMemoValue, lookupOverride);
|
|
57
|
+
};
|
|
66
58
|
}
|
|
67
|
-
//# sourceMappingURL=useStyling.js.map
|
|
59
|
+
//# sourceMappingURL=useStyling.js.map
|
package/package.json
CHANGED
|
@@ -1,65 +1,66 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uifabricshared/foundation-compose",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.3",
|
|
4
4
|
"description": "Compose infrastructure",
|
|
5
5
|
"keywords": [],
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "",
|
|
6
8
|
"repository": {
|
|
7
9
|
"type": "git",
|
|
8
10
|
"url": "https://github.com/microsoft/fluentui-react-native.git",
|
|
9
11
|
"directory": "packages/deprecated/foundation-compose"
|
|
10
12
|
},
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
+
"main": "lib-commonjs/index.js",
|
|
14
|
+
"module": "lib/index.js",
|
|
15
|
+
"types": "lib/index.d.ts",
|
|
13
16
|
"exports": {
|
|
14
17
|
".": {
|
|
15
18
|
"types": "./lib/index.d.ts",
|
|
16
19
|
"import": "./lib/index.js",
|
|
17
|
-
"require": "./lib-commonjs/index.js"
|
|
20
|
+
"require": "./lib-commonjs/index.js",
|
|
21
|
+
"default": "./src/index.ts"
|
|
18
22
|
}
|
|
19
23
|
},
|
|
20
|
-
"main": "lib-commonjs/index.js",
|
|
21
|
-
"module": "lib/index.js",
|
|
22
|
-
"types": "lib/index.d.ts",
|
|
23
24
|
"scripts": {
|
|
24
25
|
"build": "fluentui-scripts build",
|
|
25
26
|
"build-cjs": "tsgo --outDir lib-commonjs",
|
|
26
|
-
"build-
|
|
27
|
+
"build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
|
|
27
28
|
"clean": "fluentui-scripts clean",
|
|
28
29
|
"depcheck": "fluentui-scripts depcheck",
|
|
29
|
-
"
|
|
30
|
+
"format": "fluentui-scripts format",
|
|
31
|
+
"lint": "fluentui-scripts lint",
|
|
30
32
|
"lint-package": "fluentui-scripts lint-package",
|
|
31
|
-
"prettier": "fluentui-scripts prettier",
|
|
32
33
|
"start": "fluentui-scripts dev",
|
|
33
34
|
"start-test": "fluentui-scripts jest-watch",
|
|
34
35
|
"test": "fluentui-scripts jest",
|
|
35
36
|
"update-snapshots": "fluentui-scripts jest -u"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@fluentui-react-native/default-theme": "0.27.
|
|
39
|
-
"@fluentui-react-native/framework-base": "0.3.
|
|
40
|
-
"@fluentui-react-native/theme-types": "0.44.
|
|
41
|
-
"@uifabricshared/foundation-composable": "0.14.
|
|
42
|
-
"@uifabricshared/foundation-settings": "0.16.
|
|
43
|
-
"@uifabricshared/foundation-tokens": "0.16.
|
|
44
|
-
"@uifabricshared/themed-settings": "0.13.
|
|
45
|
-
"@uifabricshared/theming-ramp": "0.21.
|
|
39
|
+
"@fluentui-react-native/default-theme": "0.27.3",
|
|
40
|
+
"@fluentui-react-native/framework-base": "0.3.3",
|
|
41
|
+
"@fluentui-react-native/theme-types": "0.44.3",
|
|
42
|
+
"@uifabricshared/foundation-composable": "0.14.3",
|
|
43
|
+
"@uifabricshared/foundation-settings": "0.16.3",
|
|
44
|
+
"@uifabricshared/foundation-tokens": "0.16.3",
|
|
45
|
+
"@uifabricshared/themed-settings": "0.13.3",
|
|
46
|
+
"@uifabricshared/theming-ramp": "0.21.3"
|
|
46
47
|
},
|
|
47
48
|
"devDependencies": {
|
|
48
|
-
"@fluentui-react-native/eslint-config-rules": "0.1.1",
|
|
49
49
|
"@fluentui-react-native/kit-config": "0.1.2",
|
|
50
|
-
"@fluentui-react-native/
|
|
50
|
+
"@fluentui-react-native/lint-config-rules": "0.1.3",
|
|
51
|
+
"@fluentui-react-native/scripts": "0.1.0",
|
|
51
52
|
"@office-iss/react-native-win32": "^0.81.0",
|
|
52
|
-
"@types/react": "~19.1.
|
|
53
|
-
"react": "19.1.
|
|
54
|
-
"react-native": "^0.81.
|
|
53
|
+
"@types/react": "~19.1.4",
|
|
54
|
+
"react": "19.1.4",
|
|
55
|
+
"react-native": "^0.81.6",
|
|
55
56
|
"react-native-macos": "^0.81.0",
|
|
56
57
|
"react-native-windows": "^0.81.0"
|
|
57
58
|
},
|
|
58
59
|
"peerDependencies": {
|
|
59
60
|
"@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
|
|
60
|
-
"@types/react": "~18.2.0 || ~19.0.0 || ~19.1.
|
|
61
|
-
"react": "18.2.0 || 19.0.0 || 19.1.
|
|
62
|
-
"react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.
|
|
61
|
+
"@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
|
|
62
|
+
"react": "18.2.0 || 19.0.0 || 19.1.4",
|
|
63
|
+
"react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6",
|
|
63
64
|
"react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
|
|
64
65
|
"react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
|
|
65
66
|
},
|
package/src/compose.types.ts
CHANGED
|
@@ -97,8 +97,8 @@ export interface IComposeOptions<
|
|
|
97
97
|
TTokens extends object = object,
|
|
98
98
|
TState extends object = object,
|
|
99
99
|
TStatics extends object = object,
|
|
100
|
-
>
|
|
101
|
-
|
|
100
|
+
>
|
|
101
|
+
extends IComposableDefinition<TProps, TSlotProps, TState>, IStylingSettings<TSlotProps, TTokens> {
|
|
102
102
|
/**
|
|
103
103
|
* Add an additional option to use styling to allow for injecting override lookup functions
|
|
104
104
|
*/
|
package/eslint.config.js
DELETED