@fluentui/react-switch 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10
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 +658 -29
- package/CHANGELOG.md +209 -43
- package/MIGRATION.md +89 -22
- package/Spec.md +179 -84
- package/dist/index.d.ts +107 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.js +8 -8
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Switch/Switch.types.js.map +1 -1
- package/lib/components/Switch/index.js.map +1 -1
- package/lib/components/Switch/renderSwitch.js +15 -9
- package/lib/components/Switch/renderSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitch.js +70 -54
- package/lib/components/Switch/useSwitch.js.map +1 -1
- package/lib/components/Switch/useSwitchStyles.js +156 -248
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib/index.js +2 -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 +9 -9
- package/lib-commonjs/components/Switch/Switch.js.map +1 -1
- 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.js +19 -15
- package/lib-commonjs/components/Switch/renderSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitch.js +73 -56
- package/lib-commonjs/components/Switch/useSwitch.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +161 -252
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/index.js +39 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +21 -27
- package/dist/react-switch.d.ts +0 -92
- package/lib/Switch.d.ts +0 -1
- 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/components/Switch/Switch.d.ts +0 -6
- package/lib/components/Switch/Switch.types.d.ts +0 -58
- package/lib/components/Switch/index.d.ts +0 -5
- package/lib/components/Switch/renderSwitch.d.ts +0 -5
- package/lib/components/Switch/useSwitch.d.ts +0 -10
- package/lib/components/Switch/useSwitchState.d.ts +0 -2
- package/lib/components/Switch/useSwitchState.js +0 -152
- package/lib/components/Switch/useSwitchState.js.map +0 -1
- package/lib/components/Switch/useSwitchStyles.d.ts +0 -5
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/Switch.d.ts +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/components/Switch/Switch.d.ts +0 -6
- package/lib-commonjs/components/Switch/Switch.types.d.ts +0 -58
- package/lib-commonjs/components/Switch/index.d.ts +0 -5
- package/lib-commonjs/components/Switch/renderSwitch.d.ts +0 -5
- package/lib-commonjs/components/Switch/useSwitch.d.ts +0 -10
- package/lib-commonjs/components/Switch/useSwitchState.d.ts +0 -2
- package/lib-commonjs/components/Switch/useSwitchState.js +0 -164
- package/lib-commonjs/components/Switch/useSwitchState.js.map +0 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.d.ts +0 -5
- package/lib-commonjs/index.d.ts +0 -2
package/package.json
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-switch",
|
3
|
-
"version": "9.0.0-
|
3
|
+
"version": "9.0.0-rc.10",
|
4
4
|
"description": "Fluent UI React Switch component.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
7
|
-
"typings": "
|
7
|
+
"typings": "dist/index.d.ts",
|
8
8
|
"sideEffects": false,
|
9
9
|
"repository": {
|
10
10
|
"type": "git",
|
@@ -19,37 +19,25 @@
|
|
19
19
|
"just": "just-scripts",
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"start": "yarn storybook",
|
22
|
-
"test": "jest",
|
22
|
+
"test": "jest --passWithNoTests",
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
|
-
"build:local": "tsc -p . --module esnext --emitDeclarationOnly && node
|
25
|
-
"storybook": "
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-switch/src && yarn docs",
|
25
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
26
|
+
"type-check": "tsc -b tsconfig.json"
|
26
27
|
},
|
27
28
|
"devDependencies": {
|
28
|
-
"@fluentui/babel-make-styles": "9.0.0-nightly.d730088d7f.0",
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
30
|
-
"@fluentui/jest-serializer-make-styles": "9.0.0-nightly.d730088d7f.0",
|
31
30
|
"@fluentui/react-conformance": "*",
|
32
|
-
"@fluentui/react-conformance-
|
33
|
-
"@fluentui/
|
34
|
-
"@fluentui/react-provider": "9.0.0-nightly.d730088d7f.0",
|
35
|
-
"@fluentui/react-theme": "9.0.0-nightly.d730088d7f.0",
|
36
|
-
"@fluentui/scripts": "^1.0.0",
|
37
|
-
"@types/enzyme": "3.10.3",
|
38
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
39
|
-
"@types/react": "16.9.42",
|
40
|
-
"@types/react-dom": "16.9.10",
|
41
|
-
"@types/react-test-renderer": "^16.0.0",
|
42
|
-
"enzyme": "~3.10.0",
|
43
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
44
|
-
"react": "16.8.6",
|
45
|
-
"react-dom": "16.8.6",
|
46
|
-
"react-test-renderer": "^16.3.0"
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.6",
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
47
33
|
},
|
48
34
|
"dependencies": {
|
49
|
-
"@fluentui/react-
|
50
|
-
"@fluentui/react-
|
51
|
-
"@fluentui/react-tabster": "9.0.0-
|
52
|
-
"@fluentui/react-
|
35
|
+
"@fluentui/react-icons": "^2.0.166-rc.3",
|
36
|
+
"@fluentui/react-label": "9.0.0-rc.2",
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.10",
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.8",
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.9",
|
40
|
+
"@griffel/react": "1.0.5",
|
53
41
|
"tslib": "^2.1.0"
|
54
42
|
},
|
55
43
|
"peerDependencies": {
|
@@ -59,11 +47,17 @@
|
|
59
47
|
"react-dom": ">=16.8.0 <18.0.0"
|
60
48
|
},
|
61
49
|
"beachball": {
|
62
|
-
"tag": "beta",
|
63
50
|
"disallowedChangeTypes": [
|
64
51
|
"major",
|
65
52
|
"minor",
|
66
53
|
"patch"
|
67
54
|
]
|
55
|
+
},
|
56
|
+
"exports": {
|
57
|
+
".": {
|
58
|
+
"types": "./lib/index.d.ts",
|
59
|
+
"import": "./lib/index.js",
|
60
|
+
"require": "./lib-commonjs/index.js"
|
61
|
+
}
|
68
62
|
}
|
69
63
|
}
|
package/dist/react-switch.d.ts
DELETED
@@ -1,92 +0,0 @@
|
|
1
|
-
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
-
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
-
import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
5
|
-
import * as React_2 from 'react';
|
6
|
-
|
7
|
-
/**
|
8
|
-
* Render the final JSX of Switch
|
9
|
-
*/
|
10
|
-
export declare const renderSwitch: (state: SwitchState) => JSX.Element;
|
11
|
-
|
12
|
-
/**
|
13
|
-
* The Switch control enables users to trigger an option on or off through pressing on the component.
|
14
|
-
*/
|
15
|
-
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
16
|
-
|
17
|
-
export declare interface SwitchCommons {
|
18
|
-
/**
|
19
|
-
* The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
|
20
|
-
* Mutually exclusive with `checked` prop.
|
21
|
-
*
|
22
|
-
* @default false
|
23
|
-
*/
|
24
|
-
defaultChecked?: boolean;
|
25
|
-
/**
|
26
|
-
* The current value for a controlled Switch. If `true` then the Switch will be enabled.
|
27
|
-
* Mutually exclusive with `defaultChecked` prop.
|
28
|
-
*/
|
29
|
-
checked?: boolean;
|
30
|
-
/**
|
31
|
-
* Whether the Switch should be disabled.
|
32
|
-
*
|
33
|
-
* @default false
|
34
|
-
*/
|
35
|
-
disabled?: boolean;
|
36
|
-
/**
|
37
|
-
* Callback to be called when the `checked` value changes.
|
38
|
-
*/
|
39
|
-
onChange?: (ev: React_2.PointerEvent<HTMLDivElement> | React_2.KeyboardEvent<HTMLDivElement>, data: {
|
40
|
-
checked: boolean;
|
41
|
-
}) => void;
|
42
|
-
}
|
43
|
-
|
44
|
-
export declare interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
|
45
|
-
}
|
46
|
-
|
47
|
-
/**
|
48
|
-
* Array of all shorthand properties listed in SwitchSlots
|
49
|
-
*/
|
50
|
-
export declare const switchShorthandProps: (keyof SwitchSlots)[];
|
51
|
-
|
52
|
-
export declare type SwitchSlots = {
|
53
|
-
/**
|
54
|
-
* The root of the Switch.
|
55
|
-
*/
|
56
|
-
root: IntrinsicShorthandProps<'div'>;
|
57
|
-
/**
|
58
|
-
* The bar indicating the status of the Switch.
|
59
|
-
*/
|
60
|
-
track: IntrinsicShorthandProps<'div'>;
|
61
|
-
/**
|
62
|
-
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
63
|
-
*/
|
64
|
-
thumbWrapper: IntrinsicShorthandProps<'div'>;
|
65
|
-
/**
|
66
|
-
* The circular icon indicating the status of the Switch.
|
67
|
-
*/
|
68
|
-
thumb: IntrinsicShorthandProps<'div'>;
|
69
|
-
/**
|
70
|
-
* The hidden input that handles the Switch's internal functionality.
|
71
|
-
*/
|
72
|
-
input: IntrinsicShorthandProps<'input'>;
|
73
|
-
/**
|
74
|
-
* The area in which the Switch's rail allows for the thumb to be dragged.
|
75
|
-
*/
|
76
|
-
activeRail: IntrinsicShorthandProps<'div'>;
|
77
|
-
};
|
78
|
-
|
79
|
-
export declare interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
80
|
-
}
|
81
|
-
|
82
|
-
/**
|
83
|
-
* Given user props, returns state and render function for a Switch.
|
84
|
-
*/
|
85
|
-
export declare const useSwitch: (props: SwitchProps, ref: React_2.Ref<HTMLElement>) => SwitchState;
|
86
|
-
|
87
|
-
/**
|
88
|
-
* Apply styling to the Switch slots based on the state
|
89
|
-
*/
|
90
|
-
export declare const useSwitchStyles: (state: SwitchState) => SwitchState;
|
91
|
-
|
92
|
-
export { }
|
package/lib/Switch.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Switch/index';
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
|
2
|
-
import makeStylesTests from '@fluentui/react-conformance-make-styles';
|
3
|
-
export function isConformant(testInfo) {
|
4
|
-
var defaultOptions = {
|
5
|
-
asPropHandlesRef: true,
|
6
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
7
|
-
extraTests: makeStylesTests,
|
8
|
-
skipAsPropTests: true
|
9
|
-
};
|
10
|
-
baseIsConformant(defaultOptions, testInfo);
|
11
|
-
}
|
12
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,eAH+C;AAI3D,IAAA,eAAe,EAAE;AAJ0C,GAA7D;AAOA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { SwitchProps } from './Switch.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* The Switch control enables users to trigger an option on or off through pressing on the component.
|
5
|
-
*/
|
6
|
-
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
@@ -1,58 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
3
|
-
export declare type SwitchSlots = {
|
4
|
-
/**
|
5
|
-
* The root of the Switch.
|
6
|
-
*/
|
7
|
-
root: IntrinsicShorthandProps<'div'>;
|
8
|
-
/**
|
9
|
-
* The bar indicating the status of the Switch.
|
10
|
-
*/
|
11
|
-
track: IntrinsicShorthandProps<'div'>;
|
12
|
-
/**
|
13
|
-
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
14
|
-
*/
|
15
|
-
thumbWrapper: IntrinsicShorthandProps<'div'>;
|
16
|
-
/**
|
17
|
-
* The circular icon indicating the status of the Switch.
|
18
|
-
*/
|
19
|
-
thumb: IntrinsicShorthandProps<'div'>;
|
20
|
-
/**
|
21
|
-
* The hidden input that handles the Switch's internal functionality.
|
22
|
-
*/
|
23
|
-
input: IntrinsicShorthandProps<'input'>;
|
24
|
-
/**
|
25
|
-
* The area in which the Switch's rail allows for the thumb to be dragged.
|
26
|
-
*/
|
27
|
-
activeRail: IntrinsicShorthandProps<'div'>;
|
28
|
-
};
|
29
|
-
export interface SwitchCommons {
|
30
|
-
/**
|
31
|
-
* The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
|
32
|
-
* Mutually exclusive with `checked` prop.
|
33
|
-
*
|
34
|
-
* @default false
|
35
|
-
*/
|
36
|
-
defaultChecked?: boolean;
|
37
|
-
/**
|
38
|
-
* The current value for a controlled Switch. If `true` then the Switch will be enabled.
|
39
|
-
* Mutually exclusive with `defaultChecked` prop.
|
40
|
-
*/
|
41
|
-
checked?: boolean;
|
42
|
-
/**
|
43
|
-
* Whether the Switch should be disabled.
|
44
|
-
*
|
45
|
-
* @default false
|
46
|
-
*/
|
47
|
-
disabled?: boolean;
|
48
|
-
/**
|
49
|
-
* Callback to be called when the `checked` value changes.
|
50
|
-
*/
|
51
|
-
onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
|
52
|
-
checked: boolean;
|
53
|
-
}) => void;
|
54
|
-
}
|
55
|
-
export interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
|
56
|
-
}
|
57
|
-
export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
58
|
-
}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
|
3
|
-
/**
|
4
|
-
* Array of all shorthand properties listed in SwitchSlots
|
5
|
-
*/
|
6
|
-
export declare const switchShorthandProps: (keyof SwitchSlots)[];
|
7
|
-
/**
|
8
|
-
* Given user props, returns state and render function for a Switch.
|
9
|
-
*/
|
10
|
-
export declare const useSwitch: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
|
@@ -1,152 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { clamp, useBoolean, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
3
|
-
import { useFluent } from '@fluentui/react-shared-contexts'; // TODO: This should be replaced with a useEvent hook
|
4
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
5
|
-
|
6
|
-
var on = function (element, eventName, callback) {
|
7
|
-
element.addEventListener(eventName, callback);
|
8
|
-
return function () {
|
9
|
-
return element.removeEventListener(eventName, callback);
|
10
|
-
};
|
11
|
-
};
|
12
|
-
|
13
|
-
export var useSwitchState = function (state) {
|
14
|
-
var _a = state.defaultChecked,
|
15
|
-
defaultChecked = _a === void 0 ? false : _a,
|
16
|
-
checked = state.checked,
|
17
|
-
_b = state.disabled,
|
18
|
-
disabled = _b === void 0 ? false : _b,
|
19
|
-
onChange = state.onChange;
|
20
|
-
var _c = state.root,
|
21
|
-
onPointerDownCallback = _c.onPointerDown,
|
22
|
-
onKeyUpCallback = _c.onKeyUp;
|
23
|
-
var dir = useFluent().dir;
|
24
|
-
var inputRef = useMergedRefs(state.input.ref);
|
25
|
-
var railRef = React.useRef(null);
|
26
|
-
var internalState = React.useRef({
|
27
|
-
internalValue: checked ? checked : defaultChecked,
|
28
|
-
thumbIsDragging: false,
|
29
|
-
disposables: []
|
30
|
-
});
|
31
|
-
|
32
|
-
var _d = useControllableState({
|
33
|
-
defaultState: defaultChecked,
|
34
|
-
state: checked,
|
35
|
-
initialState: false
|
36
|
-
}),
|
37
|
-
currentValue = _d[0],
|
38
|
-
setCurrentValue = _d[1];
|
39
|
-
|
40
|
-
var _e = useBoolean(true),
|
41
|
-
thumbAnimation = _e[0],
|
42
|
-
_f = _e[1],
|
43
|
-
showThumbAnimation = _f.setTrue,
|
44
|
-
hideThumbAnimation = _f.setFalse;
|
45
|
-
|
46
|
-
var _g = React.useState(currentValue === true ? 100 : 0),
|
47
|
-
renderedPosition = _g[0],
|
48
|
-
setRenderedPosition = _g[1];
|
49
|
-
|
50
|
-
var setChecked = useEventCallback(function (ev, incomingValue) {
|
51
|
-
ev.stopPropagation();
|
52
|
-
ev.preventDefault();
|
53
|
-
internalState.current.internalValue = incomingValue;
|
54
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
|
55
|
-
checked: incomingValue
|
56
|
-
});
|
57
|
-
setCurrentValue(incomingValue);
|
58
|
-
setRenderedPosition(undefined);
|
59
|
-
});
|
60
|
-
var calculatePosition = React.useCallback(function (ev) {
|
61
|
-
var _a;
|
62
|
-
|
63
|
-
var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
64
|
-
var railWidth = currentBounds.width;
|
65
|
-
var railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
|
66
|
-
var distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
|
67
|
-
return clamp(distance / railWidth * 100, 0, 100);
|
68
|
-
}, [dir]);
|
69
|
-
var onPointerMove = React.useCallback(function (ev) {
|
70
|
-
var incomingPosition = calculatePosition(ev);
|
71
|
-
internalState.current.thumbIsDragging = true;
|
72
|
-
hideThumbAnimation();
|
73
|
-
setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
|
74
|
-
|
75
|
-
if (incomingPosition === 100 && internalState.current.internalValue !== true) {
|
76
|
-
setChecked(ev, true);
|
77
|
-
} else if (incomingPosition === 0 && internalState.current.internalValue !== false) {
|
78
|
-
setChecked(ev, false);
|
79
|
-
}
|
80
|
-
}, [calculatePosition, hideThumbAnimation, setChecked]);
|
81
|
-
var onPointerUp = React.useCallback(function (ev) {
|
82
|
-
internalState.current.disposables.forEach(function (dispose) {
|
83
|
-
return dispose();
|
84
|
-
});
|
85
|
-
internalState.current.disposables = [];
|
86
|
-
inputRef.current.focus();
|
87
|
-
|
88
|
-
if (internalState.current.thumbIsDragging) {
|
89
|
-
var roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
|
90
|
-
showThumbAnimation();
|
91
|
-
|
92
|
-
if (roundedPosition === 100) {
|
93
|
-
setChecked(ev, true);
|
94
|
-
} else if (roundedPosition === 0) {
|
95
|
-
setChecked(ev, false);
|
96
|
-
}
|
97
|
-
} else {
|
98
|
-
setChecked(ev, !internalState.current.internalValue);
|
99
|
-
}
|
100
|
-
}, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
|
101
|
-
var onPointerDown = React.useCallback(function (ev) {
|
102
|
-
var _a;
|
103
|
-
|
104
|
-
var pointerId = ev.pointerId;
|
105
|
-
var target = ev.target;
|
106
|
-
onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
|
107
|
-
showThumbAnimation();
|
108
|
-
(_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
109
|
-
internalState.current.thumbIsDragging = false;
|
110
|
-
internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), function () {
|
111
|
-
var _a;
|
112
|
-
|
113
|
-
(_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
|
114
|
-
});
|
115
|
-
}, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
|
116
|
-
var onKeyUp = React.useCallback(function (ev) {
|
117
|
-
onKeyUpCallback === null || onKeyUpCallback === void 0 ? void 0 : onKeyUpCallback(ev);
|
118
|
-
|
119
|
-
if (ev.key === ' ') {
|
120
|
-
setChecked(ev, !internalState.current.internalValue);
|
121
|
-
}
|
122
|
-
}, [onKeyUpCallback, setChecked]);
|
123
|
-
var currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
|
124
|
-
var rootStyles = {
|
125
|
-
'--switch-checked-opacity': currentPosition / 100,
|
126
|
-
'--switch-unchecked-opacity': (100 - currentPosition) / 100
|
127
|
-
};
|
128
|
-
var thumbWrapperStyles = {
|
129
|
-
transform: "translate(" + (dir === 'rtl' ? -currentPosition : currentPosition) + "%)",
|
130
|
-
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'
|
131
|
-
}; // Root Props
|
132
|
-
|
133
|
-
state.root.style = rootStyles;
|
134
|
-
|
135
|
-
if (!disabled) {
|
136
|
-
state.root.onPointerDown = onPointerDown;
|
137
|
-
state.root.onKeyUp = onKeyUp;
|
138
|
-
} // Input Props
|
139
|
-
|
140
|
-
|
141
|
-
state.input.checked = currentValue;
|
142
|
-
state.input.disabled = disabled;
|
143
|
-
state.input.ref = inputRef;
|
144
|
-
state.input.readOnly = true;
|
145
|
-
state.input.role = 'switch'; // Thumb Container Props
|
146
|
-
|
147
|
-
state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
|
148
|
-
|
149
|
-
state.activeRail.ref = railRef;
|
150
|
-
return state;
|
151
|
-
};
|
152
|
-
//# sourceMappingURL=useSwitchState.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}
|
package/lib/index.d.ts
DELETED
package/lib-commonjs/Switch.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/Switch/index';
|
@@ -1,23 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.isConformant = void 0;
|
7
|
-
|
8
|
-
var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
|
9
|
-
|
10
|
-
var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
|
11
|
-
|
12
|
-
function isConformant(testInfo) {
|
13
|
-
var defaultOptions = {
|
14
|
-
asPropHandlesRef: true,
|
15
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
16
|
-
extraTests: react_conformance_make_styles_1.default,
|
17
|
-
skipAsPropTests: true
|
18
|
-
};
|
19
|
-
react_conformance_1.isConformant(defaultOptions, testInfo);
|
20
|
-
}
|
21
|
-
|
22
|
-
exports.isConformant = isConformant;
|
23
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAH+C;AAI3D,IAAA,eAAe,EAAE;AAJ0C,GAA7D;AAOA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAXD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
import type { SwitchProps } from './Switch.types';
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
3
|
-
/**
|
4
|
-
* The Switch control enables users to trigger an option on or off through pressing on the component.
|
5
|
-
*/
|
6
|
-
export declare const Switch: ForwardRefComponent<SwitchProps>;
|
@@ -1,58 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
3
|
-
export declare type SwitchSlots = {
|
4
|
-
/**
|
5
|
-
* The root of the Switch.
|
6
|
-
*/
|
7
|
-
root: IntrinsicShorthandProps<'div'>;
|
8
|
-
/**
|
9
|
-
* The bar indicating the status of the Switch.
|
10
|
-
*/
|
11
|
-
track: IntrinsicShorthandProps<'div'>;
|
12
|
-
/**
|
13
|
-
* The wrapper around the thumb. It is used as the active area for the thumb to position itself.
|
14
|
-
*/
|
15
|
-
thumbWrapper: IntrinsicShorthandProps<'div'>;
|
16
|
-
/**
|
17
|
-
* The circular icon indicating the status of the Switch.
|
18
|
-
*/
|
19
|
-
thumb: IntrinsicShorthandProps<'div'>;
|
20
|
-
/**
|
21
|
-
* The hidden input that handles the Switch's internal functionality.
|
22
|
-
*/
|
23
|
-
input: IntrinsicShorthandProps<'input'>;
|
24
|
-
/**
|
25
|
-
* The area in which the Switch's rail allows for the thumb to be dragged.
|
26
|
-
*/
|
27
|
-
activeRail: IntrinsicShorthandProps<'div'>;
|
28
|
-
};
|
29
|
-
export interface SwitchCommons {
|
30
|
-
/**
|
31
|
-
* The starting value for a uncontrolled Switch. If `true` then the Switch will be enabled.
|
32
|
-
* Mutually exclusive with `checked` prop.
|
33
|
-
*
|
34
|
-
* @default false
|
35
|
-
*/
|
36
|
-
defaultChecked?: boolean;
|
37
|
-
/**
|
38
|
-
* The current value for a controlled Switch. If `true` then the Switch will be enabled.
|
39
|
-
* Mutually exclusive with `defaultChecked` prop.
|
40
|
-
*/
|
41
|
-
checked?: boolean;
|
42
|
-
/**
|
43
|
-
* Whether the Switch should be disabled.
|
44
|
-
*
|
45
|
-
* @default false
|
46
|
-
*/
|
47
|
-
disabled?: boolean;
|
48
|
-
/**
|
49
|
-
* Callback to be called when the `checked` value changes.
|
50
|
-
*/
|
51
|
-
onChange?: (ev: React.PointerEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, data: {
|
52
|
-
checked: boolean;
|
53
|
-
}) => void;
|
54
|
-
}
|
55
|
-
export interface SwitchProps extends Omit<ComponentProps<SwitchSlots>, 'onChange'>, SwitchCommons {
|
56
|
-
}
|
57
|
-
export interface SwitchState extends ComponentState<SwitchSlots>, SwitchCommons {
|
58
|
-
}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
|
3
|
-
/**
|
4
|
-
* Array of all shorthand properties listed in SwitchSlots
|
5
|
-
*/
|
6
|
-
export declare const switchShorthandProps: (keyof SwitchSlots)[];
|
7
|
-
/**
|
8
|
-
* Given user props, returns state and render function for a Switch.
|
9
|
-
*/
|
10
|
-
export declare const useSwitch: (props: SwitchProps, ref: React.Ref<HTMLElement>) => SwitchState;
|