@tamagui/switch 2.0.0-rc.3 → 2.0.0-rc.30
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.js +24 -17
- package/dist/esm/index.js +8 -11
- package/dist/esm/index.js.map +1 -6
- package/dist/jsx/index.js +8 -11
- package/dist/jsx/index.js.map +1 -6
- package/package.json +17 -20
- package/types/createSwitch.d.ts +4 -4
- package/types/index.d.ts +4 -4
- package/dist/cjs/StyledContext.js +0 -28
- package/dist/cjs/StyledContext.js.map +0 -6
- package/dist/cjs/Switch.js +0 -93
- package/dist/cjs/Switch.js.map +0 -6
- package/dist/cjs/createSwitch.js +0 -146
- package/dist/cjs/createSwitch.js.map +0 -6
- package/dist/cjs/types.js +0 -14
- package/dist/cjs/types.js.map +0 -6
- package/dist/cjs/useSwitchNative.js +0 -23
- package/dist/cjs/useSwitchNative.js.map +0 -6
- package/dist/esm/StyledContext.js +0 -12
- package/dist/esm/StyledContext.js.map +0 -6
- package/dist/esm/Switch.js +0 -79
- package/dist/esm/Switch.js.map +0 -6
- package/dist/esm/createSwitch.js +0 -135
- package/dist/esm/createSwitch.js.map +0 -6
- package/dist/esm/types.js +0 -1
- package/dist/esm/types.js.map +0 -6
- package/dist/esm/useSwitchNative.js +0 -7
- package/dist/esm/useSwitchNative.js.map +0 -6
- package/dist/jsx/StyledContext.js +0 -12
- package/dist/jsx/StyledContext.js.map +0 -6
- package/dist/jsx/Switch.js +0 -79
- package/dist/jsx/Switch.js.map +0 -6
- package/dist/jsx/createSwitch.js +0 -135
- package/dist/jsx/createSwitch.js.map +0 -6
- package/dist/jsx/types.js +0 -1
- package/dist/jsx/types.js.map +0 -6
- package/dist/jsx/useSwitchNative.js +0 -7
- package/dist/jsx/useSwitchNative.js.map +0 -6
package/dist/esm/Switch.js
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { getVariableValue, styled } from "@tamagui/core";
|
|
2
|
-
import { getSize } from "@tamagui/get-token";
|
|
3
|
-
import { YStack } from "@tamagui/stacks";
|
|
4
|
-
const SwitchThumb = styled(
|
|
5
|
-
YStack,
|
|
6
|
-
{
|
|
7
|
-
name: "SwitchThumb",
|
|
8
|
-
variants: {
|
|
9
|
-
unstyled: {
|
|
10
|
-
false: {
|
|
11
|
-
size: "$true",
|
|
12
|
-
backgroundColor: "$background",
|
|
13
|
-
borderRadius: 1e3
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
size: {
|
|
17
|
-
"...size": (val) => {
|
|
18
|
-
const size = getSwitchHeight(val);
|
|
19
|
-
return {
|
|
20
|
-
height: size,
|
|
21
|
-
width: size
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
accept: {
|
|
32
|
-
activeStyle: "style"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
), getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65), getSwitchWidth = (val) => getSwitchHeight(val) * 2, SwitchFrame = styled(
|
|
36
|
-
YStack,
|
|
37
|
-
{
|
|
38
|
-
name: "Switch",
|
|
39
|
-
render: "button",
|
|
40
|
-
tabIndex: 0,
|
|
41
|
-
variants: {
|
|
42
|
-
unstyled: {
|
|
43
|
-
false: {
|
|
44
|
-
borderRadius: 1e3,
|
|
45
|
-
backgroundColor: "$background",
|
|
46
|
-
focusVisibleStyle: {
|
|
47
|
-
outlineColor: "$outlineColor",
|
|
48
|
-
outlineStyle: "solid",
|
|
49
|
-
outlineWidth: 2
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
size: {
|
|
54
|
-
"...size": (val, { props }) => {
|
|
55
|
-
if (props.unstyled) return;
|
|
56
|
-
const height = getSwitchHeight(val), width = getSwitchWidth(val);
|
|
57
|
-
return {
|
|
58
|
-
height,
|
|
59
|
-
minHeight: height,
|
|
60
|
-
width
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
defaultVariants: {
|
|
66
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
accept: {
|
|
71
|
-
activeStyle: "style"
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
);
|
|
75
|
-
export {
|
|
76
|
-
SwitchFrame,
|
|
77
|
-
SwitchThumb
|
|
78
|
-
};
|
|
79
|
-
//# sourceMappingURL=Switch.js.map
|
package/dist/esm/Switch.js.map
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/Switch.tsx"],
|
|
4
|
-
"mappings": "AACA,SAAS,kBAAkB,cAAc;AACzC,SAAS,eAAe;AACxB,SAAS,cAAc;AAEhB,MAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,UACL,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW,CAAC,QAAQ;AAClB,gBAAM,OAAO,gBAAgB,GAAG;AAChC,iBAAO;AAAA,YACL,QAAQ;AAAA,YACR,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,IAC7C;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF,GAEM,kBAAkB,CAAC,QACvB,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,IAAI,GAE5C,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI,GAEtD,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IAEV,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,iBAAiB;AAAA,UAEjB,mBAAmB;AAAA,YACjB,cAAc;AAAA,YACd,cAAc;AAAA,YACd,cAAc;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW,CAAC,KAAK,EAAE,MAAM,MAAM;AAC7B,cAAI,MAAM,SAAa;AACvB,gBAAM,SAAS,gBAAgB,GAAG,GAC5B,QAAQ,eAAe,GAAG;AAChC,iBAAO;AAAA,YACL;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,IAC7C;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
package/dist/esm/createSwitch.js
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
composeEventHandlers,
|
|
3
|
-
getVariableValue,
|
|
4
|
-
isWeb,
|
|
5
|
-
View,
|
|
6
|
-
withStaticProperties
|
|
7
|
-
} from "@tamagui/core";
|
|
8
|
-
import { useSwitch } from "@tamagui/switch-headless";
|
|
9
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
10
|
-
import * as React from "react";
|
|
11
|
-
import { SwitchStyledContext } from "./StyledContext";
|
|
12
|
-
import { SwitchFrame as DefaultSwitchFrame, SwitchThumb } from "./Switch";
|
|
13
|
-
import { useSwitchNative } from "./useSwitchNative";
|
|
14
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
function createSwitch(createProps) {
|
|
16
|
-
const { Frame = DefaultSwitchFrame, Thumb = SwitchThumb } = createProps;
|
|
17
|
-
process.env.NODE_ENV === "development" && (Frame !== DefaultSwitchFrame && Frame.staticConfig.context && Frame.staticConfig.context !== SwitchStyledContext || Thumb !== SwitchThumb && Thumb.staticConfig.context && Thumb.staticConfig.context !== SwitchStyledContext) && console.warn(
|
|
18
|
-
"Warning: createSwitch() needs to control context to pass checked state from Frame to Thumb, any custom context passed will be overridden."
|
|
19
|
-
), Frame.staticConfig.context = SwitchStyledContext, Thumb.staticConfig.context = SwitchStyledContext;
|
|
20
|
-
const SwitchThumbComponent = Thumb.styleable(
|
|
21
|
-
function(props, forwardedRef) {
|
|
22
|
-
const { size: sizeProp, unstyled: unstyledProp, activeStyle, ...thumbProps } = props, styledContext = SwitchStyledContext.useStyledContext(), {
|
|
23
|
-
unstyled: unstyledContext,
|
|
24
|
-
size: sizeContext,
|
|
25
|
-
active,
|
|
26
|
-
disabled,
|
|
27
|
-
frameWidth = 0
|
|
28
|
-
} = styledContext, unstyled = process.env.TAMAGUI_HEADLESS === "1" ? !0 : unstyledProp ?? unstyledContext ?? !1, size = sizeProp ?? sizeContext ?? "$true", initialChecked = React.useRef(active).current, initialWidth = getVariableValue(props.width || size, "size"), [thumbWidth, setThumbWidth] = React.useState(
|
|
29
|
-
typeof initialWidth == "number" ? initialWidth : 0
|
|
30
|
-
), distance = frameWidth - thumbWidth, x = initialChecked ? active ? 0 : -distance : active ? distance : 0;
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
32
|
-
Thumb,
|
|
33
|
-
{
|
|
34
|
-
ref: forwardedRef,
|
|
35
|
-
unstyled,
|
|
36
|
-
...unstyled === !1 && {
|
|
37
|
-
size
|
|
38
|
-
},
|
|
39
|
-
alignSelf: initialChecked ? "flex-end" : "flex-start",
|
|
40
|
-
x,
|
|
41
|
-
onLayout: composeEventHandlers(props.onLayout, (e) => {
|
|
42
|
-
const next = e.nativeEvent.layout.width;
|
|
43
|
-
setThumbWidth(next);
|
|
44
|
-
}),
|
|
45
|
-
disabled,
|
|
46
|
-
...thumbProps,
|
|
47
|
-
...active && activeStyle
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
), SwitchComponent = Frame.styleable(
|
|
52
|
-
function(_props, forwardedRef) {
|
|
53
|
-
const {
|
|
54
|
-
native,
|
|
55
|
-
nativeProps,
|
|
56
|
-
checked: checkedProp,
|
|
57
|
-
defaultChecked,
|
|
58
|
-
onCheckedChange,
|
|
59
|
-
activeStyle,
|
|
60
|
-
unstyled: unstyledProp,
|
|
61
|
-
activeTheme: activeThemeProp,
|
|
62
|
-
...props
|
|
63
|
-
} = _props, [checked, setChecked] = useControllableState({
|
|
64
|
-
prop: checkedProp,
|
|
65
|
-
defaultProp: defaultChecked || !1,
|
|
66
|
-
onChange: onCheckedChange,
|
|
67
|
-
transition: !0
|
|
68
|
-
}), styledContext = React.useContext(SwitchStyledContext.context), [frameWidth, setFrameInnerWidth] = React.useState(0), { switchProps, bubbleInput, switchRef } = useSwitch(
|
|
69
|
-
props,
|
|
70
|
-
[checked, setChecked],
|
|
71
|
-
// @ts-ignore TODO tamagui react 19 type error
|
|
72
|
-
forwardedRef
|
|
73
|
-
), nativeSwitch = useSwitchNative({
|
|
74
|
-
id: props.id,
|
|
75
|
-
disabled: props.disabled,
|
|
76
|
-
native,
|
|
77
|
-
nativeProps,
|
|
78
|
-
checked,
|
|
79
|
-
setChecked
|
|
80
|
-
});
|
|
81
|
-
if (nativeSwitch)
|
|
82
|
-
return nativeSwitch;
|
|
83
|
-
const disabled = props.disabled, handleLayout = (e) => {
|
|
84
|
-
const next = e.nativeEvent.layout.width;
|
|
85
|
-
next !== frameWidth && setFrameInnerWidth(next);
|
|
86
|
-
}, unstyled = styledContext.unstyled ?? unstyledProp ?? !1;
|
|
87
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
88
|
-
/* @__PURE__ */ jsx(
|
|
89
|
-
SwitchStyledContext.Provider,
|
|
90
|
-
{
|
|
91
|
-
size: styledContext.size ?? props.size ?? "$true",
|
|
92
|
-
unstyled,
|
|
93
|
-
active: checked,
|
|
94
|
-
disabled,
|
|
95
|
-
frameWidth,
|
|
96
|
-
children: /* @__PURE__ */ jsx(
|
|
97
|
-
Frame,
|
|
98
|
-
{
|
|
99
|
-
ref: switchRef,
|
|
100
|
-
render: "button",
|
|
101
|
-
theme: activeThemeProp ?? null,
|
|
102
|
-
...isWeb && { type: "button" },
|
|
103
|
-
...!unstyled && {
|
|
104
|
-
size: styledContext.size ?? props.size ?? "$true"
|
|
105
|
-
},
|
|
106
|
-
unstyled,
|
|
107
|
-
...props,
|
|
108
|
-
...switchProps,
|
|
109
|
-
disabled,
|
|
110
|
-
...checked && {
|
|
111
|
-
...!unstyled && !activeStyle && {
|
|
112
|
-
backgroundColor: "$backgroundActive"
|
|
113
|
-
},
|
|
114
|
-
...activeStyle
|
|
115
|
-
},
|
|
116
|
-
children: /* @__PURE__ */ jsx(View, { alignSelf: "stretch", flex: 1, onLayout: handleLayout, children: props.children })
|
|
117
|
-
}
|
|
118
|
-
)
|
|
119
|
-
}
|
|
120
|
-
),
|
|
121
|
-
bubbleInput
|
|
122
|
-
] });
|
|
123
|
-
},
|
|
124
|
-
{
|
|
125
|
-
disableTheme: !0
|
|
126
|
-
}
|
|
127
|
-
);
|
|
128
|
-
return withStaticProperties(SwitchComponent, {
|
|
129
|
-
Thumb: SwitchThumbComponent
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
export {
|
|
133
|
-
createSwitch
|
|
134
|
-
};
|
|
135
|
-
//# sourceMappingURL=createSwitch.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/createSwitch.tsx"],
|
|
4
|
-
"mappings": "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",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
package/dist/esm/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
package/dist/esm/types.js.map
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { createStyledContext } from "@tamagui/core";
|
|
2
|
-
const SwitchStyledContext = createStyledContext({
|
|
3
|
-
active: !1,
|
|
4
|
-
disabled: !1,
|
|
5
|
-
frameWidth: void 0,
|
|
6
|
-
size: void 0,
|
|
7
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
8
|
-
});
|
|
9
|
-
export {
|
|
10
|
-
SwitchStyledContext
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=StyledContext.js.map
|
package/dist/jsx/Switch.js
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { getVariableValue, styled } from "@tamagui/core";
|
|
2
|
-
import { getSize } from "@tamagui/get-token";
|
|
3
|
-
import { YStack } from "@tamagui/stacks";
|
|
4
|
-
const SwitchThumb = styled(
|
|
5
|
-
YStack,
|
|
6
|
-
{
|
|
7
|
-
name: "SwitchThumb",
|
|
8
|
-
variants: {
|
|
9
|
-
unstyled: {
|
|
10
|
-
false: {
|
|
11
|
-
size: "$true",
|
|
12
|
-
backgroundColor: "$background",
|
|
13
|
-
borderRadius: 1e3
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
size: {
|
|
17
|
-
"...size": (val) => {
|
|
18
|
-
const size = getSwitchHeight(val);
|
|
19
|
-
return {
|
|
20
|
-
height: size,
|
|
21
|
-
width: size
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
accept: {
|
|
32
|
-
activeStyle: "style"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
), getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65), getSwitchWidth = (val) => getSwitchHeight(val) * 2, SwitchFrame = styled(
|
|
36
|
-
YStack,
|
|
37
|
-
{
|
|
38
|
-
name: "Switch",
|
|
39
|
-
render: "button",
|
|
40
|
-
tabIndex: 0,
|
|
41
|
-
variants: {
|
|
42
|
-
unstyled: {
|
|
43
|
-
false: {
|
|
44
|
-
borderRadius: 1e3,
|
|
45
|
-
backgroundColor: "$background",
|
|
46
|
-
focusVisibleStyle: {
|
|
47
|
-
outlineColor: "$outlineColor",
|
|
48
|
-
outlineStyle: "solid",
|
|
49
|
-
outlineWidth: 2
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
size: {
|
|
54
|
-
"...size": (val, { props }) => {
|
|
55
|
-
if (props.unstyled) return;
|
|
56
|
-
const height = getSwitchHeight(val), width = getSwitchWidth(val);
|
|
57
|
-
return {
|
|
58
|
-
height,
|
|
59
|
-
minHeight: height,
|
|
60
|
-
width
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
defaultVariants: {
|
|
66
|
-
unstyled: process.env.TAMAGUI_HEADLESS === "1"
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
accept: {
|
|
71
|
-
activeStyle: "style"
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
);
|
|
75
|
-
export {
|
|
76
|
-
SwitchFrame,
|
|
77
|
-
SwitchThumb
|
|
78
|
-
};
|
|
79
|
-
//# sourceMappingURL=Switch.js.map
|
package/dist/jsx/Switch.js.map
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/Switch.tsx"],
|
|
4
|
-
"mappings": "AACA,SAAS,kBAAkB,cAAc;AACzC,SAAS,eAAe;AACxB,SAAS,cAAc;AAEhB,MAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IAEN,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,UACL,MAAM;AAAA,UACN,iBAAiB;AAAA,UACjB,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW,CAAC,QAAQ;AAClB,gBAAM,OAAO,gBAAgB,GAAG;AAChC,iBAAO;AAAA,YACL,QAAQ;AAAA,YACR,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,IAC7C;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF,GAEM,kBAAkB,CAAC,QACvB,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,IAAI,GAE5C,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI,GAEtD,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IAEV,UAAU;AAAA,MACR,UAAU;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,iBAAiB;AAAA,UAEjB,mBAAmB;AAAA,YACjB,cAAc;AAAA,YACd,cAAc;AAAA,YACd,cAAc;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,WAAW,CAAC,KAAK,EAAE,MAAM,MAAM;AAC7B,cAAI,MAAM,SAAa;AACvB,gBAAM,SAAS,gBAAgB,GAAG,GAC5B,QAAQ,eAAe,GAAG;AAChC,iBAAO;AAAA,YACL;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,iBAAiB;AAAA,MACf,UAAU,QAAQ,IAAI,qBAAqB;AAAA,IAC7C;AAAA,EACF;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AACF;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
package/dist/jsx/createSwitch.js
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
composeEventHandlers,
|
|
3
|
-
getVariableValue,
|
|
4
|
-
isWeb,
|
|
5
|
-
View,
|
|
6
|
-
withStaticProperties
|
|
7
|
-
} from "@tamagui/core";
|
|
8
|
-
import { useSwitch } from "@tamagui/switch-headless";
|
|
9
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
10
|
-
import * as React from "react";
|
|
11
|
-
import { SwitchStyledContext } from "./StyledContext";
|
|
12
|
-
import { SwitchFrame as DefaultSwitchFrame, SwitchThumb } from "./Switch";
|
|
13
|
-
import { useSwitchNative } from "./useSwitchNative";
|
|
14
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
-
function createSwitch(createProps) {
|
|
16
|
-
const { Frame = DefaultSwitchFrame, Thumb = SwitchThumb } = createProps;
|
|
17
|
-
process.env.NODE_ENV === "development" && (Frame !== DefaultSwitchFrame && Frame.staticConfig.context && Frame.staticConfig.context !== SwitchStyledContext || Thumb !== SwitchThumb && Thumb.staticConfig.context && Thumb.staticConfig.context !== SwitchStyledContext) && console.warn(
|
|
18
|
-
"Warning: createSwitch() needs to control context to pass checked state from Frame to Thumb, any custom context passed will be overridden."
|
|
19
|
-
), Frame.staticConfig.context = SwitchStyledContext, Thumb.staticConfig.context = SwitchStyledContext;
|
|
20
|
-
const SwitchThumbComponent = Thumb.styleable(
|
|
21
|
-
function(props, forwardedRef) {
|
|
22
|
-
const { size: sizeProp, unstyled: unstyledProp, activeStyle, ...thumbProps } = props, styledContext = SwitchStyledContext.useStyledContext(), {
|
|
23
|
-
unstyled: unstyledContext,
|
|
24
|
-
size: sizeContext,
|
|
25
|
-
active,
|
|
26
|
-
disabled,
|
|
27
|
-
frameWidth = 0
|
|
28
|
-
} = styledContext, unstyled = process.env.TAMAGUI_HEADLESS === "1" ? !0 : unstyledProp ?? unstyledContext ?? !1, size = sizeProp ?? sizeContext ?? "$true", initialChecked = React.useRef(active).current, initialWidth = getVariableValue(props.width || size, "size"), [thumbWidth, setThumbWidth] = React.useState(
|
|
29
|
-
typeof initialWidth == "number" ? initialWidth : 0
|
|
30
|
-
), distance = frameWidth - thumbWidth, x = initialChecked ? active ? 0 : -distance : active ? distance : 0;
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
32
|
-
Thumb,
|
|
33
|
-
{
|
|
34
|
-
ref: forwardedRef,
|
|
35
|
-
unstyled,
|
|
36
|
-
...unstyled === !1 && {
|
|
37
|
-
size
|
|
38
|
-
},
|
|
39
|
-
alignSelf: initialChecked ? "flex-end" : "flex-start",
|
|
40
|
-
x,
|
|
41
|
-
onLayout: composeEventHandlers(props.onLayout, (e) => {
|
|
42
|
-
const next = e.nativeEvent.layout.width;
|
|
43
|
-
setThumbWidth(next);
|
|
44
|
-
}),
|
|
45
|
-
disabled,
|
|
46
|
-
...thumbProps,
|
|
47
|
-
...active && activeStyle
|
|
48
|
-
}
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
), SwitchComponent = Frame.styleable(
|
|
52
|
-
function(_props, forwardedRef) {
|
|
53
|
-
const {
|
|
54
|
-
native,
|
|
55
|
-
nativeProps,
|
|
56
|
-
checked: checkedProp,
|
|
57
|
-
defaultChecked,
|
|
58
|
-
onCheckedChange,
|
|
59
|
-
activeStyle,
|
|
60
|
-
unstyled: unstyledProp,
|
|
61
|
-
activeTheme: activeThemeProp,
|
|
62
|
-
...props
|
|
63
|
-
} = _props, [checked, setChecked] = useControllableState({
|
|
64
|
-
prop: checkedProp,
|
|
65
|
-
defaultProp: defaultChecked || !1,
|
|
66
|
-
onChange: onCheckedChange,
|
|
67
|
-
transition: !0
|
|
68
|
-
}), styledContext = React.useContext(SwitchStyledContext.context), [frameWidth, setFrameInnerWidth] = React.useState(0), { switchProps, bubbleInput, switchRef } = useSwitch(
|
|
69
|
-
props,
|
|
70
|
-
[checked, setChecked],
|
|
71
|
-
// @ts-ignore TODO tamagui react 19 type error
|
|
72
|
-
forwardedRef
|
|
73
|
-
), nativeSwitch = useSwitchNative({
|
|
74
|
-
id: props.id,
|
|
75
|
-
disabled: props.disabled,
|
|
76
|
-
native,
|
|
77
|
-
nativeProps,
|
|
78
|
-
checked,
|
|
79
|
-
setChecked
|
|
80
|
-
});
|
|
81
|
-
if (nativeSwitch)
|
|
82
|
-
return nativeSwitch;
|
|
83
|
-
const disabled = props.disabled, handleLayout = (e) => {
|
|
84
|
-
const next = e.nativeEvent.layout.width;
|
|
85
|
-
next !== frameWidth && setFrameInnerWidth(next);
|
|
86
|
-
}, unstyled = styledContext.unstyled ?? unstyledProp ?? !1;
|
|
87
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
88
|
-
/* @__PURE__ */ jsx(
|
|
89
|
-
SwitchStyledContext.Provider,
|
|
90
|
-
{
|
|
91
|
-
size: styledContext.size ?? props.size ?? "$true",
|
|
92
|
-
unstyled,
|
|
93
|
-
active: checked,
|
|
94
|
-
disabled,
|
|
95
|
-
frameWidth,
|
|
96
|
-
children: /* @__PURE__ */ jsx(
|
|
97
|
-
Frame,
|
|
98
|
-
{
|
|
99
|
-
ref: switchRef,
|
|
100
|
-
render: "button",
|
|
101
|
-
theme: activeThemeProp ?? null,
|
|
102
|
-
...isWeb && { type: "button" },
|
|
103
|
-
...!unstyled && {
|
|
104
|
-
size: styledContext.size ?? props.size ?? "$true"
|
|
105
|
-
},
|
|
106
|
-
unstyled,
|
|
107
|
-
...props,
|
|
108
|
-
...switchProps,
|
|
109
|
-
disabled,
|
|
110
|
-
...checked && {
|
|
111
|
-
...!unstyled && !activeStyle && {
|
|
112
|
-
backgroundColor: "$backgroundActive"
|
|
113
|
-
},
|
|
114
|
-
...activeStyle
|
|
115
|
-
},
|
|
116
|
-
children: /* @__PURE__ */ jsx(View, { alignSelf: "stretch", flex: 1, onLayout: handleLayout, children: props.children })
|
|
117
|
-
}
|
|
118
|
-
)
|
|
119
|
-
}
|
|
120
|
-
),
|
|
121
|
-
bubbleInput
|
|
122
|
-
] });
|
|
123
|
-
},
|
|
124
|
-
{
|
|
125
|
-
disableTheme: !0
|
|
126
|
-
}
|
|
127
|
-
);
|
|
128
|
-
return withStaticProperties(SwitchComponent, {
|
|
129
|
-
Thumb: SwitchThumbComponent
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
export {
|
|
133
|
-
createSwitch
|
|
134
|
-
};
|
|
135
|
-
//# sourceMappingURL=createSwitch.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/createSwitch.tsx"],
|
|
4
|
-
"mappings": "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",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
package/dist/jsx/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
package/dist/jsx/types.js.map
DELETED