@fluentui/react-switch 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.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.json +310 -30
- package/CHANGELOG.md +83 -17
- package/Spec.md +4 -4
- package/dist/react-switch.d.ts +14 -17
- package/lib/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.js +7 -7
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.d.ts +10 -9
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/index.js.map +1 -1
- package/lib/components/Switch/renderSwitch.d.ts +1 -1
- package/lib/components/Switch/renderSwitch.js +12 -8
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.d.ts +2 -6
- package/lib/components/Switch/useSwitch.js +21 -25
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchState.js +48 -56
- package/lib/components/Switch/useSwitchState.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.d.ts +2 -1
- package/lib/components/Switch/useSwitchStyles.js +69 -63
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Switch.js +1 -1
- package/lib-commonjs/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.js +8 -8
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- package/lib-commonjs/components/Switch/Switch.types.d.ts +10 -9
- package/lib-commonjs/components/Switch/Switch.types.js.map +1 -1
- package/lib-commonjs/components/Switch/index.js +1 -1
- package/lib-commonjs/components/Switch/index.js.map +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.d.ts +1 -1
- package/lib-commonjs/components/Switch/renderSwitch.js +16 -14
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.d.ts +2 -6
- package/lib-commonjs/components/Switch/useSwitch.js +26 -31
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchState.js +51 -59
- package/lib-commonjs/components/Switch/useSwitchState.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +2 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +78 -71
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -15
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -3,43 +3,38 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.useSwitch_unstable = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
9
|
|
10
|
-
|
11
|
-
|
12
|
-
var useSwitchState_1 = /*#__PURE__*/require("./useSwitchState");
|
13
|
-
/**
|
14
|
-
* Array of all shorthand properties listed in SwitchSlots
|
15
|
-
*/
|
16
|
-
|
17
|
-
|
18
|
-
exports.switchShorthandProps = ['root', 'track', 'thumbWrapper', 'thumb', 'activeRail', 'input'];
|
10
|
+
const useSwitchState_1 = /*#__PURE__*/require("./useSwitchState");
|
19
11
|
/**
|
20
12
|
* Given user props, returns state and render function for a Switch.
|
21
13
|
*/
|
22
14
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
15
|
+
|
16
|
+
const useSwitch_unstable = (props, ref) => {
|
17
|
+
const {
|
18
|
+
track,
|
19
|
+
thumbWrapper,
|
20
|
+
thumb,
|
21
|
+
activeRail,
|
22
|
+
input,
|
23
|
+
defaultChecked,
|
24
|
+
checked,
|
25
|
+
disabled,
|
26
|
+
onChange
|
27
|
+
} = props;
|
28
|
+
const state = {
|
29
|
+
defaultChecked,
|
30
|
+
checked,
|
31
|
+
disabled,
|
32
|
+
onChange,
|
33
|
+
root: react_utilities_1.getNativeElementProps('span', {
|
34
|
+
ref,
|
35
|
+
...props,
|
41
36
|
id: react_utilities_1.useId('switch-', props.id)
|
42
|
-
})
|
37
|
+
}),
|
43
38
|
components: {
|
44
39
|
root: 'div',
|
45
40
|
track: 'div',
|
@@ -71,5 +66,5 @@ var useSwitch = function (props, ref) {
|
|
71
66
|
return state;
|
72
67
|
};
|
73
68
|
|
74
|
-
exports.
|
69
|
+
exports.useSwitch_unstable = useSwitch_unstable;
|
75
70
|
//# sourceMappingURL=useSwitch.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitch.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;AACjG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA,YAAT;AAAuB,IAAA,KAAvB;AAA8B,IAAA,UAA9B;AAA0C,IAAA,KAA1C;AAAiD,IAAA,cAAjD;AAAiE,IAAA,OAAjE;AAA0E,IAAA,QAA1E;AAAoF,IAAA;AAApF,MAAiG,KAAvG;AACA,QAAM,KAAK,GAAgB;AACzB,IAAA,cADyB;AAEzB,IAAA,OAFyB;AAGzB,IAAA,QAHyB;AAIzB,IAAA,QAJyB;AAKzB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,MAAtB,EAA8B;AAClC,MAAA,GADkC;AAElC,SAAG,KAF+B;AAGlC,MAAA,EAAE,EAAE,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,KAAK,CAAC,EAAvB;AAH8B,KAA9B,CALmB;AAUzB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,KAAK,EAAE,KAFG;AAGV,MAAA,YAAY,EAAE,KAHJ;AAIV,MAAA,KAAK,EAAE,KAJG;AAKV,MAAA,UAAU,EAAE,KALF;AAMV,MAAA,KAAK,EAAE;AANG,KAVa;AAkBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAxB,CAlBkB;AAmBzB,IAAA,YAAY,EAAE,iBAAA,CAAA,gBAAA,CAAiB,YAAjB,EAA+B;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAA/B,CAnBW;AAoBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAxB,CApBkB;AAqBzB,IAAA,UAAU,EAAE,iBAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA6B;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAA7B,CArBa;AAsBzB,IAAA,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;AAC7B,MAAA,QAAQ,EAAE,IADmB;AAE7B,MAAA,YAAY,EAAE;AACZ,QAAA,IAAI,EAAE;AADM;AAFe,KAAxB;AAtBkB,GAA3B;AA8BA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AAEA,SAAO,KAAP;AACD,CAnCM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { useSwitchState } from './useSwitchState';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Given user props, returns state and render function for a Switch.\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLElement>): SwitchState => {\n const { track, thumbWrapper, thumb, activeRail, input, defaultChecked, checked, disabled, onChange } = props;\n const state: SwitchState = {\n defaultChecked,\n checked,\n disabled,\n onChange,\n root: getNativeElementProps('span', {\n ref,\n ...props,\n id: useId('switch-', props.id),\n }),\n components: {\n root: 'div',\n track: 'div',\n thumbWrapper: 'div',\n thumb: 'div',\n activeRail: 'div',\n input: 'input',\n },\n track: resolveShorthand(track, { required: true }),\n thumbWrapper: resolveShorthand(thumbWrapper, { required: true }),\n thumb: resolveShorthand(thumb, { required: true }),\n activeRail: resolveShorthand(activeRail, { required: true }),\n input: resolveShorthand(input, {\n required: true,\n defaultProps: {\n type: 'checkbox',\n },\n }),\n };\n\n useSwitchState(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -5,59 +5,51 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.useSwitchState = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
11
|
|
12
|
-
|
12
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts"); // TODO: This should be replaced with a useEvent hook
|
13
13
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
14
14
|
|
15
15
|
|
16
|
-
|
16
|
+
const on = (element, eventName, callback) => {
|
17
17
|
element.addEventListener(eventName, callback);
|
18
|
-
return
|
19
|
-
return element.removeEventListener(eventName, callback);
|
20
|
-
};
|
18
|
+
return () => element.removeEventListener(eventName, callback);
|
21
19
|
};
|
22
20
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
21
|
+
const useSwitchState = state => {
|
22
|
+
const {
|
23
|
+
defaultChecked = false,
|
24
|
+
checked,
|
25
|
+
disabled = false,
|
26
|
+
onChange
|
27
|
+
} = state;
|
28
|
+
const {
|
29
|
+
onPointerDown: onPointerDownCallback,
|
30
|
+
onKeyUp: onKeyUpCallback
|
31
|
+
} = state.root;
|
32
|
+
const {
|
33
|
+
dir
|
34
|
+
} = react_shared_contexts_1.useFluent();
|
35
|
+
const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
|
36
|
+
const railRef = React.useRef(null);
|
37
|
+
const internalState = React.useRef({
|
37
38
|
internalValue: checked ? checked : defaultChecked,
|
38
39
|
thumbIsDragging: false,
|
39
40
|
disposables: []
|
40
41
|
});
|
41
|
-
|
42
|
-
var _d = react_utilities_1.useControllableState({
|
42
|
+
const [currentValue, setCurrentValue] = react_utilities_1.useControllableState({
|
43
43
|
defaultState: defaultChecked,
|
44
44
|
state: checked,
|
45
45
|
initialState: false
|
46
|
-
})
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
showThumbAnimation = _f.setTrue,
|
54
|
-
hideThumbAnimation = _f.setFalse;
|
55
|
-
|
56
|
-
var _g = React.useState(currentValue === true ? 100 : 0),
|
57
|
-
renderedPosition = _g[0],
|
58
|
-
setRenderedPosition = _g[1];
|
59
|
-
|
60
|
-
var setChecked = react_utilities_1.useEventCallback(function (ev, incomingValue) {
|
46
|
+
});
|
47
|
+
const [thumbAnimation, {
|
48
|
+
setTrue: showThumbAnimation,
|
49
|
+
setFalse: hideThumbAnimation
|
50
|
+
}] = react_utilities_1.useBoolean(true);
|
51
|
+
const [renderedPosition, setRenderedPosition] = React.useState(undefined);
|
52
|
+
const setChecked = react_utilities_1.useEventCallback((ev, incomingValue) => {
|
61
53
|
ev.stopPropagation();
|
62
54
|
ev.preventDefault();
|
63
55
|
internalState.current.internalValue = incomingValue;
|
@@ -67,17 +59,17 @@ var useSwitchState = function (state) {
|
|
67
59
|
setCurrentValue(incomingValue);
|
68
60
|
setRenderedPosition(undefined);
|
69
61
|
});
|
70
|
-
|
62
|
+
const calculatePosition = React.useCallback(ev => {
|
71
63
|
var _a;
|
72
64
|
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
65
|
+
const currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
66
|
+
const railWidth = currentBounds.width;
|
67
|
+
const railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
|
68
|
+
const distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
|
77
69
|
return react_utilities_1.clamp(distance / railWidth * 100, 0, 100);
|
78
70
|
}, [dir]);
|
79
|
-
|
80
|
-
|
71
|
+
const onPointerMove = React.useCallback(ev => {
|
72
|
+
const incomingPosition = calculatePosition(ev);
|
81
73
|
internalState.current.thumbIsDragging = true;
|
82
74
|
hideThumbAnimation();
|
83
75
|
setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
|
@@ -88,15 +80,13 @@ var useSwitchState = function (state) {
|
|
88
80
|
setChecked(ev, false);
|
89
81
|
}
|
90
82
|
}, [calculatePosition, hideThumbAnimation, setChecked]);
|
91
|
-
|
92
|
-
internalState.current.disposables.forEach(
|
93
|
-
return dispose();
|
94
|
-
});
|
83
|
+
const onPointerUp = React.useCallback(ev => {
|
84
|
+
internalState.current.disposables.forEach(dispose => dispose());
|
95
85
|
internalState.current.disposables = [];
|
96
86
|
inputRef.current.focus();
|
97
87
|
|
98
88
|
if (internalState.current.thumbIsDragging) {
|
99
|
-
|
89
|
+
const roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
|
100
90
|
showThumbAnimation();
|
101
91
|
|
102
92
|
if (roundedPosition === 100) {
|
@@ -108,35 +98,37 @@ var useSwitchState = function (state) {
|
|
108
98
|
setChecked(ev, !internalState.current.internalValue);
|
109
99
|
}
|
110
100
|
}, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
|
111
|
-
|
101
|
+
const onPointerDown = React.useCallback(ev => {
|
112
102
|
var _a;
|
113
103
|
|
114
|
-
|
115
|
-
|
104
|
+
const {
|
105
|
+
pointerId
|
106
|
+
} = ev;
|
107
|
+
const target = ev.target;
|
116
108
|
onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
|
117
109
|
showThumbAnimation();
|
118
110
|
(_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
119
111
|
internalState.current.thumbIsDragging = false;
|
120
|
-
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp),
|
112
|
+
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), () => {
|
121
113
|
var _a;
|
122
114
|
|
123
115
|
(_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
124
116
|
});
|
125
117
|
}, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
|
126
|
-
|
118
|
+
const onKeyUp = React.useCallback(ev => {
|
127
119
|
onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
|
128
120
|
|
129
121
|
if (ev.key === ' ') {
|
130
122
|
setChecked(ev, !internalState.current.internalValue);
|
131
123
|
}
|
132
124
|
}, [onKeyUpCallback, setChecked]);
|
133
|
-
|
134
|
-
|
125
|
+
const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
|
126
|
+
const rootStyles = {
|
135
127
|
'--switch-checked-opacity': currentPosition / 100,
|
136
128
|
'--switch-unchecked-opacity': (100 - currentPosition) / 100
|
137
129
|
};
|
138
|
-
|
139
|
-
transform:
|
130
|
+
const thumbWrapperStyles = {
|
131
|
+
transform: `translate(${dir === 'rtl' ? -currentPosition : currentPosition}%)`,
|
140
132
|
transition: thumbAnimation ? 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1)' : 'none'
|
141
133
|
}; // Root Props
|
142
134
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { clamp, useBoolean, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { SwitchState } from './Switch.types';\n\ntype SwitchInternalState = {\n /**\n * The internal rendered value of the Switch.\n */\n internalValue: boolean;\n\n /**\n * Whether the thumb is currently being dragged.\n */\n thumbIsDragging: boolean;\n\n /**\n * Disposable events for the Switch.\n */\n disposables: (() => void)[];\n};\n\n// TODO: This should be replaced with a useEvent hook\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst on = (element: Element, eventName: string, callback: (ev: any) => void) => {\n element.addEventListener(eventName, callback);\n return () => element.removeEventListener(eventName, callback);\n};\n\nexport const useSwitchState = (state: SwitchState) => {\n const { defaultChecked = false, checked, disabled = false, onChange } = state;\n const { onPointerDown: onPointerDownCallback, onKeyUp: onKeyUpCallback } = state.root;\n\n const { dir } = useFluent();\n const inputRef = useMergedRefs(state.input.ref);\n const railRef = React.useRef<HTMLDivElement>(null);\n const internalState = React.useRef<SwitchInternalState>({\n internalValue: checked ? checked : defaultChecked,\n thumbIsDragging: false,\n disposables: [],\n });\n\n const [currentValue, setCurrentValue] = useControllableState({\n defaultState: defaultChecked,\n state: checked,\n initialState: false,\n });\n const [thumbAnimation, { setTrue: showThumbAnimation, setFalse: hideThumbAnimation }] = useBoolean(true);\n const [renderedPosition, setRenderedPosition] = React.useState<number | undefined>(undefined);\n\n const setChecked = useEventCallback(\n (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, incomingValue: boolean) => {\n ev.stopPropagation();\n ev.preventDefault();\n internalState.current.internalValue = incomingValue;\n onChange?.(ev, { checked: incomingValue });\n setCurrentValue(incomingValue);\n setRenderedPosition(undefined);\n },\n );\n\n const calculatePosition = React.useCallback(\n (ev: React.PointerEvent<HTMLDivElement>): number => {\n const currentBounds = railRef?.current?.getBoundingClientRect();\n const railWidth = currentBounds!.width;\n const railPosition = dir === 'rtl' ? currentBounds!.right : currentBounds!.left;\n const distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;\n return clamp((distance / railWidth) * 100, 0, 100);\n },\n [dir],\n );\n\n const onPointerMove = React.useCallback(\n (ev: React.PointerEvent<HTMLDivElement>): void => {\n const incomingPosition = calculatePosition(ev);\n\n internalState.current.thumbIsDragging = true;\n hideThumbAnimation();\n setRenderedPosition(incomingPosition);\n\n // If the Switch reaches a new position of 0% or 100%, update the state and fire change.\n if (incomingPosition === 100 && internalState.current.internalValue !== true) {\n setChecked(ev, true);\n } else if (incomingPosition === 0 && internalState.current.internalValue !== false) {\n setChecked(ev, false);\n }\n },\n [calculatePosition, hideThumbAnimation, setChecked],\n );\n\n const onPointerUp = React.useCallback(\n (ev: React.PointerEvent<HTMLDivElement>): void => {\n internalState.current.disposables.forEach(dispose => dispose());\n internalState.current.disposables = [];\n inputRef.current!.focus();\n\n if (internalState.current.thumbIsDragging) {\n const roundedPosition = Math.round(calculatePosition(ev)! / 100) * 100;\n\n showThumbAnimation();\n if (roundedPosition === 100) {\n setChecked(ev, true);\n } else if (roundedPosition === 0) {\n setChecked(ev, false);\n }\n } else {\n setChecked(ev, !internalState.current.internalValue);\n }\n },\n [calculatePosition, inputRef, setChecked, showThumbAnimation],\n );\n\n const onPointerDown = React.useCallback(\n (ev: React.PointerEvent<HTMLDivElement>): void => {\n const { pointerId } = ev;\n const target = ev.target as HTMLElement;\n\n onPointerDownCallback?.(ev);\n showThumbAnimation();\n target.setPointerCapture?.(pointerId);\n internalState.current.thumbIsDragging = false;\n\n internalState.current.disposables.push(\n on(target, 'pointermove', onPointerMove),\n on(target, 'pointerup', onPointerUp),\n () => {\n target.releasePointerCapture?.(pointerId);\n },\n );\n },\n [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation],\n );\n\n const onKeyUp = React.useCallback(\n (ev: React.KeyboardEvent<HTMLDivElement>): void => {\n onKeyUpCallback?.(ev);\n if (ev.key === ' ') {\n setChecked(ev, !internalState.current.internalValue);\n }\n },\n [onKeyUpCallback, setChecked],\n );\n\n const currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;\n\n const rootStyles = {\n '--switch-checked-opacity': currentPosition / 100,\n '--switch-unchecked-opacity': (100 - currentPosition) / 100,\n } as React.CSSProperties;\n\n const thumbWrapperStyles = {\n transform: `translate(${dir === 'rtl' ? -currentPosition : currentPosition}%)`,\n transition: thumbAnimation\n ? 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1)'\n : 'none',\n };\n\n // Root Props\n state.root.style = rootStyles;\n if (!disabled) {\n state.root.onPointerDown = onPointerDown;\n state.root.onKeyUp = onKeyUp;\n }\n\n // Input Props\n state.input.checked = currentValue;\n state.input.disabled = disabled;\n state.input.ref = inputRef;\n state.input.readOnly = true;\n state.input.role = 'switch';\n\n // Thumb Container Props\n state.thumbWrapper.style = thumbWrapperStyles;\n\n // Active Rail Props\n state.activeRail.ref = railRef;\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import type { SwitchState } from './Switch.types';
|
2
|
+
export declare const switchClassName = "fui-Switch";
|
2
3
|
/**
|
3
4
|
* Apply styling to the Switch slots based on the state
|
4
5
|
*/
|
5
|
-
export declare const
|
6
|
+
export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
|