@draftbit/core 43.2.5-da45ce.0 → 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.
Files changed (71) hide show
  1. package/lib/commonjs/components/Accordion/AccordionItem.js +21 -5
  2. package/lib/commonjs/components/Accordion/AccordionItem.js.map +1 -1
  3. package/lib/commonjs/components/AnimatedCircularProgress.js +11 -3
  4. package/lib/commonjs/components/AnimatedCircularProgress.js.map +1 -1
  5. package/lib/commonjs/components/Carousel.js +0 -3
  6. package/lib/commonjs/components/Carousel.js.map +1 -1
  7. package/lib/commonjs/components/Checkbox/Checkbox.js +13 -2
  8. package/lib/commonjs/components/Checkbox/Checkbox.js.map +1 -1
  9. package/lib/commonjs/components/DeprecatedFAB.js +4 -20
  10. package/lib/commonjs/components/DeprecatedFAB.js.map +1 -1
  11. package/lib/commonjs/components/Divider.js +3 -13
  12. package/lib/commonjs/components/Divider.js.map +1 -1
  13. package/lib/commonjs/components/Elevation.js +14 -3
  14. package/lib/commonjs/components/Elevation.js.map +1 -1
  15. package/lib/commonjs/components/Text.js +1 -1
  16. package/lib/commonjs/components/Text.js.map +1 -1
  17. package/lib/commonjs/index.js +0 -8
  18. package/lib/commonjs/index.js.map +1 -1
  19. package/lib/commonjs/mappings/Card.js +1 -2
  20. package/lib/commonjs/mappings/Card.js.map +1 -1
  21. package/lib/commonjs/mappings/Carousel.js +3 -1
  22. package/lib/commonjs/mappings/Carousel.js.map +1 -1
  23. package/lib/commonjs/mappings/Checkbox.js +1 -1
  24. package/lib/commonjs/mappings/Checkbox.js.map +1 -1
  25. package/lib/module/components/Carousel.js +0 -3
  26. package/lib/module/components/Carousel.js.map +1 -1
  27. package/lib/module/components/Checkbox/Checkbox.js +13 -2
  28. package/lib/module/components/Checkbox/Checkbox.js.map +1 -1
  29. package/lib/module/components/Portal/PortalConsumer.js.map +1 -1
  30. package/lib/module/components/Text.js +1 -1
  31. package/lib/module/components/Text.js.map +1 -1
  32. package/lib/module/index.js +0 -1
  33. package/lib/module/index.js.map +1 -1
  34. package/lib/module/mappings/Card.js +1 -2
  35. package/lib/module/mappings/Card.js.map +1 -1
  36. package/lib/module/mappings/Carousel.js +3 -1
  37. package/lib/module/mappings/Carousel.js.map +1 -1
  38. package/lib/module/mappings/Checkbox.js +1 -1
  39. package/lib/module/mappings/Checkbox.js.map +1 -1
  40. package/lib/typescript/src/components/Checkbox/Checkbox.d.ts +2 -0
  41. package/lib/typescript/src/index.d.ts +0 -1
  42. package/lib/typescript/src/mappings/Carousel.d.ts +3 -1
  43. package/package.json +3 -3
  44. package/src/components/Carousel.js +0 -3
  45. package/src/components/Carousel.tsx +0 -3
  46. package/src/components/Checkbox/Checkbox.js +10 -3
  47. package/src/components/Checkbox/Checkbox.tsx +15 -2
  48. package/src/components/Text.js +1 -1
  49. package/src/components/Text.tsx +1 -1
  50. package/src/index.js +0 -1
  51. package/src/index.tsx +0 -1
  52. package/src/mappings/Card.js +1 -1
  53. package/src/mappings/Card.ts +1 -1
  54. package/src/mappings/Carousel.js +3 -1
  55. package/src/mappings/Carousel.ts +3 -1
  56. package/src/mappings/Checkbox.js +1 -1
  57. package/src/mappings/Checkbox.ts +1 -1
  58. package/lib/commonjs/components/ToggleButton.js +0 -86
  59. package/lib/commonjs/components/ToggleButton.js.map +0 -1
  60. package/lib/commonjs/mappings/ToggleButton.js +0 -60
  61. package/lib/commonjs/mappings/ToggleButton.js.map +0 -1
  62. package/lib/module/components/ToggleButton.js +0 -67
  63. package/lib/module/components/ToggleButton.js.map +0 -1
  64. package/lib/module/mappings/ToggleButton.js +0 -51
  65. package/lib/module/mappings/ToggleButton.js.map +0 -1
  66. package/lib/typescript/src/components/ToggleButton.d.ts +0 -24
  67. package/lib/typescript/src/mappings/ToggleButton.d.ts +0 -124
  68. package/src/components/ToggleButton.js +0 -37
  69. package/src/components/ToggleButton.tsx +0 -92
  70. package/src/mappings/ToggleButton.js +0 -50
  71. package/src/mappings/ToggleButton.ts +0 -62
