@tamagui/switch 1.13.3 → 1.13.4
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/Switch.js +1 -295
- package/dist/cjs/Switch.js.map +2 -2
- package/dist/cjs/index.js +1 -18
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Switch.js +1 -262
- package/dist/esm/Switch.js.map +2 -2
- package/dist/esm/Switch.mjs +1 -262
- package/dist/esm/Switch.mjs.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/jsx/Switch.js +1 -244
- package/dist/jsx/Switch.js.map +2 -2
- package/dist/jsx/Switch.mjs +1 -244
- package/dist/jsx/Switch.mjs.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +1 -1
- package/dist/jsx/index.mjs.map +1 -1
- package/package.json +10 -10
package/dist/esm/Switch.js
CHANGED
|
@@ -1,263 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { usePrevious } from "@radix-ui/react-use-previous";
|
|
3
|
-
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
|
-
import {
|
|
5
|
-
getVariableValue,
|
|
6
|
-
isWeb,
|
|
7
|
-
styled,
|
|
8
|
-
withStaticProperties
|
|
9
|
-
} from "@tamagui/core";
|
|
10
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
11
|
-
import { registerFocusable } from "@tamagui/focusable";
|
|
12
|
-
import { getSize } from "@tamagui/get-size";
|
|
13
|
-
import { useLabelContext } from "@tamagui/label";
|
|
14
|
-
import { ThemeableStack, XStack } from "@tamagui/stacks";
|
|
15
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
16
|
-
import * as React from "react";
|
|
17
|
-
const SWITCH_NAME = "Switch";
|
|
18
|
-
const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
|
|
19
|
-
const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
|
|
20
|
-
const scopeContexts = createContextScope(SWITCH_NAME);
|
|
21
|
-
const [createSwitchContext] = scopeContexts;
|
|
22
|
-
const createSwitchScope = scopeContexts[1];
|
|
23
|
-
const [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
|
|
24
|
-
const THUMB_NAME = "SwitchThumb";
|
|
25
|
-
const SwitchThumbFrame = styled(ThemeableStack, {
|
|
26
|
-
name: "SwitchThumb",
|
|
27
|
-
variants: {
|
|
28
|
-
unstyled: {
|
|
29
|
-
false: {
|
|
30
|
-
size: "$true",
|
|
31
|
-
backgroundColor: "$background",
|
|
32
|
-
borderRadius: 1e3
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
size: {
|
|
36
|
-
"...size": (val) => {
|
|
37
|
-
const size = getSwitchHeight(val);
|
|
38
|
-
return {
|
|
39
|
-
height: size,
|
|
40
|
-
width: size
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
defaultVariants: {
|
|
46
|
-
unstyled: false
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
const SwitchThumb = SwitchThumbFrame.extractable(
|
|
50
|
-
React.forwardRef(
|
|
51
|
-
(props, forwardedRef) => {
|
|
52
|
-
const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
|
|
53
|
-
const {
|
|
54
|
-
size: sizeContext,
|
|
55
|
-
disabled,
|
|
56
|
-
checked,
|
|
57
|
-
unstyled
|
|
58
|
-
} = useSwitchContext(THUMB_NAME, __scopeSwitch);
|
|
59
|
-
const size = sizeProp ?? sizeContext;
|
|
60
|
-
return /* @__PURE__ */ jsx(
|
|
61
|
-
SwitchThumbFrame,
|
|
62
|
-
{
|
|
63
|
-
unstyled,
|
|
64
|
-
size,
|
|
65
|
-
theme: checked ? "active" : null,
|
|
66
|
-
"data-state": getState(checked),
|
|
67
|
-
"data-disabled": disabled ? "" : void 0,
|
|
68
|
-
...thumbProps,
|
|
69
|
-
x: checked ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size)) : 0,
|
|
70
|
-
ref: forwardedRef
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
);
|
|
76
|
-
SwitchThumb.displayName = THUMB_NAME;
|
|
77
|
-
const SwitchFrame = styled(XStack, {
|
|
78
|
-
name: SWITCH_NAME,
|
|
79
|
-
tag: "button",
|
|
80
|
-
variants: {
|
|
81
|
-
unstyled: {
|
|
82
|
-
false: {
|
|
83
|
-
size: "$true",
|
|
84
|
-
borderRadius: 1e3,
|
|
85
|
-
borderWidth: 2,
|
|
86
|
-
borderColor: "transparent",
|
|
87
|
-
backgroundColor: "$background",
|
|
88
|
-
focusStyle: {
|
|
89
|
-
borderColor: "$borderColorFocus"
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
size: {
|
|
94
|
-
"...size": (val) => {
|
|
95
|
-
const height = getSwitchHeight(val) + 4;
|
|
96
|
-
const width = getSwitchWidth(val) + 4;
|
|
97
|
-
return {
|
|
98
|
-
height,
|
|
99
|
-
minHeight: height,
|
|
100
|
-
width
|
|
101
|
-
};
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
defaultVariants: {
|
|
106
|
-
unstyled: false
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
const Switch = withStaticProperties(
|
|
110
|
-
SwitchFrame.extractable(
|
|
111
|
-
React.forwardRef(
|
|
112
|
-
(props, forwardedRef) => {
|
|
113
|
-
const {
|
|
114
|
-
__scopeSwitch,
|
|
115
|
-
labeledBy: ariaLabelledby,
|
|
116
|
-
name,
|
|
117
|
-
checked: checkedProp,
|
|
118
|
-
defaultChecked,
|
|
119
|
-
required,
|
|
120
|
-
disabled,
|
|
121
|
-
value = "on",
|
|
122
|
-
onCheckedChange,
|
|
123
|
-
size = "$true",
|
|
124
|
-
unstyled = false,
|
|
125
|
-
...switchProps
|
|
126
|
-
} = props;
|
|
127
|
-
const [button, setButton] = React.useState(null);
|
|
128
|
-
const composedRefs = useComposedRefs(
|
|
129
|
-
forwardedRef,
|
|
130
|
-
(node) => setButton(node)
|
|
131
|
-
);
|
|
132
|
-
const labelId = useLabelContext(button);
|
|
133
|
-
const labelledBy = ariaLabelledby || labelId;
|
|
134
|
-
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
135
|
-
const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
136
|
-
const [checked = false, setChecked] = useControllableState({
|
|
137
|
-
prop: checkedProp,
|
|
138
|
-
defaultProp: defaultChecked || false,
|
|
139
|
-
onChange: onCheckedChange,
|
|
140
|
-
transition: true
|
|
141
|
-
});
|
|
142
|
-
if (!isWeb) {
|
|
143
|
-
React.useEffect(() => {
|
|
144
|
-
if (!props.id)
|
|
145
|
-
return;
|
|
146
|
-
return registerFocusable(props.id, {
|
|
147
|
-
focus: () => {
|
|
148
|
-
setChecked((x) => !x);
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
}, [props.id, setChecked]);
|
|
152
|
-
}
|
|
153
|
-
return /* @__PURE__ */ jsxs(
|
|
154
|
-
SwitchProvider,
|
|
155
|
-
{
|
|
156
|
-
scope: __scopeSwitch,
|
|
157
|
-
checked,
|
|
158
|
-
disabled,
|
|
159
|
-
size,
|
|
160
|
-
unstyled,
|
|
161
|
-
children: [
|
|
162
|
-
/* @__PURE__ */ jsx(
|
|
163
|
-
SwitchFrame,
|
|
164
|
-
{
|
|
165
|
-
unstyled,
|
|
166
|
-
size,
|
|
167
|
-
role: "switch",
|
|
168
|
-
"aria-checked": checked,
|
|
169
|
-
"aria-labelledby": labelledBy,
|
|
170
|
-
"aria-required": required,
|
|
171
|
-
"data-state": getState(checked),
|
|
172
|
-
"data-disabled": disabled ? "" : void 0,
|
|
173
|
-
disabled,
|
|
174
|
-
theme: checked ? "active" : null,
|
|
175
|
-
themeShallow: true,
|
|
176
|
-
tabIndex: disabled ? void 0 : 0,
|
|
177
|
-
value,
|
|
178
|
-
...switchProps,
|
|
179
|
-
ref: composedRefs,
|
|
180
|
-
onPress: (event) => {
|
|
181
|
-
var _a;
|
|
182
|
-
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
183
|
-
setChecked((prevChecked) => !prevChecked);
|
|
184
|
-
if (isWeb && isFormControl) {
|
|
185
|
-
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
186
|
-
if (!hasConsumerStoppedPropagationRef.current)
|
|
187
|
-
event.stopPropagation();
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
),
|
|
192
|
-
isWeb && isFormControl && /* @__PURE__ */ jsx(
|
|
193
|
-
BubbleInput,
|
|
194
|
-
{
|
|
195
|
-
control: button,
|
|
196
|
-
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
197
|
-
name,
|
|
198
|
-
value,
|
|
199
|
-
checked,
|
|
200
|
-
required,
|
|
201
|
-
disabled,
|
|
202
|
-
style: { transform: "translateX(-100%)" }
|
|
203
|
-
}
|
|
204
|
-
)
|
|
205
|
-
]
|
|
206
|
-
}
|
|
207
|
-
);
|
|
208
|
-
}
|
|
209
|
-
)
|
|
210
|
-
),
|
|
211
|
-
{
|
|
212
|
-
Thumb: SwitchThumb
|
|
213
|
-
}
|
|
214
|
-
);
|
|
215
|
-
const BubbleInput = (props) => {
|
|
216
|
-
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
217
|
-
const ref = React.useRef(null);
|
|
218
|
-
const prevChecked = usePrevious(checked);
|
|
219
|
-
React.useEffect(() => {
|
|
220
|
-
const input = ref.current;
|
|
221
|
-
const inputProto = window.HTMLInputElement.prototype;
|
|
222
|
-
const descriptor = Object.getOwnPropertyDescriptor(
|
|
223
|
-
inputProto,
|
|
224
|
-
"checked"
|
|
225
|
-
);
|
|
226
|
-
const setChecked = descriptor.set;
|
|
227
|
-
if (prevChecked !== checked && setChecked) {
|
|
228
|
-
const event = new Event("click", { bubbles });
|
|
229
|
-
setChecked.call(input, checked);
|
|
230
|
-
input.dispatchEvent(event);
|
|
231
|
-
}
|
|
232
|
-
}, [prevChecked, checked, bubbles]);
|
|
233
|
-
return /* @__PURE__ */ jsx(
|
|
234
|
-
"input",
|
|
235
|
-
{
|
|
236
|
-
type: "checkbox",
|
|
237
|
-
"aria-hidden": true,
|
|
238
|
-
defaultChecked: checked,
|
|
239
|
-
...inputProps,
|
|
240
|
-
tabIndex: -1,
|
|
241
|
-
ref,
|
|
242
|
-
style: {
|
|
243
|
-
...props.style,
|
|
244
|
-
// ...controlSize,
|
|
245
|
-
position: "absolute",
|
|
246
|
-
pointerEvents: "none",
|
|
247
|
-
opacity: 0,
|
|
248
|
-
margin: 0
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
);
|
|
252
|
-
};
|
|
253
|
-
function getState(checked) {
|
|
254
|
-
return checked ? "checked" : "unchecked";
|
|
255
|
-
}
|
|
256
|
-
export {
|
|
257
|
-
Switch,
|
|
258
|
-
SwitchFrame,
|
|
259
|
-
SwitchThumb,
|
|
260
|
-
SwitchThumbFrame,
|
|
261
|
-
createSwitchScope
|
|
262
|
-
};
|
|
1
|
+
import{jsx as w,jsxs as ee}from"react/jsx-runtime";import{usePrevious as q}from"@radix-ui/react-use-previous";import{useComposedRefs as G}from"@tamagui/compose-refs";import{getVariableValue as y,isWeb as m,styled as x,withStaticProperties as N}from"@tamagui/core";import{createContextScope as O}from"@tamagui/create-context";import{registerFocusable as A}from"@tamagui/focusable";import{getSize as D}from"@tamagui/get-size";import{useLabelContext as X}from"@tamagui/label";import{ThemeableStack as U,XStack as j}from"@tamagui/stacks";import{useControllableState as J}from"@tamagui/use-controllable-state";import*as i from"react";const g="Switch",S=e=>Math.round(y(D(e))*.65),v=e=>S(e)*2,B=O(g),[K]=B,fe=B[1],[Q,Y]=K(g),E="SwitchThumb",R=x(U,{name:"SwitchThumb",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",borderRadius:1e3}},size:{"...size":e=>{const o=S(e);return{height:o,width:o}}}},defaultVariants:{unstyled:!1}}),I=R.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,size:a,...u}=e,{size:l,disabled:d,checked:s,unstyled:n}=Y(E,t),r=a??l;return w(R,{unstyled:n,size:r,theme:s?"active":null,"data-state":M(s),"data-disabled":d?"":void 0,...u,x:s?y(v(r))-y(S(r)):0,ref:o})}));I.displayName=E;const H=x(j,{name:g,tag:"button",variants:{unstyled:{false:{size:"$true",borderRadius:1e3,borderWidth:2,borderColor:"transparent",backgroundColor:"$background",focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":e=>{const o=S(e)+4,t=v(e)+4;return{height:o,minHeight:o,width:t}}}},defaultVariants:{unstyled:!1}}),me=N(H.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,labeledBy:a,name:u,checked:l,defaultChecked:d,required:s,disabled:n,value:r="on",onCheckedChange:p,size:b="$true",unstyled:C=!1,...F}=e,[f,L]=i.useState(null),V=G(o,c=>L(c)),_=X(f),$=a||_,k=i.useRef(!1),z=m?f?Boolean(f.closest("form")):!0:!1,[h=!1,P]=J({prop:l,defaultProp:d||!1,onChange:p,transition:!0});return m||i.useEffect(()=>{if(e.id)return A(e.id,{focus:()=>{P(c=>!c)}})},[e.id,P]),ee(Q,{scope:t,checked:h,disabled:n,size:b,unstyled:C,children:[w(H,{unstyled:C,size:b,role:"switch","aria-checked":h,"aria-labelledby":$,"aria-required":s,"data-state":M(h),"data-disabled":n?"":void 0,disabled:n,theme:h?"active":null,themeShallow:!0,tabIndex:n?void 0:0,value:r,...F,ref:V,onPress:c=>{var T;(T=e.onPress)==null||T.call(e,c),P(W=>!W),m&&z&&(k.current=c.isPropagationStopped(),k.current||c.stopPropagation())}}),m&&z&&w(Z,{control:f,bubbles:!k.current,name:u,value:r,checked:h,required:s,disabled:n,style:{transform:"translateX(-100%)"}})]})})),{Thumb:I}),Z=e=>{const{control:o,checked:t,bubbles:a=!0,...u}=e,l=i.useRef(null),d=q(t);return i.useEffect(()=>{const s=l.current,n=window.HTMLInputElement.prototype,p=Object.getOwnPropertyDescriptor(n,"checked").set;if(d!==t&&p){const b=new Event("click",{bubbles:a});p.call(s,t),s.dispatchEvent(b)}},[d,t,a]),w("input",{type:"checkbox","aria-hidden":!0,defaultChecked:t,...u,tabIndex:-1,ref:l,style:{...e.style,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})};function M(e){return e?"checked":"unchecked"}export{me as Switch,H as SwitchFrame,I as SwitchThumb,R as SwitchThumbFrame,fe as createSwitchScope};
|
|
263
2
|
//# sourceMappingURL=Switch.js.map
|
package/dist/esm/Switch.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Switch.tsx"],
|
|
4
4
|
"sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n SizeTokens,\n getVariableValue,\n isWeb,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n checked: boolean\n disabled?: boolean\n size: SizeTokens\n unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n name: 'SwitchThumb',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n borderRadius: 1000,\n },\n },\n\n size: {\n '...size': (val) => {\n const size = getSwitchHeight(val)\n return {\n height: size,\n width: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n const { __scopeSwitch, size: sizeProp, ...thumbProps } = props\n const {\n size: sizeContext,\n disabled,\n checked,\n unstyled,\n } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n const size = sizeProp ?? sizeContext\n return (\n <SwitchThumbFrame\n unstyled={unstyled}\n size={size}\n theme={checked ? 'active' : null}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...thumbProps}\n x={\n checked\n ? getVariableValue(getSwitchWidth(size)) -\n getVariableValue(getSwitchHeight(size))\n : 0\n }\n ref={forwardedRef}\n />\n )\n }\n )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n name: SWITCH_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n borderRadius: 1000,\n borderWidth: 2,\n borderColor: 'transparent',\n backgroundColor: '$background',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val) => {\n const height = getSwitchHeight(val) + 4\n const width = getSwitchWidth(val) + 4\n return {\n height,\n minHeight: height,\n width,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n labeledBy?: string\n name?: string\n value?: string\n checked?: boolean\n defaultChecked?: boolean\n required?: boolean\n onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n SwitchFrame.extractable(\n React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n const {\n __scopeSwitch,\n labeledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n disabled,\n value = 'on',\n onCheckedChange,\n size = '$true',\n unstyled = false,\n ...switchProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n setButton(node as any)\n )\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked || false,\n onChange: onCheckedChange,\n transition: true,\n })\n\n if (!isWeb) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focus: () => {\n setChecked((x) => !x)\n },\n })\n }, [props.id, setChecked])\n }\n\n return (\n <SwitchProvider\n scope={__scopeSwitch}\n checked={checked}\n disabled={disabled}\n size={size}\n unstyled={unstyled}\n >\n <SwitchFrame\n unstyled={unstyled}\n size={size}\n // @ts-ignore\n role=\"switch\"\n aria-checked={checked}\n aria-labelledby={labelledBy}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n theme={checked ? 'active' : null}\n themeShallow\n // @ts-ignore\n tabIndex={disabled ? undefined : 0}\n // @ts-ignore\n value={value}\n {...switchProps}\n ref={composedRefs}\n onPress={(event) => {\n props.onPress?.(event)\n setChecked((prevChecked) => !prevChecked)\n if (isWeb && isFormControl) {\n hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n // if switch is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect switch updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n }}\n />\n {isWeb && isFormControl && (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={disabled}\n // We transform because the input is absolutely positioned but we have\n // rendered it **after** the button. This pulls it back to sit on top\n // of the button.\n style={{ transform: 'translateX(-100%)' }}\n />\n )}\n </SwitchProvider>\n )\n }\n )\n ),\n {\n Thumb: SwitchThumb,\n }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n const { control, checked, bubbles = true, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n aria-hidden\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n style={{\n ...props.style,\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }}\n />\n )\n}\n\nfunction getState(checked: boolean) {\n return checked ? 'checked' : 'unchecked'\n}\n"],
|
|
5
|
-
"mappings": "AAwFQ,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "jsxs", "usePrevious", "useComposedRefs", "getVariableValue", "isWeb", "styled", "withStaticProperties", "createContextScope", "registerFocusable", "getSize", "useLabelContext", "ThemeableStack", "XStack", "useControllableState", "React", "SWITCH_NAME", "getSwitchHeight", "val", "getSwitchWidth", "scopeContexts", "createSwitchContext", "createSwitchScope", "SwitchProvider", "useSwitchContext", "THUMB_NAME", "SwitchThumbFrame", "size", "SwitchThumb", "props", "forwardedRef", "__scopeSwitch", "sizeProp", "thumbProps", "sizeContext", "disabled", "checked", "unstyled", "getState", "SwitchFrame", "height", "width", "Switch", "ariaLabelledby", "name", "checkedProp", "defaultChecked", "required", "value", "onCheckedChange", "switchProps", "button", "setButton", "composedRefs", "node", "labelId", "labelledBy", "hasConsumerStoppedPropagationRef", "isFormControl", "setChecked", "x", "event", "_a", "prevChecked", "BubbleInput", "control", "bubbles", "inputProps", "ref", "input", "inputProto"]
|
|
7
7
|
}
|
package/dist/esm/Switch.mjs
CHANGED
|
@@ -1,263 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { usePrevious } from "@radix-ui/react-use-previous";
|
|
3
|
-
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
|
-
import {
|
|
5
|
-
getVariableValue,
|
|
6
|
-
isWeb,
|
|
7
|
-
styled,
|
|
8
|
-
withStaticProperties
|
|
9
|
-
} from "@tamagui/core";
|
|
10
|
-
import { createContextScope } from "@tamagui/create-context";
|
|
11
|
-
import { registerFocusable } from "@tamagui/focusable";
|
|
12
|
-
import { getSize } from "@tamagui/get-size";
|
|
13
|
-
import { useLabelContext } from "@tamagui/label";
|
|
14
|
-
import { ThemeableStack, XStack } from "@tamagui/stacks";
|
|
15
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
16
|
-
import * as React from "react";
|
|
17
|
-
const SWITCH_NAME = "Switch";
|
|
18
|
-
const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
|
|
19
|
-
const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
|
|
20
|
-
const scopeContexts = createContextScope(SWITCH_NAME);
|
|
21
|
-
const [createSwitchContext] = scopeContexts;
|
|
22
|
-
const createSwitchScope = scopeContexts[1];
|
|
23
|
-
const [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
|
|
24
|
-
const THUMB_NAME = "SwitchThumb";
|
|
25
|
-
const SwitchThumbFrame = styled(ThemeableStack, {
|
|
26
|
-
name: "SwitchThumb",
|
|
27
|
-
variants: {
|
|
28
|
-
unstyled: {
|
|
29
|
-
false: {
|
|
30
|
-
size: "$true",
|
|
31
|
-
backgroundColor: "$background",
|
|
32
|
-
borderRadius: 1e3
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
size: {
|
|
36
|
-
"...size": (val) => {
|
|
37
|
-
const size = getSwitchHeight(val);
|
|
38
|
-
return {
|
|
39
|
-
height: size,
|
|
40
|
-
width: size
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
defaultVariants: {
|
|
46
|
-
unstyled: false
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
const SwitchThumb = SwitchThumbFrame.extractable(
|
|
50
|
-
React.forwardRef(
|
|
51
|
-
(props, forwardedRef) => {
|
|
52
|
-
const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
|
|
53
|
-
const {
|
|
54
|
-
size: sizeContext,
|
|
55
|
-
disabled,
|
|
56
|
-
checked,
|
|
57
|
-
unstyled
|
|
58
|
-
} = useSwitchContext(THUMB_NAME, __scopeSwitch);
|
|
59
|
-
const size = sizeProp ?? sizeContext;
|
|
60
|
-
return /* @__PURE__ */ jsx(
|
|
61
|
-
SwitchThumbFrame,
|
|
62
|
-
{
|
|
63
|
-
unstyled,
|
|
64
|
-
size,
|
|
65
|
-
theme: checked ? "active" : null,
|
|
66
|
-
"data-state": getState(checked),
|
|
67
|
-
"data-disabled": disabled ? "" : void 0,
|
|
68
|
-
...thumbProps,
|
|
69
|
-
x: checked ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size)) : 0,
|
|
70
|
-
ref: forwardedRef
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
);
|
|
76
|
-
SwitchThumb.displayName = THUMB_NAME;
|
|
77
|
-
const SwitchFrame = styled(XStack, {
|
|
78
|
-
name: SWITCH_NAME,
|
|
79
|
-
tag: "button",
|
|
80
|
-
variants: {
|
|
81
|
-
unstyled: {
|
|
82
|
-
false: {
|
|
83
|
-
size: "$true",
|
|
84
|
-
borderRadius: 1e3,
|
|
85
|
-
borderWidth: 2,
|
|
86
|
-
borderColor: "transparent",
|
|
87
|
-
backgroundColor: "$background",
|
|
88
|
-
focusStyle: {
|
|
89
|
-
borderColor: "$borderColorFocus"
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
size: {
|
|
94
|
-
"...size": (val) => {
|
|
95
|
-
const height = getSwitchHeight(val) + 4;
|
|
96
|
-
const width = getSwitchWidth(val) + 4;
|
|
97
|
-
return {
|
|
98
|
-
height,
|
|
99
|
-
minHeight: height,
|
|
100
|
-
width
|
|
101
|
-
};
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
defaultVariants: {
|
|
106
|
-
unstyled: false
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
const Switch = withStaticProperties(
|
|
110
|
-
SwitchFrame.extractable(
|
|
111
|
-
React.forwardRef(
|
|
112
|
-
(props, forwardedRef) => {
|
|
113
|
-
const {
|
|
114
|
-
__scopeSwitch,
|
|
115
|
-
labeledBy: ariaLabelledby,
|
|
116
|
-
name,
|
|
117
|
-
checked: checkedProp,
|
|
118
|
-
defaultChecked,
|
|
119
|
-
required,
|
|
120
|
-
disabled,
|
|
121
|
-
value = "on",
|
|
122
|
-
onCheckedChange,
|
|
123
|
-
size = "$true",
|
|
124
|
-
unstyled = false,
|
|
125
|
-
...switchProps
|
|
126
|
-
} = props;
|
|
127
|
-
const [button, setButton] = React.useState(null);
|
|
128
|
-
const composedRefs = useComposedRefs(
|
|
129
|
-
forwardedRef,
|
|
130
|
-
(node) => setButton(node)
|
|
131
|
-
);
|
|
132
|
-
const labelId = useLabelContext(button);
|
|
133
|
-
const labelledBy = ariaLabelledby || labelId;
|
|
134
|
-
const hasConsumerStoppedPropagationRef = React.useRef(false);
|
|
135
|
-
const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
|
|
136
|
-
const [checked = false, setChecked] = useControllableState({
|
|
137
|
-
prop: checkedProp,
|
|
138
|
-
defaultProp: defaultChecked || false,
|
|
139
|
-
onChange: onCheckedChange,
|
|
140
|
-
transition: true
|
|
141
|
-
});
|
|
142
|
-
if (!isWeb) {
|
|
143
|
-
React.useEffect(() => {
|
|
144
|
-
if (!props.id)
|
|
145
|
-
return;
|
|
146
|
-
return registerFocusable(props.id, {
|
|
147
|
-
focus: () => {
|
|
148
|
-
setChecked((x) => !x);
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
}, [props.id, setChecked]);
|
|
152
|
-
}
|
|
153
|
-
return /* @__PURE__ */ jsxs(
|
|
154
|
-
SwitchProvider,
|
|
155
|
-
{
|
|
156
|
-
scope: __scopeSwitch,
|
|
157
|
-
checked,
|
|
158
|
-
disabled,
|
|
159
|
-
size,
|
|
160
|
-
unstyled,
|
|
161
|
-
children: [
|
|
162
|
-
/* @__PURE__ */ jsx(
|
|
163
|
-
SwitchFrame,
|
|
164
|
-
{
|
|
165
|
-
unstyled,
|
|
166
|
-
size,
|
|
167
|
-
role: "switch",
|
|
168
|
-
"aria-checked": checked,
|
|
169
|
-
"aria-labelledby": labelledBy,
|
|
170
|
-
"aria-required": required,
|
|
171
|
-
"data-state": getState(checked),
|
|
172
|
-
"data-disabled": disabled ? "" : void 0,
|
|
173
|
-
disabled,
|
|
174
|
-
theme: checked ? "active" : null,
|
|
175
|
-
themeShallow: true,
|
|
176
|
-
tabIndex: disabled ? void 0 : 0,
|
|
177
|
-
value,
|
|
178
|
-
...switchProps,
|
|
179
|
-
ref: composedRefs,
|
|
180
|
-
onPress: (event) => {
|
|
181
|
-
var _a;
|
|
182
|
-
(_a = props.onPress) == null ? void 0 : _a.call(props, event);
|
|
183
|
-
setChecked((prevChecked) => !prevChecked);
|
|
184
|
-
if (isWeb && isFormControl) {
|
|
185
|
-
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
|
|
186
|
-
if (!hasConsumerStoppedPropagationRef.current)
|
|
187
|
-
event.stopPropagation();
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
),
|
|
192
|
-
isWeb && isFormControl && /* @__PURE__ */ jsx(
|
|
193
|
-
BubbleInput,
|
|
194
|
-
{
|
|
195
|
-
control: button,
|
|
196
|
-
bubbles: !hasConsumerStoppedPropagationRef.current,
|
|
197
|
-
name,
|
|
198
|
-
value,
|
|
199
|
-
checked,
|
|
200
|
-
required,
|
|
201
|
-
disabled,
|
|
202
|
-
style: { transform: "translateX(-100%)" }
|
|
203
|
-
}
|
|
204
|
-
)
|
|
205
|
-
]
|
|
206
|
-
}
|
|
207
|
-
);
|
|
208
|
-
}
|
|
209
|
-
)
|
|
210
|
-
),
|
|
211
|
-
{
|
|
212
|
-
Thumb: SwitchThumb
|
|
213
|
-
}
|
|
214
|
-
);
|
|
215
|
-
const BubbleInput = (props) => {
|
|
216
|
-
const { control, checked, bubbles = true, ...inputProps } = props;
|
|
217
|
-
const ref = React.useRef(null);
|
|
218
|
-
const prevChecked = usePrevious(checked);
|
|
219
|
-
React.useEffect(() => {
|
|
220
|
-
const input = ref.current;
|
|
221
|
-
const inputProto = window.HTMLInputElement.prototype;
|
|
222
|
-
const descriptor = Object.getOwnPropertyDescriptor(
|
|
223
|
-
inputProto,
|
|
224
|
-
"checked"
|
|
225
|
-
);
|
|
226
|
-
const setChecked = descriptor.set;
|
|
227
|
-
if (prevChecked !== checked && setChecked) {
|
|
228
|
-
const event = new Event("click", { bubbles });
|
|
229
|
-
setChecked.call(input, checked);
|
|
230
|
-
input.dispatchEvent(event);
|
|
231
|
-
}
|
|
232
|
-
}, [prevChecked, checked, bubbles]);
|
|
233
|
-
return /* @__PURE__ */ jsx(
|
|
234
|
-
"input",
|
|
235
|
-
{
|
|
236
|
-
type: "checkbox",
|
|
237
|
-
"aria-hidden": true,
|
|
238
|
-
defaultChecked: checked,
|
|
239
|
-
...inputProps,
|
|
240
|
-
tabIndex: -1,
|
|
241
|
-
ref,
|
|
242
|
-
style: {
|
|
243
|
-
...props.style,
|
|
244
|
-
// ...controlSize,
|
|
245
|
-
position: "absolute",
|
|
246
|
-
pointerEvents: "none",
|
|
247
|
-
opacity: 0,
|
|
248
|
-
margin: 0
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
);
|
|
252
|
-
};
|
|
253
|
-
function getState(checked) {
|
|
254
|
-
return checked ? "checked" : "unchecked";
|
|
255
|
-
}
|
|
256
|
-
export {
|
|
257
|
-
Switch,
|
|
258
|
-
SwitchFrame,
|
|
259
|
-
SwitchThumb,
|
|
260
|
-
SwitchThumbFrame,
|
|
261
|
-
createSwitchScope
|
|
262
|
-
};
|
|
1
|
+
import{jsx as w,jsxs as ee}from"react/jsx-runtime";import{usePrevious as q}from"@radix-ui/react-use-previous";import{useComposedRefs as G}from"@tamagui/compose-refs";import{getVariableValue as y,isWeb as m,styled as x,withStaticProperties as N}from"@tamagui/core";import{createContextScope as O}from"@tamagui/create-context";import{registerFocusable as A}from"@tamagui/focusable";import{getSize as D}from"@tamagui/get-size";import{useLabelContext as X}from"@tamagui/label";import{ThemeableStack as U,XStack as j}from"@tamagui/stacks";import{useControllableState as J}from"@tamagui/use-controllable-state";import*as i from"react";const g="Switch",S=e=>Math.round(y(D(e))*.65),v=e=>S(e)*2,B=O(g),[K]=B,fe=B[1],[Q,Y]=K(g),E="SwitchThumb",R=x(U,{name:"SwitchThumb",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",borderRadius:1e3}},size:{"...size":e=>{const o=S(e);return{height:o,width:o}}}},defaultVariants:{unstyled:!1}}),I=R.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,size:a,...u}=e,{size:l,disabled:d,checked:s,unstyled:n}=Y(E,t),r=a??l;return w(R,{unstyled:n,size:r,theme:s?"active":null,"data-state":M(s),"data-disabled":d?"":void 0,...u,x:s?y(v(r))-y(S(r)):0,ref:o})}));I.displayName=E;const H=x(j,{name:g,tag:"button",variants:{unstyled:{false:{size:"$true",borderRadius:1e3,borderWidth:2,borderColor:"transparent",backgroundColor:"$background",focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":e=>{const o=S(e)+4,t=v(e)+4;return{height:o,minHeight:o,width:t}}}},defaultVariants:{unstyled:!1}}),me=N(H.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,labeledBy:a,name:u,checked:l,defaultChecked:d,required:s,disabled:n,value:r="on",onCheckedChange:p,size:b="$true",unstyled:C=!1,...F}=e,[f,L]=i.useState(null),V=G(o,c=>L(c)),_=X(f),$=a||_,k=i.useRef(!1),z=m?f?Boolean(f.closest("form")):!0:!1,[h=!1,P]=J({prop:l,defaultProp:d||!1,onChange:p,transition:!0});return m||i.useEffect(()=>{if(e.id)return A(e.id,{focus:()=>{P(c=>!c)}})},[e.id,P]),ee(Q,{scope:t,checked:h,disabled:n,size:b,unstyled:C,children:[w(H,{unstyled:C,size:b,role:"switch","aria-checked":h,"aria-labelledby":$,"aria-required":s,"data-state":M(h),"data-disabled":n?"":void 0,disabled:n,theme:h?"active":null,themeShallow:!0,tabIndex:n?void 0:0,value:r,...F,ref:V,onPress:c=>{var T;(T=e.onPress)==null||T.call(e,c),P(W=>!W),m&&z&&(k.current=c.isPropagationStopped(),k.current||c.stopPropagation())}}),m&&z&&w(Z,{control:f,bubbles:!k.current,name:u,value:r,checked:h,required:s,disabled:n,style:{transform:"translateX(-100%)"}})]})})),{Thumb:I}),Z=e=>{const{control:o,checked:t,bubbles:a=!0,...u}=e,l=i.useRef(null),d=q(t);return i.useEffect(()=>{const s=l.current,n=window.HTMLInputElement.prototype,p=Object.getOwnPropertyDescriptor(n,"checked").set;if(d!==t&&p){const b=new Event("click",{bubbles:a});p.call(s,t),s.dispatchEvent(b)}},[d,t,a]),w("input",{type:"checkbox","aria-hidden":!0,defaultChecked:t,...u,tabIndex:-1,ref:l,style:{...e.style,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})};function M(e){return e?"checked":"unchecked"}export{me as Switch,H as SwitchFrame,I as SwitchThumb,R as SwitchThumbFrame,fe as createSwitchScope};
|
|
263
2
|
//# sourceMappingURL=Switch.mjs.map
|