@swan-io/lake 2.7.32 → 2.7.34
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/package.json
CHANGED
|
@@ -40,10 +40,10 @@ export const LakeLabel = ({ label, optionalLabel, extra, readOnly = false, color
|
|
|
40
40
|
target?.focus();
|
|
41
41
|
}
|
|
42
42
|
}, [id]);
|
|
43
|
-
return (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", style: styles.shrink, children: [type === "form" || type === "formSmall" || type === "radioGroup" ? (_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, id: id, children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
|
|
44
|
+
.returnType()
|
|
45
|
+
.with("formSmall", "viewSmall", () => 4)
|
|
46
|
+
.with("form", "view", () => 8)
|
|
47
|
+
.with("radioGroup", () => 12)
|
|
48
|
+
.exhaustive() }), _jsx(View, { "aria-labelledby": type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
|
|
49
49
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
value: boolean;
|
|
3
|
+
disabled?: boolean;
|
|
4
|
+
onToggle: (next: boolean) => void;
|
|
5
|
+
mode?: "desktop" | "mobile";
|
|
6
|
+
onLabel: string;
|
|
7
|
+
offLabel: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const Toggle: ({ onToggle, value, disabled, mode, onLabel, offLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
|
3
|
+
import { StyleSheet, View } from "react-native";
|
|
4
|
+
import { colors } from "../constants/design";
|
|
5
|
+
import { Box } from "./Box";
|
|
6
|
+
import { Icon } from "./Icon";
|
|
7
|
+
import { LakeText } from "./LakeText";
|
|
8
|
+
import { Pressable } from "./Pressable";
|
|
9
|
+
const HEIGHT = 26;
|
|
10
|
+
const BORDER_WIDTH = 1;
|
|
11
|
+
const styles = StyleSheet.create({
|
|
12
|
+
disabled: {
|
|
13
|
+
opacity: 0.3,
|
|
14
|
+
},
|
|
15
|
+
switch: {
|
|
16
|
+
userSelect: "none",
|
|
17
|
+
flexDirection: "row",
|
|
18
|
+
borderRadius: HEIGHT / 2,
|
|
19
|
+
transform: "translateZ(0px)",
|
|
20
|
+
width: "min-content",
|
|
21
|
+
borderColor: colors.gray[100],
|
|
22
|
+
borderWidth: BORDER_WIDTH,
|
|
23
|
+
},
|
|
24
|
+
handle: {
|
|
25
|
+
position: "absolute",
|
|
26
|
+
width: HEIGHT,
|
|
27
|
+
height: HEIGHT,
|
|
28
|
+
top: -BORDER_WIDTH,
|
|
29
|
+
borderRadius: HEIGHT / 2,
|
|
30
|
+
transitionDuration: "300ms",
|
|
31
|
+
transitionTimingFunction: "ease-in-out",
|
|
32
|
+
borderWidth: BORDER_WIDTH,
|
|
33
|
+
},
|
|
34
|
+
switchItem: {
|
|
35
|
+
paddingHorizontal: 8,
|
|
36
|
+
height: HEIGHT - BORDER_WIDTH * 2,
|
|
37
|
+
display: "flex",
|
|
38
|
+
alignItems: "center",
|
|
39
|
+
justifyContent: "center",
|
|
40
|
+
},
|
|
41
|
+
});
|
|
42
|
+
export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", onLabel, offLabel, }) => {
|
|
43
|
+
const containerRef = useRef(null);
|
|
44
|
+
const onItemRef = useRef(null);
|
|
45
|
+
const offItemRef = useRef(null);
|
|
46
|
+
const [handleStyle, setHandleStyle] = useState();
|
|
47
|
+
const isMobile = mode === "mobile";
|
|
48
|
+
const onColor = value ? colors.positive[500] : colors.gray[500];
|
|
49
|
+
const offColor = !value ? colors.negative[500] : colors.gray[500];
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
(value ? onItemRef : offItemRef).current?.measureLayout(containerRef.current, (left, _, width) => {
|
|
52
|
+
setHandleStyle(prev => ({
|
|
53
|
+
transitionProperty: prev ? "width, transform" : "none",
|
|
54
|
+
width: width + 2 * BORDER_WIDTH,
|
|
55
|
+
transform: `translateX(${value ? -BORDER_WIDTH : left - (isMobile ? 2 * BORDER_WIDTH : 0)}px)`,
|
|
56
|
+
}));
|
|
57
|
+
}, () => { });
|
|
58
|
+
}, [value, isMobile, onLabel, offLabel]);
|
|
59
|
+
return (_jsxs(Pressable, { style: [styles.switch, disabled && styles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", children: [_jsx(View, { style: [
|
|
60
|
+
styles.handle,
|
|
61
|
+
handleStyle,
|
|
62
|
+
{
|
|
63
|
+
borderColor: value ? colors.positive[500] : colors.negative[500],
|
|
64
|
+
backgroundColor: value ? colors.positive[50] : colors.negative[50],
|
|
65
|
+
},
|
|
66
|
+
] }), _jsx(Box, { style: styles.switchItem, ref: onItemRef, children: isMobile ? (_jsx(Icon, { size: 16, name: "checkmark-circle-regular", color: onColor })) : (_jsx(LakeText, { variant: "smallMedium", color: onColor, children: onLabel })) }), _jsx(Box, { style: styles.switchItem, ref: offItemRef, children: isMobile ? (_jsx(Icon, { size: 16, name: "subtract-circle-regular", color: offColor })) : (_jsx(LakeText, { variant: "smallMedium", color: offColor, children: offLabel })) })] }));
|
|
67
|
+
};
|