@fluentui/react-motion-components-preview 0.3.2 → 0.4.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 +15 -2
- package/dist/index.d.ts +22 -9
- package/lib/components/Collapse/collapse-atoms.js +25 -10
- package/lib/components/Collapse/collapse-atoms.js.map +1 -1
- package/lib/components/Scale/Scale.js +53 -61
- package/lib/components/Scale/Scale.js.map +1 -1
- package/lib/components/Scale/Scale.types.js +3 -0
- package/lib/components/Scale/Scale.types.js.map +1 -0
- package/lib/components/Scale/index.js +1 -1
- package/lib/components/Scale/index.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Collapse/collapse-atoms.js +23 -7
- package/lib-commonjs/components/Collapse/collapse-atoms.js.map +1 -1
- package/lib-commonjs/components/Scale/Scale.js +55 -60
- package/lib-commonjs/components/Scale/Scale.js.map +1 -1
- package/lib-commonjs/components/Scale/Scale.types.js +5 -0
- package/lib-commonjs/components/Scale/Scale.types.js.map +1 -0
- package/lib-commonjs/components/Scale/index.js +3 -0
- package/lib-commonjs/components/Scale/index.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion-components-preview
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 09 Dec 2024 17:34:07 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.0)
|
|
8
|
+
|
|
9
|
+
Mon, 09 Dec 2024 17:34:07 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.3.2..@fluentui/react-motion-components-preview_v0.4.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat(Collapse): add margin to whitespace animation ([PR #33405](https://github.com/microsoft/fluentui/pull/33405) by robertpenner@microsoft.com)
|
|
15
|
+
|
|
16
|
+
### Patches
|
|
17
|
+
|
|
18
|
+
- feat(motion): Refactor scale, migrate to new variant structure ([PR #33341](https://github.com/microsoft/fluentui/pull/33341) by olkatruk@microsoft.com)
|
|
19
|
+
|
|
7
20
|
## [0.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.3.2)
|
|
8
21
|
|
|
9
|
-
Fri, 06 Dec 2024 12:
|
|
22
|
+
Fri, 06 Dec 2024 12:53:40 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.3.0..@fluentui/react-motion-components-preview_v0.3.2)
|
|
11
24
|
|
|
12
25
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -60,6 +60,9 @@ export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVar
|
|
|
60
60
|
/** Define a presence motion for fade in/out */
|
|
61
61
|
export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
|
|
62
62
|
|
|
63
|
+
/** Define a presence motion for scale in/out */
|
|
64
|
+
export declare const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable>;
|
|
65
|
+
|
|
63
66
|
/** A React component that applies fade in/out transitions to its children. */
|
|
64
67
|
export declare const Fade: PresenceComponent< {}>;
|
|
65
68
|
|
|
@@ -100,16 +103,26 @@ declare type PresenceMotionCreator<MotionVariantParams extends Record<string, Mo
|
|
|
100
103
|
declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
|
|
101
104
|
|
|
102
105
|
/** A React component that applies scale in/out transitions to its children. */
|
|
103
|
-
export declare const Scale: PresenceComponent<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
+
export declare const Scale: PresenceComponent<ScaleRuntimeParams_unstable>;
|
|
107
|
+
|
|
108
|
+
export declare const ScaleRelaxed: PresenceComponent<ScaleRuntimeParams_unstable>;
|
|
109
|
+
|
|
110
|
+
declare type ScaleRuntimeParams_unstable = {
|
|
111
|
+
/** Whether to animate the opacity. Defaults to `true`. */
|
|
112
|
+
animateOpacity?: boolean;
|
|
113
|
+
};
|
|
106
114
|
|
|
107
|
-
export declare const
|
|
108
|
-
animateOpacity?: boolean | undefined;
|
|
109
|
-
}>;
|
|
115
|
+
export declare const ScaleSnappy: PresenceComponent<ScaleRuntimeParams_unstable>;
|
|
110
116
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
117
|
+
declare type ScaleVariantParams_unstable = {
|
|
118
|
+
/** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */
|
|
119
|
+
enterDuration?: number;
|
|
120
|
+
/** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */
|
|
121
|
+
enterEasing?: string;
|
|
122
|
+
/** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */
|
|
123
|
+
exitDuration?: number;
|
|
124
|
+
/** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */
|
|
125
|
+
exitEasing?: string;
|
|
126
|
+
};
|
|
114
127
|
|
|
115
128
|
export { }
|
|
@@ -52,25 +52,37 @@ export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0
|
|
|
52
52
|
};
|
|
53
53
|
};
|
|
54
54
|
// ----- WHITESPACE -----
|
|
55
|
-
// Whitespace animation
|
|
55
|
+
// Whitespace animation includes padding and margin.
|
|
56
56
|
const whitespaceValuesForOrientation = (orientation)=>{
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
// horizontal whitespace collapse
|
|
58
|
+
if (orientation === 'horizontal') {
|
|
59
|
+
return {
|
|
60
|
+
paddingStart: 'paddingInlineStart',
|
|
61
|
+
paddingEnd: 'paddingInlineEnd',
|
|
62
|
+
marginStart: 'marginInlineStart',
|
|
63
|
+
marginEnd: 'marginInlineEnd'
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
// vertical whitespace collapse
|
|
59
67
|
return {
|
|
60
|
-
paddingStart,
|
|
61
|
-
paddingEnd
|
|
68
|
+
paddingStart: 'paddingBlockStart',
|
|
69
|
+
paddingEnd: 'paddingBlockEnd',
|
|
70
|
+
marginStart: 'marginBlockStart',
|
|
71
|
+
marginEnd: 'marginBlockEnd'
|
|
62
72
|
};
|
|
63
73
|
};
|
|
64
|
-
// Because a height of zero does not eliminate padding,
|
|
65
|
-
// we will create keyframes to animate
|
|
66
|
-
// TODO: consider collapsing margin, perhaps as an option.
|
|
74
|
+
// Because a height of zero does not eliminate padding or margin,
|
|
75
|
+
// we will create keyframes to animate them to zero.
|
|
67
76
|
export const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
|
|
68
|
-
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
77
|
+
const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
|
|
69
78
|
return {
|
|
79
|
+
// Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.
|
|
70
80
|
keyframes: [
|
|
71
81
|
{
|
|
72
82
|
[paddingStart]: '0',
|
|
73
83
|
[paddingEnd]: '0',
|
|
84
|
+
[marginStart]: '0',
|
|
85
|
+
[marginEnd]: '0',
|
|
74
86
|
offset: 0
|
|
75
87
|
}
|
|
76
88
|
],
|
|
@@ -79,12 +91,15 @@ export const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
|
|
|
79
91
|
};
|
|
80
92
|
};
|
|
81
93
|
export const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
|
|
82
|
-
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
94
|
+
const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
|
|
83
95
|
return {
|
|
96
|
+
// Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.
|
|
84
97
|
keyframes: [
|
|
85
98
|
{
|
|
86
99
|
[paddingStart]: '0',
|
|
87
100
|
[paddingEnd]: '0',
|
|
101
|
+
[marginStart]: '0',
|
|
102
|
+
[marginEnd]: '0',
|
|
88
103
|
offset: 1
|
|
89
104
|
}
|
|
90
105
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation
|
|
1
|
+
{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n // horizontal whitespace collapse\n if (orientation === 'horizontal') {\n return {\n paddingStart: 'paddingInlineStart',\n paddingEnd: 'paddingInlineEnd',\n marginStart: 'marginInlineStart',\n marginEnd: 'marginInlineEnd',\n };\n }\n // vertical whitespace collapse\n return {\n paddingStart: 'paddingBlockStart',\n paddingEnd: 'paddingBlockEnd',\n marginStart: 'marginBlockStart',\n marginEnd: 'marginBlockEnd',\n };\n};\n\n// Because a height of zero does not eliminate padding or margin,\n// we will create keyframes to animate them to zero.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n return {\n // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n return {\n // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,62 +1,54 @@
|
|
|
1
|
-
import { motionTokens, createPresenceComponent
|
|
2
|
-
/** Define a presence motion for scale in/out */ const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
1
|
+
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
2
|
+
/** Define a presence motion for scale in/out */ export const createScalePresence = ({ enterDuration = motionTokens.durationGentle, enterEasing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
|
|
3
|
+
const fromOpacity = animateOpacity ? 0 : 1;
|
|
4
|
+
const toOpacity = 1;
|
|
5
|
+
const fromScale = 0.9; // Could be a custom param in the future
|
|
6
|
+
const toScale = 1;
|
|
7
|
+
const enterKeyframes = [
|
|
8
|
+
{
|
|
9
|
+
opacity: fromOpacity,
|
|
10
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
11
|
+
visibility: 'visible'
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
opacity: toOpacity,
|
|
15
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
16
|
+
}
|
|
17
|
+
];
|
|
18
|
+
const exitKeyframes = [
|
|
19
|
+
{
|
|
20
|
+
opacity: toOpacity,
|
|
21
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
opacity: fromOpacity,
|
|
25
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
26
|
+
visibility: 'hidden'
|
|
27
|
+
}
|
|
28
|
+
];
|
|
29
|
+
return {
|
|
30
|
+
enter: {
|
|
31
|
+
duration: enterDuration,
|
|
32
|
+
easing: enterEasing,
|
|
33
|
+
keyframes: enterKeyframes
|
|
34
|
+
},
|
|
35
|
+
exit: {
|
|
36
|
+
duration: exitDuration,
|
|
37
|
+
easing: exitEasing,
|
|
38
|
+
keyframes: exitKeyframes
|
|
39
|
+
}
|
|
40
|
+
};
|
|
40
41
|
};
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
enter: {
|
|
55
|
-
duration: motionTokens.durationSlow,
|
|
56
|
-
easing: motionTokens.curveDecelerateMax
|
|
57
|
-
},
|
|
58
|
-
exit: {
|
|
59
|
-
duration: motionTokens.durationGentle,
|
|
60
|
-
easing: motionTokens.curveAccelerateMax
|
|
61
|
-
}
|
|
62
|
-
});
|
|
42
|
+
/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(createScalePresence());
|
|
43
|
+
export const ScaleSnappy = createPresenceComponent(createScalePresence({
|
|
44
|
+
enterDuration: motionTokens.durationNormal,
|
|
45
|
+
enterEasing: motionTokens.curveDecelerateMax,
|
|
46
|
+
exitDuration: motionTokens.durationFast,
|
|
47
|
+
exitEasing: motionTokens.curveAccelerateMax
|
|
48
|
+
}));
|
|
49
|
+
export const ScaleRelaxed = createPresenceComponent(createScalePresence({
|
|
50
|
+
enterDuration: motionTokens.durationSlow,
|
|
51
|
+
enterEasing: motionTokens.curveDecelerateMax,
|
|
52
|
+
exitDuration: motionTokens.durationGentle,
|
|
53
|
+
exitEasing: motionTokens.curveAccelerateMax
|
|
54
|
+
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { PresenceMotionFnCreator } from '../../types';\nimport { ScaleRuntimeParams_unstable, ScaleVariantParams_unstable } from './Scale.types';\n\n/** Define a presence motion for scale in/out */\nexport const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable> =\n ({\n enterDuration = motionTokens.durationGentle,\n enterEasing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n } = {}) =>\n ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n return {\n enter: {\n duration: enterDuration,\n easing: enterEasing,\n keyframes: enterKeyframes,\n },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\n };\n };\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(createScalePresence());\n\nexport const ScaleSnappy = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationNormal,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationFast,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n\nexport const ScaleRelaxed = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationSlow,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n"],"names":["motionTokens","createPresenceComponent","createScalePresence","enterDuration","durationGentle","enterEasing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","easing","keyframes","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAI/E,8CAA8C,GAC9C,OAAO,MAAMC,sBACX,CAAC,EACCC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,kBAAkB,EAC7CC,eAAeP,aAAaQ,cAAc,EAC1CC,aAAaT,aAAaU,kBAAkB,EAC7C,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,iBAAiB,IAAI,EAAE;QACxB,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,YAAY,KAAK,wCAAwC;QAC/D,MAAMC,UAAU;QAEhB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAU;YACnG;gBAAEF,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;SACvE;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;YACtE;gBAAEE,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAS;SACnG;QACD,OAAO;YACLE,OAAO;gBACLC,UAAUnB;gBACVoB,QAAQlB;gBACRmB,WAAWR;YACb;YACAS,MAAM;gBAAEH,UAAUf;gBAAcgB,QAAQd;gBAAYe,WAAWJ;YAAc;QAC/E;IACF,EAAE;AAEJ,6EAA6E,GAC7E,OAAO,MAAMM,QAAQzB,wBAAwBC,uBAAuB;AAEpE,OAAO,MAAMyB,cAAc1B,wBACzBC,oBAAoB;IAClBC,eAAeH,aAAaQ,cAAc;IAC1CH,aAAaL,aAAaM,kBAAkB;IAC5CC,cAAcP,aAAa4B,YAAY;IACvCnB,YAAYT,aAAaU,kBAAkB;AAC7C,IACA;AAEF,OAAO,MAAMmB,eAAe5B,wBAC1BC,oBAAoB;IAClBC,eAAeH,aAAa8B,YAAY;IACxCzB,aAAaL,aAAaM,kBAAkB;IAC5CC,cAAcP,aAAaI,cAAc;IACzCK,YAAYT,aAAaU,kBAAkB;AAC7C,IACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.types.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleVariantParams_unstable = {\n /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleRuntimeParams_unstable = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAAA,gEAAgE;AAehE,gEAAgE;AAChE,WAGE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';
|
|
1
|
+
export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,QAAQ,UAAU"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","createScalePresence"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,EAAEC,mBAAmB,QAAQ,UAAU"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
|
|
2
2
|
export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
|
|
3
|
-
export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
|
|
3
|
+
export { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","createFadePresence","Scale","ScaleSnappy","ScaleRelaxed"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAE/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAEC,kBAAkB,QAAQ,oBAAoB;AACtF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","createFadePresence","Scale","ScaleSnappy","ScaleRelaxed","createScalePresence"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAE/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAEC,kBAAkB,QAAQ,oBAAoB;AACtF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,EAAEC,mBAAmB,QAAQ,qBAAqB"}
|
|
@@ -82,22 +82,35 @@ const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromS
|
|
|
82
82
|
};
|
|
83
83
|
};
|
|
84
84
|
// ----- WHITESPACE -----
|
|
85
|
-
// Whitespace animation
|
|
85
|
+
// Whitespace animation includes padding and margin.
|
|
86
86
|
const whitespaceValuesForOrientation = (orientation)=>{
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
// horizontal whitespace collapse
|
|
88
|
+
if (orientation === 'horizontal') {
|
|
89
|
+
return {
|
|
90
|
+
paddingStart: 'paddingInlineStart',
|
|
91
|
+
paddingEnd: 'paddingInlineEnd',
|
|
92
|
+
marginStart: 'marginInlineStart',
|
|
93
|
+
marginEnd: 'marginInlineEnd'
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
// vertical whitespace collapse
|
|
89
97
|
return {
|
|
90
|
-
paddingStart,
|
|
91
|
-
paddingEnd
|
|
98
|
+
paddingStart: 'paddingBlockStart',
|
|
99
|
+
paddingEnd: 'paddingBlockEnd',
|
|
100
|
+
marginStart: 'marginBlockStart',
|
|
101
|
+
marginEnd: 'marginBlockEnd'
|
|
92
102
|
};
|
|
93
103
|
};
|
|
94
104
|
const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
|
|
95
|
-
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
105
|
+
const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
|
|
96
106
|
return {
|
|
107
|
+
// Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.
|
|
97
108
|
keyframes: [
|
|
98
109
|
{
|
|
99
110
|
[paddingStart]: '0',
|
|
100
111
|
[paddingEnd]: '0',
|
|
112
|
+
[marginStart]: '0',
|
|
113
|
+
[marginEnd]: '0',
|
|
101
114
|
offset: 0
|
|
102
115
|
}
|
|
103
116
|
],
|
|
@@ -106,12 +119,15 @@ const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
|
|
|
106
119
|
};
|
|
107
120
|
};
|
|
108
121
|
const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
|
|
109
|
-
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
122
|
+
const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
|
|
110
123
|
return {
|
|
124
|
+
// Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.
|
|
111
125
|
keyframes: [
|
|
112
126
|
{
|
|
113
127
|
[paddingStart]: '0',
|
|
114
128
|
[paddingEnd]: '0',
|
|
129
|
+
[marginStart]: '0',
|
|
130
|
+
[marginEnd]: '0',
|
|
115
131
|
offset: 1
|
|
116
132
|
}
|
|
117
133
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation
|
|
1
|
+
{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n // horizontal whitespace collapse\n if (orientation === 'horizontal') {\n return {\n paddingStart: 'paddingInlineStart',\n paddingEnd: 'paddingInlineEnd',\n marginStart: 'marginInlineStart',\n marginEnd: 'marginInlineEnd',\n };\n }\n // vertical whitespace collapse\n return {\n paddingStart: 'paddingBlockStart',\n paddingEnd: 'paddingBlockEnd',\n marginStart: 'marginBlockStart',\n marginEnd: 'marginBlockEnd',\n };\n};\n\n// Because a height of zero does not eliminate padding or margin,\n// we will create keyframes to animate them to zero.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n return {\n // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n return {\n // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["opacityEnterAtom","opacityExitAtom","sizeEnterAtom","sizeExitAtom","whitespaceEnterAtom","whitespaceExitAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","fromOpacity","toOpacity","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -17,67 +17,62 @@ _export(exports, {
|
|
|
17
17
|
},
|
|
18
18
|
ScaleSnappy: function() {
|
|
19
19
|
return ScaleSnappy;
|
|
20
|
+
},
|
|
21
|
+
createScalePresence: function() {
|
|
22
|
+
return createScalePresence;
|
|
20
23
|
}
|
|
21
24
|
});
|
|
22
25
|
const _reactmotion = require("@fluentui/react-motion");
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
26
|
+
const createScalePresence = ({ enterDuration = _reactmotion.motionTokens.durationGentle, enterEasing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
|
|
27
|
+
const fromOpacity = animateOpacity ? 0 : 1;
|
|
28
|
+
const toOpacity = 1;
|
|
29
|
+
const fromScale = 0.9; // Could be a custom param in the future
|
|
30
|
+
const toScale = 1;
|
|
31
|
+
const enterKeyframes = [
|
|
32
|
+
{
|
|
33
|
+
opacity: fromOpacity,
|
|
34
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
35
|
+
visibility: 'visible'
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
opacity: toOpacity,
|
|
39
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
40
|
+
}
|
|
41
|
+
];
|
|
42
|
+
const exitKeyframes = [
|
|
43
|
+
{
|
|
44
|
+
opacity: toOpacity,
|
|
45
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
opacity: fromOpacity,
|
|
49
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
50
|
+
visibility: 'hidden'
|
|
51
|
+
}
|
|
52
|
+
];
|
|
53
|
+
return {
|
|
54
|
+
enter: {
|
|
55
|
+
duration: enterDuration,
|
|
56
|
+
easing: enterEasing,
|
|
57
|
+
keyframes: enterKeyframes
|
|
58
|
+
},
|
|
59
|
+
exit: {
|
|
60
|
+
duration: exitDuration,
|
|
61
|
+
easing: exitEasing,
|
|
62
|
+
keyframes: exitKeyframes
|
|
63
|
+
}
|
|
64
|
+
};
|
|
61
65
|
};
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
enter: {
|
|
76
|
-
duration: _reactmotion.motionTokens.durationSlow,
|
|
77
|
-
easing: _reactmotion.motionTokens.curveDecelerateMax
|
|
78
|
-
},
|
|
79
|
-
exit: {
|
|
80
|
-
duration: _reactmotion.motionTokens.durationGentle,
|
|
81
|
-
easing: _reactmotion.motionTokens.curveAccelerateMax
|
|
82
|
-
}
|
|
83
|
-
});
|
|
66
|
+
const Scale = (0, _reactmotion.createPresenceComponent)(createScalePresence());
|
|
67
|
+
const ScaleSnappy = (0, _reactmotion.createPresenceComponent)(createScalePresence({
|
|
68
|
+
enterDuration: _reactmotion.motionTokens.durationNormal,
|
|
69
|
+
enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
|
|
70
|
+
exitDuration: _reactmotion.motionTokens.durationFast,
|
|
71
|
+
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
|
72
|
+
}));
|
|
73
|
+
const ScaleRelaxed = (0, _reactmotion.createPresenceComponent)(createScalePresence({
|
|
74
|
+
enterDuration: _reactmotion.motionTokens.durationSlow,
|
|
75
|
+
enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
|
|
76
|
+
exitDuration: _reactmotion.motionTokens.durationGentle,
|
|
77
|
+
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
|
78
|
+
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { PresenceMotionFnCreator } from '../../types';\nimport { ScaleRuntimeParams_unstable, ScaleVariantParams_unstable } from './Scale.types';\n\n/** Define a presence motion for scale in/out */\nexport const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable> =\n ({\n enterDuration = motionTokens.durationGentle,\n enterEasing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n } = {}) =>\n ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n return {\n enter: {\n duration: enterDuration,\n easing: enterEasing,\n keyframes: enterKeyframes,\n },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\n };\n };\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(createScalePresence());\n\nexport const ScaleSnappy = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationNormal,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationFast,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n\nexport const ScaleRelaxed = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationSlow,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","createScalePresence","enterDuration","motionTokens","durationGentle","enterEasing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","easing","keyframes","exit","createPresenceComponent","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAsCaA,KAAK;eAALA;;IAWAC,YAAY;eAAZA;;IATAC,WAAW;eAAXA;;IAnCAC,mBAAmB;eAAnBA;;;6BALyC;AAK/C,MAAMA,sBACX,CAAC,EACCC,gBAAgBC,yBAAY,CAACC,cAAc,EAC3CC,cAAcF,yBAAY,CAACG,kBAAkB,EAC7CC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC7C,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,iBAAiB,IAAI,EAAE;QACxB,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,YAAY,KAAK,wCAAwC;QAC/D,MAAMC,UAAU;QAEhB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAU;YACnG;gBAAEF,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;SACvE;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;YACtE;gBAAEE,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAS;SACnG;QACD,OAAO;YACLE,OAAO;gBACLC,UAAUpB;gBACVqB,QAAQlB;gBACRmB,WAAWR;YACb;YACAS,MAAM;gBAAEH,UAAUf;gBAAcgB,QAAQd;gBAAYe,WAAWJ;YAAc;QAC/E;IACF;AAGK,MAAMtB,QAAQ4B,IAAAA,oCAAuB,EAACzB;AAEtC,MAAMD,cAAc0B,IAAAA,oCAAuB,EAChDzB,oBAAoB;IAClBC,eAAeC,yBAAY,CAACK,cAAc;IAC1CH,aAAaF,yBAAY,CAACG,kBAAkB;IAC5CC,cAAcJ,yBAAY,CAACwB,YAAY;IACvClB,YAAYN,yBAAY,CAACO,kBAAkB;AAC7C;AAGK,MAAMX,eAAe2B,IAAAA,oCAAuB,EACjDzB,oBAAoB;IAClBC,eAAeC,yBAAY,CAACyB,YAAY;IACxCvB,aAAaF,yBAAY,CAACG,kBAAkB;IAC5CC,cAAcJ,yBAAY,CAACC,cAAc;IACzCK,YAAYN,yBAAY,CAACO,kBAAkB;AAC7C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.types.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleVariantParams_unstable = {\n /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleRuntimeParams_unstable = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,gEAAgE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","createScalePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;IAAEC,mBAAmB;eAAnBA,0BAAmB;;;uBAAQ"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence","createFadePresence"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence","createFadePresence","createScalePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,eAAe;eAAfA,yBAAe;;IADfC,cAAc;eAAdA,wBAAc;;IAOPC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAJzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;IAIgBC,kBAAkB;eAAlBA,wBAAkB;;IACfC,mBAAmB;eAAnBA,0BAAmB;;;0BAHvD;sBAE2D;uBACI"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion-components-preview",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "A preview package for Fluent UI motion components, providing a collection of components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|