@tamagui/switch-headless 2.7.6 → 3.0.0-beta.637.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/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +21 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/useSwitch.cjs +92 -110
- package/dist/cjs/useSwitch.native.cjs +51 -0
- package/dist/cjs/useSwitch.native.js +28 -37
- package/dist/cjs/useSwitch.native.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.mjs +1 -2
- package/dist/esm/index.native.js +1 -2
- package/dist/esm/useSwitch.mjs +76 -84
- package/dist/esm/useSwitch.mjs.map +1 -1
- package/dist/esm/useSwitch.native.js +11 -12
- package/dist/esm/useSwitch.native.js.map +1 -1
- package/dist/jsx/index.js +1 -2
- package/dist/jsx/index.mjs +1 -2
- package/dist/jsx/index.native.cjs +21 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/useSwitch.mjs +76 -84
- package/dist/jsx/useSwitch.mjs.map +1 -1
- package/dist/jsx/useSwitch.native.cjs +51 -0
- package/dist/jsx/useSwitch.native.js +28 -37
- package/dist/jsx/useSwitch.native.js.map +1 -1
- package/package.json +8 -8
- package/types/useSwitch.d.ts +5 -5
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
package/dist/esm/useSwitch.mjs
CHANGED
|
@@ -5,94 +5,86 @@ import { useLabelContext } from "@tamagui/label";
|
|
|
5
5
|
import { usePrevious } from "@tamagui/use-previous";
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
|
|
8
9
|
function getState(checked) {
|
|
9
|
-
|
|
10
|
+
return checked ? "checked" : "unchecked";
|
|
10
11
|
}
|
|
11
|
-
const BubbleInput = props => {
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
margin: 0
|
|
45
|
-
}
|
|
46
|
-
});
|
|
12
|
+
const BubbleInput = (props) => {
|
|
13
|
+
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
14
|
+
const ref = React.useRef(null);
|
|
15
|
+
const prevChecked = usePrevious(checked);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
const input = ref.current;
|
|
18
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
19
|
+
const setChecked = Object.getOwnPropertyDescriptor(inputProto, "checked").set;
|
|
20
|
+
if (prevChecked !== checked && setChecked) {
|
|
21
|
+
const event = new Event("click", { bubbles });
|
|
22
|
+
setChecked.call(input, checked);
|
|
23
|
+
input.dispatchEvent(event);
|
|
24
|
+
}
|
|
25
|
+
}, [
|
|
26
|
+
prevChecked,
|
|
27
|
+
checked,
|
|
28
|
+
bubbles
|
|
29
|
+
]);
|
|
30
|
+
return /* @__PURE__ */ jsx("input", {
|
|
31
|
+
type: "checkbox",
|
|
32
|
+
"aria-hidden": true,
|
|
33
|
+
defaultChecked: checked,
|
|
34
|
+
...inputProps,
|
|
35
|
+
tabIndex: -1,
|
|
36
|
+
ref,
|
|
37
|
+
style: {
|
|
38
|
+
...props.style,
|
|
39
|
+
position: "absolute",
|
|
40
|
+
pointerEvents: "none",
|
|
41
|
+
opacity: 0,
|
|
42
|
+
margin: 0
|
|
43
|
+
}
|
|
44
|
+
});
|
|
47
45
|
};
|
|
48
46
|
function useSwitch(props, [checked, setChecked], ref) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
disabled,
|
|
90
|
-
style: {
|
|
91
|
-
transform: "translateX(-100%)"
|
|
92
|
-
}
|
|
93
|
-
}) : null
|
|
94
|
-
};
|
|
95
|
-
}
|
|
47
|
+
{
|
|
48
|
+
const { disabled, name, value, required } = props;
|
|
49
|
+
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
50
|
+
const [button, setButton] = React.useState(null);
|
|
51
|
+
const composedRefs = useComposedRefs(ref, setButton);
|
|
52
|
+
const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
53
|
+
const labelId = useLabelContext(button);
|
|
54
|
+
const ariaLabelledBy = props["aria-labelledby"] || props.labeledBy || labelId;
|
|
55
|
+
return {
|
|
56
|
+
switchProps: {
|
|
57
|
+
role: "switch",
|
|
58
|
+
"aria-checked": checked,
|
|
59
|
+
...isWeb ? {
|
|
60
|
+
tabIndex: disabled ? void 0 : 0,
|
|
61
|
+
"data-state": getState(checked),
|
|
62
|
+
"data-disabled": disabled ? "" : void 0,
|
|
63
|
+
disabled
|
|
64
|
+
} : {},
|
|
65
|
+
"aria-labelledby": ariaLabelledBy,
|
|
66
|
+
onPress: composeEventHandlers(props.onPress, (event) => {
|
|
67
|
+
setChecked((prevChecked) => !prevChecked);
|
|
68
|
+
if (isWeb && isFormControl) {
|
|
69
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
70
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
},
|
|
74
|
+
switchRef: composedRefs,
|
|
75
|
+
bubbleInput: isWeb && isFormControl ? /* @__PURE__ */ jsx(BubbleInput, {
|
|
76
|
+
control: button,
|
|
77
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
78
|
+
name,
|
|
79
|
+
value,
|
|
80
|
+
checked,
|
|
81
|
+
required,
|
|
82
|
+
disabled,
|
|
83
|
+
style: { transform: "translateX(-100%)" }
|
|
84
|
+
}) : null
|
|
85
|
+
};
|
|
86
|
+
}
|
|
96
87
|
}
|
|
88
|
+
|
|
97
89
|
export { useSwitch };
|
|
98
90
|
//# sourceMappingURL=useSwitch.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"useSwitch.js","names":[],"sources":["esm/useSwitch.js"],"sourcesContent":["import { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport { useLabelContext } from \"@tamagui/label\";\nimport { usePrevious } from \"@tamagui/use-previous\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\n\nfunction getState(checked) {\n\treturn checked ? \"checked\" : \"unchecked\";\n}\nconst BubbleInput = (props) => {\n\tconst { control, checked, bubbles = true, ...inputProps } = props;\n\tconst ref = React.useRef(null);\n\tconst prevChecked = usePrevious(checked);\n\tReact.useEffect(() => {\n\t\tconst input = ref.current;\n\t\tconst inputProto = window.HTMLInputElement.prototype;\n\t\tconst setChecked = Object.getOwnPropertyDescriptor(inputProto, \"checked\").set;\n\t\tif (prevChecked !== checked && setChecked) {\n\t\t\tconst event = new Event(\"click\", { bubbles });\n\t\t\tsetChecked.call(input, checked);\n\t\t\tinput.dispatchEvent(event);\n\t\t}\n\t}, [\n\t\tprevChecked,\n\t\tchecked,\n\t\tbubbles\n\t]);\n\treturn /* @__PURE__ */ jsx(\"input\", {\n\t\ttype: \"checkbox\",\n\t\t\"aria-hidden\": true,\n\t\tdefaultChecked: checked,\n\t\t...inputProps,\n\t\ttabIndex: -1,\n\t\tref,\n\t\tstyle: {\n\t\t\t...props.style,\n\t\t\tposition: \"absolute\",\n\t\t\tpointerEvents: \"none\",\n\t\t\topacity: 0,\n\t\t\tmargin: 0\n\t\t}\n\t});\n};\nfunction useSwitch(props, [checked, setChecked], ref) {\n\t{\n\t\tconst { disabled, name, value, required } = props;\n\t\tconst hasConsumerStoppedPropagationRef = React.useRef(false);\n\t\tconst [button, setButton] = React.useState(null);\n\t\tconst composedRefs = useComposedRefs(ref, setButton);\n\t\tconst isFormControl = isWeb ? button ? Boolean(button.closest(\"form\")) : true : false;\n\t\tconst labelId = useLabelContext(button);\n\t\tconst ariaLabelledBy = props[\"aria-labelledby\"] || props.labeledBy || labelId;\n\t\treturn {\n\t\t\tswitchProps: {\n\t\t\t\trole: \"switch\",\n\t\t\t\t\"aria-checked\": checked,\n\t\t\t\t...isWeb ? {\n\t\t\t\t\ttabIndex: disabled ? void 0 : 0,\n\t\t\t\t\t\"data-state\": getState(checked),\n\t\t\t\t\t\"data-disabled\": disabled ? \"\" : void 0,\n\t\t\t\t\tdisabled\n\t\t\t\t} : {},\n\t\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\t\tonPress: composeEventHandlers(props.onPress, (event) => {\n\t\t\t\t\tsetChecked((prevChecked) => !prevChecked);\n\t\t\t\t\tif (isWeb && isFormControl) {\n\t\t\t\t\t\thasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n\t\t\t\t\t\tif (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t},\n\t\t\tswitchRef: composedRefs,\n\t\t\tbubbleInput: isWeb && isFormControl ? /* @__PURE__ */ jsx(BubbleInput, {\n\t\t\t\tcontrol: button,\n\t\t\t\tbubbles: !hasConsumerStoppedPropagationRef.current,\n\t\t\t\tname,\n\t\t\t\tvalue,\n\t\t\t\tchecked,\n\t\t\t\trequired,\n\t\t\t\tdisabled,\n\t\t\t\tstyle: { transform: \"translateX(-100%)\" }\n\t\t\t}) : null\n\t\t};\n\t}\n}\n\nexport { useSwitch };"],"mappings":";;;;;;;;;AAQA,SAAS,SAAS,SAAS;CAC1B,OAAO,UAAU,YAAY;AAC9B;AACA,MAAM,eAAe,UAAU;CAC9B,MAAM,EAAE,SAAS,SAAS,UAAU,MAAM,GAAG,eAAe;CAC5D,MAAM,MAAM,MAAM,OAAO,IAAI;CAC7B,MAAM,cAAc,YAAY,OAAO;CACvC,MAAM,gBAAgB;EACrB,MAAM,QAAQ,IAAI;EAClB,MAAM,aAAa,OAAO,iBAAiB;EAC3C,MAAM,aAAa,OAAO,yBAAyB,YAAY,SAAS,EAAE;EAC1E,IAAI,gBAAgB,WAAW,YAAY;GAC1C,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;GAC5C,WAAW,KAAK,OAAO,OAAO;GAC9B,MAAM,cAAc,KAAK;EAC1B;CACD,GAAG;EACF;EACA;EACA;CACD,CAAC;CACD,OAAuB,oBAAI,SAAS;EACnC,MAAM;EACN,eAAe;EACf,gBAAgB;EAChB,GAAG;EACH,UAAU,CAAC;EACX;EACA,OAAO;GACN,GAAG,MAAM;GACT,UAAU;GACV,eAAe;GACf,SAAS;GACT,QAAQ;EACT;CACD,CAAC;AACF;AACA,SAAS,UAAU,OAAO,CAAC,SAAS,aAAa,KAAK;CACrD;EACC,MAAM,EAAE,UAAU,MAAM,OAAO,aAAa;EAC5C,MAAM,mCAAmC,MAAM,OAAO,KAAK;EAC3D,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,IAAI;EAC/C,MAAM,eAAe,gBAAgB,KAAK,SAAS;EACnD,MAAM,gBAAgB,QAAQ,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI,OAAO;EAChF,MAAM,UAAU,gBAAgB,MAAM;EACtC,MAAM,iBAAiB,MAAM,sBAAsB,MAAM,aAAa;EACtE,OAAO;GACN,aAAa;IACZ,MAAM;IACN,gBAAgB;IAChB,GAAG,QAAQ;KACV,UAAU,WAAW,KAAK,IAAI;KAC9B,cAAc,SAAS,OAAO;KAC9B,iBAAiB,WAAW,KAAK,KAAK;KACtC;IACD,IAAI,CAAC;IACL,mBAAmB;IACnB,SAAS,qBAAqB,MAAM,UAAU,UAAU;KACvD,YAAY,gBAAgB,CAAC,WAAW;KACxC,IAAI,SAAS,eAAe;MAC3B,iCAAiC,UAAU,MAAM,qBAAqB;MACtE,IAAI,CAAC,iCAAiC,SAAS,MAAM,gBAAgB;KACtE;IACD,CAAC;GACF;GACA,WAAW;GACX,aAAa,SAAS,gBAAgC,oBAAI,aAAa;IACtE,SAAS;IACT,SAAS,CAAC,iCAAiC;IAC3C;IACA;IACA;IACA;IACA;IACA,OAAO,EAAE,WAAW,oBAAoB;GACzC,CAAC,IAAI;EACN;CACD;AACD"}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
function useSwitch(props, param, ref) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
bubbleInput: null
|
|
13
|
-
};
|
|
2
|
+
var [checked, setChecked] = param;
|
|
3
|
+
return {
|
|
4
|
+
switchProps: { onPress() {
|
|
5
|
+
setChecked(function(prevChecked) {
|
|
6
|
+
return !prevChecked;
|
|
7
|
+
});
|
|
8
|
+
} },
|
|
9
|
+
switchRef: ref,
|
|
10
|
+
bubbleInput: null
|
|
11
|
+
};
|
|
14
12
|
}
|
|
13
|
+
|
|
15
14
|
export { useSwitch };
|
|
16
15
|
//# sourceMappingURL=useSwitch.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"useSwitch.native.js","names":[],"sources":["esm/useSwitch.native.js"],"sourcesContent":["\n\n\nfunction useSwitch(props, param, ref) {\n\tvar [checked, setChecked] = param;\n\treturn {\n\t\tswitchProps: { onPress() {\n\t\t\tsetChecked(function(prevChecked) {\n\t\t\t\treturn !prevChecked;\n\t\t\t});\n\t\t} },\n\t\tswitchRef: ref,\n\t\tbubbleInput: null\n\t};\n}\n\nexport { useSwitch };"],"mappings":";AAGA,SAAS,UAAU,OAAO,OAAO,KAAK;CACrC,IAAI,CAAC,SAAS,cAAc;CAC5B,OAAO;EACN,aAAa,EAAE,UAAU;GACxB,WAAW,SAAS,aAAa;IAChC,OAAO,CAAC;GACT,CAAC;EACF,EAAE;EACF,WAAW;EACX,aAAa;CACd;AACD"}
|
package/dist/jsx/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./useSwitch.mjs"
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from "./useSwitch.mjs"
|
package/dist/jsx/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export * from "./useSwitch.mjs"
|
|
2
|
-
//# sourceMappingURL=index.mjs.map
|
|
1
|
+
export * from "./useSwitch.mjs"
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
+
get: () => from[key],
|
|
12
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var index_exports = {};
|
|
20
|
+
module.exports = __toCommonJS(index_exports);
|
|
21
|
+
__reExport(index_exports, require("./useSwitch.native.js"), module.exports);
|
package/dist/jsx/index.native.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
8
|
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
+
get: () => from[key],
|
|
12
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
15
16
|
};
|
|
16
17
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
-
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
18
|
-
value: true
|
|
19
|
-
}), mod);
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
19
|
var index_exports = {};
|
|
21
20
|
module.exports = __toCommonJS(index_exports);
|
|
22
21
|
__reExport(index_exports, require("./useSwitch.native.js"), module.exports);
|
|
22
|
+
|
|
23
23
|
//# sourceMappingURL=index.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["
|
|
1
|
+
{"version":3,"file":"index.native.js","names":[],"sources":["jsx/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./useSwitch\"), module.exports);\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,uBAAa,GAAG,OAAO,OAAO"}
|
package/dist/jsx/useSwitch.mjs
CHANGED
|
@@ -5,94 +5,86 @@ import { useLabelContext } from "@tamagui/label";
|
|
|
5
5
|
import { usePrevious } from "@tamagui/use-previous";
|
|
6
6
|
import * as React from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
|
|
8
9
|
function getState(checked) {
|
|
9
|
-
|
|
10
|
+
return checked ? "checked" : "unchecked";
|
|
10
11
|
}
|
|
11
|
-
const BubbleInput = props => {
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
margin: 0
|
|
45
|
-
}
|
|
46
|
-
});
|
|
12
|
+
const BubbleInput = (props) => {
|
|
13
|
+
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
14
|
+
const ref = React.useRef(null);
|
|
15
|
+
const prevChecked = usePrevious(checked);
|
|
16
|
+
React.useEffect(() => {
|
|
17
|
+
const input = ref.current;
|
|
18
|
+
const inputProto = window.HTMLInputElement.prototype;
|
|
19
|
+
const setChecked = Object.getOwnPropertyDescriptor(inputProto, "checked").set;
|
|
20
|
+
if (prevChecked !== checked && setChecked) {
|
|
21
|
+
const event = new Event("click", { bubbles });
|
|
22
|
+
setChecked.call(input, checked);
|
|
23
|
+
input.dispatchEvent(event);
|
|
24
|
+
}
|
|
25
|
+
}, [
|
|
26
|
+
prevChecked,
|
|
27
|
+
checked,
|
|
28
|
+
bubbles
|
|
29
|
+
]);
|
|
30
|
+
return /* @__PURE__ */ jsx("input", {
|
|
31
|
+
type: "checkbox",
|
|
32
|
+
"aria-hidden": true,
|
|
33
|
+
defaultChecked: checked,
|
|
34
|
+
...inputProps,
|
|
35
|
+
tabIndex: -1,
|
|
36
|
+
ref,
|
|
37
|
+
style: {
|
|
38
|
+
...props.style,
|
|
39
|
+
position: "absolute",
|
|
40
|
+
pointerEvents: "none",
|
|
41
|
+
opacity: 0,
|
|
42
|
+
margin: 0
|
|
43
|
+
}
|
|
44
|
+
});
|
|
47
45
|
};
|
|
48
46
|
function useSwitch(props, [checked, setChecked], ref) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
disabled,
|
|
90
|
-
style: {
|
|
91
|
-
transform: "translateX(-100%)"
|
|
92
|
-
}
|
|
93
|
-
}) : null
|
|
94
|
-
};
|
|
95
|
-
}
|
|
47
|
+
{
|
|
48
|
+
const { disabled, name, value, required } = props;
|
|
49
|
+
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
50
|
+
const [button, setButton] = React.useState(null);
|
|
51
|
+
const composedRefs = useComposedRefs(ref, setButton);
|
|
52
|
+
const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
53
|
+
const labelId = useLabelContext(button);
|
|
54
|
+
const ariaLabelledBy = props["aria-labelledby"] || props.labeledBy || labelId;
|
|
55
|
+
return {
|
|
56
|
+
switchProps: {
|
|
57
|
+
role: "switch",
|
|
58
|
+
"aria-checked": checked,
|
|
59
|
+
...isWeb ? {
|
|
60
|
+
tabIndex: disabled ? void 0 : 0,
|
|
61
|
+
"data-state": getState(checked),
|
|
62
|
+
"data-disabled": disabled ? "" : void 0,
|
|
63
|
+
disabled
|
|
64
|
+
} : {},
|
|
65
|
+
"aria-labelledby": ariaLabelledBy,
|
|
66
|
+
onPress: composeEventHandlers(props.onPress, (event) => {
|
|
67
|
+
setChecked((prevChecked) => !prevChecked);
|
|
68
|
+
if (isWeb && isFormControl) {
|
|
69
|
+
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
70
|
+
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
},
|
|
74
|
+
switchRef: composedRefs,
|
|
75
|
+
bubbleInput: isWeb && isFormControl ? /* @__PURE__ */ jsx(BubbleInput, {
|
|
76
|
+
control: button,
|
|
77
|
+
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
78
|
+
name,
|
|
79
|
+
value,
|
|
80
|
+
checked,
|
|
81
|
+
required,
|
|
82
|
+
disabled,
|
|
83
|
+
style: { transform: "translateX(-100%)" }
|
|
84
|
+
}) : null
|
|
85
|
+
};
|
|
86
|
+
}
|
|
96
87
|
}
|
|
88
|
+
|
|
97
89
|
export { useSwitch };
|
|
98
90
|
//# sourceMappingURL=useSwitch.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"useSwitch.js","names":[],"sources":["jsx/useSwitch.js"],"sourcesContent":["import { useComposedRefs } from \"@tamagui/compose-refs\";\nimport { isWeb } from \"@tamagui/constants\";\nimport { composeEventHandlers } from \"@tamagui/helpers\";\nimport { useLabelContext } from \"@tamagui/label\";\nimport { usePrevious } from \"@tamagui/use-previous\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\n\nfunction getState(checked) {\n\treturn checked ? \"checked\" : \"unchecked\";\n}\nconst BubbleInput = (props) => {\n\tconst { control, checked, bubbles = true, ...inputProps } = props;\n\tconst ref = React.useRef(null);\n\tconst prevChecked = usePrevious(checked);\n\tReact.useEffect(() => {\n\t\tconst input = ref.current;\n\t\tconst inputProto = window.HTMLInputElement.prototype;\n\t\tconst setChecked = Object.getOwnPropertyDescriptor(inputProto, \"checked\").set;\n\t\tif (prevChecked !== checked && setChecked) {\n\t\t\tconst event = new Event(\"click\", { bubbles });\n\t\t\tsetChecked.call(input, checked);\n\t\t\tinput.dispatchEvent(event);\n\t\t}\n\t}, [\n\t\tprevChecked,\n\t\tchecked,\n\t\tbubbles\n\t]);\n\treturn /* @__PURE__ */ jsx(\"input\", {\n\t\ttype: \"checkbox\",\n\t\t\"aria-hidden\": true,\n\t\tdefaultChecked: checked,\n\t\t...inputProps,\n\t\ttabIndex: -1,\n\t\tref,\n\t\tstyle: {\n\t\t\t...props.style,\n\t\t\tposition: \"absolute\",\n\t\t\tpointerEvents: \"none\",\n\t\t\topacity: 0,\n\t\t\tmargin: 0\n\t\t}\n\t});\n};\nfunction useSwitch(props, [checked, setChecked], ref) {\n\t{\n\t\tconst { disabled, name, value, required } = props;\n\t\tconst hasConsumerStoppedPropagationRef = React.useRef(false);\n\t\tconst [button, setButton] = React.useState(null);\n\t\tconst composedRefs = useComposedRefs(ref, setButton);\n\t\tconst isFormControl = isWeb ? button ? Boolean(button.closest(\"form\")) : true : false;\n\t\tconst labelId = useLabelContext(button);\n\t\tconst ariaLabelledBy = props[\"aria-labelledby\"] || props.labeledBy || labelId;\n\t\treturn {\n\t\t\tswitchProps: {\n\t\t\t\trole: \"switch\",\n\t\t\t\t\"aria-checked\": checked,\n\t\t\t\t...isWeb ? {\n\t\t\t\t\ttabIndex: disabled ? void 0 : 0,\n\t\t\t\t\t\"data-state\": getState(checked),\n\t\t\t\t\t\"data-disabled\": disabled ? \"\" : void 0,\n\t\t\t\t\tdisabled\n\t\t\t\t} : {},\n\t\t\t\t\"aria-labelledby\": ariaLabelledBy,\n\t\t\t\tonPress: composeEventHandlers(props.onPress, (event) => {\n\t\t\t\t\tsetChecked((prevChecked) => !prevChecked);\n\t\t\t\t\tif (isWeb && isFormControl) {\n\t\t\t\t\t\thasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n\t\t\t\t\t\tif (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t},\n\t\t\tswitchRef: composedRefs,\n\t\t\tbubbleInput: isWeb && isFormControl ? /* @__PURE__ */ jsx(BubbleInput, {\n\t\t\t\tcontrol: button,\n\t\t\t\tbubbles: !hasConsumerStoppedPropagationRef.current,\n\t\t\t\tname,\n\t\t\t\tvalue,\n\t\t\t\tchecked,\n\t\t\t\trequired,\n\t\t\t\tdisabled,\n\t\t\t\tstyle: { transform: \"translateX(-100%)\" }\n\t\t\t}) : null\n\t\t};\n\t}\n}\n\nexport { useSwitch };"],"mappings":";;;;;;;;;AAQA,SAAS,SAAS,SAAS;CAC1B,OAAO,UAAU,YAAY;AAC9B;AACA,MAAM,eAAe,UAAU;CAC9B,MAAM,EAAE,SAAS,SAAS,UAAU,MAAM,GAAG,eAAe;CAC5D,MAAM,MAAM,MAAM,OAAO,IAAI;CAC7B,MAAM,cAAc,YAAY,OAAO;CACvC,MAAM,gBAAgB;EACrB,MAAM,QAAQ,IAAI;EAClB,MAAM,aAAa,OAAO,iBAAiB;EAC3C,MAAM,aAAa,OAAO,yBAAyB,YAAY,SAAS,EAAE;EAC1E,IAAI,gBAAgB,WAAW,YAAY;GAC1C,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;GAC5C,WAAW,KAAK,OAAO,OAAO;GAC9B,MAAM,cAAc,KAAK;EAC1B;CACD,GAAG;EACF;EACA;EACA;CACD,CAAC;CACD,OAAuB,oBAAI,SAAS;EACnC,MAAM;EACN,eAAe;EACf,gBAAgB;EAChB,GAAG;EACH,UAAU,CAAC;EACX;EACA,OAAO;GACN,GAAG,MAAM;GACT,UAAU;GACV,eAAe;GACf,SAAS;GACT,QAAQ;EACT;CACD,CAAC;AACF;AACA,SAAS,UAAU,OAAO,CAAC,SAAS,aAAa,KAAK;CACrD;EACC,MAAM,EAAE,UAAU,MAAM,OAAO,aAAa;EAC5C,MAAM,mCAAmC,MAAM,OAAO,KAAK;EAC3D,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,IAAI;EAC/C,MAAM,eAAe,gBAAgB,KAAK,SAAS;EACnD,MAAM,gBAAgB,QAAQ,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI,OAAO;EAChF,MAAM,UAAU,gBAAgB,MAAM;EACtC,MAAM,iBAAiB,MAAM,sBAAsB,MAAM,aAAa;EACtE,OAAO;GACN,aAAa;IACZ,MAAM;IACN,gBAAgB;IAChB,GAAG,QAAQ;KACV,UAAU,WAAW,KAAK,IAAI;KAC9B,cAAc,SAAS,OAAO;KAC9B,iBAAiB,WAAW,KAAK,KAAK;KACtC;IACD,IAAI,CAAC;IACL,mBAAmB;IACnB,SAAS,qBAAqB,MAAM,UAAU,UAAU;KACvD,YAAY,gBAAgB,CAAC,WAAW;KACxC,IAAI,SAAS,eAAe;MAC3B,iCAAiC,UAAU,MAAM,qBAAqB;MACtE,IAAI,CAAC,iCAAiC,SAAS,MAAM,gBAAgB;KACtE;IACD,CAAC;GACF;GACA,WAAW;GACX,aAAa,SAAS,gBAAgC,oBAAI,aAAa;IACtE,SAAS;IACT,SAAS,CAAC,iCAAiC;IAC3C;IACA;IACA;IACA;IACA;IACA,OAAO,EAAE,WAAW,oBAAoB;GACzC,CAAC,IAAI;EACN;CACD;AACD"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
24
|
+
};
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
28
|
+
}) : target, mod));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var useSwitch_exports = {};
|
|
31
|
+
__export(useSwitch_exports, { useSwitch: () => useSwitch });
|
|
32
|
+
module.exports = __toCommonJS(useSwitch_exports);
|
|
33
|
+
require("react/jsx-runtime");
|
|
34
|
+
require("@tamagui/compose-refs");
|
|
35
|
+
require("@tamagui/constants");
|
|
36
|
+
require("@tamagui/helpers");
|
|
37
|
+
require("@tamagui/label");
|
|
38
|
+
require("@tamagui/use-previous");
|
|
39
|
+
__toESM(require("react"), 1);
|
|
40
|
+
function useSwitch(props, param, ref) {
|
|
41
|
+
var [checked, setChecked] = param;
|
|
42
|
+
return {
|
|
43
|
+
switchProps: { onPress() {
|
|
44
|
+
setChecked(function(prevChecked) {
|
|
45
|
+
return !prevChecked;
|
|
46
|
+
});
|
|
47
|
+
} },
|
|
48
|
+
switchRef: ref,
|
|
49
|
+
bubbleInput: null
|
|
50
|
+
};
|
|
51
|
+
}
|