@tamagui/toggle-group 1.13.3 → 1.14.0
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/Toggle.js +1 -130
- package/dist/cjs/Toggle.js.map +2 -2
- package/dist/cjs/ToggleGroup.js +1 -341
- package/dist/cjs/ToggleGroup.js.map +2 -2
- package/dist/cjs/index.js +1 -18
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Toggle.js +1 -95
- package/dist/esm/Toggle.js.map +2 -2
- package/dist/esm/Toggle.mjs +1 -95
- package/dist/esm/Toggle.mjs.map +2 -2
- package/dist/esm/ToggleGroup.js +1 -312
- package/dist/esm/ToggleGroup.js.map +2 -2
- package/dist/esm/ToggleGroup.mjs +1 -312
- package/dist/esm/ToggleGroup.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/Toggle.js +1 -91
- package/dist/jsx/Toggle.js.map +2 -2
- package/dist/jsx/Toggle.mjs +1 -91
- package/dist/jsx/Toggle.mjs.map +2 -2
- package/dist/jsx/ToggleGroup.js +1 -278
- package/dist/jsx/ToggleGroup.js.map +2 -2
- package/dist/jsx/ToggleGroup.mjs +1 -278
- package/dist/jsx/ToggleGroup.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 +13 -13
package/dist/jsx/Toggle.js
CHANGED
|
@@ -1,92 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
3
|
-
import { Theme, composeEventHandlers, styled } from "@tamagui/web";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
const NAME = "Toggle";
|
|
6
|
-
const ToggleFrame = styled(ThemeableStack, {
|
|
7
|
-
name: NAME,
|
|
8
|
-
tag: "button",
|
|
9
|
-
variants: {
|
|
10
|
-
unstyled: {
|
|
11
|
-
false: {
|
|
12
|
-
pressTheme: true,
|
|
13
|
-
backgroundColor: "$background",
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
justifyContent: "center",
|
|
16
|
-
display: "flex",
|
|
17
|
-
borderColor: "$borderColor",
|
|
18
|
-
borderWidth: "1px",
|
|
19
|
-
margin: "-1px",
|
|
20
|
-
hoverStyle: {
|
|
21
|
-
backgroundColor: "$backgroundHover"
|
|
22
|
-
},
|
|
23
|
-
pressStyle: {
|
|
24
|
-
backgroundColor: "$backgroundPress"
|
|
25
|
-
},
|
|
26
|
-
focusStyle: {
|
|
27
|
-
borderColor: "$borderColorPress",
|
|
28
|
-
backgroundColor: "$backgroundPress"
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
active: {
|
|
33
|
-
true: {
|
|
34
|
-
zIndex: 1,
|
|
35
|
-
hoverStyle: {
|
|
36
|
-
backgroundColor: "$background"
|
|
37
|
-
},
|
|
38
|
-
focusStyle: {
|
|
39
|
-
borderColor: "$borderColorPress",
|
|
40
|
-
backgroundColor: "$backgroundPress"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
orientation: {
|
|
45
|
-
horizontal: {
|
|
46
|
-
flexDirection: "row",
|
|
47
|
-
spaceDirection: "horizontal"
|
|
48
|
-
},
|
|
49
|
-
vertical: {
|
|
50
|
-
flexDirection: "column",
|
|
51
|
-
spaceDirection: "vertical"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
defaultVariants: {
|
|
56
|
-
unstyled: false
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
const Toggle = ToggleFrame.extractable(
|
|
60
|
-
React.forwardRef((props, forwardedRef) => {
|
|
61
|
-
const {
|
|
62
|
-
pressed: pressedProp,
|
|
63
|
-
defaultPressed = false,
|
|
64
|
-
onPressedChange,
|
|
65
|
-
...buttonProps
|
|
66
|
-
} = props;
|
|
67
|
-
const [pressed = false, setPressed] = useControllableState({
|
|
68
|
-
prop: pressedProp,
|
|
69
|
-
onChange: onPressedChange,
|
|
70
|
-
defaultProp: defaultPressed
|
|
71
|
-
});
|
|
72
|
-
return <Theme forceClassName name={pressed ? "active" : null}><ToggleFrame
|
|
73
|
-
active={!props.unstyled ? pressed : void 0}
|
|
74
|
-
aria-pressed={pressed}
|
|
75
|
-
data-state={pressed ? "on" : "off"}
|
|
76
|
-
data-disabled={props.disabled ? "" : void 0}
|
|
77
|
-
{...buttonProps}
|
|
78
|
-
ref={forwardedRef}
|
|
79
|
-
onPress={composeEventHandlers(props.onPress ?? void 0, (event) => {
|
|
80
|
-
if (!props.disabled) {
|
|
81
|
-
setPressed(!pressed);
|
|
82
|
-
}
|
|
83
|
-
})}
|
|
84
|
-
/></Theme>;
|
|
85
|
-
})
|
|
86
|
-
);
|
|
87
|
-
Toggle.displayName = NAME;
|
|
88
|
-
export {
|
|
89
|
-
Toggle,
|
|
90
|
-
ToggleFrame
|
|
91
|
-
};
|
|
1
|
+
import{ThemeableStack as $}from"@tamagui/stacks";import{useControllableState as S}from"@tamagui/use-controllable-state";import{Theme as D,composeEventHandlers as H,styled as w}from"@tamagui/web";import*as B from"react";const y="Toggle",P=w($,{name:y,tag:"button",variants:{unstyled:{false:{pressTheme:!0,backgroundColor:"$background",alignItems:"center",justifyContent:"center",display:"flex",borderColor:"$borderColor",borderWidth:"1px",margin:"-1px",hoverStyle:{backgroundColor:"$backgroundHover"},pressStyle:{backgroundColor:"$backgroundPress"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},active:{true:{zIndex:1,hoverStyle:{backgroundColor:"$background"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},orientation:{horizontal:{flexDirection:"row",spaceDirection:"horizontal"},vertical:{flexDirection:"column",spaceDirection:"vertical"}}},defaultVariants:{unstyled:!1}}),T=P.extractable(B.forwardRef((e,C)=>{const{pressed:v,defaultPressed:h=!1,onPressedChange:k,...E}=e,[o=!1,x]=S({prop:v,onChange:k,defaultProp:h});return<D forceClassName name={o?"active":null}><P active={e.unstyled?void 0:o}aria-pressed={o}data-state={o?"on":"off"}data-disabled={e.disabled?"":void 0}{...E}ref={C}onPress={H(e.onPress??void 0,F=>{e.disabled||x(!o)})}/></D>}));T.displayName=y;export{T as Toggle,P as ToggleFrame};
|
|
92
2
|
//# sourceMappingURL=Toggle.js.map
|
package/dist/jsx/Toggle.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Toggle.tsx"],
|
|
4
4
|
"sourcesContent": ["import { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { GetProps, Theme, composeEventHandlers, isWeb, styled } from '@tamagui/web'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Toggle'\n\ntype TamaguiButtonElement = HTMLButtonElement\n\ntype ToggleElement = TamaguiButtonElement\n\nconst ToggleFrame = styled(ThemeableStack, {\n name: NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n pressTheme: true,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n display: 'flex',\n borderColor: '$borderColor',\n borderWidth: '1px',\n margin: '-1px',\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n },\n pressStyle: {\n backgroundColor: '$backgroundPress',\n },\n focusStyle: {\n borderColor: '$borderColorPress',\n backgroundColor: '$backgroundPress',\n },\n },\n },\n active: {\n true: {\n zIndex: 1,\n hoverStyle: {\n backgroundColor: '$background',\n },\n focusStyle: {\n borderColor: '$borderColorPress',\n backgroundColor: '$backgroundPress',\n },\n },\n },\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ToggleFrameProps = GetProps<typeof ToggleFrame>\n\ntype ToggleProps = ToggleFrameProps & {\n defaultValue?: string\n disabled?: boolean\n pressed?: boolean\n defaultPressed?: boolean\n onPressedChange?(pressed: boolean): void\n}\n\nconst Toggle = ToggleFrame.extractable(\n React.forwardRef<ToggleElement, ToggleProps>((props, forwardedRef) => {\n const {\n pressed: pressedProp,\n defaultPressed = false,\n onPressedChange,\n ...buttonProps\n } = props\n\n const [pressed = false, setPressed] = useControllableState({\n prop: pressedProp,\n onChange: onPressedChange,\n defaultProp: defaultPressed,\n })\n\n return (\n <Theme forceClassName name={pressed ? 'active' : null}>\n <ToggleFrame\n active={!props.unstyled ? pressed : undefined}\n aria-pressed={pressed}\n data-state={pressed ? 'on' : 'off'}\n data-disabled={props.disabled ? '' : undefined}\n {...buttonProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n if (!props.disabled) {\n setPressed(!pressed)\n }\n })}\n // caught by onPress - no need for this\n // {...(isWeb && {\n // onKeyDown: composeEventHandlers(\n // (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n // (event) => {\n // if ([' ', 'Enter'].includes(event.key)) {\n // if (!props.disabled) {\n // setPressed(!pressed)\n // }\n // }\n // }\n // ),\n // })}\n />\n </Theme>\n )\n })\n)\nToggle.displayName = NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport { Toggle, ToggleFrame }\nexport type { ToggleProps }\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,kBAAAA,MAAsB,kBAC/B,OAAS,wBAAAC,MAA4B,kCACrC,OAAmB,SAAAC,EAAO,wBAAAC,EAA6B,UAAAC,MAAc,eACrE,UAAYC,MAAW,QAMvB,MAAMC,EAAO,SAMPC,EAAcH,EAAOJ,EAAgB,CACzC,KAAMM,EACN,IAAK,SAEL,SAAU,CACR,SAAU,CACR,MAAO,CACL,WAAY,GACZ,gBAAiB,cACjB,WAAY,SACZ,eAAgB,SAChB,QAAS,OACT,YAAa,eACb,YAAa,MACb,OAAQ,OACR,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,OAAQ,EACR,WAAY,CACV,gBAAiB,aACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,YAAa,CACX,WAAY,CACV,cAAe,MACf,eAAgB,YAClB,EACA,SAAU,CACR,cAAe,SACf,eAAgB,UAClB,CACF,CACF,EACA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAYKE,EAASD,EAAY,YACzBF,EAAM,WAAuC,CAACI,EAAOC,IAAiB,CACpE,KAAM,CACJ,QAASC,EACT,eAAAC,EAAiB,GACjB,gBAAAC,EACA,GAAGC,CACL,EAAIL,EAEE,CAACM,EAAU,GAAOC,CAAU,EAAIf,EAAqB,CACzD,KAAMU,EACN,SAAUE,EACV,YAAaD,CACf,CAAC,EAED,MACE,CAACV,EAAM,eAAe,MAAMa,EAAU,SAAW,MAC/C,CAACR,EACC,QAASE,EAAM,SAAqB,OAAVM,EAC1B,cAAcA,EACd,YAAYA,EAAU,KAAO,MAC7B,eAAeN,EAAM,SAAW,GAAK,WACjCK,EACJ,KAAKJ,EACL,SAASP,EAAqBM,EAAM,SAAW,OAAYQ,GAAU,CAC9DR,EAAM,UACTO,EAAW,CAACD,CAAO,CAEvB,CAAC,EAcH,EACF,EA3BCb,EA6BL,CAAC,CACH,EACAM,EAAO,YAAcF",
|
|
6
|
+
"names": ["ThemeableStack", "useControllableState", "Theme", "composeEventHandlers", "styled", "React", "NAME", "ToggleFrame", "Toggle", "props", "forwardedRef", "pressedProp", "defaultPressed", "onPressedChange", "buttonProps", "pressed", "setPressed", "event"]
|
|
7
7
|
}
|
package/dist/jsx/Toggle.mjs
CHANGED
|
@@ -1,92 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
3
|
-
import { Theme, composeEventHandlers, styled } from "@tamagui/web";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
const NAME = "Toggle";
|
|
6
|
-
const ToggleFrame = styled(ThemeableStack, {
|
|
7
|
-
name: NAME,
|
|
8
|
-
tag: "button",
|
|
9
|
-
variants: {
|
|
10
|
-
unstyled: {
|
|
11
|
-
false: {
|
|
12
|
-
pressTheme: true,
|
|
13
|
-
backgroundColor: "$background",
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
justifyContent: "center",
|
|
16
|
-
display: "flex",
|
|
17
|
-
borderColor: "$borderColor",
|
|
18
|
-
borderWidth: "1px",
|
|
19
|
-
margin: "-1px",
|
|
20
|
-
hoverStyle: {
|
|
21
|
-
backgroundColor: "$backgroundHover"
|
|
22
|
-
},
|
|
23
|
-
pressStyle: {
|
|
24
|
-
backgroundColor: "$backgroundPress"
|
|
25
|
-
},
|
|
26
|
-
focusStyle: {
|
|
27
|
-
borderColor: "$borderColorPress",
|
|
28
|
-
backgroundColor: "$backgroundPress"
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
active: {
|
|
33
|
-
true: {
|
|
34
|
-
zIndex: 1,
|
|
35
|
-
hoverStyle: {
|
|
36
|
-
backgroundColor: "$background"
|
|
37
|
-
},
|
|
38
|
-
focusStyle: {
|
|
39
|
-
borderColor: "$borderColorPress",
|
|
40
|
-
backgroundColor: "$backgroundPress"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
orientation: {
|
|
45
|
-
horizontal: {
|
|
46
|
-
flexDirection: "row",
|
|
47
|
-
spaceDirection: "horizontal"
|
|
48
|
-
},
|
|
49
|
-
vertical: {
|
|
50
|
-
flexDirection: "column",
|
|
51
|
-
spaceDirection: "vertical"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
defaultVariants: {
|
|
56
|
-
unstyled: false
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
const Toggle = ToggleFrame.extractable(
|
|
60
|
-
React.forwardRef((props, forwardedRef) => {
|
|
61
|
-
const {
|
|
62
|
-
pressed: pressedProp,
|
|
63
|
-
defaultPressed = false,
|
|
64
|
-
onPressedChange,
|
|
65
|
-
...buttonProps
|
|
66
|
-
} = props;
|
|
67
|
-
const [pressed = false, setPressed] = useControllableState({
|
|
68
|
-
prop: pressedProp,
|
|
69
|
-
onChange: onPressedChange,
|
|
70
|
-
defaultProp: defaultPressed
|
|
71
|
-
});
|
|
72
|
-
return <Theme forceClassName name={pressed ? "active" : null}><ToggleFrame
|
|
73
|
-
active={!props.unstyled ? pressed : void 0}
|
|
74
|
-
aria-pressed={pressed}
|
|
75
|
-
data-state={pressed ? "on" : "off"}
|
|
76
|
-
data-disabled={props.disabled ? "" : void 0}
|
|
77
|
-
{...buttonProps}
|
|
78
|
-
ref={forwardedRef}
|
|
79
|
-
onPress={composeEventHandlers(props.onPress ?? void 0, (event) => {
|
|
80
|
-
if (!props.disabled) {
|
|
81
|
-
setPressed(!pressed);
|
|
82
|
-
}
|
|
83
|
-
})}
|
|
84
|
-
/></Theme>;
|
|
85
|
-
})
|
|
86
|
-
);
|
|
87
|
-
Toggle.displayName = NAME;
|
|
88
|
-
export {
|
|
89
|
-
Toggle,
|
|
90
|
-
ToggleFrame
|
|
91
|
-
};
|
|
1
|
+
import{ThemeableStack as $}from"@tamagui/stacks";import{useControllableState as S}from"@tamagui/use-controllable-state";import{Theme as D,composeEventHandlers as H,styled as w}from"@tamagui/web";import*as B from"react";const y="Toggle",P=w($,{name:y,tag:"button",variants:{unstyled:{false:{pressTheme:!0,backgroundColor:"$background",alignItems:"center",justifyContent:"center",display:"flex",borderColor:"$borderColor",borderWidth:"1px",margin:"-1px",hoverStyle:{backgroundColor:"$backgroundHover"},pressStyle:{backgroundColor:"$backgroundPress"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},active:{true:{zIndex:1,hoverStyle:{backgroundColor:"$background"},focusStyle:{borderColor:"$borderColorPress",backgroundColor:"$backgroundPress"}}},orientation:{horizontal:{flexDirection:"row",spaceDirection:"horizontal"},vertical:{flexDirection:"column",spaceDirection:"vertical"}}},defaultVariants:{unstyled:!1}}),T=P.extractable(B.forwardRef((e,C)=>{const{pressed:v,defaultPressed:h=!1,onPressedChange:k,...E}=e,[o=!1,x]=S({prop:v,onChange:k,defaultProp:h});return<D forceClassName name={o?"active":null}><P active={e.unstyled?void 0:o}aria-pressed={o}data-state={o?"on":"off"}data-disabled={e.disabled?"":void 0}{...E}ref={C}onPress={H(e.onPress??void 0,F=>{e.disabled||x(!o)})}/></D>}));T.displayName=y;export{T as Toggle,P as ToggleFrame};
|
|
92
2
|
//# sourceMappingURL=Toggle.mjs.map
|
package/dist/jsx/Toggle.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Toggle.tsx"],
|
|
4
4
|
"sourcesContent": ["import { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { GetProps, Theme, composeEventHandlers, isWeb, styled } from '@tamagui/web'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Toggle'\n\ntype TamaguiButtonElement = HTMLButtonElement\n\ntype ToggleElement = TamaguiButtonElement\n\nconst ToggleFrame = styled(ThemeableStack, {\n name: NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n pressTheme: true,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n display: 'flex',\n borderColor: '$borderColor',\n borderWidth: '1px',\n margin: '-1px',\n hoverStyle: {\n backgroundColor: '$backgroundHover',\n },\n pressStyle: {\n backgroundColor: '$backgroundPress',\n },\n focusStyle: {\n borderColor: '$borderColorPress',\n backgroundColor: '$backgroundPress',\n },\n },\n },\n active: {\n true: {\n zIndex: 1,\n hoverStyle: {\n backgroundColor: '$background',\n },\n focusStyle: {\n borderColor: '$borderColorPress',\n backgroundColor: '$backgroundPress',\n },\n },\n },\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ToggleFrameProps = GetProps<typeof ToggleFrame>\n\ntype ToggleProps = ToggleFrameProps & {\n defaultValue?: string\n disabled?: boolean\n pressed?: boolean\n defaultPressed?: boolean\n onPressedChange?(pressed: boolean): void\n}\n\nconst Toggle = ToggleFrame.extractable(\n React.forwardRef<ToggleElement, ToggleProps>((props, forwardedRef) => {\n const {\n pressed: pressedProp,\n defaultPressed = false,\n onPressedChange,\n ...buttonProps\n } = props\n\n const [pressed = false, setPressed] = useControllableState({\n prop: pressedProp,\n onChange: onPressedChange,\n defaultProp: defaultPressed,\n })\n\n return (\n <Theme forceClassName name={pressed ? 'active' : null}>\n <ToggleFrame\n active={!props.unstyled ? pressed : undefined}\n aria-pressed={pressed}\n data-state={pressed ? 'on' : 'off'}\n data-disabled={props.disabled ? '' : undefined}\n {...buttonProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress ?? undefined, (event) => {\n if (!props.disabled) {\n setPressed(!pressed)\n }\n })}\n // caught by onPress - no need for this\n // {...(isWeb && {\n // onKeyDown: composeEventHandlers(\n // (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n // (event) => {\n // if ([' ', 'Enter'].includes(event.key)) {\n // if (!props.disabled) {\n // setPressed(!pressed)\n // }\n // }\n // }\n // ),\n // })}\n />\n </Theme>\n )\n })\n)\nToggle.displayName = NAME\n\n/* ---------------------------------------------------------------------------------------------- */\n\nexport { Toggle, ToggleFrame }\nexport type { ToggleProps }\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,OAAS,kBAAAA,MAAsB,kBAC/B,OAAS,wBAAAC,MAA4B,kCACrC,OAAmB,SAAAC,EAAO,wBAAAC,EAA6B,UAAAC,MAAc,eACrE,UAAYC,MAAW,QAMvB,MAAMC,EAAO,SAMPC,EAAcH,EAAOJ,EAAgB,CACzC,KAAMM,EACN,IAAK,SAEL,SAAU,CACR,SAAU,CACR,MAAO,CACL,WAAY,GACZ,gBAAiB,cACjB,WAAY,SACZ,eAAgB,SAChB,QAAS,OACT,YAAa,eACb,YAAa,MACb,OAAQ,OACR,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,gBAAiB,kBACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,OAAQ,EACR,WAAY,CACV,gBAAiB,aACnB,EACA,WAAY,CACV,YAAa,oBACb,gBAAiB,kBACnB,CACF,CACF,EACA,YAAa,CACX,WAAY,CACV,cAAe,MACf,eAAgB,YAClB,EACA,SAAU,CACR,cAAe,SACf,eAAgB,UAClB,CACF,CACF,EACA,gBAAiB,CACf,SAAU,EACZ,CACF,CAAC,EAYKE,EAASD,EAAY,YACzBF,EAAM,WAAuC,CAACI,EAAOC,IAAiB,CACpE,KAAM,CACJ,QAASC,EACT,eAAAC,EAAiB,GACjB,gBAAAC,EACA,GAAGC,CACL,EAAIL,EAEE,CAACM,EAAU,GAAOC,CAAU,EAAIf,EAAqB,CACzD,KAAMU,EACN,SAAUE,EACV,YAAaD,CACf,CAAC,EAED,MACE,CAACV,EAAM,eAAe,MAAMa,EAAU,SAAW,MAC/C,CAACR,EACC,QAASE,EAAM,SAAqB,OAAVM,EAC1B,cAAcA,EACd,YAAYA,EAAU,KAAO,MAC7B,eAAeN,EAAM,SAAW,GAAK,WACjCK,EACJ,KAAKJ,EACL,SAASP,EAAqBM,EAAM,SAAW,OAAYQ,GAAU,CAC9DR,EAAM,UACTO,EAAW,CAACD,CAAO,CAEvB,CAAC,EAcH,EACF,EA3BCb,EA6BL,CAAC,CACH,EACAM,EAAO,YAAcF",
|
|
6
|
+
"names": ["ThemeableStack", "useControllableState", "Theme", "composeEventHandlers", "styled", "React", "NAME", "ToggleFrame", "Toggle", "props", "forwardedRef", "pressedProp", "defaultPressed", "onPressedChange", "buttonProps", "pressed", "setPressed", "event"]
|
|
7
7
|
}
|
package/dist/jsx/ToggleGroup.js
CHANGED
|
@@ -1,279 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { registerFocusable } from "@tamagui/focusable";
|
|
3
|
-
import { getFontSize } from "@tamagui/font-size";
|
|
4
|
-
import { stepTokenUpOrDown } from "@tamagui/get-size";
|
|
5
|
-
import { Group, useGroupItem } from "@tamagui/group";
|
|
6
|
-
import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
|
|
7
|
-
import { RovingFocusGroup, createRovingFocusGroupScope } from "@tamagui/roving-focus";
|
|
8
|
-
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
9
|
-
import { useDirection } from "@tamagui/use-direction";
|
|
10
|
-
import {
|
|
11
|
-
getVariableValue,
|
|
12
|
-
isWeb,
|
|
13
|
-
styled,
|
|
14
|
-
useTheme,
|
|
15
|
-
withStaticProperties
|
|
16
|
-
} from "@tamagui/web";
|
|
17
|
-
import React from "react";
|
|
18
|
-
import { Toggle, ToggleFrame } from "./Toggle";
|
|
19
|
-
const TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
20
|
-
const [createToggleGroupContext, createToggleGroupScope] = createContextScope(
|
|
21
|
-
TOGGLE_GROUP_NAME,
|
|
22
|
-
[createRovingFocusGroupScope]
|
|
23
|
-
);
|
|
24
|
-
const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
|
|
25
|
-
const [createToggleGroupItemContext, createToggleGroupItemScope] = createContextScope(TOGGLE_GROUP_ITEM_NAME);
|
|
26
|
-
const [ToggleGroupItemProvider, useToggleGroupItemContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
27
|
-
const useToggleGroupItemScope = createToggleGroupItemScope();
|
|
28
|
-
const ToggleGroupItem = ToggleFrame.extractable(
|
|
29
|
-
React.forwardRef(
|
|
30
|
-
(props, forwardedRef) => {
|
|
31
|
-
const valueContext = useToggleGroupValueContext(
|
|
32
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
33
|
-
props.__scopeToggleGroup
|
|
34
|
-
);
|
|
35
|
-
const context = useToggleGroupContext(
|
|
36
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
37
|
-
props.__scopeToggleGroup
|
|
38
|
-
);
|
|
39
|
-
const __scopeToggleGroup = props.__scopeToggleGroup;
|
|
40
|
-
const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);
|
|
41
|
-
const pressed = valueContext.value.includes(props.value);
|
|
42
|
-
const disabled = context.disabled || props.disabled || false;
|
|
43
|
-
const ref = React.useRef(null);
|
|
44
|
-
const groupItemProps = useGroupItem({ disabled });
|
|
45
|
-
const size = props.size ?? context.size;
|
|
46
|
-
const sizeProps = {
|
|
47
|
-
width: void 0,
|
|
48
|
-
height: void 0,
|
|
49
|
-
padding: getVariableValue(size) * 0.6
|
|
50
|
-
};
|
|
51
|
-
if (props.orientation === "horizontal")
|
|
52
|
-
sizeProps.height = getVariableValue(size) * 2.4;
|
|
53
|
-
else
|
|
54
|
-
sizeProps.width = getVariableValue(size) * 2.4;
|
|
55
|
-
const iconSize = (typeof size === "number" ? size * 0.7 : getFontSize(size)) * 1.2;
|
|
56
|
-
const theme = useTheme();
|
|
57
|
-
const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color });
|
|
58
|
-
const childrens = React.Children.toArray(props.children);
|
|
59
|
-
const children = childrens.map((child) => {
|
|
60
|
-
if (props.disablePassStyles || !React.isValidElement(child)) {
|
|
61
|
-
return child;
|
|
62
|
-
}
|
|
63
|
-
return getThemedIcon(child);
|
|
64
|
-
});
|
|
65
|
-
const commonProps = { ...props, pressed, disabled, ...sizeProps, children };
|
|
66
|
-
return <ToggleGroupItemProvider scope={__scopeToggleGroup}>{context.rovingFocus ? <RovingFocusGroup.Item
|
|
67
|
-
asChild
|
|
68
|
-
{...rovingFocusGroupScope}
|
|
69
|
-
focusable={!disabled}
|
|
70
|
-
active={pressed}
|
|
71
|
-
><ToggleFrame
|
|
72
|
-
asChild
|
|
73
|
-
focusable={!disabled}
|
|
74
|
-
disabled={disabled}
|
|
75
|
-
ref={ref}
|
|
76
|
-
{...groupItemProps}
|
|
77
|
-
><ToggleGroupItemImpl {...commonProps} ref={forwardedRef} /></ToggleFrame></RovingFocusGroup.Item> : <ToggleFrame asChild focusable={!disabled} disabled={disabled} ref={ref}><ToggleGroupItemImpl {...commonProps} ref={forwardedRef} /></ToggleFrame>}</ToggleGroupItemProvider>;
|
|
78
|
-
}
|
|
79
|
-
)
|
|
80
|
-
);
|
|
81
|
-
ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
|
|
82
|
-
const ToggleGroupItemImpl = ToggleFrame.extractable(
|
|
83
|
-
React.forwardRef(
|
|
84
|
-
(props, forwardedRef) => {
|
|
85
|
-
const { __scopeToggleGroup, value, ...itemProps } = props;
|
|
86
|
-
const valueContext = useToggleGroupValueContext(
|
|
87
|
-
TOGGLE_GROUP_ITEM_NAME,
|
|
88
|
-
__scopeToggleGroup
|
|
89
|
-
);
|
|
90
|
-
const singleProps = {
|
|
91
|
-
"aria-pressed": void 0
|
|
92
|
-
};
|
|
93
|
-
const typeProps = valueContext.type === "single" ? singleProps : void 0;
|
|
94
|
-
return <Toggle
|
|
95
|
-
{...typeProps}
|
|
96
|
-
{...itemProps}
|
|
97
|
-
ref={forwardedRef}
|
|
98
|
-
onPressedChange={(pressed) => {
|
|
99
|
-
if (pressed) {
|
|
100
|
-
valueContext.onItemActivate(value);
|
|
101
|
-
} else {
|
|
102
|
-
valueContext.onItemDeactivate(value);
|
|
103
|
-
}
|
|
104
|
-
}}
|
|
105
|
-
/>;
|
|
106
|
-
}
|
|
107
|
-
)
|
|
108
|
-
);
|
|
109
|
-
const useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
110
|
-
const ToggleGroup = withStaticProperties(
|
|
111
|
-
React.forwardRef((props, forwardedRef) => {
|
|
112
|
-
const { type, ...toggleGroupProps } = props;
|
|
113
|
-
if (!isWeb) {
|
|
114
|
-
React.useEffect(() => {
|
|
115
|
-
if (!props.id)
|
|
116
|
-
return;
|
|
117
|
-
return registerFocusable(props.id, {
|
|
118
|
-
// TODO: would be nice to focus on the first child later - could be done with reforest
|
|
119
|
-
// for now leaving it empty
|
|
120
|
-
focus: () => {
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
}, [props.id]);
|
|
124
|
-
}
|
|
125
|
-
if (type === "single") {
|
|
126
|
-
const singleProps = toggleGroupProps;
|
|
127
|
-
return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;
|
|
128
|
-
}
|
|
129
|
-
if (type === "multiple") {
|
|
130
|
-
const multipleProps = toggleGroupProps;
|
|
131
|
-
return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;
|
|
132
|
-
}
|
|
133
|
-
throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
|
|
134
|
-
}),
|
|
135
|
-
{
|
|
136
|
-
Item: ToggleGroupItem
|
|
137
|
-
}
|
|
138
|
-
);
|
|
139
|
-
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
140
|
-
const [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
141
|
-
const ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
|
|
142
|
-
const {
|
|
143
|
-
value: valueProp,
|
|
144
|
-
defaultValue,
|
|
145
|
-
onValueChange = () => {
|
|
146
|
-
},
|
|
147
|
-
disableDeactivation = false,
|
|
148
|
-
...toggleGroupSingleProps
|
|
149
|
-
} = props;
|
|
150
|
-
const [value, setValue] = useControllableState({
|
|
151
|
-
prop: valueProp,
|
|
152
|
-
defaultProp: defaultValue,
|
|
153
|
-
onChange: onValueChange
|
|
154
|
-
});
|
|
155
|
-
return <ToggleGroupValueProvider
|
|
156
|
-
scope={props.__scopeToggleGroup}
|
|
157
|
-
type="single"
|
|
158
|
-
value={value ? [value] : []}
|
|
159
|
-
defaultValue={value}
|
|
160
|
-
onItemActivate={setValue}
|
|
161
|
-
onItemDeactivate={React.useCallback(() => disableDeactivation ? null : setValue(""), [setValue, disableDeactivation])}
|
|
162
|
-
><ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef} /></ToggleGroupValueProvider>;
|
|
163
|
-
});
|
|
164
|
-
const ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
|
|
165
|
-
const {
|
|
166
|
-
value: valueProp,
|
|
167
|
-
defaultValue,
|
|
168
|
-
onValueChange = () => {
|
|
169
|
-
},
|
|
170
|
-
...toggleGroupMultipleProps
|
|
171
|
-
} = props;
|
|
172
|
-
const [value = [], setValue] = useControllableState({
|
|
173
|
-
prop: valueProp,
|
|
174
|
-
defaultProp: defaultValue,
|
|
175
|
-
onChange: onValueChange
|
|
176
|
-
});
|
|
177
|
-
const handleButtonActivate = React.useCallback(
|
|
178
|
-
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
179
|
-
[setValue]
|
|
180
|
-
);
|
|
181
|
-
const handleButtonDeactivate = React.useCallback(
|
|
182
|
-
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
183
|
-
[setValue]
|
|
184
|
-
);
|
|
185
|
-
return <ToggleGroupValueProvider
|
|
186
|
-
scope={props.__scopeToggleGroup}
|
|
187
|
-
type="multiple"
|
|
188
|
-
value={value}
|
|
189
|
-
defaultValue={value}
|
|
190
|
-
onItemActivate={handleButtonActivate}
|
|
191
|
-
onItemDeactivate={handleButtonDeactivate}
|
|
192
|
-
><ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} /></ToggleGroupValueProvider>;
|
|
193
|
-
});
|
|
194
|
-
ToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
195
|
-
const [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
196
|
-
const ToggleGroupImplElementFrame = styled(Group, {
|
|
197
|
-
name: TOGGLE_GROUP_NAME,
|
|
198
|
-
variants: {
|
|
199
|
-
unstyled: {
|
|
200
|
-
false: {
|
|
201
|
-
backgroundColor: "$background"
|
|
202
|
-
}
|
|
203
|
-
},
|
|
204
|
-
orientation: {
|
|
205
|
-
vertical: {
|
|
206
|
-
flexDirection: "column",
|
|
207
|
-
spaceDirection: "vertical"
|
|
208
|
-
},
|
|
209
|
-
horizontal: {
|
|
210
|
-
flexDirection: "row",
|
|
211
|
-
spaceDirection: "horizontal"
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
},
|
|
215
|
-
defaultVariants: {
|
|
216
|
-
unstyled: false
|
|
217
|
-
}
|
|
218
|
-
});
|
|
219
|
-
const ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(
|
|
220
|
-
React.forwardRef(
|
|
221
|
-
(props, forwardedRef) => {
|
|
222
|
-
const {
|
|
223
|
-
__scopeToggleGroup,
|
|
224
|
-
disabled = false,
|
|
225
|
-
orientation = "horizontal",
|
|
226
|
-
dir,
|
|
227
|
-
rovingFocus = true,
|
|
228
|
-
loop = true,
|
|
229
|
-
unstyled = false,
|
|
230
|
-
size: sizeProp = "$true",
|
|
231
|
-
sizeAdjust = 0,
|
|
232
|
-
...toggleGroupProps
|
|
233
|
-
} = props;
|
|
234
|
-
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);
|
|
235
|
-
const direction = useDirection(dir);
|
|
236
|
-
const commonProps = {
|
|
237
|
-
role: "togglegroup",
|
|
238
|
-
dir: direction,
|
|
239
|
-
...toggleGroupProps
|
|
240
|
-
};
|
|
241
|
-
const adjustedSize = getVariableValue(
|
|
242
|
-
stepTokenUpOrDown("size", props.size, sizeAdjust)
|
|
243
|
-
);
|
|
244
|
-
const size = Math.round(adjustedSize * 0.45);
|
|
245
|
-
return <ToggleGroupContext
|
|
246
|
-
scope={__scopeToggleGroup}
|
|
247
|
-
rovingFocus={rovingFocus}
|
|
248
|
-
disabled={disabled}
|
|
249
|
-
size={size}
|
|
250
|
-
>{rovingFocus ? <RovingFocusGroup
|
|
251
|
-
asChild
|
|
252
|
-
{...rovingFocusGroupScope}
|
|
253
|
-
orientation={orientation}
|
|
254
|
-
dir={direction}
|
|
255
|
-
loop={loop}
|
|
256
|
-
><ToggleGroupImplElementFrame
|
|
257
|
-
aria-orientation={orientation}
|
|
258
|
-
orientation={orientation}
|
|
259
|
-
axis={orientation}
|
|
260
|
-
ref={forwardedRef}
|
|
261
|
-
data-disabled={disabled ? "" : void 0}
|
|
262
|
-
unstyled={unstyled}
|
|
263
|
-
{...commonProps}
|
|
264
|
-
/></RovingFocusGroup> : <ToggleGroupImplElementFrame
|
|
265
|
-
aria-orientation={orientation}
|
|
266
|
-
ref={forwardedRef}
|
|
267
|
-
orientation={orientation}
|
|
268
|
-
data-disabled={disabled ? "" : void 0}
|
|
269
|
-
unstyled={unstyled}
|
|
270
|
-
{...commonProps}
|
|
271
|
-
/>}</ToggleGroupContext>;
|
|
272
|
-
}
|
|
273
|
-
)
|
|
274
|
-
);
|
|
275
|
-
export {
|
|
276
|
-
ToggleGroup,
|
|
277
|
-
createToggleGroupScope
|
|
278
|
-
};
|
|
1
|
+
import{createContextScope as V}from"@tamagui/create-context";import{registerFocusable as L}from"@tamagui/focusable";import{getFontSize as j}from"@tamagui/font-size";import{stepTokenUpOrDown as U}from"@tamagui/get-size";import{Group as $,useGroupItem as B}from"@tamagui/group";import{useGetThemedIcon as H}from"@tamagui/helpers-tamagui";import{RovingFocusGroup as _,createRovingFocusGroupScope as F}from"@tamagui/roving-focus";import{useControllableState as R}from"@tamagui/use-controllable-state";import{useDirection as W}from"@tamagui/use-direction";import{getVariableValue as P,isWeb as q,styled as J,useTheme as K,withStaticProperties as Q}from"@tamagui/web";import g from"react";import{Toggle as X,ToggleFrame as I}from"./Toggle";const c="ToggleGroup",[b,Y]=V(c,[F]),d="ToggleGroupItem",[Oe,Z]=V(d),[Ge,Ne]=b(c),Le=Z(),M=I.extractable(g.forwardRef((e,r)=>{const p=O(d,e.__scopeToggleGroup),l=ve(d,e.__scopeToggleGroup),t=e.__scopeToggleGroup,s=k(e.__scopeToggleGroup),u=p.value.includes(e.value),o=l.disabled||e.disabled||!1,n=g.useRef(null),G=B({disabled:o}),i=e.size??l.size,a={width:void 0,height:void 0,padding:P(i)*.6};e.orientation==="horizontal"?a.height=P(i)*2.4:a.width=P(i)*2.4;const m=(typeof i=="number"?i*.7:j(i))*1.2,T=K(),f=H({size:m,color:T.color}),v=g.Children.toArray(e.children).map(y=>e.disablePassStyles||!g.isValidElement(y)?y:f(y)),x={...e,pressed:u,disabled:o,...a,children:v};return<Ge scope={t}>{l.rovingFocus?<_.Item asChild{...s}focusable={!o}active={u}><I asChild focusable={!o}disabled={o}ref={n}{...G}><D{...x}ref={r}/></I></_.Item>:<I asChild focusable={!o}disabled={o}ref={n}><D{...x}ref={r}/></I>}</Ge>}));M.displayName=d;const D=I.extractable(g.forwardRef((e,r)=>{const{__scopeToggleGroup:p,value:l,...t}=e,s=O(d,p),u={"aria-pressed":void 0},o=s.type==="single"?u:void 0;return<X{...o}{...t}ref={r}onPressedChange={n=>{n?s.onItemActivate(l):s.onItemDeactivate(l)}}/>})),k=F(),S=Q(g.forwardRef((e,r)=>{const{type:p,...l}=e;if(q||g.useEffect(()=>{if(e.id)return L(e.id,{focus:()=>{}})},[e.id]),p==="single"){const t=l;return<Te{...t}ref={r}/>}if(p==="multiple"){const t=l;return<Pe{...t}ref={r}/>}throw new Error(`Missing prop \`type\` expected on \`${c}\``)}),{Item:M});S.displayName=c;const[A,O]=b(c),Te=g.forwardRef((e,r)=>{const{value:p,defaultValue:l,onValueChange:t=()=>{},disableDeactivation:s=!1,...u}=e,[o,n]=R({prop:p,defaultProp:l,onChange:t});return<A scope={e.__scopeToggleGroup}type="single"value={o?[o]:[]}defaultValue={o}onItemActivate={n}onItemDeactivate={g.useCallback(()=>s?null:n(""),[n,s])}><N{...u}ref={r}/></A>}),Pe=g.forwardRef((e,r)=>{const{value:p,defaultValue:l,onValueChange:t=()=>{},...s}=e,[u=[],o]=R({prop:p,defaultProp:l,onChange:t}),n=g.useCallback(i=>o((a=[])=>[...a,i]),[o]),G=g.useCallback(i=>o((a=[])=>a.filter(m=>m!==i)),[o]);return<A scope={e.__scopeToggleGroup}type="multiple"value={u}defaultValue={u}onItemActivate={n}onItemDeactivate={G}><N{...s}ref={r}/></A>});S.displayName=c;const[Ie,ve]=b(c),C=J($,{name:c,variants:{unstyled:{false:{backgroundColor:"$background"}},orientation:{vertical:{flexDirection:"column",spaceDirection:"vertical"},horizontal:{flexDirection:"row",spaceDirection:"horizontal"}}},defaultVariants:{unstyled:!1}}),N=C.extractable(g.forwardRef((e,r)=>{const{__scopeToggleGroup:p,disabled:l=!1,orientation:t="horizontal",dir:s,rovingFocus:u=!0,loop:o=!0,unstyled:n=!1,size:G="$true",sizeAdjust:i=0,...a}=e,m=k(p),T=W(s),f={role:"togglegroup",dir:T,...a},E=P(U("size",e.size,i)),v=Math.round(E*.45);return<Ie scope={p}rovingFocus={u}disabled={l}size={v}>{u?<_ asChild{...m}orientation={t}dir={T}loop={o}><C aria-orientation={t}orientation={t}axis={t}ref={r}data-disabled={l?"":void 0}unstyled={n}{...f}/></_>:<C aria-orientation={t}ref={r}orientation={t}data-disabled={l?"":void 0}unstyled={n}{...f}/>}</Ie>}));export{S as ToggleGroup,Y as createToggleGroupScope};
|
|
279
2
|
//# sourceMappingURL=ToggleGroup.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToggleGroup.tsx"],
|
|
4
4
|
"sourcesContent": ["import { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { stepTokenUpOrDown } from '@tamagui/get-size'\nimport { Group, GroupProps, useGroupItem } from '@tamagui/group'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { RovingFocusGroup, createRovingFocusGroupScope } from '@tamagui/roving-focus'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { useDirection } from '@tamagui/use-direction'\nimport {\n GetProps,\n SizeTokens,\n getVariableValue,\n isWeb,\n styled,\n useTheme,\n withStaticProperties,\n} from '@tamagui/web'\nimport React from 'react'\n\nimport { Toggle, ToggleFrame, ToggleProps } from './Toggle'\n\nconst TOGGLE_GROUP_NAME = 'ToggleGroup'\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(\n TOGGLE_GROUP_NAME,\n [createRovingFocusGroupScope]\n)\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_ITEM_NAME = 'ToggleGroupItem'\n\ntype ToggleGroupItemContextValue = { disabled?: boolean }\n\nconst [createToggleGroupItemContext, createToggleGroupItemScope] =\n createContextScope(TOGGLE_GROUP_ITEM_NAME)\nconst [ToggleGroupItemProvider, useToggleGroupItemContext] =\n createToggleGroupContext<ToggleGroupItemContextValue>(TOGGLE_GROUP_NAME)\nconst useToggleGroupItemScope = createToggleGroupItemScope()\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement\n\ntype ToggleGroupItemProps = GetProps<typeof ToggleFrame> & {\n value: string\n id?: string\n disabled?: boolean\n size?: SizeTokens\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\nconst ToggleGroupItem = ToggleFrame.extractable(\n React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n const valueContext = useToggleGroupValueContext(\n TOGGLE_GROUP_ITEM_NAME,\n props.__scopeToggleGroup\n )\n const context = useToggleGroupContext(\n TOGGLE_GROUP_ITEM_NAME,\n props.__scopeToggleGroup\n )\n const __scopeToggleGroup = props.__scopeToggleGroup\n const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup)\n const pressed = valueContext.value.includes(props.value)\n const disabled = context.disabled || props.disabled || false\n const ref = React.useRef<HTMLDivElement>(null)\n const groupItemProps = useGroupItem({ disabled })\n const size = props.size ?? context.size\n\n const sizeProps: Record<string, any> = {\n width: undefined,\n height: undefined,\n padding: getVariableValue(size) * 0.6,\n }\n if (props.orientation === 'horizontal')\n sizeProps.height = getVariableValue(size) * 2.4\n else sizeProps.width = getVariableValue(size) * 2.4\n\n const iconSize = (typeof size === 'number' ? size * 0.7 : getFontSize(size)) * 1.2\n\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(props.children)\n const children = childrens.map((child) => {\n if (props.disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n const commonProps = { ...props, pressed, disabled, ...sizeProps, children }\n\n return (\n <ToggleGroupItemProvider scope={__scopeToggleGroup}>\n {context.rovingFocus ? (\n <RovingFocusGroup.Item\n asChild\n {...rovingFocusGroupScope}\n focusable={!disabled}\n active={pressed}\n >\n <ToggleFrame\n asChild\n focusable={!disabled}\n disabled={disabled}\n ref={ref}\n {...groupItemProps}\n >\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n </ToggleFrame>\n </RovingFocusGroup.Item>\n ) : (\n <ToggleFrame asChild focusable={!disabled} disabled={disabled} ref={ref}>\n <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n </ToggleFrame>\n )}\n </ToggleGroupItemProvider>\n )\n }\n )\n)\nToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ElementRef<typeof Toggle>\ntype ToggleGroupItemImplProps = Omit<\n ToggleProps,\n 'defaultPressed' | 'onPressedChange' | 'size'\n> & {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: string\n size?: SizeTokens\n}\n\nconst ToggleGroupItemImpl = ToggleFrame.extractable(\n React.forwardRef<ToggleGroupItemImplElement, ToggleGroupItemImplProps>(\n (props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n const { __scopeToggleGroup, value, ...itemProps } = props\n const valueContext = useToggleGroupValueContext(\n TOGGLE_GROUP_ITEM_NAME,\n __scopeToggleGroup\n )\n const singleProps = {\n 'aria-pressed': undefined,\n }\n const typeProps = valueContext.type === 'single' ? singleProps : undefined\n\n return (\n <Toggle\n {...typeProps}\n {...itemProps}\n ref={forwardedRef}\n onPressedChange={(pressed) => {\n if (pressed) {\n valueContext.onItemActivate(value)\n } else {\n valueContext.onItemDeactivate(value)\n }\n }}\n />\n )\n }\n )\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope }\n\nconst useRovingFocusGroupScope = createRovingFocusGroupScope()\n\ntype ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImplMultipleElement\ninterface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {\n type: 'single'\n}\ninterface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {\n type: 'multiple'\n}\n\ntype ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps\n\nconst ToggleGroup = withStaticProperties(\n React.forwardRef<ToggleGroupElement, ToggleGroupProps>((props, forwardedRef) => {\n const { type, ...toggleGroupProps } = props\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 // TODO: would be nice to focus on the first child later - could be done with reforest\n // for now leaving it empty\n focus: () => {},\n })\n }, [props.id])\n }\n\n if (type === 'single') {\n const singleProps = toggleGroupProps as ToggleGroupImplSingleProps\n return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />\n }\n\n if (type === 'multiple') {\n const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps\n return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />\n }\n\n throw new Error(`Missing prop \\`type\\` expected on \\`${TOGGLE_GROUP_NAME}\\``)\n }),\n {\n Item: ToggleGroupItem,\n }\n)\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupValueContextValue = {\n type: 'single' | 'multiple'\n defaultValue?: string | string[]\n value: string[]\n onItemActivate(value: string): void\n onItemDeactivate(value: string): void\n}\n\nconst [ToggleGroupValueProvider, useToggleGroupValueContext] =\n createToggleGroupContext<ToggleGroupValueContextValue>(TOGGLE_GROUP_NAME)\n\ntype ToggleGroupImplSingleElement = ToggleGroupImplElement\ninterface ToggleGroupImplSingleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the item that is pressed.\n */\n value?: string\n /**\n * The value of the item that is pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string\n /**\n * The callback that fires when the value of the toggle group changes.\n */\n onValueChange?(value: string): void\n /**\n * Won't let the user turn the active item off.\n */\n disableDeactivation?: boolean\n}\n\nconst ToggleGroupImplSingle = React.forwardRef<\n ToggleGroupImplSingleElement,\n ToggleGroupImplSingleProps\n>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n disableDeactivation = false,\n ...toggleGroupSingleProps\n } = props\n\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"single\"\n value={value ? [value] : []}\n defaultValue={value}\n onItemActivate={setValue}\n onItemDeactivate={React.useCallback(() => disableDeactivation ? null : setValue(''), [setValue, disableDeactivation])}\n >\n <ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n )\n})\n\ntype ToggleGroupImplMultipleElement = ToggleGroupImplElement\ninterface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {\n /**\n * The controlled stateful value of the items that are pressed.\n */\n value?: string[]\n /**\n * The value of the items that are pressed when initially rendered. Use\n * `defaultValue` if you do not need to control the state of a toggle group.\n */\n defaultValue?: string[]\n /**\n * The callback that fires when the state of the toggle group changes.\n */\n onValueChange?(value: string[]): void\n}\n\nconst ToggleGroupImplMultiple = React.forwardRef<\n ToggleGroupImplMultipleElement,\n ToggleGroupImplMultipleProps\n>((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {\n const {\n value: valueProp,\n defaultValue,\n onValueChange = () => {},\n ...toggleGroupMultipleProps\n } = props\n\n const [value = [], setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n const handleButtonActivate = React.useCallback(\n (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n [setValue]\n )\n\n const handleButtonDeactivate = React.useCallback(\n (itemValue: string) =>\n setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n [setValue]\n )\n\n return (\n <ToggleGroupValueProvider\n scope={props.__scopeToggleGroup}\n type=\"multiple\"\n value={value}\n defaultValue={value}\n onItemActivate={handleButtonActivate}\n onItemDeactivate={handleButtonDeactivate}\n >\n <ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} />\n </ToggleGroupValueProvider>\n )\n})\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupContextValue = {\n rovingFocus: boolean\n disabled: boolean\n size: SizeTokens\n}\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME)\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup>\ntype TamaguiElement = HTMLElement\ntype ToggleGroupImplElement = TamaguiElement\n\nconst ToggleGroupImplElementFrame = styled(Group, {\n name: TOGGLE_GROUP_NAME,\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background',\n },\n },\n orientation: {\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n },\n } as const,\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ToggleGroupImplProps = GetProps<typeof ToggleGroupImplElementFrame> &\n GroupProps & {\n rovingFocus?: boolean\n dir?: RovingFocusGroupProps['dir']\n loop?: RovingFocusGroupProps['loop']\n sizeAdjust?: number\n }\n\nconst ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(\n React.forwardRef<ToggleGroupImplElement, ToggleGroupImplProps>(\n (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {\n const {\n __scopeToggleGroup,\n disabled = false,\n orientation = 'horizontal',\n dir,\n rovingFocus = true,\n loop = true,\n unstyled = false,\n size: sizeProp = '$true',\n sizeAdjust = 0,\n ...toggleGroupProps\n } = props\n const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup)\n const direction = useDirection(dir)\n const commonProps = {\n role: 'togglegroup',\n dir: direction,\n ...toggleGroupProps,\n }\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', props.size, sizeAdjust)\n )\n const size = Math.round(adjustedSize * 0.45)\n\n return (\n <ToggleGroupContext\n scope={__scopeToggleGroup}\n rovingFocus={rovingFocus}\n disabled={disabled}\n size={size}\n >\n {rovingFocus ? (\n <RovingFocusGroup\n asChild\n {...rovingFocusGroupScope}\n orientation={orientation}\n dir={direction}\n loop={loop}\n >\n <ToggleGroupImplElementFrame\n aria-orientation={orientation}\n orientation={orientation}\n axis={orientation}\n ref={forwardedRef}\n data-disabled={disabled ? '' : undefined}\n unstyled={unstyled}\n {...commonProps}\n />\n </RovingFocusGroup>\n ) : (\n <ToggleGroupImplElementFrame\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n unstyled={unstyled}\n {...commonProps}\n />\n )}\n </ToggleGroupContext>\n )\n }\n )\n)\n\nexport { ToggleGroup, createToggleGroupScope }\nexport type {\n ToggleGroupItemProps,\n ToggleGroupMultipleProps,\n ToggleGroupSingleProps,\n ToggleGroupProps,\n}\n"],
|
|
5
|
-
"mappings": "AAAA,
|
|
6
|
-
"names": ["value"]
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["createContextScope", "registerFocusable", "getFontSize", "stepTokenUpOrDown", "Group", "useGroupItem", "useGetThemedIcon", "RovingFocusGroup", "createRovingFocusGroupScope", "useControllableState", "useDirection", "getVariableValue", "isWeb", "styled", "useTheme", "withStaticProperties", "React", "Toggle", "ToggleFrame", "TOGGLE_GROUP_NAME", "createToggleGroupContext", "createToggleGroupScope", "TOGGLE_GROUP_ITEM_NAME", "createToggleGroupItemContext", "createToggleGroupItemScope", "ToggleGroupItemProvider", "useToggleGroupItemContext", "useToggleGroupItemScope", "ToggleGroupItem", "props", "forwardedRef", "valueContext", "useToggleGroupValueContext", "context", "useToggleGroupContext", "__scopeToggleGroup", "rovingFocusGroupScope", "useRovingFocusGroupScope", "pressed", "disabled", "ref", "groupItemProps", "size", "sizeProps", "iconSize", "theme", "getThemedIcon", "children", "child", "commonProps", "ToggleGroupItemImpl", "value", "itemProps", "singleProps", "typeProps", "ToggleGroup", "type", "toggleGroupProps", "ToggleGroupImplSingle", "multipleProps", "ToggleGroupImplMultiple", "ToggleGroupValueProvider", "valueProp", "defaultValue", "onValueChange", "disableDeactivation", "toggleGroupSingleProps", "setValue", "ToggleGroupImpl", "toggleGroupMultipleProps", "handleButtonActivate", "itemValue", "prevValue", "handleButtonDeactivate", "ToggleGroupContext", "ToggleGroupImplElementFrame", "orientation", "dir", "rovingFocus", "loop", "unstyled", "sizeProp", "sizeAdjust", "direction", "adjustedSize"]
|
|
7
7
|
}
|