@@ -1,86 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var React = _interopRequireWildcard(require("react"));
9
-
10
- var _theming = require("../theming");
11
-
12
- var _reactNative = require("react-native");
13
-
14
- var _IconButton = _interopRequireDefault(require("./IconButton"));
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
-
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
-
22
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
23
-
24
- const ToggleButton = _ref => {
25
- let {
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: {
39
- colors
40
- },
41
- style,
42
- ...rest
43
- } = _ref;
44
- const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
45
- React.useEffect(() => {
46
- if (toggled != null) {
47
- setInternalValue(toggled);
48
- }
49
- }, [toggled]);
50
- React.useEffect(() => {
51
- if (defaultValue != null) {
52
- setInternalValue(defaultValue);
53
- }
54
- }, [defaultValue]);
55
-
56
- const handlePress = () => {
57
- setInternalValue(!toggled);
58
- onPress(!toggled);
59
- };
60
-
61
- return /*#__PURE__*/React.createElement(_IconButton.default, _extends({
62
- Icon: Icon,
63
- icon: icon,
64
- size: iconSize,
65
- color: internalValue ? colors[color] : colors[colorSecondary],
66
- onPress: handlePress,
67
- disabled: disabled,
68
- style: [styles.mainContainer, {
69
- width,
70
- height,
71
- backgroundColor: toggled ? colors[colorSecondary] : colors[color],
72
- borderColor: colors[borderColor]
73
- }, style]
74
- }, rest));
75
- };
76
-
77
- const styles = _reactNative.StyleSheet.create({
78
- mainContainer: {
79
- borderWidth: 1
80
- }
81
- });
82
-
83
- var _default = (0, _theming.withTheme)(ToggleButton);
84
-
85
- exports.default = _default;
86
- //# sourceMappingURL=ToggleButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["ToggleButton.tsx"],"names":["ToggleButton","Icon","icon","toggled","onPress","defaultValue","disabled","color","colorSecondary","borderColor","iconSize","width","height","theme","colors","style","rest","internalValue","setInternalValue","React","useState","useEffect","handlePress","styles","mainContainer","backgroundColor","StyleSheet","create","borderWidth"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;AAoBA,MAAMA,YAA6B,GAAG,QAgBhC;AAAA,MAhBiC;AACrCC,IAAAA,IADqC;AAErCC,IAAAA,IAFqC;AAGrCC,IAAAA,OAAO,GAAG,KAH2B;AAIrCC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJmB;AAKrCC,IAAAA,YALqC;AAMrCC,IAAAA,QAAQ,GAAG,KAN0B;AAOrCC,IAAAA,KAAK,GAAG,SAP6B;AAQrCC,IAAAA,cAAc,GAAG,SARoB;AASrCC,IAAAA,WAAW,GAAG,SATuB;AAUrCC,IAAAA,QAAQ,GAAG,EAV0B;AAWrCC,IAAAA,KAAK,GAAG,EAX6B;AAYrCC,IAAAA,MAAM,GAAG,EAZ4B;AAarCC,IAAAA,KAAK,EAAE;AAAEC,MAAAA;AAAF,KAb8B;AAcrCC,IAAAA,KAdqC;AAerC,OAAGC;AAfkC,GAgBjC;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,KAAK,CAACC,QAAN,CACxCjB,OAAO,IAAIE,YAAX,IAA2B,KADa,CAA1C;AAIAc,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,QAAIlB,OAAO,IAAI,IAAf,EAAqB;AACnBe,MAAAA,gBAAgB,CAACf,OAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,OAAD,CAJH;AAMAgB,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AACpB,QAAIhB,YAAY,IAAI,IAApB,EAA0B;AACxBa,MAAAA,gBAAgB,CAACb,YAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,YAAD,CAJH;;AAMA,QAAMiB,WAAW,GAAG,MAAM;AACxBJ,IAAAA,gBAAgB,CAAC,CAACf,OAAF,CAAhB;AACAC,IAAAA,OAAO,CAAC,CAACD,OAAF,CAAP;AACD,GAHD;;AAKA,sBACE,oBAAC,mBAAD;AACE,IAAA,IAAI,EAAEF,IADR;AAEE,IAAA,IAAI,EAAEC,IAFR;AAGE,IAAA,IAAI,EAAEQ,QAHR;AAIE,IAAA,KAAK,EAAEO,aAAa,GAAGH,MAAM,CAACP,KAAD,CAAT,GAAmBO,MAAM,CAACN,cAAD,CAJ/C;AAKE,IAAA,OAAO,EAAEc,WALX;AAME,IAAA,QAAQ,EAAEhB,QANZ;AAOE,IAAA,KAAK,EAAE,CACLiB,MAAM,CAACC,aADF,EAEL;AACEb,MAAAA,KADF;AAEEC,MAAAA,MAFF;AAGEa,MAAAA,eAAe,EAAEtB,OAAO,GAAGW,MAAM,CAACN,cAAD,CAAT,GAA4BM,MAAM,CAACP,KAAD,CAH5D;AAIEE,MAAAA,WAAW,EAAEK,MAAM,CAACL,WAAD;AAJrB,KAFK,EAQLM,KARK;AAPT,KAiBMC,IAjBN,EADF;AAqBD,CA3DD;;AA6DA,MAAMO,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,aAAa,EAAE;AACbI,IAAAA,WAAW,EAAE;AADA;AADgB,CAAlB,CAAf;;eAMe,wBAAU5B,YAAV,C","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../theming\";\nimport { colorTypes } from \"@draftbit/types\";\nimport { StyleProp, StyleSheet, ViewStyle } from \"react-native\";\nimport IconButton from \"./IconButton\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\ntype Props = {\n icon: string;\n toggled?: boolean;\n onPress?: (value: boolean) => void;\n defaultValue?: boolean;\n disabled?: boolean;\n color?: colorTypes;\n colorSecondary?: colorTypes;\n borderColor?: colorTypes;\n iconSize?: number;\n width?: number;\n height?: number;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & IconSlot;\n\nconst ToggleButton: React.FC<Props> = ({\n Icon,\n icon,\n toggled = false,\n onPress = () => {},\n defaultValue,\n disabled = false,\n color = \"primary\",\n colorSecondary = \"surface\",\n borderColor = \"divider\",\n iconSize = 25,\n width = 50,\n height = 50,\n theme: { colors },\n style,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<boolean>(\n toggled || defaultValue || false\n );\n\n React.useEffect(() => {\n if (toggled != null) {\n setInternalValue(toggled);\n }\n }, [toggled]);\n\n React.useEffect(() => {\n if (defaultValue != null) {\n setInternalValue(defaultValue);\n }\n }, [defaultValue]);\n\n const handlePress = () => {\n setInternalValue(!toggled);\n onPress(!toggled);\n };\n\n return (\n <IconButton\n Icon={Icon}\n icon={icon}\n size={iconSize}\n color={internalValue ? colors[color] : colors[colorSecondary]}\n onPress={handlePress}\n disabled={disabled}\n style={[\n styles.mainContainer,\n {\n width,\n height,\n backgroundColor: toggled ? colors[colorSecondary] : colors[color],\n borderColor: colors[borderColor],\n },\n style,\n ]}\n {...rest}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n mainContainer: {\n borderWidth: 1,\n },\n});\n\nexport default withTheme(ToggleButton);\n"]}
@@ -1,60 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SEED_DATA = void 0;
7
-
8
- var _types = require("@draftbit/types");
9
-
10
- const SEED_DATA = {
11
- name: "Toggle Button",
12
- tag: "ToggleButton",
13
- category: _types.COMPONENT_TYPES.button,
14
- layout: {},
15
- triggers: [_types.Triggers.OnPress],
16
- props: {
17
- onPress: (0, _types.createActionProp)(),
18
- icon: (0, _types.createIconProp)({
19
- required: true
20
- }),
21
- iconSize: (0, _types.createIconSizeProp)(),
22
- fieldName: (0, _types.createFieldNameProp)({
23
- defaultValue: false,
24
- valuePropName: "toggled"
25
- }),
26
- disabled: (0, _types.createBoolProp)({
27
- label: "Disabled",
28
- description: "Whether the button should be disabled",
29
- group: _types.GROUPS.basic
30
- }),
31
- color: (0, _types.createColorProp)({
32
- group: _types.GROUPS.basic
33
- }),
34
- colorSecondary: (0, _types.createColorProp)({
35
- label: "Secondary Color",
36
- group: _types.GROUPS.basic
37
- }),
38
- borderColor: (0, _types.createColorProp)({
39
- label: "Border Color",
40
- group: _types.GROUPS.basic
41
- }),
42
- width: (0, _types.createStaticNumberProp)({
43
- label: "Width",
44
- description: "Width",
45
- defaultValue: 50
46
- }),
47
- height: (0, _types.createStaticNumberProp)({
48
- label: "Height",
49
- description: "Height",
50
- defaultValue: 50
51
- }),
52
- toggled: (0, _types.createBoolProp)({
53
- label: "Toggled",
54
- description: "Whether the button should show the toggled state",
55
- defaultValue: false
56
- })
57
- }
58
- };
59
- exports.SEED_DATA = SEED_DATA;
60
- //# sourceMappingURL=ToggleButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["ToggleButton.ts"],"names":["SEED_DATA","name","tag","category","COMPONENT_TYPES","button","layout","triggers","Triggers","OnPress","props","onPress","icon","required","iconSize","fieldName","defaultValue","valuePropName","disabled","label","description","group","GROUPS","basic","color","colorSecondary","borderColor","width","height","toggled"],"mappings":";;;;;;;AAAA;;AAaO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,eADiB;AAEvBC,EAAAA,GAAG,EAAE,cAFkB;AAGvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,MAHH;AAIvBC,EAAAA,MAAM,EAAE,EAJe;AAKvBC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,OAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,8BADJ;AAELC,IAAAA,IAAI,EAAE,2BAAe;AACnBC,MAAAA,QAAQ,EAAE;AADS,KAAf,CAFD;AAKLC,IAAAA,QAAQ,EAAE,gCALL;AAMLC,IAAAA,SAAS,EAAE,gCAAoB;AAC7BC,MAAAA,YAAY,EAAE,KADe;AAE7BC,MAAAA,aAAa,EAAE;AAFc,KAApB,CANN;AAULC,IAAAA,QAAQ,EAAE,2BAAe;AACvBC,MAAAA,KAAK,EAAE,UADgB;AAEvBC,MAAAA,WAAW,EAAE,uCAFU;AAGvBC,MAAAA,KAAK,EAAEC,cAAOC;AAHS,KAAf,CAVL;AAeLC,IAAAA,KAAK,EAAE,4BAAgB;AACrBH,MAAAA,KAAK,EAAEC,cAAOC;AADO,KAAhB,CAfF;AAkBLE,IAAAA,cAAc,EAAE,4BAAgB;AAC9BN,MAAAA,KAAK,EAAE,iBADuB;AAE9BE,MAAAA,KAAK,EAAEC,cAAOC;AAFgB,KAAhB,CAlBX;AAsBLG,IAAAA,WAAW,EAAE,4BAAgB;AAC3BP,MAAAA,KAAK,EAAE,cADoB;AAE3BE,MAAAA,KAAK,EAAEC,cAAOC;AAFa,KAAhB,CAtBR;AA0BLI,IAAAA,KAAK,EAAE,mCAAuB;AAC5BR,MAAAA,KAAK,EAAE,OADqB;AAE5BC,MAAAA,WAAW,EAAE,OAFe;AAG5BJ,MAAAA,YAAY,EAAE;AAHc,KAAvB,CA1BF;AA+BLY,IAAAA,MAAM,EAAE,mCAAuB;AAC7BT,MAAAA,KAAK,EAAE,QADsB;AAE7BC,MAAAA,WAAW,EAAE,QAFgB;AAG7BJ,MAAAA,YAAY,EAAE;AAHe,KAAvB,CA/BH;AAoCLa,IAAAA,OAAO,EAAE,2BAAe;AACtBV,MAAAA,KAAK,EAAE,SADe;AAEtBC,MAAAA,WAAW,EAAE,kDAFS;AAGtBJ,MAAAA,YAAY,EAAE;AAHQ,KAAf;AApCJ;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,67 +0,0 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
- import * as React from "react";
4
- import { withTheme } from "../theming";
5
- import { StyleSheet } from "react-native";
6
- import IconButton from "./IconButton";
7
-
8
- const ToggleButton = _ref => {
9
- let {
10
- Icon,
11
- icon,
12
- toggled = false,
13
- onPress = () => {},
14
- defaultValue,
15
- disabled = false,
16
- color = "primary",
17
- colorSecondary = "surface",
18
- borderColor = "divider",
19
- iconSize = 25,
20
- width = 50,
21
- height = 50,
22
- theme: {
23
- colors
24
- },
25
- style,
26
- ...rest
27
- } = _ref;
28
- const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
29
- React.useEffect(() => {
30
- if (toggled != null) {
31
- setInternalValue(toggled);
32
- }
33
- }, [toggled]);
34
- React.useEffect(() => {
35
- if (defaultValue != null) {
36
- setInternalValue(defaultValue);
37
- }
38
- }, [defaultValue]);
39
-
40
- const handlePress = () => {
41
- setInternalValue(!toggled);
42
- onPress(!toggled);
43
- };
44
-
45
- return /*#__PURE__*/React.createElement(IconButton, _extends({
46
- Icon: Icon,
47
- icon: icon,
48
- size: iconSize,
49
- color: internalValue ? colors[color] : colors[colorSecondary],
50
- onPress: handlePress,
51
- disabled: disabled,
52
- style: [styles.mainContainer, {
53
- width,
54
- height,
55
- backgroundColor: toggled ? colors[colorSecondary] : colors[color],
56
- borderColor: colors[borderColor]
57
- }, style]
58
- }, rest));
59
- };
60
-
61
- const styles = StyleSheet.create({
62
- mainContainer: {
63
- borderWidth: 1
64
- }
65
- });
66
- export default withTheme(ToggleButton);
67
- //# sourceMappingURL=ToggleButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["ToggleButton.tsx"],"names":["React","withTheme","StyleSheet","IconButton","ToggleButton","Icon","icon","toggled","onPress","defaultValue","disabled","color","colorSecondary","borderColor","iconSize","width","height","theme","colors","style","rest","internalValue","setInternalValue","useState","useEffect","handlePress","styles","mainContainer","backgroundColor","create","borderWidth"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,YAA1B;AAEA,SAAoBC,UAApB,QAAiD,cAAjD;AACA,OAAOC,UAAP,MAAuB,cAAvB;;AAoBA,MAAMC,YAA6B,GAAG,QAgBhC;AAAA,MAhBiC;AACrCC,IAAAA,IADqC;AAErCC,IAAAA,IAFqC;AAGrCC,IAAAA,OAAO,GAAG,KAH2B;AAIrCC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJmB;AAKrCC,IAAAA,YALqC;AAMrCC,IAAAA,QAAQ,GAAG,KAN0B;AAOrCC,IAAAA,KAAK,GAAG,SAP6B;AAQrCC,IAAAA,cAAc,GAAG,SARoB;AASrCC,IAAAA,WAAW,GAAG,SATuB;AAUrCC,IAAAA,QAAQ,GAAG,EAV0B;AAWrCC,IAAAA,KAAK,GAAG,EAX6B;AAYrCC,IAAAA,MAAM,GAAG,EAZ4B;AAarCC,IAAAA,KAAK,EAAE;AAAEC,MAAAA;AAAF,KAb8B;AAcrCC,IAAAA,KAdqC;AAerC,OAAGC;AAfkC,GAgBjC;AACJ,QAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCtB,KAAK,CAACuB,QAAN,CACxChB,OAAO,IAAIE,YAAX,IAA2B,KADa,CAA1C;AAIAT,EAAAA,KAAK,CAACwB,SAAN,CAAgB,MAAM;AACpB,QAAIjB,OAAO,IAAI,IAAf,EAAqB;AACnBe,MAAAA,gBAAgB,CAACf,OAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,OAAD,CAJH;AAMAP,EAAAA,KAAK,CAACwB,SAAN,CAAgB,MAAM;AACpB,QAAIf,YAAY,IAAI,IAApB,EAA0B;AACxBa,MAAAA,gBAAgB,CAACb,YAAD,CAAhB;AACD;AACF,GAJD,EAIG,CAACA,YAAD,CAJH;;AAMA,QAAMgB,WAAW,GAAG,MAAM;AACxBH,IAAAA,gBAAgB,CAAC,CAACf,OAAF,CAAhB;AACAC,IAAAA,OAAO,CAAC,CAACD,OAAF,CAAP;AACD,GAHD;;AAKA,sBACE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEF,IADR;AAEE,IAAA,IAAI,EAAEC,IAFR;AAGE,IAAA,IAAI,EAAEQ,QAHR;AAIE,IAAA,KAAK,EAAEO,aAAa,GAAGH,MAAM,CAACP,KAAD,CAAT,GAAmBO,MAAM,CAACN,cAAD,CAJ/C;AAKE,IAAA,OAAO,EAAEa,WALX;AAME,IAAA,QAAQ,EAAEf,QANZ;AAOE,IAAA,KAAK,EAAE,CACLgB,MAAM,CAACC,aADF,EAEL;AACEZ,MAAAA,KADF;AAEEC,MAAAA,MAFF;AAGEY,MAAAA,eAAe,EAAErB,OAAO,GAAGW,MAAM,CAACN,cAAD,CAAT,GAA4BM,MAAM,CAACP,KAAD,CAH5D;AAIEE,MAAAA,WAAW,EAAEK,MAAM,CAACL,WAAD;AAJrB,KAFK,EAQLM,KARK;AAPT,KAiBMC,IAjBN,EADF;AAqBD,CA3DD;;AA6DA,MAAMM,MAAM,GAAGxB,UAAU,CAAC2B,MAAX,CAAkB;AAC/BF,EAAAA,aAAa,EAAE;AACbG,IAAAA,WAAW,EAAE;AADA;AADgB,CAAlB,CAAf;AAMA,eAAe7B,SAAS,CAACG,YAAD,CAAxB","sourcesContent":["import * as React from \"react\";\nimport { withTheme } from \"../theming\";\nimport { colorTypes } from \"@draftbit/types\";\nimport { StyleProp, StyleSheet, ViewStyle } from \"react-native\";\nimport IconButton from \"./IconButton\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\ntype Props = {\n icon: string;\n toggled?: boolean;\n onPress?: (value: boolean) => void;\n defaultValue?: boolean;\n disabled?: boolean;\n color?: colorTypes;\n colorSecondary?: colorTypes;\n borderColor?: colorTypes;\n iconSize?: number;\n width?: number;\n height?: number;\n style?: StyleProp<ViewStyle>;\n theme: Theme;\n} & IconSlot;\n\nconst ToggleButton: React.FC<Props> = ({\n Icon,\n icon,\n toggled = false,\n onPress = () => {},\n defaultValue,\n disabled = false,\n color = \"primary\",\n colorSecondary = \"surface\",\n borderColor = \"divider\",\n iconSize = 25,\n width = 50,\n height = 50,\n theme: { colors },\n style,\n ...rest\n}) => {\n const [internalValue, setInternalValue] = React.useState<boolean>(\n toggled || defaultValue || false\n );\n\n React.useEffect(() => {\n if (toggled != null) {\n setInternalValue(toggled);\n }\n }, [toggled]);\n\n React.useEffect(() => {\n if (defaultValue != null) {\n setInternalValue(defaultValue);\n }\n }, [defaultValue]);\n\n const handlePress = () => {\n setInternalValue(!toggled);\n onPress(!toggled);\n };\n\n return (\n <IconButton\n Icon={Icon}\n icon={icon}\n size={iconSize}\n color={internalValue ? colors[color] : colors[colorSecondary]}\n onPress={handlePress}\n disabled={disabled}\n style={[\n styles.mainContainer,\n {\n width,\n height,\n backgroundColor: toggled ? colors[colorSecondary] : colors[color],\n borderColor: colors[borderColor],\n },\n style,\n ]}\n {...rest}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n mainContainer: {\n borderWidth: 1,\n },\n});\n\nexport default withTheme(ToggleButton);\n"]}
@@ -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,37 +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(!toggled);
19
- onPress(!toggled);
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: toggled ? colors[colorSecondary] : colors[color],
27
- borderColor: colors[borderColor],
28
- },
29
- style,
30
- ], ...rest }));
31
- };
32
- const styles = StyleSheet.create({
33
- mainContainer: {
34
- borderWidth: 1,
35
- },
36
- });
37
- export default withTheme(ToggleButton);
@@ -1,92 +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(!toggled);
60
- onPress(!toggled);
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: toggled ? colors[colorSecondary] : colors[color],
77
- borderColor: colors[borderColor],
78
- },
79
- style,
80
- ]}
81
- {...rest}
82
- />
83
- );
84
- };
85
-
86
- const styles = StyleSheet.create({
87
- mainContainer: {
88
- borderWidth: 1,
89
- },
90
- });
91
-
92
- 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
- };