@fluentui/react-switch 0.0.0-nightly0e0cf06c3420211029.1 → 0.0.0-nightly3082edf34720220208.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +184 -24
- package/CHANGELOG.md +48 -15
- package/Spec.md +4 -4
- package/dist/react-switch.d.ts +13 -16
- 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 +8 -8
- 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-commonjs/Switch.js +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 +8 -8
- package/lib-commonjs/components/Switch/index.js +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/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
package/lib-commonjs/Switch.js
CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
|
7
|
-
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
8
|
|
9
9
|
tslib_1.__exportStar(require("./components/Switch/index"), exports);
|
10
10
|
//# sourceMappingURL=Switch.js.map
|
@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.Switch = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
10
|
+
const useSwitch_1 = /*#__PURE__*/require("./useSwitch");
|
11
11
|
|
12
|
-
|
12
|
+
const renderSwitch_1 = /*#__PURE__*/require("./renderSwitch");
|
13
13
|
|
14
|
-
|
14
|
+
const useSwitchStyles_1 = /*#__PURE__*/require("./useSwitchStyles");
|
15
15
|
/**
|
16
16
|
* The Switch control enables users to trigger an option on or off through pressing on the component.
|
17
17
|
*/
|
18
18
|
|
19
19
|
|
20
|
-
exports.Switch = /*#__PURE__*/React.forwardRef(
|
21
|
-
|
22
|
-
useSwitchStyles_1.
|
23
|
-
return renderSwitch_1.
|
20
|
+
exports.Switch = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
+
const state = useSwitch_1.useSwitch_unstable(props, ref);
|
22
|
+
useSwitchStyles_1.useSwitchStyles_unstable(state);
|
23
|
+
return renderSwitch_1.renderSwitch_unstable(state);
|
24
24
|
});
|
25
25
|
exports.Switch.displayName = 'Switch';
|
26
26
|
//# sourceMappingURL=Switch.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
|
@@ -1,30 +1,30 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import type { ComponentProps, ComponentState,
|
2
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
3
3
|
export declare type SwitchSlots = {
|
4
4
|
/**
|
5
5
|
* The root of the Switch.
|
6
6
|
*/
|
7
|
-
root:
|
7
|
+
root: Slot<'div'>;
|
8
8
|
/**
|
9
9
|
* The bar indicating the status of the Switch.
|
10
10
|
*/
|
11
|
-
track:
|
11
|
+
track: NonNullable<Slot<'div'>>;
|
12
12
|
/**
|
13
13
|
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
14
14
|
*/
|
15
|
-
thumbWrapper:
|
15
|
+
thumbWrapper: NonNullable<Slot<'div'>>;
|
16
16
|
/**
|
17
17
|
* The circular icon indicating the status of the Switch.
|
18
18
|
*/
|
19
|
-
thumb:
|
19
|
+
thumb: NonNullable<Slot<'div'>>;
|
20
20
|
/**
|
21
21
|
* The hidden input that handles the Switch's internal functionality.
|
22
22
|
*/
|
23
|
-
input:
|
23
|
+
input: NonNullable<Slot<'input'>>;
|
24
24
|
/**
|
25
25
|
* The area in which the Switch's rail allows for the thumb to be dragged.
|
26
26
|
*/
|
27
|
-
activeRail:
|
27
|
+
activeRail: NonNullable<Slot<'div'>>;
|
28
28
|
};
|
29
29
|
export interface SwitchCommons {
|
30
30
|
/**
|
@@ -52,7 +52,7 @@ export interface SwitchCommons {
|
|
52
52
|
checked: boolean;
|
53
53
|
}) => void;
|
54
54
|
}
|
55
|
-
export interface SwitchProps extends Omit<ComponentProps<SwitchSlots
|
55
|
+
export interface SwitchProps extends Omit<ComponentProps<Partial<SwitchSlots>>, 'onChange'>, SwitchCommons {
|
56
56
|
}
|
57
57
|
export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
58
58
|
}
|
@@ -3,27 +3,29 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.renderSwitch_unstable = void 0;
|
7
7
|
|
8
|
-
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
9
|
|
10
|
-
|
11
|
-
|
12
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
13
|
-
|
14
|
-
var useSwitch_1 = /*#__PURE__*/require("./useSwitch");
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
15
11
|
/**
|
16
12
|
* Render the final JSX of Switch
|
17
13
|
*/
|
18
14
|
|
19
15
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
return React.createElement(slots.root,
|
16
|
+
const renderSwitch_unstable = state => {
|
17
|
+
const {
|
18
|
+
slots,
|
19
|
+
slotProps
|
20
|
+
} = react_utilities_1.getSlots(state);
|
21
|
+
return React.createElement(slots.root, { ...slotProps.root
|
22
|
+
}, React.createElement(slots.track, { ...slotProps.track
|
23
|
+
}), React.createElement(slots.thumbWrapper, { ...slotProps.thumbWrapper
|
24
|
+
}, React.createElement(slots.thumb, { ...slotProps.thumb
|
25
|
+
})), React.createElement(slots.input, { ...slotProps.input
|
26
|
+
}), React.createElement(slots.activeRail, { ...slotProps.activeRail
|
27
|
+
}));
|
26
28
|
};
|
27
29
|
|
28
|
-
exports.
|
30
|
+
exports.renderSwitch_unstable = renderSwitch_unstable;
|
29
31
|
//# sourceMappingURL=renderSwitch.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/renderSwitch.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/components/Switch/renderSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,YAAP,EAAmB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAnB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,CAFF,EAKE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CALF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,UAAP,EAAiB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAjB,CANF,CADF;AAUD,CAbM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourceRoot":""}
|
@@ -1,10 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import type { SwitchProps,
|
3
|
-
/**
|
4
|
-
* Array of all shorthand properties listed in SwitchSlots
|
5
|
-
*/
|
6
|
-
export declare const switchShorthandProps: (keyof SwitchSlots)[];
|
2
|
+
import type { SwitchProps, SwitchState } from './Switch.types';
|
7
3
|
/**
|
8
4
|
* Given user props, returns state and render function for a Switch.
|
9
5
|
*/
|
10
|
-
export declare const
|
6
|
+
export declare const useSwitch_unstable: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
|
@@ -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":["../../../src/components/Switch/useSwitch.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"sources":["../../../src/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","sourceRoot":""}
|
@@ -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(currentValue === true ? 100 : 0);
|
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":";;;;;;;AAAA,
|
1
|
+
{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
@@ -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;
|