@korsolutions/ui 0.0.64 → 0.0.65
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/module/components/button/button.js +44 -0
- package/dist/module/components/button/button.js.map +1 -0
- package/dist/module/components/button/index.js +1 -8
- package/dist/module/components/button/index.js.map +1 -1
- package/dist/module/components/button/variants/default.js +15 -10
- package/dist/module/components/button/variants/default.js.map +1 -1
- package/dist/module/components/button/variants/ghost.js +19 -4
- package/dist/module/components/button/variants/ghost.js.map +1 -1
- package/dist/module/components/button/variants/secondary.js +19 -4
- package/dist/module/components/button/variants/secondary.js.map +1 -1
- package/dist/module/hooks/use-organized-children.js.map +1 -1
- package/dist/typescript/src/components/button/{components/button-root.d.ts → button.d.ts} +4 -4
- package/dist/typescript/src/components/button/button.d.ts.map +1 -0
- package/dist/typescript/src/components/button/index.d.ts +1 -11
- package/dist/typescript/src/components/button/index.d.ts.map +1 -1
- package/dist/typescript/src/components/button/types.d.ts +6 -6
- package/dist/typescript/src/components/button/types.d.ts.map +1 -1
- package/dist/typescript/src/components/button/variants/default.d.ts +1 -1
- package/dist/typescript/src/components/button/variants/default.d.ts.map +1 -1
- package/dist/typescript/src/components/button/variants/ghost.d.ts +1 -1
- package/dist/typescript/src/components/button/variants/ghost.d.ts.map +1 -1
- package/dist/typescript/src/components/button/variants/secondary.d.ts +1 -1
- package/dist/typescript/src/components/button/variants/secondary.d.ts.map +1 -1
- package/dist/typescript/src/hooks/use-organized-children.d.ts +1 -1
- package/dist/typescript/src/hooks/use-organized-children.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/button/button.tsx +85 -0
- package/src/components/button/index.ts +1 -13
- package/src/components/button/types.ts +10 -6
- package/src/components/button/variants/default.tsx +12 -6
- package/src/components/button/variants/ghost.tsx +18 -2
- package/src/components/button/variants/secondary.tsx +18 -2
- package/src/hooks/use-organized-children.tsx +1 -1
- package/dist/module/components/button/components/button-label.js +0 -18
- package/dist/module/components/button/components/button-label.js.map +0 -1
- package/dist/module/components/button/components/button-root.js +0 -60
- package/dist/module/components/button/components/button-root.js.map +0 -1
- package/dist/module/components/button/components/button-spinner.js +0 -15
- package/dist/module/components/button/components/button-spinner.js.map +0 -1
- package/dist/module/components/button/context.js +0 -12
- package/dist/module/components/button/context.js.map +0 -1
- package/dist/typescript/src/components/button/components/button-label.d.ts +0 -9
- package/dist/typescript/src/components/button/components/button-label.d.ts.map +0 -1
- package/dist/typescript/src/components/button/components/button-root.d.ts.map +0 -1
- package/dist/typescript/src/components/button/components/button-spinner.d.ts +0 -8
- package/dist/typescript/src/components/button/components/button-spinner.d.ts.map +0 -1
- package/dist/typescript/src/components/button/context.d.ts +0 -8
- package/dist/typescript/src/components/button/context.d.ts.map +0 -1
- package/src/components/button/components/button-label.tsx +0 -25
- package/src/components/button/components/button-root.tsx +0 -76
- package/src/components/button/components/button-spinner.tsx +0 -14
- package/src/components/button/context.ts +0 -17
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useState } from "react";
|
|
4
|
+
import { ActivityIndicator, Pressable, StyleSheet } from "react-native";
|
|
5
|
+
import { useOrganizedChildren } from "../../hooks/use-organized-children.js";
|
|
6
|
+
import { ButtonVariants } from "./variants/index.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const calculateState = (props, isHovered) => {
|
|
9
|
+
if (props.isDisabled) return "disabled";
|
|
10
|
+
if (props.isLoading) return "loading";
|
|
11
|
+
if (isHovered) return "hovered";
|
|
12
|
+
return "default";
|
|
13
|
+
};
|
|
14
|
+
export function Button(props) {
|
|
15
|
+
const variantStyles = ButtonVariants[props.variant ?? "default"]();
|
|
16
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
17
|
+
const state = calculateState(props, isHovered);
|
|
18
|
+
const textStyle = StyleSheet.flatten([variantStyles.text?.default, variantStyles.text?.[state]]);
|
|
19
|
+
const iconProps = StyleSheet.flatten([variantStyles.icon?.default, variantStyles.icon?.[state]]);
|
|
20
|
+
const organizedChildren = useOrganizedChildren(props.children, textStyle, iconProps);
|
|
21
|
+
const handlePress = event => {
|
|
22
|
+
if (props.isDisabled || props.isLoading) {
|
|
23
|
+
event.preventDefault();
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
props.onPress?.(event);
|
|
27
|
+
};
|
|
28
|
+
const spinnerProps = {
|
|
29
|
+
...variantStyles.spinner?.[state],
|
|
30
|
+
...variantStyles.spinner?.default
|
|
31
|
+
};
|
|
32
|
+
return /*#__PURE__*/_jsxs(Pressable, {
|
|
33
|
+
...props,
|
|
34
|
+
onPress: handlePress,
|
|
35
|
+
onHoverIn: () => setIsHovered(true),
|
|
36
|
+
onHoverOut: () => setIsHovered(false),
|
|
37
|
+
disabled: props.isDisabled,
|
|
38
|
+
style: [variantStyles.root?.default, variantStyles.root?.[state], props.style],
|
|
39
|
+
children: [organizedChildren, props.isLoading && /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
40
|
+
...spinnerProps
|
|
41
|
+
})]
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","ActivityIndicator","Pressable","StyleSheet","useOrganizedChildren","ButtonVariants","jsx","_jsx","jsxs","_jsxs","calculateState","props","isHovered","isDisabled","isLoading","Button","variantStyles","variant","setIsHovered","state","textStyle","flatten","text","default","iconProps","icon","organizedChildren","children","handlePress","event","preventDefault","onPress","spinnerProps","spinner","onHoverIn","onHoverOut","disabled","style","root"],"sourceRoot":"../../../../src","sources":["components/button/button.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SACEC,iBAAiB,EACjBC,SAAS,EAGTC,UAAU,QAEL,cAAc;AACrB,SAASC,oBAAoB,QAAQ,uCAAoC;AAEzE,SAASC,cAAc,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY5C,MAAMC,cAAc,GAAGA,CACrBC,KAAkB,EAClBC,SAAkB,KACF;EAChB,IAAID,KAAK,CAACE,UAAU,EAAE,OAAO,UAAU;EACvC,IAAIF,KAAK,CAACG,SAAS,EAAE,OAAO,SAAS;EACrC,IAAIF,SAAS,EAAE,OAAO,SAAS;EAC/B,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASG,MAAMA,CAACJ,KAAkB,EAAE;EACzC,MAAMK,aAAa,GAAGX,cAAc,CAACM,KAAK,CAACM,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAClE,MAAM,CAACL,SAAS,EAAEM,YAAY,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMmB,KAAK,GAAGT,cAAc,CAACC,KAAK,EAAEC,SAAS,CAAC;EAE9C,MAAMQ,SAAS,GAAGjB,UAAU,CAACkB,OAAO,CAAC,CACnCL,aAAa,CAACM,IAAI,EAAEC,OAAO,EAC3BP,aAAa,CAACM,IAAI,GAAGH,KAAK,CAAC,CAC5B,CAAC;EACF,MAAMK,SAAS,GAAGrB,UAAU,CAACkB,OAAO,CAAC,CACnCL,aAAa,CAACS,IAAI,EAAEF,OAAO,EAC3BP,aAAa,CAACS,IAAI,GAAGN,KAAK,CAAC,CAC5B,CAAC;EAEF,MAAMO,iBAAiB,GAAGtB,oBAAoB,CAC5CO,KAAK,CAACgB,QAAQ,EACdP,SAAS,EACTI,SACF,CAAC;EAED,MAAMI,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAIlB,KAAK,CAACE,UAAU,IAAIF,KAAK,CAACG,SAAS,EAAE;MACvCe,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB;IACF;IACAnB,KAAK,CAACoB,OAAO,GAAGF,KAAK,CAAC;EACxB,CAAC;EAED,MAAMG,YAAY,GAAG;IACnB,GAAGhB,aAAa,CAACiB,OAAO,GAAGd,KAAK,CAAC;IACjC,GAAGH,aAAa,CAACiB,OAAO,EAAEV;EAC5B,CAAC;EAED,oBACEd,KAAA,CAACP,SAAS;IAAA,GACJS,KAAK;IACToB,OAAO,EAAEH,WAAY;IACrBM,SAAS,EAAEA,CAAA,KAAMhB,YAAY,CAAC,IAAI,CAAE;IACpCiB,UAAU,EAAEA,CAAA,KAAMjB,YAAY,CAAC,KAAK,CAAE;IACtCkB,QAAQ,EAAEzB,KAAK,CAACE,UAAW;IAC3BwB,KAAK,EAAE,CACLrB,aAAa,CAACsB,IAAI,EAAEf,OAAO,EAC3BP,aAAa,CAACsB,IAAI,GAAGnB,KAAK,CAAC,EAC3BR,KAAK,CAAC0B,KAAK,CACX;IAAAV,QAAA,GAEDD,iBAAiB,EACjBf,KAAK,CAACG,SAAS,iBAAIP,IAAA,CAACN,iBAAiB;MAAA,GAAK+B;IAAY,CAAG,CAAC;EAAA,CAClD,CAAC;AAEhB","ignoreList":[]}
|
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
import { ButtonRoot } from "./components/button-root.js";
|
|
5
|
-
import { ButtonSpinner } from "./components/button-spinner.js";
|
|
6
|
-
export const Button = {
|
|
7
|
-
Root: ButtonRoot,
|
|
8
|
-
Label: ButtonLabel,
|
|
9
|
-
Spinner: ButtonSpinner
|
|
10
|
-
};
|
|
3
|
+
export { Button } from "./button.js";
|
|
11
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["Button"],"sourceRoot":"../../../../src","sources":["components/button/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAA0B,aAAU","ignoreList":[]}
|
|
@@ -20,33 +20,38 @@ export const useButtonVariantDefault = () => {
|
|
|
20
20
|
justifyContent: "center",
|
|
21
21
|
backgroundColor: colors.primary,
|
|
22
22
|
borderWidth: 1,
|
|
23
|
-
borderColor: colors.border
|
|
23
|
+
borderColor: colors.border,
|
|
24
|
+
cursor: "pointer"
|
|
24
25
|
},
|
|
25
26
|
disabled: {
|
|
26
|
-
opacity: 0.5
|
|
27
|
+
opacity: 0.5,
|
|
28
|
+
cursor: "not-allowed"
|
|
27
29
|
},
|
|
28
30
|
loading: {
|
|
29
|
-
opacity: 0.5
|
|
31
|
+
opacity: 0.5,
|
|
32
|
+
cursor: "wait"
|
|
30
33
|
},
|
|
31
34
|
hovered: {
|
|
32
35
|
backgroundColor: hslaSetRelativeLightness(colors.primary, -10)
|
|
33
36
|
}
|
|
34
37
|
},
|
|
35
|
-
|
|
38
|
+
text: {
|
|
36
39
|
default: {
|
|
37
40
|
color: colors.primaryForeground,
|
|
38
41
|
fontSize,
|
|
39
42
|
fontFamily
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
icon: {
|
|
46
|
+
default: {
|
|
47
|
+
color: colors.primaryForeground,
|
|
48
|
+
size: fontSize
|
|
49
|
+
}
|
|
43
50
|
},
|
|
44
51
|
spinner: {
|
|
45
52
|
default: {
|
|
46
53
|
color: colors.primaryForeground
|
|
47
|
-
}
|
|
48
|
-
disabled: {},
|
|
49
|
-
loading: {}
|
|
54
|
+
}
|
|
50
55
|
}
|
|
51
56
|
}));
|
|
52
57
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantDefault","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","primary","borderWidth","borderColor","border","disabled","opacity","loading","hovered","
|
|
1
|
+
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantDefault","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","primary","borderWidth","borderColor","border","cursor","disabled","opacity","loading","hovered","text","color","primaryForeground","icon","size","spinner"],"sourceRoot":"../../../../../src","sources":["components/button/variants/default.tsx"],"mappings":";;AACA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,uBAAuB,GAAGA,CAAA,KAAoB;EACzD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAoB;IAC3DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBC,YAAY,EAAER,MAAM;QACpBS,GAAG,EAAE,CAAC;QACNC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,eAAe,EAAEb,MAAM,CAACc,OAAO;QAC/BC,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEhB,MAAM,CAACiB,MAAM;QAC1BC,MAAM,EAAE;MACV,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE,GAAG;QACZF,MAAM,EAAE;MACV,CAAC;MACDG,OAAO,EAAE;QACPD,OAAO,EAAE,GAAG;QACZF,MAAM,EAAE;MACV,CAAC;MACDI,OAAO,EAAE;QACPT,eAAe,EAAEhB,wBAAwB,CAACG,MAAM,CAACc,OAAO,EAAE,CAAC,EAAE;MAC/D;IACF,CAAC;IACDS,IAAI,EAAE;MACJlB,OAAO,EAAE;QACPmB,KAAK,EAAExB,MAAM,CAACyB,iBAAiB;QAC/BtB,QAAQ;QACRD;MACF;IACF,CAAC;IACDwB,IAAI,EAAE;MACJrB,OAAO,EAAE;QACPmB,KAAK,EAAExB,MAAM,CAACyB,iBAAiB;QAC/BE,IAAI,EAAExB;MACR;IACF,CAAC;IACDyB,OAAO,EAAE;MACPvB,OAAO,EAAE;QACPmB,KAAK,EAAExB,MAAM,CAACyB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -18,19 +18,22 @@ export const useButtonVariantGhost = () => {
|
|
|
18
18
|
gap: 8,
|
|
19
19
|
alignItems: "center",
|
|
20
20
|
justifyContent: "center",
|
|
21
|
-
backgroundColor: "transparent"
|
|
21
|
+
backgroundColor: "transparent",
|
|
22
|
+
cursor: "pointer"
|
|
22
23
|
},
|
|
23
24
|
disabled: {
|
|
24
|
-
opacity: 0.5
|
|
25
|
+
opacity: 0.5,
|
|
26
|
+
cursor: "not-allowed"
|
|
25
27
|
},
|
|
26
28
|
loading: {
|
|
27
|
-
opacity: 0.5
|
|
29
|
+
opacity: 0.5,
|
|
30
|
+
cursor: "wait"
|
|
28
31
|
},
|
|
29
32
|
hovered: {
|
|
30
33
|
backgroundColor: hslaSetRelativeLightness(colors.secondary, -1)
|
|
31
34
|
}
|
|
32
35
|
},
|
|
33
|
-
|
|
36
|
+
text: {
|
|
34
37
|
default: {
|
|
35
38
|
color: colors.foreground,
|
|
36
39
|
fontSize,
|
|
@@ -43,6 +46,18 @@ export const useButtonVariantGhost = () => {
|
|
|
43
46
|
color: colors.mutedForeground
|
|
44
47
|
}
|
|
45
48
|
},
|
|
49
|
+
icon: {
|
|
50
|
+
default: {
|
|
51
|
+
color: colors.foreground,
|
|
52
|
+
size: fontSize
|
|
53
|
+
},
|
|
54
|
+
disabled: {
|
|
55
|
+
color: colors.mutedForeground
|
|
56
|
+
},
|
|
57
|
+
loading: {
|
|
58
|
+
color: colors.mutedForeground
|
|
59
|
+
}
|
|
60
|
+
},
|
|
46
61
|
spinner: {
|
|
47
62
|
default: {
|
|
48
63
|
color: colors.foreground
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantGhost","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","disabled","opacity","loading","hovered","secondary","
|
|
1
|
+
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantGhost","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","cursor","disabled","opacity","loading","hovered","secondary","text","color","foreground","mutedForeground","icon","size","spinner"],"sourceRoot":"../../../../../src","sources":["components/button/variants/ghost.tsx"],"mappings":";;AACA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAoB;EACvD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAoB;IAC3DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBC,YAAY,EAAER,MAAM;QACpBS,GAAG,EAAE,CAAC;QACNC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,eAAe,EAAE,aAAa;QAC9BC,MAAM,EAAE;MACV,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE,GAAG;QACZF,MAAM,EAAE;MACV,CAAC;MACDG,OAAO,EAAE;QACPD,OAAO,EAAE,GAAG;QACZF,MAAM,EAAE;MACV,CAAC;MACDI,OAAO,EAAE;QACPL,eAAe,EAAEhB,wBAAwB,CAACG,MAAM,CAACmB,SAAS,EAAE,CAAC,CAAC;MAChE;IACF,CAAC;IACDC,IAAI,EAAE;MACJf,OAAO,EAAE;QACPgB,KAAK,EAAErB,MAAM,CAACsB,UAAU;QACxBnB,QAAQ;QACRD;MACF,CAAC;MACDa,QAAQ,EAAE;QACRM,KAAK,EAAErB,MAAM,CAACuB;MAChB,CAAC;MACDN,OAAO,EAAE;QACPI,KAAK,EAAErB,MAAM,CAACuB;MAChB;IACF,CAAC;IACDC,IAAI,EAAE;MACJnB,OAAO,EAAE;QACPgB,KAAK,EAAErB,MAAM,CAACsB,UAAU;QACxBG,IAAI,EAAEtB;MACR,CAAC;MACDY,QAAQ,EAAE;QACRM,KAAK,EAAErB,MAAM,CAACuB;MAChB,CAAC;MACDN,OAAO,EAAE;QACPI,KAAK,EAAErB,MAAM,CAACuB;MAChB;IACF,CAAC;IACDG,OAAO,EAAE;MACPrB,OAAO,EAAE;QACPgB,KAAK,EAAErB,MAAM,CAACsB;MAChB,CAAC;MACDP,QAAQ,EAAE;QACRM,KAAK,EAAErB,MAAM,CAACuB;MAChB,CAAC;MACDN,OAAO,EAAE;QACPI,KAAK,EAAErB,MAAM,CAACuB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -20,19 +20,22 @@ export const useButtonVariantSecondary = () => {
|
|
|
20
20
|
justifyContent: "center",
|
|
21
21
|
borderWidth: 1,
|
|
22
22
|
borderColor: colors.border,
|
|
23
|
-
backgroundColor: colors.secondary
|
|
23
|
+
backgroundColor: colors.secondary,
|
|
24
|
+
cursor: "pointer"
|
|
24
25
|
},
|
|
25
26
|
disabled: {
|
|
26
|
-
opacity: 0.5
|
|
27
|
+
opacity: 0.5,
|
|
28
|
+
cursor: "not-allowed"
|
|
27
29
|
},
|
|
28
30
|
loading: {
|
|
29
|
-
opacity: 0.5
|
|
31
|
+
opacity: 0.5,
|
|
32
|
+
cursor: "wait"
|
|
30
33
|
},
|
|
31
34
|
hovered: {
|
|
32
35
|
backgroundColor: hslaSetRelativeLightness(colors.secondary, -1)
|
|
33
36
|
}
|
|
34
37
|
},
|
|
35
|
-
|
|
38
|
+
text: {
|
|
36
39
|
default: {
|
|
37
40
|
color: colors.secondaryForeground,
|
|
38
41
|
fontSize,
|
|
@@ -45,6 +48,18 @@ export const useButtonVariantSecondary = () => {
|
|
|
45
48
|
color: colors.mutedForeground
|
|
46
49
|
}
|
|
47
50
|
},
|
|
51
|
+
icon: {
|
|
52
|
+
default: {
|
|
53
|
+
color: colors.secondaryForeground,
|
|
54
|
+
size: fontSize
|
|
55
|
+
},
|
|
56
|
+
disabled: {
|
|
57
|
+
color: colors.mutedForeground
|
|
58
|
+
},
|
|
59
|
+
loading: {
|
|
60
|
+
color: colors.mutedForeground
|
|
61
|
+
}
|
|
62
|
+
},
|
|
48
63
|
spinner: {
|
|
49
64
|
default: {
|
|
50
65
|
color: colors.secondaryForeground
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantSecondary","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","borderWidth","borderColor","border","backgroundColor","secondary","disabled","opacity","loading","hovered","
|
|
1
|
+
{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantSecondary","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","borderWidth","borderColor","border","backgroundColor","secondary","cursor","disabled","opacity","loading","hovered","text","color","secondaryForeground","mutedForeground","icon","size","spinner"],"sourceRoot":"../../../../../src","sources":["components/button/variants/secondary.tsx"],"mappings":";;AACA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,yBAAyB,GAAGA,CAAA,KAAoB;EAC3D,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAoB;IAC3DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBC,YAAY,EAAER,MAAM;QACpBS,GAAG,EAAE,CAAC;QACNC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEd,MAAM,CAACe,MAAM;QAC1BC,eAAe,EAAEhB,MAAM,CAACiB,SAAS;QACjCC,MAAM,EAAE;MACV,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE,GAAG;QACZF,MAAM,EAAE;MACV,CAAC;MACDG,OAAO,EAAE;QACPD,OAAO,EAAE,GAAG;QACZF,MAAM,EAAE;MACV,CAAC;MACDI,OAAO,EAAE;QACPN,eAAe,EAAEnB,wBAAwB,CAACG,MAAM,CAACiB,SAAS,EAAE,CAAC,CAAC;MAChE;IACF,CAAC;IACDM,IAAI,EAAE;MACJlB,OAAO,EAAE;QACPmB,KAAK,EAAExB,MAAM,CAACyB,mBAAmB;QACjCtB,QAAQ;QACRD;MACF,CAAC;MACDiB,QAAQ,EAAE;QACRK,KAAK,EAAExB,MAAM,CAAC0B;MAChB,CAAC;MACDL,OAAO,EAAE;QACPG,KAAK,EAAExB,MAAM,CAAC0B;MAChB;IACF,CAAC;IACDC,IAAI,EAAE;MACJtB,OAAO,EAAE;QACPmB,KAAK,EAAExB,MAAM,CAACyB,mBAAmB;QACjCG,IAAI,EAAEzB;MACR,CAAC;MACDgB,QAAQ,EAAE;QACRK,KAAK,EAAExB,MAAM,CAAC0B;MAChB,CAAC;MACDL,OAAO,EAAE;QACPG,KAAK,EAAExB,MAAM,CAAC0B;MAChB;IACF,CAAC;IACDG,OAAO,EAAE;MACPxB,OAAO,EAAE;QACPmB,KAAK,EAAExB,MAAM,CAACyB;MAChB,CAAC;MACDN,QAAQ,EAAE;QACRK,KAAK,EAAExB,MAAM,CAAC0B;MAChB,CAAC;MACDL,OAAO,EAAE;QACPG,KAAK,EAAExB,MAAM,CAAC0B;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","Text","Icon","getElementProp","jsx","_jsx","useOrganizedChildren","children","textStyle","iconProps","organizedChildren","style","Array","isArray","map","child","index","isValidElement","type","cloneElement","key"],"sourceRoot":"../../../src","sources":["hooks/use-organized-children.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,IAAI,QAAwB,6BAAoB;AACzD,SAASC,cAAc,QAAQ,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,OAAO,SAASC,oBAAoBA,CAClCC,QAAyB,EACzBC,SAA2C,EAC3CC,
|
|
1
|
+
{"version":3,"names":["React","useMemo","Text","Icon","getElementProp","jsx","_jsx","useOrganizedChildren","children","textStyle","iconProps","organizedChildren","style","Array","isArray","map","child","index","isValidElement","type","cloneElement","key"],"sourceRoot":"../../../src","sources":["hooks/use-organized-children.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,IAAI,QAAwB,6BAAoB;AACzD,SAASC,cAAc,QAAQ,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExD,OAAO,SAASC,oBAAoBA,CAClCC,QAAyB,EACzBC,SAA2C,EAC3CC,SAAuC,EACtB;EACjB,MAAMC,iBAAiB,GAAGV,OAAO,CAAC,MAAM;IACtC,IAAI,OAAOO,QAAQ,KAAK,QAAQ,EAAE;MAChC,oBAAOF,IAAA,CAACJ,IAAI;QAACU,KAAK,EAAEH,SAAU;QAAAD,QAAA,EAAEA;MAAQ,CAAO,CAAC;IAClD;IACA,IAAIK,KAAK,CAACC,OAAO,CAACN,QAAQ,CAAC,EAAE;MAC3B,OAAOA,QAAQ,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;QACpC,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE;UAC7B,oBACEV,IAAA,CAACJ,IAAI;YAAaU,KAAK,EAAEH,SAAU;YAAAD,QAAA,EAChCQ;UAAK,GADGC,KAEL,CAAC;QAEX,CAAC,MAAM,IAAI,aAAAjB,KAAK,CAACkB,cAAc,CAACF,KAAK,CAAC,IAAIA,KAAK,CAACG,IAAI,KAAKhB,IAAI,EAAE;UAC7D,oBAAOH,KAAK,CAACoB,YAAY,CAACJ,KAAK,EAA6B;YAC1DK,GAAG,EAAEL,KAAK,CAACK,GAAG;YACd,GAAGX,SAAS;YACZE,KAAK,EAAE,CAACF,SAAS,EAAEE,KAAK,EAAER,cAAc,CAACY,KAAK,EAAE,OAAO,CAAC;UAC1D,CAAC,CAAC;QACJ;QACA,OAAOA,KAAK;MACd,CAAC,CAAC;IACJ;IACA,OAAOR,QAAQ;EACjB,CAAC,EAAE,CAACA,QAAQ,EAAEE,SAAS,EAAED,SAAS,CAAC,CAAC;EAEpC,OAAOE,iBAAiB;AAC1B","ignoreList":[]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
-
import { ButtonVariants } from "
|
|
4
|
-
export interface
|
|
3
|
+
import { ButtonVariants } from "./variants";
|
|
4
|
+
export interface ButtonProps extends PressableProps {
|
|
5
5
|
variant?: keyof typeof ButtonVariants;
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
isDisabled?: boolean;
|
|
8
8
|
isLoading?: boolean;
|
|
9
9
|
style?: StyleProp<ViewStyle>;
|
|
10
10
|
}
|
|
11
|
-
export declare function
|
|
12
|
-
//# sourceMappingURL=button
|
|
11
|
+
export declare function Button(props: ButtonProps): React.JSX.Element;
|
|
12
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAYD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAmDxC"}
|
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import { ButtonRoot } from "./components/button-root";
|
|
3
|
-
import { ButtonSpinner } from "./components/button-spinner";
|
|
4
|
-
export declare const Button: {
|
|
5
|
-
Root: typeof ButtonRoot;
|
|
6
|
-
Label: typeof ButtonLabel;
|
|
7
|
-
Spinner: typeof ButtonSpinner;
|
|
8
|
-
};
|
|
9
|
-
export type { ButtonLabelProps } from "./components/button-label";
|
|
10
|
-
export type { ButtonRootProps } from "./components/button-root";
|
|
11
|
-
export type { ButtonSpinnerProps } from "./components/button-spinner";
|
|
1
|
+
export { Button, type ButtonProps } from "./button";
|
|
12
2
|
export type { ButtonStyles } from "./types";
|
|
13
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
import type { ButtonSpinnerProps } from "./components/button-spinner";
|
|
1
|
+
import type { ActivityIndicatorProps, TextStyle, ViewStyle } from "react-native";
|
|
2
|
+
import type { IconProps } from "../icon";
|
|
4
3
|
export type ButtonState = "default" | "disabled" | "loading" | "hovered";
|
|
5
4
|
export interface ButtonStyles {
|
|
6
|
-
root?: Partial<Record<ButtonState,
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
root?: Partial<Record<ButtonState, ViewStyle>>;
|
|
6
|
+
text?: Partial<Record<ButtonState, TextStyle>>;
|
|
7
|
+
icon?: Partial<Record<ButtonState, IconProps>>;
|
|
8
|
+
spinner?: Partial<Record<ButtonState, ActivityIndicatorProps>>;
|
|
9
9
|
}
|
|
10
10
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAC,CAAC;CAChE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/default.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/default.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,uBAAuB,QAAO,YAiD1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ghost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/ghost.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ghost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/ghost.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,qBAAqB,QAAO,YAiExC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"secondary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/secondary.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"secondary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/secondary.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,yBAAyB,QAAO,YAmE5C,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type StyleProp, type TextStyle } from "react-native";
|
|
3
3
|
import { type IconProps } from "../components/icon";
|
|
4
|
-
export declare function useOrganizedChildren(children: React.ReactNode, textStyle: StyleProp<TextStyle> | undefined, iconProps: IconProps | undefined): React.ReactNode;
|
|
4
|
+
export declare function useOrganizedChildren(children: React.ReactNode, textStyle: StyleProp<TextStyle> | undefined, iconProps: IconProps | undefined | null): React.ReactNode;
|
|
5
5
|
//# sourceMappingURL=use-organized-children.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-organized-children.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-organized-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,EAC3C,SAAS,EAAE,SAAS,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"use-organized-children.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-organized-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,EAC3C,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,GACtC,KAAK,CAAC,SAAS,CA2BjB"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import {
|
|
3
|
+
ActivityIndicator,
|
|
4
|
+
Pressable,
|
|
5
|
+
type PressableProps,
|
|
6
|
+
type StyleProp,
|
|
7
|
+
StyleSheet,
|
|
8
|
+
type ViewStyle,
|
|
9
|
+
} from "react-native";
|
|
10
|
+
import { useOrganizedChildren } from "../../hooks/use-organized-children";
|
|
11
|
+
import type { ButtonState } from "./types";
|
|
12
|
+
import { ButtonVariants } from "./variants";
|
|
13
|
+
|
|
14
|
+
export interface ButtonProps extends PressableProps {
|
|
15
|
+
variant?: keyof typeof ButtonVariants;
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
|
|
18
|
+
isDisabled?: boolean;
|
|
19
|
+
isLoading?: boolean;
|
|
20
|
+
|
|
21
|
+
style?: StyleProp<ViewStyle>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const calculateState = (
|
|
25
|
+
props: ButtonProps,
|
|
26
|
+
isHovered: boolean,
|
|
27
|
+
): ButtonState => {
|
|
28
|
+
if (props.isDisabled) return "disabled";
|
|
29
|
+
if (props.isLoading) return "loading";
|
|
30
|
+
if (isHovered) return "hovered";
|
|
31
|
+
return "default";
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export function Button(props: ButtonProps) {
|
|
35
|
+
const variantStyles = ButtonVariants[props.variant ?? "default"]();
|
|
36
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
37
|
+
|
|
38
|
+
const state = calculateState(props, isHovered);
|
|
39
|
+
|
|
40
|
+
const textStyle = StyleSheet.flatten([
|
|
41
|
+
variantStyles.text?.default,
|
|
42
|
+
variantStyles.text?.[state],
|
|
43
|
+
]);
|
|
44
|
+
const iconProps = StyleSheet.flatten([
|
|
45
|
+
variantStyles.icon?.default,
|
|
46
|
+
variantStyles.icon?.[state],
|
|
47
|
+
]);
|
|
48
|
+
|
|
49
|
+
const organizedChildren = useOrganizedChildren(
|
|
50
|
+
props.children,
|
|
51
|
+
textStyle,
|
|
52
|
+
iconProps,
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
const handlePress: PressableProps["onPress"] = (event) => {
|
|
56
|
+
if (props.isDisabled || props.isLoading) {
|
|
57
|
+
event.preventDefault();
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
props.onPress?.(event);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const spinnerProps = {
|
|
64
|
+
...variantStyles.spinner?.[state],
|
|
65
|
+
...variantStyles.spinner?.default,
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<Pressable
|
|
70
|
+
{...props}
|
|
71
|
+
onPress={handlePress}
|
|
72
|
+
onHoverIn={() => setIsHovered(true)}
|
|
73
|
+
onHoverOut={() => setIsHovered(false)}
|
|
74
|
+
disabled={props.isDisabled}
|
|
75
|
+
style={[
|
|
76
|
+
variantStyles.root?.default,
|
|
77
|
+
variantStyles.root?.[state],
|
|
78
|
+
props.style,
|
|
79
|
+
]}
|
|
80
|
+
>
|
|
81
|
+
{organizedChildren}
|
|
82
|
+
{props.isLoading && <ActivityIndicator {...spinnerProps} />}
|
|
83
|
+
</Pressable>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
@@ -1,14 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { ButtonRoot } from "./components/button-root";
|
|
3
|
-
import { ButtonSpinner } from "./components/button-spinner";
|
|
4
|
-
|
|
5
|
-
export const Button = {
|
|
6
|
-
Root: ButtonRoot,
|
|
7
|
-
Label: ButtonLabel,
|
|
8
|
-
Spinner: ButtonSpinner,
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export type { ButtonLabelProps } from "./components/button-label";
|
|
12
|
-
export type { ButtonRootProps } from "./components/button-root";
|
|
13
|
-
export type { ButtonSpinnerProps } from "./components/button-spinner";
|
|
1
|
+
export { Button, type ButtonProps } from "./button";
|
|
14
2
|
export type { ButtonStyles } from "./types";
|
|
@@ -1,11 +1,15 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type {
|
|
2
|
+
ActivityIndicatorProps,
|
|
3
|
+
TextStyle,
|
|
4
|
+
ViewStyle,
|
|
5
|
+
} from "react-native";
|
|
6
|
+
import type { IconProps } from "../icon";
|
|
4
7
|
|
|
5
8
|
export type ButtonState = "default" | "disabled" | "loading" | "hovered";
|
|
6
9
|
|
|
7
10
|
export interface ButtonStyles {
|
|
8
|
-
root?: Partial<Record<ButtonState,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
+
root?: Partial<Record<ButtonState, ViewStyle>>;
|
|
12
|
+
text?: Partial<Record<ButtonState, TextStyle>>;
|
|
13
|
+
icon?: Partial<Record<ButtonState, IconProps>>;
|
|
14
|
+
spinner?: Partial<Record<ButtonState, ActivityIndicatorProps>>;
|
|
11
15
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { CursorValue } from "react-native";
|
|
2
2
|
import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
|
|
3
3
|
import { useThemedStyles } from "../../../utils/use-themed-styles";
|
|
4
|
+
import type { ButtonStyles } from "../types";
|
|
4
5
|
|
|
5
6
|
export const useButtonVariantDefault = (): ButtonStyles => {
|
|
6
7
|
return useThemedStyles(
|
|
@@ -17,32 +18,37 @@ export const useButtonVariantDefault = (): ButtonStyles => {
|
|
|
17
18
|
backgroundColor: colors.primary,
|
|
18
19
|
borderWidth: 1,
|
|
19
20
|
borderColor: colors.border,
|
|
21
|
+
cursor: "pointer",
|
|
20
22
|
},
|
|
21
23
|
disabled: {
|
|
22
24
|
opacity: 0.5,
|
|
25
|
+
cursor: "not-allowed" as CursorValue,
|
|
23
26
|
},
|
|
24
27
|
loading: {
|
|
25
28
|
opacity: 0.5,
|
|
29
|
+
cursor: "wait" as CursorValue,
|
|
26
30
|
},
|
|
27
31
|
hovered: {
|
|
28
32
|
backgroundColor: hslaSetRelativeLightness(colors.primary, -10),
|
|
29
33
|
},
|
|
30
34
|
},
|
|
31
|
-
|
|
35
|
+
text: {
|
|
32
36
|
default: {
|
|
33
37
|
color: colors.primaryForeground,
|
|
34
38
|
fontSize,
|
|
35
39
|
fontFamily,
|
|
36
40
|
},
|
|
37
|
-
|
|
38
|
-
|
|
41
|
+
},
|
|
42
|
+
icon: {
|
|
43
|
+
default: {
|
|
44
|
+
color: colors.primaryForeground,
|
|
45
|
+
size: fontSize,
|
|
46
|
+
},
|
|
39
47
|
},
|
|
40
48
|
spinner: {
|
|
41
49
|
default: {
|
|
42
50
|
color: colors.primaryForeground,
|
|
43
51
|
},
|
|
44
|
-
disabled: {},
|
|
45
|
-
loading: {},
|
|
46
52
|
},
|
|
47
53
|
}),
|
|
48
54
|
);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { CursorValue } from "react-native";
|
|
2
2
|
import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
|
|
3
3
|
import { useThemedStyles } from "../../../utils/use-themed-styles";
|
|
4
|
+
import type { ButtonStyles } from "../types";
|
|
4
5
|
|
|
5
6
|
export const useButtonVariantGhost = (): ButtonStyles => {
|
|
6
7
|
return useThemedStyles(
|
|
@@ -15,18 +16,21 @@ export const useButtonVariantGhost = (): ButtonStyles => {
|
|
|
15
16
|
alignItems: "center",
|
|
16
17
|
justifyContent: "center",
|
|
17
18
|
backgroundColor: "transparent",
|
|
19
|
+
cursor: "pointer",
|
|
18
20
|
},
|
|
19
21
|
disabled: {
|
|
20
22
|
opacity: 0.5,
|
|
23
|
+
cursor: "not-allowed" as CursorValue,
|
|
21
24
|
},
|
|
22
25
|
loading: {
|
|
23
26
|
opacity: 0.5,
|
|
27
|
+
cursor: "wait" as CursorValue,
|
|
24
28
|
},
|
|
25
29
|
hovered: {
|
|
26
30
|
backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
|
|
27
31
|
},
|
|
28
32
|
},
|
|
29
|
-
|
|
33
|
+
text: {
|
|
30
34
|
default: {
|
|
31
35
|
color: colors.foreground,
|
|
32
36
|
fontSize,
|
|
@@ -39,6 +43,18 @@ export const useButtonVariantGhost = (): ButtonStyles => {
|
|
|
39
43
|
color: colors.mutedForeground,
|
|
40
44
|
},
|
|
41
45
|
},
|
|
46
|
+
icon: {
|
|
47
|
+
default: {
|
|
48
|
+
color: colors.foreground,
|
|
49
|
+
size: fontSize,
|
|
50
|
+
},
|
|
51
|
+
disabled: {
|
|
52
|
+
color: colors.mutedForeground,
|
|
53
|
+
},
|
|
54
|
+
loading: {
|
|
55
|
+
color: colors.mutedForeground,
|
|
56
|
+
},
|
|
57
|
+
},
|
|
42
58
|
spinner: {
|
|
43
59
|
default: {
|
|
44
60
|
color: colors.foreground,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { CursorValue } from "react-native";
|
|
2
2
|
import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
|
|
3
3
|
import { useThemedStyles } from "../../../utils/use-themed-styles";
|
|
4
|
+
import type { ButtonStyles } from "../types";
|
|
4
5
|
|
|
5
6
|
export const useButtonVariantSecondary = (): ButtonStyles => {
|
|
6
7
|
return useThemedStyles(
|
|
@@ -17,18 +18,21 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
|
|
|
17
18
|
borderWidth: 1,
|
|
18
19
|
borderColor: colors.border,
|
|
19
20
|
backgroundColor: colors.secondary,
|
|
21
|
+
cursor: "pointer",
|
|
20
22
|
},
|
|
21
23
|
disabled: {
|
|
22
24
|
opacity: 0.5,
|
|
25
|
+
cursor: "not-allowed" as CursorValue,
|
|
23
26
|
},
|
|
24
27
|
loading: {
|
|
25
28
|
opacity: 0.5,
|
|
29
|
+
cursor: "wait" as CursorValue,
|
|
26
30
|
},
|
|
27
31
|
hovered: {
|
|
28
32
|
backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
|
|
29
33
|
},
|
|
30
34
|
},
|
|
31
|
-
|
|
35
|
+
text: {
|
|
32
36
|
default: {
|
|
33
37
|
color: colors.secondaryForeground,
|
|
34
38
|
fontSize,
|
|
@@ -41,6 +45,18 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
|
|
|
41
45
|
color: colors.mutedForeground,
|
|
42
46
|
},
|
|
43
47
|
},
|
|
48
|
+
icon: {
|
|
49
|
+
default: {
|
|
50
|
+
color: colors.secondaryForeground,
|
|
51
|
+
size: fontSize,
|
|
52
|
+
},
|
|
53
|
+
disabled: {
|
|
54
|
+
color: colors.mutedForeground,
|
|
55
|
+
},
|
|
56
|
+
loading: {
|
|
57
|
+
color: colors.mutedForeground,
|
|
58
|
+
},
|
|
59
|
+
},
|
|
44
60
|
spinner: {
|
|
45
61
|
default: {
|
|
46
62
|
color: colors.secondaryForeground,
|
|
@@ -6,7 +6,7 @@ import { getElementProp } from "../utils/element-utils";
|
|
|
6
6
|
export function useOrganizedChildren(
|
|
7
7
|
children: React.ReactNode,
|
|
8
8
|
textStyle: StyleProp<TextStyle> | undefined,
|
|
9
|
-
iconProps: IconProps | undefined,
|
|
9
|
+
iconProps: IconProps | undefined | null,
|
|
10
10
|
): React.ReactNode {
|
|
11
11
|
const organizedChildren = useMemo(() => {
|
|
12
12
|
if (typeof children === "string") {
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { calculateComposedStyles } from "../../../utils/calculate-styles.js";
|
|
4
|
-
import React from "react";
|
|
5
|
-
import { Text } from "react-native";
|
|
6
|
-
import { useButton } from "../context.js";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
export function ButtonLabel(props) {
|
|
9
|
-
const button = useButton();
|
|
10
|
-
const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
|
|
11
|
-
const isSelectable = button.state !== "disabled" && button.state !== "loading";
|
|
12
|
-
return /*#__PURE__*/_jsx(Text, {
|
|
13
|
-
selectable: isSelectable,
|
|
14
|
-
style: calculatedStyle,
|
|
15
|
-
children: props.children
|
|
16
|
-
});
|
|
17
|
-
}
|
|
18
|
-
//# sourceMappingURL=button-label.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["calculateComposedStyles","React","Text","useButton","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","isSelectable","selectable","children"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-label.tsx"],"mappings":";;AACA,SAASA,uBAAuB,QAAQ,oCAAiC;AACzE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQvC,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,eAAe,GAAGT,uBAAuB,CAACQ,MAAM,CAACE,MAAM,EAAEF,MAAM,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAElG,MAAMC,YAAY,GAAGL,MAAM,CAACG,KAAK,KAAK,UAAU,IAAIH,MAAM,CAACG,KAAK,KAAK,SAAS;EAE9E,oBACEN,IAAA,CAACH,IAAI;IAACY,UAAU,EAAED,YAAa;IAACD,KAAK,EAAEH,eAAgB;IAAAM,QAAA,EACpDR,KAAK,CAACQ;EAAQ,CACX,CAAC;AAEX","ignoreList":[]}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import React, { useState } from "react";
|
|
4
|
-
import { Pressable } from "react-native";
|
|
5
|
-
import { ButtonContext } from "../context.js";
|
|
6
|
-
import { ButtonVariants } from "../variants/index.js";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const calculateState = (props, isHovered) => {
|
|
9
|
-
if (props.isDisabled) {
|
|
10
|
-
return "disabled";
|
|
11
|
-
}
|
|
12
|
-
if (props.isLoading) {
|
|
13
|
-
return "loading";
|
|
14
|
-
}
|
|
15
|
-
if (isHovered) {
|
|
16
|
-
return "hovered";
|
|
17
|
-
}
|
|
18
|
-
return "default";
|
|
19
|
-
};
|
|
20
|
-
const cursorValue = state => {
|
|
21
|
-
switch (state) {
|
|
22
|
-
case "disabled":
|
|
23
|
-
return "not-allowed";
|
|
24
|
-
case "loading":
|
|
25
|
-
return "wait";
|
|
26
|
-
default:
|
|
27
|
-
return "pointer";
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
export function ButtonRoot(props) {
|
|
31
|
-
const variantStyles = ButtonVariants[props.variant ?? "default"]();
|
|
32
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
33
|
-
const state = calculateState(props, isHovered);
|
|
34
|
-
const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
|
|
35
|
-
const handlePress = event => {
|
|
36
|
-
if (props.isDisabled || props.isLoading) {
|
|
37
|
-
event.preventDefault();
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
props.onPress?.(event);
|
|
41
|
-
};
|
|
42
|
-
const contextValue = {
|
|
43
|
-
state,
|
|
44
|
-
styles: variantStyles
|
|
45
|
-
};
|
|
46
|
-
return /*#__PURE__*/_jsx(ButtonContext.Provider, {
|
|
47
|
-
value: contextValue,
|
|
48
|
-
children: /*#__PURE__*/_jsx(Pressable, {
|
|
49
|
-
...props,
|
|
50
|
-
onPress: handlePress,
|
|
51
|
-
onHoverIn: () => setIsHovered(true),
|
|
52
|
-
onHoverOut: () => setIsHovered(false),
|
|
53
|
-
disabled: props.isDisabled,
|
|
54
|
-
style: [calculatedStyle, {
|
|
55
|
-
cursor: cursorValue(state)
|
|
56
|
-
}]
|
|
57
|
-
})
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
//# sourceMappingURL=button-root.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Pressable","ButtonContext","ButtonVariants","jsx","_jsx","calculateState","props","isHovered","isDisabled","isLoading","cursorValue","state","ButtonRoot","variantStyles","variant","setIsHovered","calculatedStyle","root","default","style","handlePress","event","preventDefault","onPress","contextValue","styles","Provider","value","children","onHoverIn","onHoverOut","disabled","cursor"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA+E,cAAc;AAC/G,SAASC,aAAa,QAAQ,eAAY;AAE1C,SAASC,cAAc,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY7C,MAAMC,cAAc,GAAGA,CAACC,KAAsB,EAAEC,SAAkB,KAAkB;EAClF,IAAID,KAAK,CAACE,UAAU,EAAE;IACpB,OAAO,UAAU;EACnB;EACA,IAAIF,KAAK,CAACG,SAAS,EAAE;IACnB,OAAO,SAAS;EAClB;EACA,IAAIF,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,MAAMG,WAAW,GAAIC,KAAkB,IAAkB;EACvD,QAAQA,KAAK;IACX,KAAK,UAAU;MACb,OAAO,aAAa;IACtB,KAAK,SAAS;MACZ,OAAO,MAAM;IACf;MACE,OAAO,SAAS;EACpB;AACF,CAAC;AAED,OAAO,SAASC,UAAUA,CAACN,KAAsB,EAAE;EACjD,MAAMO,aAAa,GAAGX,cAAc,CAACI,KAAK,CAACQ,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAClE,MAAM,CAACP,SAAS,EAAEQ,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMY,KAAK,GAAGN,cAAc,CAACC,KAAK,EAAEC,SAAS,CAAC;EAE9C,MAAMS,eAAe,GAAG,CAACH,aAAa,CAACI,IAAI,EAAEC,OAAO,EAAEL,aAAa,CAACI,IAAI,GAAGN,KAAK,CAAC,EAAEL,KAAK,CAACa,KAAK,CAAC;EAE/F,MAAMC,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAIf,KAAK,CAACE,UAAU,IAAIF,KAAK,CAACG,SAAS,EAAE;MACvCY,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB;IACF;IACAhB,KAAK,CAACiB,OAAO,GAAGF,KAAK,CAAC;EACxB,CAAC;EAED,MAAMG,YAA2B,GAAG;IAAEb,KAAK;IAAEc,MAAM,EAAEZ;EAAc,CAAC;EAEpE,oBACET,IAAA,CAACH,aAAa,CAACyB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAI,QAAA,eAC1CxB,IAAA,CAACJ,SAAS;MAAA,GACJM,KAAK;MACTiB,OAAO,EAAEH,WAAY;MACrBS,SAAS,EAAEA,CAAA,KAAMd,YAAY,CAAC,IAAI,CAAE;MACpCe,UAAU,EAAEA,CAAA,KAAMf,YAAY,CAAC,KAAK,CAAE;MACtCgB,QAAQ,EAAEzB,KAAK,CAACE,UAAW;MAC3BW,KAAK,EAAE,CACLH,eAAe,EACf;QACEgB,MAAM,EAAEtB,WAAW,CAACC,KAAK;MAC3B,CAAC;IACD,CACH;EAAC,CACoB,CAAC;AAE7B","ignoreList":[]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { ActivityIndicator } from "react-native";
|
|
5
|
-
import { useButton } from "../context.js";
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export function ButtonSpinner(props) {
|
|
8
|
-
const button = useButton();
|
|
9
|
-
const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
|
|
10
|
-
return /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
11
|
-
style: composedStyle,
|
|
12
|
-
color: props.color
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=button-spinner.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","ActivityIndicator","useButton","jsx","_jsx","ButtonSpinner","props","button","composedStyle","styles","spinner","default","style","state","color"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-spinner.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAqE,cAAc;AAC7G,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOvC,OAAO,SAASC,aAAaA,CAACC,KAAyB,EAAE;EACvD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B,MAAMM,aAAa,GAAG,CAACD,MAAM,CAACE,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAEL,MAAM,CAACE,MAAM,EAAEC,OAAO,GAAGH,MAAM,CAACM,KAAK,CAAC,EAAED,KAAK,EAAEN,KAAK,CAACM,KAAK,CAAC;EAC1H,oBAAOR,IAAA,CAACH,iBAAiB;IAACW,KAAK,EAAEJ,aAAc;IAACM,KAAK,EAAER,KAAK,CAACQ;EAAM,CAAE,CAAC;AACxE","ignoreList":[]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { createContext, useContext } from "react";
|
|
4
|
-
export const ButtonContext = /*#__PURE__*/createContext(undefined);
|
|
5
|
-
export const useButton = () => {
|
|
6
|
-
const context = useContext(ButtonContext);
|
|
7
|
-
if (!context) {
|
|
8
|
-
throw new Error("useButton must be used within a ButtonProvider");
|
|
9
|
-
}
|
|
10
|
-
return context;
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","ButtonContext","undefined","useButton","context","Error"],"sourceRoot":"../../../../src","sources":["components/button/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAQjD,OAAO,MAAMC,aAAa,gBAAGF,aAAa,CAA4BG,SAAS,CAAC;AAEhF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGJ,UAAU,CAACC,aAAa,CAAC;EACzC,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;EACnE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { TextChildren } from "../../../types/element.types";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { type StyleProp, type TextStyle } from "react-native";
|
|
4
|
-
export interface ButtonLabelProps {
|
|
5
|
-
children?: TextChildren;
|
|
6
|
-
style?: StyleProp<TextStyle>;
|
|
7
|
-
}
|
|
8
|
-
export declare function ButtonLabel(props: ButtonLabelProps): React.JSX.Element;
|
|
9
|
-
//# sourceMappingURL=button-label.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAYlD"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAA+B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhH,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AA0BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAmChD"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
-
export interface ButtonSpinnerProps {
|
|
4
|
-
style?: StyleProp<ViewStyle>;
|
|
5
|
-
color?: ActivityIndicatorProps["color"];
|
|
6
|
-
}
|
|
7
|
-
export declare function ButtonSpinner(props: ButtonSpinnerProps): React.JSX.Element;
|
|
8
|
-
//# sourceMappingURL=button-spinner.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,KAAK,sBAAsB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9G,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;CACzC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAItD"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { ButtonState, ButtonStyles } from "./types";
|
|
2
|
-
export interface ButtonContext {
|
|
3
|
-
state: ButtonState;
|
|
4
|
-
styles?: ButtonStyles;
|
|
5
|
-
}
|
|
6
|
-
export declare const ButtonContext: import("react").Context<ButtonContext | undefined>;
|
|
7
|
-
export declare const useButton: () => ButtonContext;
|
|
8
|
-
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,oDAAsD,CAAC;AAEjF,eAAO,MAAM,SAAS,qBAMrB,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { TextChildren } from "../../../types/element.types";
|
|
2
|
-
import { calculateComposedStyles } from "../../../utils/calculate-styles";
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { type StyleProp, Text, type TextStyle } from "react-native";
|
|
5
|
-
import { useButton } from "../context";
|
|
6
|
-
|
|
7
|
-
export interface ButtonLabelProps {
|
|
8
|
-
children?: TextChildren;
|
|
9
|
-
|
|
10
|
-
style?: StyleProp<TextStyle>;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export function ButtonLabel(props: ButtonLabelProps) {
|
|
14
|
-
const button = useButton();
|
|
15
|
-
|
|
16
|
-
const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
|
|
17
|
-
|
|
18
|
-
const isSelectable = button.state !== "disabled" && button.state !== "loading";
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<Text selectable={isSelectable} style={calculatedStyle}>
|
|
22
|
-
{props.children}
|
|
23
|
-
</Text>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Pressable, type CursorValue, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
-
import { ButtonContext } from "../context";
|
|
4
|
-
import type { ButtonState } from "../types";
|
|
5
|
-
import { ButtonVariants } from "../variants";
|
|
6
|
-
|
|
7
|
-
export interface ButtonRootProps extends PressableProps {
|
|
8
|
-
variant?: keyof typeof ButtonVariants;
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
|
|
11
|
-
isDisabled?: boolean;
|
|
12
|
-
isLoading?: boolean;
|
|
13
|
-
|
|
14
|
-
style?: StyleProp<ViewStyle>;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const calculateState = (props: ButtonRootProps, isHovered: boolean): ButtonState => {
|
|
18
|
-
if (props.isDisabled) {
|
|
19
|
-
return "disabled";
|
|
20
|
-
}
|
|
21
|
-
if (props.isLoading) {
|
|
22
|
-
return "loading";
|
|
23
|
-
}
|
|
24
|
-
if (isHovered) {
|
|
25
|
-
return "hovered";
|
|
26
|
-
}
|
|
27
|
-
return "default";
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const cursorValue = (state: ButtonState): CursorValue => {
|
|
31
|
-
switch (state) {
|
|
32
|
-
case "disabled":
|
|
33
|
-
return "not-allowed" as CursorValue;
|
|
34
|
-
case "loading":
|
|
35
|
-
return "wait" as CursorValue;
|
|
36
|
-
default:
|
|
37
|
-
return "pointer";
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export function ButtonRoot(props: ButtonRootProps) {
|
|
42
|
-
const variantStyles = ButtonVariants[props.variant ?? "default"]();
|
|
43
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
44
|
-
|
|
45
|
-
const state = calculateState(props, isHovered);
|
|
46
|
-
|
|
47
|
-
const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
|
|
48
|
-
|
|
49
|
-
const handlePress: PressableProps["onPress"] = (event) => {
|
|
50
|
-
if (props.isDisabled || props.isLoading) {
|
|
51
|
-
event.preventDefault();
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
props.onPress?.(event);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const contextValue: ButtonContext = { state, styles: variantStyles };
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
<ButtonContext.Provider value={contextValue}>
|
|
61
|
-
<Pressable
|
|
62
|
-
{...props}
|
|
63
|
-
onPress={handlePress}
|
|
64
|
-
onHoverIn={() => setIsHovered(true)}
|
|
65
|
-
onHoverOut={() => setIsHovered(false)}
|
|
66
|
-
disabled={props.isDisabled}
|
|
67
|
-
style={[
|
|
68
|
-
calculatedStyle,
|
|
69
|
-
{
|
|
70
|
-
cursor: cursorValue(state),
|
|
71
|
-
},
|
|
72
|
-
]}
|
|
73
|
-
/>
|
|
74
|
-
</ButtonContext.Provider>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ActivityIndicator, type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
|
|
3
|
-
import { useButton } from "../context";
|
|
4
|
-
|
|
5
|
-
export interface ButtonSpinnerProps {
|
|
6
|
-
style?: StyleProp<ViewStyle>;
|
|
7
|
-
color?: ActivityIndicatorProps["color"];
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export function ButtonSpinner(props: ButtonSpinnerProps) {
|
|
11
|
-
const button = useButton();
|
|
12
|
-
const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
|
|
13
|
-
return <ActivityIndicator style={composedStyle} color={props.color} />;
|
|
14
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from "react";
|
|
2
|
-
import type { ButtonState, ButtonStyles } from "./types";
|
|
3
|
-
|
|
4
|
-
export interface ButtonContext {
|
|
5
|
-
state: ButtonState;
|
|
6
|
-
styles?: ButtonStyles;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export const ButtonContext = createContext<ButtonContext | undefined>(undefined);
|
|
10
|
-
|
|
11
|
-
export const useButton = () => {
|
|
12
|
-
const context = useContext(ButtonContext);
|
|
13
|
-
if (!context) {
|
|
14
|
-
throw new Error("useButton must be used within a ButtonProvider");
|
|
15
|
-
}
|
|
16
|
-
return context;
|
|
17
|
-
};
|