@draftbit/core 43.2.5 → 43.2.6-afba6e.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/lib/commonjs/components/Accordion/AccordionItem.js +21 -5
- package/lib/commonjs/components/Accordion/AccordionItem.js.map +1 -1
- package/lib/commonjs/components/AnimatedCircularProgress.js +11 -3
- package/lib/commonjs/components/AnimatedCircularProgress.js.map +1 -1
- package/lib/commonjs/components/Checkbox/Checkbox.js +13 -2
- package/lib/commonjs/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/commonjs/components/DeprecatedFAB.js +4 -20
- package/lib/commonjs/components/DeprecatedFAB.js.map +1 -1
- package/lib/commonjs/components/Divider.js +3 -13
- package/lib/commonjs/components/Divider.js.map +1 -1
- package/lib/commonjs/components/Elevation.js +14 -3
- package/lib/commonjs/components/Elevation.js.map +1 -1
- package/lib/commonjs/index.js +0 -8
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/Card.js +1 -2
- package/lib/commonjs/mappings/Card.js.map +1 -1
- package/lib/commonjs/mappings/Checkbox.js +1 -1
- package/lib/commonjs/mappings/Checkbox.js.map +1 -1
- package/lib/module/components/Accordion/index.js.map +1 -1
- package/lib/module/components/Checkbox/Checkbox.js +13 -2
- package/lib/module/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/module/components/Portal/PortalConsumer.js.map +1 -1
- package/lib/module/components/Portal/PortalManager.js +1 -1
- package/lib/module/components/Portal/PortalManager.js.map +1 -1
- package/lib/module/components/RowBodyIcon.js.map +1 -1
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/Card.js +1 -2
- package/lib/module/mappings/Card.js.map +1 -1
- package/lib/module/mappings/Checkbox.js +1 -1
- package/lib/module/mappings/Checkbox.js.map +1 -1
- package/lib/typescript/src/components/Checkbox/Checkbox.d.ts +2 -0
- package/lib/typescript/src/index.d.ts +0 -1
- package/package.json +3 -3
- package/src/components/Checkbox/Checkbox.js +10 -3
- package/src/components/Checkbox/Checkbox.tsx +15 -2
- package/src/index.js +0 -1
- package/src/index.tsx +0 -1
- package/src/mappings/Card.js +1 -1
- package/src/mappings/Card.ts +1 -1
- package/src/mappings/Checkbox.js +1 -1
- package/src/mappings/Checkbox.ts +1 -1
- package/lib/commonjs/components/ToggleButton.js +0 -86
- package/lib/commonjs/components/ToggleButton.js.map +0 -1
- package/lib/commonjs/mappings/ToggleButton.js +0 -60
- package/lib/commonjs/mappings/ToggleButton.js.map +0 -1
- package/lib/module/components/ToggleButton.js +0 -67
- package/lib/module/components/ToggleButton.js.map +0 -1
- package/lib/module/mappings/ToggleButton.js +0 -51
- package/lib/module/mappings/ToggleButton.js.map +0 -1
- package/lib/typescript/src/components/ToggleButton.d.ts +0 -24
- package/lib/typescript/src/mappings/ToggleButton.d.ts +0 -124
- package/src/components/ToggleButton.js +0 -39
- package/src/components/ToggleButton.tsx +0 -94
- package/src/mappings/ToggleButton.js +0 -50
- package/src/mappings/ToggleButton.ts +0 -62
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createStaticNumberProp, createFieldNameProp, createIconSizeProp, createActionProp, Triggers } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Toggle Button",
|
|
4
|
-
tag: "ToggleButton",
|
|
5
|
-
category: COMPONENT_TYPES.button,
|
|
6
|
-
layout: {},
|
|
7
|
-
triggers: [Triggers.OnPress],
|
|
8
|
-
props: {
|
|
9
|
-
onPress: createActionProp(),
|
|
10
|
-
icon: createIconProp({
|
|
11
|
-
required: true
|
|
12
|
-
}),
|
|
13
|
-
iconSize: createIconSizeProp(),
|
|
14
|
-
fieldName: createFieldNameProp({
|
|
15
|
-
defaultValue: false,
|
|
16
|
-
valuePropName: "toggled"
|
|
17
|
-
}),
|
|
18
|
-
disabled: createBoolProp({
|
|
19
|
-
label: "Disabled",
|
|
20
|
-
description: "Whether the button should be disabled",
|
|
21
|
-
group: GROUPS.basic
|
|
22
|
-
}),
|
|
23
|
-
color: createColorProp({
|
|
24
|
-
group: GROUPS.basic
|
|
25
|
-
}),
|
|
26
|
-
colorSecondary: createColorProp({
|
|
27
|
-
label: "Secondary Color",
|
|
28
|
-
group: GROUPS.basic
|
|
29
|
-
}),
|
|
30
|
-
borderColor: createColorProp({
|
|
31
|
-
label: "Border Color",
|
|
32
|
-
group: GROUPS.basic
|
|
33
|
-
}),
|
|
34
|
-
width: createStaticNumberProp({
|
|
35
|
-
label: "Width",
|
|
36
|
-
description: "Width",
|
|
37
|
-
defaultValue: 50
|
|
38
|
-
}),
|
|
39
|
-
height: createStaticNumberProp({
|
|
40
|
-
label: "Height",
|
|
41
|
-
description: "Height",
|
|
42
|
-
defaultValue: 50
|
|
43
|
-
}),
|
|
44
|
-
toggled: createBoolProp({
|
|
45
|
-
label: "Toggled",
|
|
46
|
-
description: "Whether the button should show the toggled state",
|
|
47
|
-
defaultValue: false
|
|
48
|
-
})
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
//# sourceMappingURL=ToggleButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["ToggleButton.ts"],"names":["GROUPS","COMPONENT_TYPES","createIconProp","createBoolProp","createColorProp","createStaticNumberProp","createFieldNameProp","createIconSizeProp","createActionProp","Triggers","SEED_DATA","name","tag","category","button","layout","triggers","OnPress","props","onPress","icon","required","iconSize","fieldName","defaultValue","valuePropName","disabled","label","description","group","basic","color","colorSecondary","borderColor","width","height","toggled"],"mappings":"AAAA,SACEA,MADF,EAEEC,eAFF,EAGEC,cAHF,EAIEC,cAJF,EAKEC,eALF,EAMEC,sBANF,EAOEC,mBAPF,EAQEC,kBARF,EASEC,gBATF,EAUEC,QAVF,QAWO,iBAXP;AAaA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,eADiB;AAEvBC,EAAAA,GAAG,EAAE,cAFkB;AAGvBC,EAAAA,QAAQ,EAAEZ,eAAe,CAACa,MAHH;AAIvBC,EAAAA,MAAM,EAAE,EAJe;AAKvBC,EAAAA,QAAQ,EAAE,CAACP,QAAQ,CAACQ,OAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEX,gBAAgB,EADpB;AAELY,IAAAA,IAAI,EAAElB,cAAc,CAAC;AACnBmB,MAAAA,QAAQ,EAAE;AADS,KAAD,CAFf;AAKLC,IAAAA,QAAQ,EAAEf,kBAAkB,EALvB;AAMLgB,IAAAA,SAAS,EAAEjB,mBAAmB,CAAC;AAC7BkB,MAAAA,YAAY,EAAE,KADe;AAE7BC,MAAAA,aAAa,EAAE;AAFc,KAAD,CANzB;AAULC,IAAAA,QAAQ,EAAEvB,cAAc,CAAC;AACvBwB,MAAAA,KAAK,EAAE,UADgB;AAEvBC,MAAAA,WAAW,EAAE,uCAFU;AAGvBC,MAAAA,KAAK,EAAE7B,MAAM,CAAC8B;AAHS,KAAD,CAVnB;AAeLC,IAAAA,KAAK,EAAE3B,eAAe,CAAC;AACrByB,MAAAA,KAAK,EAAE7B,MAAM,CAAC8B;AADO,KAAD,CAfjB;AAkBLE,IAAAA,cAAc,EAAE5B,eAAe,CAAC;AAC9BuB,MAAAA,KAAK,EAAE,iBADuB;AAE9BE,MAAAA,KAAK,EAAE7B,MAAM,CAAC8B;AAFgB,KAAD,CAlB1B;AAsBLG,IAAAA,WAAW,EAAE7B,eAAe,CAAC;AAC3BuB,MAAAA,KAAK,EAAE,cADoB;AAE3BE,MAAAA,KAAK,EAAE7B,MAAM,CAAC8B;AAFa,KAAD,CAtBvB;AA0BLI,IAAAA,KAAK,EAAE7B,sBAAsB,CAAC;AAC5BsB,MAAAA,KAAK,EAAE,OADqB;AAE5BC,MAAAA,WAAW,EAAE,OAFe;AAG5BJ,MAAAA,YAAY,EAAE;AAHc,KAAD,CA1BxB;AA+BLW,IAAAA,MAAM,EAAE9B,sBAAsB,CAAC;AAC7BsB,MAAAA,KAAK,EAAE,QADsB;AAE7BC,MAAAA,WAAW,EAAE,QAFgB;AAG7BJ,MAAAA,YAAY,EAAE;AAHe,KAAD,CA/BzB;AAoCLY,IAAAA,OAAO,EAAEjC,cAAc,CAAC;AACtBwB,MAAAA,KAAK,EAAE,SADe;AAEtBC,MAAAA,WAAW,EAAE,kDAFS;AAGtBJ,MAAAA,YAAY,EAAE;AAHQ,KAAD;AApClB;AANgB,CAAlB","sourcesContent":["import {\n GROUPS,\n COMPONENT_TYPES,\n createIconProp,\n createBoolProp,\n createColorProp,\n createStaticNumberProp,\n createFieldNameProp,\n createIconSizeProp,\n createActionProp,\n Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Toggle Button\",\n tag: \"ToggleButton\",\n category: COMPONENT_TYPES.button,\n layout: {},\n triggers: [Triggers.OnPress],\n props: {\n onPress: createActionProp(),\n icon: createIconProp({\n required: true,\n }),\n iconSize: createIconSizeProp(),\n fieldName: createFieldNameProp({\n defaultValue: false,\n valuePropName: \"toggled\",\n }),\n disabled: createBoolProp({\n label: \"Disabled\",\n description: \"Whether the button should be disabled\",\n group: GROUPS.basic,\n }),\n color: createColorProp({\n group: GROUPS.basic,\n }),\n colorSecondary: createColorProp({\n label: \"Secondary Color\",\n group: GROUPS.basic,\n }),\n borderColor: createColorProp({\n label: \"Border Color\",\n group: GROUPS.basic,\n }),\n width: createStaticNumberProp({\n label: \"Width\",\n description: \"Width\",\n defaultValue: 50,\n }),\n height: createStaticNumberProp({\n label: \"Height\",\n description: \"Height\",\n defaultValue: 50,\n }),\n toggled: createBoolProp({\n label: \"Toggled\",\n description: \"Whether the button should show the toggled state\",\n defaultValue: false,\n }),\n },\n};\n"]}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { colorTypes } from "@draftbit/types";
|
|
3
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
4
|
-
import type { Theme } from "../styles/DefaultTheme";
|
|
5
|
-
import type { IconSlot } from "../interfaces/Icon";
|
|
6
|
-
declare type Props = {
|
|
7
|
-
icon: string;
|
|
8
|
-
toggled?: boolean;
|
|
9
|
-
onPress?: (value: boolean) => void;
|
|
10
|
-
defaultValue?: boolean;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
color?: colorTypes;
|
|
13
|
-
colorSecondary?: colorTypes;
|
|
14
|
-
borderColor?: colorTypes;
|
|
15
|
-
iconSize?: number;
|
|
16
|
-
width?: number;
|
|
17
|
-
height?: number;
|
|
18
|
-
style?: StyleProp<ViewStyle>;
|
|
19
|
-
theme: Theme;
|
|
20
|
-
} & IconSlot;
|
|
21
|
-
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
|
|
22
|
-
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
23
|
-
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & React.FC<Props>, {}>;
|
|
24
|
-
export default _default;
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: {
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
category: string;
|
|
5
|
-
layout: {};
|
|
6
|
-
triggers: string[];
|
|
7
|
-
props: {
|
|
8
|
-
onPress: {
|
|
9
|
-
label: string;
|
|
10
|
-
description: string;
|
|
11
|
-
editable: boolean;
|
|
12
|
-
required: boolean;
|
|
13
|
-
formType: string;
|
|
14
|
-
propType: string;
|
|
15
|
-
defaultValue: null;
|
|
16
|
-
group: string;
|
|
17
|
-
};
|
|
18
|
-
icon: {
|
|
19
|
-
label: string;
|
|
20
|
-
description: string;
|
|
21
|
-
formType: string;
|
|
22
|
-
propType: string;
|
|
23
|
-
defaultValue: string;
|
|
24
|
-
required: boolean;
|
|
25
|
-
editable: boolean;
|
|
26
|
-
group: string;
|
|
27
|
-
};
|
|
28
|
-
iconSize: {
|
|
29
|
-
group: string;
|
|
30
|
-
label: string;
|
|
31
|
-
description: string;
|
|
32
|
-
editable: boolean;
|
|
33
|
-
required: boolean;
|
|
34
|
-
formType: string;
|
|
35
|
-
propType: string;
|
|
36
|
-
defaultValue: number;
|
|
37
|
-
options: number[];
|
|
38
|
-
};
|
|
39
|
-
fieldName: {
|
|
40
|
-
handlerPropName: string;
|
|
41
|
-
group: string;
|
|
42
|
-
label: string;
|
|
43
|
-
description: string;
|
|
44
|
-
formType: string;
|
|
45
|
-
propType: string;
|
|
46
|
-
defaultValue: string;
|
|
47
|
-
valuePropName: string;
|
|
48
|
-
editable: boolean;
|
|
49
|
-
required: boolean;
|
|
50
|
-
};
|
|
51
|
-
disabled: {
|
|
52
|
-
label: string;
|
|
53
|
-
description: string;
|
|
54
|
-
formType: string;
|
|
55
|
-
propType: string;
|
|
56
|
-
defaultValue: boolean;
|
|
57
|
-
editable: boolean;
|
|
58
|
-
required: boolean;
|
|
59
|
-
group: string;
|
|
60
|
-
};
|
|
61
|
-
color: {
|
|
62
|
-
group: string;
|
|
63
|
-
label: string;
|
|
64
|
-
description: string;
|
|
65
|
-
editable: boolean;
|
|
66
|
-
required: boolean;
|
|
67
|
-
defaultValue: null;
|
|
68
|
-
formType: string;
|
|
69
|
-
propType: string;
|
|
70
|
-
};
|
|
71
|
-
colorSecondary: {
|
|
72
|
-
group: string;
|
|
73
|
-
label: string;
|
|
74
|
-
description: string;
|
|
75
|
-
editable: boolean;
|
|
76
|
-
required: boolean;
|
|
77
|
-
defaultValue: null;
|
|
78
|
-
formType: string;
|
|
79
|
-
propType: string;
|
|
80
|
-
};
|
|
81
|
-
borderColor: {
|
|
82
|
-
group: string;
|
|
83
|
-
label: string;
|
|
84
|
-
description: string;
|
|
85
|
-
editable: boolean;
|
|
86
|
-
required: boolean;
|
|
87
|
-
defaultValue: null;
|
|
88
|
-
formType: string;
|
|
89
|
-
propType: string;
|
|
90
|
-
};
|
|
91
|
-
width: {
|
|
92
|
-
label: string;
|
|
93
|
-
description: string;
|
|
94
|
-
formType: string;
|
|
95
|
-
propType: string;
|
|
96
|
-
group: string;
|
|
97
|
-
defaultValue: null;
|
|
98
|
-
editable: boolean;
|
|
99
|
-
required: boolean;
|
|
100
|
-
step: number;
|
|
101
|
-
};
|
|
102
|
-
height: {
|
|
103
|
-
label: string;
|
|
104
|
-
description: string;
|
|
105
|
-
formType: string;
|
|
106
|
-
propType: string;
|
|
107
|
-
group: string;
|
|
108
|
-
defaultValue: null;
|
|
109
|
-
editable: boolean;
|
|
110
|
-
required: boolean;
|
|
111
|
-
step: number;
|
|
112
|
-
};
|
|
113
|
-
toggled: {
|
|
114
|
-
label: string;
|
|
115
|
-
description: string;
|
|
116
|
-
formType: string;
|
|
117
|
-
propType: string;
|
|
118
|
-
defaultValue: boolean;
|
|
119
|
-
editable: boolean;
|
|
120
|
-
required: boolean;
|
|
121
|
-
group: string;
|
|
122
|
-
};
|
|
123
|
-
};
|
|
124
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import { StyleSheet } from "react-native";
|
|
4
|
-
import IconButton from "./IconButton";
|
|
5
|
-
const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, defaultValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
|
|
6
|
-
const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
|
|
7
|
-
React.useEffect(() => {
|
|
8
|
-
if (toggled != null) {
|
|
9
|
-
setInternalValue(toggled);
|
|
10
|
-
}
|
|
11
|
-
}, [toggled]);
|
|
12
|
-
React.useEffect(() => {
|
|
13
|
-
if (defaultValue != null) {
|
|
14
|
-
setInternalValue(defaultValue);
|
|
15
|
-
}
|
|
16
|
-
}, [defaultValue]);
|
|
17
|
-
const handlePress = () => {
|
|
18
|
-
setInternalValue(!internalValue);
|
|
19
|
-
onPress(!internalValue);
|
|
20
|
-
};
|
|
21
|
-
return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
|
|
22
|
-
styles.mainContainer,
|
|
23
|
-
{
|
|
24
|
-
width,
|
|
25
|
-
height,
|
|
26
|
-
backgroundColor: internalValue
|
|
27
|
-
? colors[colorSecondary]
|
|
28
|
-
: colors[color],
|
|
29
|
-
borderColor: colors[borderColor],
|
|
30
|
-
},
|
|
31
|
-
style,
|
|
32
|
-
], ...rest }));
|
|
33
|
-
};
|
|
34
|
-
const styles = StyleSheet.create({
|
|
35
|
-
mainContainer: {
|
|
36
|
-
borderWidth: 1,
|
|
37
|
-
},
|
|
38
|
-
});
|
|
39
|
-
export default withTheme(ToggleButton);
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { withTheme } from "../theming";
|
|
3
|
-
import { colorTypes } from "@draftbit/types";
|
|
4
|
-
import { StyleProp, StyleSheet, ViewStyle } from "react-native";
|
|
5
|
-
import IconButton from "./IconButton";
|
|
6
|
-
import type { Theme } from "../styles/DefaultTheme";
|
|
7
|
-
import type { IconSlot } from "../interfaces/Icon";
|
|
8
|
-
|
|
9
|
-
type Props = {
|
|
10
|
-
icon: string;
|
|
11
|
-
toggled?: boolean;
|
|
12
|
-
onPress?: (value: boolean) => void;
|
|
13
|
-
defaultValue?: boolean;
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
color?: colorTypes;
|
|
16
|
-
colorSecondary?: colorTypes;
|
|
17
|
-
borderColor?: colorTypes;
|
|
18
|
-
iconSize?: number;
|
|
19
|
-
width?: number;
|
|
20
|
-
height?: number;
|
|
21
|
-
style?: StyleProp<ViewStyle>;
|
|
22
|
-
theme: Theme;
|
|
23
|
-
} & IconSlot;
|
|
24
|
-
|
|
25
|
-
const ToggleButton: React.FC<Props> = ({
|
|
26
|
-
Icon,
|
|
27
|
-
icon,
|
|
28
|
-
toggled = false,
|
|
29
|
-
onPress = () => {},
|
|
30
|
-
defaultValue,
|
|
31
|
-
disabled = false,
|
|
32
|
-
color = "primary",
|
|
33
|
-
colorSecondary = "surface",
|
|
34
|
-
borderColor = "divider",
|
|
35
|
-
iconSize = 25,
|
|
36
|
-
width = 50,
|
|
37
|
-
height = 50,
|
|
38
|
-
theme: { colors },
|
|
39
|
-
style,
|
|
40
|
-
...rest
|
|
41
|
-
}) => {
|
|
42
|
-
const [internalValue, setInternalValue] = React.useState<boolean>(
|
|
43
|
-
toggled || defaultValue || false
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
React.useEffect(() => {
|
|
47
|
-
if (toggled != null) {
|
|
48
|
-
setInternalValue(toggled);
|
|
49
|
-
}
|
|
50
|
-
}, [toggled]);
|
|
51
|
-
|
|
52
|
-
React.useEffect(() => {
|
|
53
|
-
if (defaultValue != null) {
|
|
54
|
-
setInternalValue(defaultValue);
|
|
55
|
-
}
|
|
56
|
-
}, [defaultValue]);
|
|
57
|
-
|
|
58
|
-
const handlePress = () => {
|
|
59
|
-
setInternalValue(!internalValue);
|
|
60
|
-
onPress(!internalValue);
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<IconButton
|
|
65
|
-
Icon={Icon}
|
|
66
|
-
icon={icon}
|
|
67
|
-
size={iconSize}
|
|
68
|
-
color={internalValue ? colors[color] : colors[colorSecondary]}
|
|
69
|
-
onPress={handlePress}
|
|
70
|
-
disabled={disabled}
|
|
71
|
-
style={[
|
|
72
|
-
styles.mainContainer,
|
|
73
|
-
{
|
|
74
|
-
width,
|
|
75
|
-
height,
|
|
76
|
-
backgroundColor: internalValue
|
|
77
|
-
? colors[colorSecondary]
|
|
78
|
-
: colors[color],
|
|
79
|
-
borderColor: colors[borderColor],
|
|
80
|
-
},
|
|
81
|
-
style,
|
|
82
|
-
]}
|
|
83
|
-
{...rest}
|
|
84
|
-
/>
|
|
85
|
-
);
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
const styles = StyleSheet.create({
|
|
89
|
-
mainContainer: {
|
|
90
|
-
borderWidth: 1,
|
|
91
|
-
},
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
export default withTheme(ToggleButton);
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { GROUPS, COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createStaticNumberProp, createFieldNameProp, createIconSizeProp, createActionProp, Triggers, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Toggle Button",
|
|
4
|
-
tag: "ToggleButton",
|
|
5
|
-
category: COMPONENT_TYPES.button,
|
|
6
|
-
layout: {},
|
|
7
|
-
triggers: [Triggers.OnPress],
|
|
8
|
-
props: {
|
|
9
|
-
onPress: createActionProp(),
|
|
10
|
-
icon: createIconProp({
|
|
11
|
-
required: true,
|
|
12
|
-
}),
|
|
13
|
-
iconSize: createIconSizeProp(),
|
|
14
|
-
fieldName: createFieldNameProp({
|
|
15
|
-
defaultValue: false,
|
|
16
|
-
valuePropName: "toggled",
|
|
17
|
-
}),
|
|
18
|
-
disabled: createBoolProp({
|
|
19
|
-
label: "Disabled",
|
|
20
|
-
description: "Whether the button should be disabled",
|
|
21
|
-
group: GROUPS.basic,
|
|
22
|
-
}),
|
|
23
|
-
color: createColorProp({
|
|
24
|
-
group: GROUPS.basic,
|
|
25
|
-
}),
|
|
26
|
-
colorSecondary: createColorProp({
|
|
27
|
-
label: "Secondary Color",
|
|
28
|
-
group: GROUPS.basic,
|
|
29
|
-
}),
|
|
30
|
-
borderColor: createColorProp({
|
|
31
|
-
label: "Border Color",
|
|
32
|
-
group: GROUPS.basic,
|
|
33
|
-
}),
|
|
34
|
-
width: createStaticNumberProp({
|
|
35
|
-
label: "Width",
|
|
36
|
-
description: "Width",
|
|
37
|
-
defaultValue: 50,
|
|
38
|
-
}),
|
|
39
|
-
height: createStaticNumberProp({
|
|
40
|
-
label: "Height",
|
|
41
|
-
description: "Height",
|
|
42
|
-
defaultValue: 50,
|
|
43
|
-
}),
|
|
44
|
-
toggled: createBoolProp({
|
|
45
|
-
label: "Toggled",
|
|
46
|
-
description: "Whether the button should show the toggled state",
|
|
47
|
-
defaultValue: false,
|
|
48
|
-
}),
|
|
49
|
-
},
|
|
50
|
-
};
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
GROUPS,
|
|
3
|
-
COMPONENT_TYPES,
|
|
4
|
-
createIconProp,
|
|
5
|
-
createBoolProp,
|
|
6
|
-
createColorProp,
|
|
7
|
-
createStaticNumberProp,
|
|
8
|
-
createFieldNameProp,
|
|
9
|
-
createIconSizeProp,
|
|
10
|
-
createActionProp,
|
|
11
|
-
Triggers,
|
|
12
|
-
} from "@draftbit/types";
|
|
13
|
-
|
|
14
|
-
export const SEED_DATA = {
|
|
15
|
-
name: "Toggle Button",
|
|
16
|
-
tag: "ToggleButton",
|
|
17
|
-
category: COMPONENT_TYPES.button,
|
|
18
|
-
layout: {},
|
|
19
|
-
triggers: [Triggers.OnPress],
|
|
20
|
-
props: {
|
|
21
|
-
onPress: createActionProp(),
|
|
22
|
-
icon: createIconProp({
|
|
23
|
-
required: true,
|
|
24
|
-
}),
|
|
25
|
-
iconSize: createIconSizeProp(),
|
|
26
|
-
fieldName: createFieldNameProp({
|
|
27
|
-
defaultValue: false,
|
|
28
|
-
valuePropName: "toggled",
|
|
29
|
-
}),
|
|
30
|
-
disabled: createBoolProp({
|
|
31
|
-
label: "Disabled",
|
|
32
|
-
description: "Whether the button should be disabled",
|
|
33
|
-
group: GROUPS.basic,
|
|
34
|
-
}),
|
|
35
|
-
color: createColorProp({
|
|
36
|
-
group: GROUPS.basic,
|
|
37
|
-
}),
|
|
38
|
-
colorSecondary: createColorProp({
|
|
39
|
-
label: "Secondary Color",
|
|
40
|
-
group: GROUPS.basic,
|
|
41
|
-
}),
|
|
42
|
-
borderColor: createColorProp({
|
|
43
|
-
label: "Border Color",
|
|
44
|
-
group: GROUPS.basic,
|
|
45
|
-
}),
|
|
46
|
-
width: createStaticNumberProp({
|
|
47
|
-
label: "Width",
|
|
48
|
-
description: "Width",
|
|
49
|
-
defaultValue: 50,
|
|
50
|
-
}),
|
|
51
|
-
height: createStaticNumberProp({
|
|
52
|
-
label: "Height",
|
|
53
|
-
description: "Height",
|
|
54
|
-
defaultValue: 50,
|
|
55
|
-
}),
|
|
56
|
-
toggled: createBoolProp({
|
|
57
|
-
label: "Toggled",
|
|
58
|
-
description: "Whether the button should show the toggled state",
|
|
59
|
-
defaultValue: false,
|
|
60
|
-
}),
|
|
61
|
-
},
|
|
62
|
-
};
|