@draftbit/core 43.2.6-c2ac06.0 → 43.3.3
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/DeprecatedFAB.js +20 -4
- package/lib/commonjs/components/DeprecatedFAB.js.map +1 -1
- package/lib/commonjs/components/Elevation.js +3 -14
- package/lib/commonjs/components/Elevation.js.map +1 -1
- package/lib/commonjs/components/Swiper/Swiper.js.map +1 -1
- package/lib/commonjs/components/ToggleButton.js +86 -0
- package/lib/commonjs/components/ToggleButton.js.map +1 -0
- package/lib/commonjs/index.js +8 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/ActionSheetItem.js.map +1 -1
- package/lib/commonjs/mappings/Card.js +1 -1
- package/lib/commonjs/mappings/Card.js.map +1 -1
- package/lib/commonjs/mappings/DeprecatedButton.js.map +1 -1
- package/lib/commonjs/mappings/ToggleButton.js +60 -0
- package/lib/commonjs/mappings/ToggleButton.js.map +1 -0
- package/lib/module/components/Portal/PortalHost.js.map +1 -1
- package/lib/module/components/Swiper/Swiper.js.map +1 -1
- package/lib/module/components/ToggleButton.js +67 -0
- package/lib/module/components/ToggleButton.js.map +1 -0
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/Card.js +1 -1
- package/lib/module/mappings/Card.js.map +1 -1
- package/lib/module/mappings/ToggleButton.js +51 -0
- package/lib/module/mappings/ToggleButton.js.map +1 -0
- package/lib/typescript/src/components/ToggleButton.d.ts +24 -0
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/mappings/ToggleButton.d.ts +124 -0
- package/package.json +3 -3
- package/src/components/ToggleButton.js +39 -0
- package/src/components/ToggleButton.tsx +94 -0
- package/src/index.js +1 -0
- package/src/index.tsx +1 -0
- package/src/mappings/Card.js +1 -1
- package/src/mappings/Card.ts +1 -1
- package/src/mappings/ToggleButton.js +50 -0
- package/src/mappings/ToggleButton.ts +62 -0
|
@@ -0,0 +1 @@
|
|
|
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,CAACD,aAAF,CAAhB;AACAb,IAAAA,OAAO,CAAC,CAACa,aAAF,CAAP;AACD,GAHD;;AAKA,sBACE,oBAAC,UAAD;AACE,IAAA,IAAI,EAAEhB,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,EAAEP,aAAa,GAC1BH,MAAM,CAACN,cAAD,CADoB,GAE1BM,MAAM,CAACP,KAAD,CALZ;AAMEE,MAAAA,WAAW,EAAEK,MAAM,CAACL,WAAD;AANrB,KAFK,EAULM,KAVK;AAPT,KAmBMC,IAnBN,EADF;AAuBD,CA7DD;;AA+DA,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(!internalValue);\n onPress(!internalValue);\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: internalValue\n ? colors[colorSecondary]\n : 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"]}
|
package/lib/module/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { default as StarRating } from "./components/StarRating";
|
|
|
22
22
|
export { default as Surface } from "./components/Surface";
|
|
23
23
|
export { default as Switch, SwitchRow } from "./components/Switch";
|
|
24
24
|
export { default as TextField } from "./components/TextField";
|
|
25
|
+
export { default as ToggleButton } from "./components/ToggleButton";
|
|
25
26
|
export { default as Touchable } from "./components/Touchable";
|
|
26
27
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
27
28
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/ActionSheet";
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["injectIcon","withTheme","ThemeProvider","default","Provider","DefaultTheme","Link","ButtonSolid","ButtonOutline","Avatar","AvatarEdit","Card","Carousel","Checkbox","CheckboxGroup","CheckboxRow","CircleImage","Container","Divider","FAB","FieldSearchBarFull","IconButton","Image","NumberInput","ScreenContainer","StarRating","Surface","Switch","SwitchRow","TextField","Touchable","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel","Swiper","SwiperItem","Center","Circle","Square","Row","Stack","Spacer","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","Button","CardBlock","CardContainer","CardContainerRating","CardInline","DatePicker","HeaderLarge","HeaderMedium","HeaderOverline","Picker","ProgressBar","ProgressCircle","RowBodyIcon","RowHeadlineImageCaption","RowHeadlineImageIcon","Slider","Stepper","useAuthState"],"mappings":"AAAA,SAASA,UAAT,QAA2B,mBAA3B;AACA,SAASC,SAAT,EAAoBC,aAApB,QAAyC,WAAzC;AACA,SAASC,OAAO,IAAIC,QAApB,QAAoC,YAApC;AACA,SAASD,OAAO,IAAIE,YAApB,QAAwC,uBAAxC;AAEA,SAASC,IAAT,QAAqB,mBAArB;AACA,SAASC,WAAT,EAAsBC,aAAtB,QAA2C,qBAA3C;AACA,SAASL,OAAO,IAAIM,MAApB,QAAkC,0BAAlC;AACA,SAASN,OAAO,IAAIO,UAApB,QAAsC,yBAAtC;AACA,SAASP,OAAO,IAAIQ,IAApB,QAAgC,mBAAhC;AACA,SAASR,OAAO,IAAIS,QAApB,QAAoC,uBAApC;AACA,SAASC,QAAT,EAAmBC,aAAnB,EAAkCC,WAAlC,QAAqD,uBAArD;AACA,SAASZ,OAAO,IAAIa,WAApB,QAAuC,0BAAvC;AACA,SAASb,OAAO,IAAIc,SAApB,QAAqC,wBAArC;AACA,SAASd,OAAO,IAAIe,OAApB,QAAmC,sBAAnC;AACA,SAASf,OAAO,IAAIgB,GAApB,QAA+B,kBAA/B;AACA,SAAShB,OAAO,IAAIiB,kBAApB,QAA8C,iCAA9C;AACA,SAASjB,OAAO,IAAIkB,UAApB,QAAsC,yBAAtC;AACA,SAASlB,OAAO,IAAImB,KAApB,QAAiC,oBAAjC;AACA,SAASnB,OAAO,IAAIoB,WAApB,QAAuC,0BAAvC;AACA,SAASpB,OAAO,IAAIqB,eAApB,QAA2C,8BAA3C;AACA,SAASrB,OAAO,IAAIsB,UAApB,QAAsC,yBAAtC;AACA,SAAStB,OAAO,IAAIuB,OAApB,QAAmC,sBAAnC;AACA,SAASvB,OAAO,IAAIwB,MAApB,EAA4BC,SAA5B,QAA6C,qBAA7C;AACA,SAASzB,OAAO,IAAI0B,SAApB,QAAqC,wBAArC;AACA,SAAS1B,OAAO,IAAI2B,SAApB,QAAqC,wBAArC;AACA,SAASC,cAAT,EAAyBC,aAAzB,QAA8C,wBAA9C;AACA,SACEC,WADF,EAEEC,eAFF,EAGEC,iBAHF,QAIO,0BAJP;AAKA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,qBAAnC;AAEA,SACEC,MADF,EAEEC,MAFF,EAGEC,MAHF,EAIEC,GAJF,EAKEC,KALF,EAMEC,MANF,QAOO,qBAPP;AASA,SACEC,WADF,EAEEC,gBAFF,EAGEC,cAHF,EAIEC,qBAJF,QAKO,gCALP;AAOA;;AACA,
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["injectIcon","withTheme","ThemeProvider","default","Provider","DefaultTheme","Link","ButtonSolid","ButtonOutline","Avatar","AvatarEdit","Card","Carousel","Checkbox","CheckboxGroup","CheckboxRow","CircleImage","Container","Divider","FAB","FieldSearchBarFull","IconButton","Image","NumberInput","ScreenContainer","StarRating","Surface","Switch","SwitchRow","TextField","ToggleButton","Touchable","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel","Swiper","SwiperItem","Center","Circle","Square","Row","Stack","Spacer","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","Button","CardBlock","CardContainer","CardContainerRating","CardInline","DatePicker","HeaderLarge","HeaderMedium","HeaderOverline","Picker","ProgressBar","ProgressCircle","RowBodyIcon","RowHeadlineImageCaption","RowHeadlineImageIcon","Slider","Stepper","useAuthState"],"mappings":"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","sourcesContent":["export { injectIcon } from \"./interfaces/Icon\";\nexport { withTheme, ThemeProvider } from \"./theming\";\nexport { default as Provider } from \"./Provider\";\nexport { default as DefaultTheme } from \"./styles/DefaultTheme\";\n\nexport { Link } from \"./components/Text\";\nexport { ButtonSolid, ButtonOutline } from \"./components/Button\";\nexport { default as Avatar } from \"./components/CircleImage\";\nexport { default as AvatarEdit } from \"./components/AvatarEdit\";\nexport { default as Card } from \"./components/Card\";\nexport { default as Carousel } from \"./components/Carousel\";\nexport { Checkbox, CheckboxGroup, CheckboxRow } from \"./components/Checkbox\";\nexport { default as CircleImage } from \"./components/CircleImage\";\nexport { default as Container } from \"./components/Container\";\nexport { default as Divider } from \"./components/Divider\";\nexport { default as FAB } from \"./components/FAB\";\nexport { default as FieldSearchBarFull } from \"./components/FieldSearchBarFull\";\nexport { default as IconButton } from \"./components/IconButton\";\nexport { default as Image } from \"./components/Image\";\nexport { default as NumberInput } from \"./components/NumberInput\";\nexport { default as ScreenContainer } from \"./components/ScreenContainer\";\nexport { default as StarRating } from \"./components/StarRating\";\nexport { default as Surface } from \"./components/Surface\";\nexport { default as Switch, SwitchRow } from \"./components/Switch\";\nexport { default as TextField } from \"./components/TextField\";\nexport { default as ToggleButton } from \"./components/ToggleButton\";\nexport { default as Touchable } from \"./components/Touchable\";\nexport { AccordionGroup, AccordionItem } from \"./components/Accordion\";\nexport {\n ActionSheet,\n ActionSheetItem,\n ActionSheetCancel,\n} from \"./components/ActionSheet\";\nexport { Swiper, SwiperItem } from \"./components/Swiper\";\n\nexport {\n Center,\n Circle,\n Square,\n Row,\n Stack,\n Spacer,\n} from \"./components/Layout\";\n\nexport {\n RadioButton,\n RadioButtonGroup,\n RadioButtonRow,\n RadioButtonFieldGroup,\n} from \"./components/RadioButton/index\";\n\n/* Deprecated: Fix or Delete! */\nexport { default as Button } from \"./components/DeprecatedButton\";\nexport { default as CardBlock } from \"./components/CardBlock\";\nexport { default as CardContainer } from \"./components/CardContainer\";\nexport { default as CardContainerRating } from \"./components/CardContainerRating\";\nexport { default as CardInline } from \"./components/CardInline\";\nexport { default as DatePicker } from \"./components/DatePicker/DatePicker\";\nexport { default as HeaderLarge } from \"./components/HeaderLarge\";\nexport { default as HeaderMedium } from \"./components/HeaderMedium\";\nexport { default as HeaderOverline } from \"./components/HeaderOverline\";\nexport { default as Picker } from \"./components/Picker/Picker\";\nexport { default as ProgressBar } from \"./components/ProgressBar\";\nexport { default as ProgressCircle } from \"./components/ProgressCircle\";\nexport { default as RowBodyIcon } from \"./components/RowBodyIcon\";\nexport { default as RowHeadlineImageCaption } from \"./components/RowHeadlineImageCaption\";\nexport { default as RowHeadlineImageIcon } from \"./components/RowHeadlineImageIcon\";\nexport { default as Slider } from \"./components/Slider\";\nexport { default as Stepper } from \"./components/Stepper\";\nexport { useAuthState } from \"./components/useAuthState\";\n"]}
|
|
@@ -3,7 +3,7 @@ export const SEED_DATA = {
|
|
|
3
3
|
name: "Card",
|
|
4
4
|
tag: "Card",
|
|
5
5
|
description: "A card you can customize however you'd like",
|
|
6
|
-
category: COMPONENT_TYPES.
|
|
6
|
+
category: COMPONENT_TYPES.card,
|
|
7
7
|
triggers: [Triggers.OnPress, Triggers.OnPressIcon],
|
|
8
8
|
props: {
|
|
9
9
|
onPress: createActionProp(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Card.ts"],"names":["COMPONENT_TYPES","createElevationType","createTextProp","createImageProp","createIconProp","createAspectRatioProp","createStaticBoolProp","createTextStyle","createActionProp","Triggers","SEED_DATA","name","tag","description","category","
|
|
1
|
+
{"version":3,"sources":["Card.ts"],"names":["COMPONENT_TYPES","createElevationType","createTextProp","createImageProp","createIconProp","createAspectRatioProp","createStaticBoolProp","createTextStyle","createActionProp","Triggers","SEED_DATA","name","tag","description","category","card","triggers","OnPress","OnPressIcon","props","onPress","onPressIcon","handlerPropName","elevation","image","title","label","defaultValue","titleStyle","subtitle","subtitleStyle","descriptionStyle","icon","aspectRatio","textCentered"],"mappings":"AAAA,SACEA,eADF,EAEEC,mBAFF,EAGEC,cAHF,EAIEC,eAJF,EAKEC,cALF,EAMEC,qBANF,EAOEC,oBAPF,EAQEC,eARF,EASEC,gBATF,EAUEC,QAVF,QAWO,iBAXP;AAaA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,GAAG,EAAE,MAFkB;AAGvBC,EAAAA,WAAW,EAAE,6CAHU;AAIvBC,EAAAA,QAAQ,EAAEd,eAAe,CAACe,IAJH;AAKvBC,EAAAA,QAAQ,EAAE,CAACP,QAAQ,CAACQ,OAAV,EAAmBR,QAAQ,CAACS,WAA5B,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEZ,gBAAgB,EADpB;AAELa,IAAAA,WAAW,EAAEb,gBAAgB,CAAC;AAC5Bc,MAAAA,eAAe,EAAE;AADW,KAAD,CAFxB;AAKLC,IAAAA,SAAS,EAAEtB,mBAAmB,CAAC,CAAD,CALzB;AAMLuB,IAAAA,KAAK,EAAErB,eAAe,EANjB;AAOLsB,IAAAA,KAAK,EAAEvB,cAAc,CAAC;AACpBwB,MAAAA,KAAK,EAAE,OADa;AAEpBb,MAAAA,WAAW,EAAE,kBAFO;AAGpB;AACAc,MAAAA,YAAY,EAAE;AAJM,KAAD,CAPhB;AAaLC,IAAAA,UAAU,EAAErB,eAAe,CAAC;AAC1BmB,MAAAA,KAAK,EAAE;AADmB,KAAD,CAbtB;AAgBLG,IAAAA,QAAQ,EAAE3B,cAAc,CAAC;AACvBwB,MAAAA,KAAK,EAAE,UADgB;AAEvBb,MAAAA,WAAW,EAAE,2BAFU;AAGvBc,MAAAA,YAAY,EAAE,IAHS,CAIvB;;AAJuB,KAAD,CAhBnB;AAsBLG,IAAAA,aAAa,EAAEvB,eAAe,CAAC;AAC7BmB,MAAAA,KAAK,EAAE;AADsB,KAAD,CAtBzB;AAyBLb,IAAAA,WAAW,EAAEX,cAAc,CAAC;AAC1BwB,MAAAA,KAAK,EAAE,aADmB;AAE1Bb,MAAAA,WAAW,EAAE,mCAFa;AAG1B;AACA;AACAc,MAAAA,YAAY,EAAE;AALY,KAAD,CAzBtB;AAgCLI,IAAAA,gBAAgB,EAAExB,eAAe,CAAC;AAChCmB,MAAAA,KAAK,EAAE;AADyB,KAAD,CAhC5B;AAmCLM,IAAAA,IAAI,EAAE5B,cAAc,EAnCf;AAoCL6B,IAAAA,WAAW,EAAE5B,qBAAqB,CAAC;AACjCsB,MAAAA,YAAY,EAAE;AADmB,KAAD,CApC7B;AAuCLO,IAAAA,YAAY,EAAE5B,oBAAoB,CAAC;AACjCoB,MAAAA,KAAK,EAAE,eAD0B;AAEjCb,MAAAA,WAAW,EAAE;AAFoB,KAAD;AAvC7B;AANgB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createElevationType,\n createTextProp,\n createImageProp,\n createIconProp,\n createAspectRatioProp,\n createStaticBoolProp,\n createTextStyle,\n createActionProp,\n Triggers,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n name: \"Card\",\n tag: \"Card\",\n description: \"A card you can customize however you'd like\",\n category: COMPONENT_TYPES.card,\n triggers: [Triggers.OnPress, Triggers.OnPressIcon],\n props: {\n onPress: createActionProp(),\n onPressIcon: createActionProp({\n handlerPropName: \"onPressIcon\",\n }),\n elevation: createElevationType(3),\n image: createImageProp(),\n title: createTextProp({\n label: \"Title\",\n description: \"Large title text\",\n // defaultValue: \"Title\",\n defaultValue: null,\n }),\n titleStyle: createTextStyle({\n label: \"Title Style\",\n }),\n subtitle: createTextProp({\n label: \"Subtitle\",\n description: \"Text underneath the title\",\n defaultValue: null,\n // defaultValue: \"Edit me in the props panel on the right\",\n }),\n subtitleStyle: createTextStyle({\n label: \"Subtitle Style\",\n }),\n description: createTextProp({\n label: \"Description\",\n description: \"Smallest text underneath subtitle\",\n // defaultValue:\n // \"This bottom text is optional, but shows up to make your life a little easier!\",\n defaultValue: null,\n }),\n descriptionStyle: createTextStyle({\n label: \"Description Style\",\n }),\n icon: createIconProp(),\n aspectRatio: createAspectRatioProp({\n defaultValue: 1.5,\n }),\n textCentered: createStaticBoolProp({\n label: \"Centered Text\",\n description: \"Places your title and subtitle in the center\",\n }),\n },\n};\n"]}
|
|
@@ -0,0 +1,51 @@
|
|
|
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.deprecated,
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["ToggleButton.ts"],"names":["GROUPS","COMPONENT_TYPES","createIconProp","createBoolProp","createColorProp","createStaticNumberProp","createFieldNameProp","createIconSizeProp","createActionProp","Triggers","SEED_DATA","name","tag","category","deprecated","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,UAHH;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.deprecated,\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"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
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;
|
|
@@ -22,6 +22,7 @@ export { default as StarRating } from "./components/StarRating";
|
|
|
22
22
|
export { default as Surface } from "./components/Surface";
|
|
23
23
|
export { default as Switch, SwitchRow } from "./components/Switch";
|
|
24
24
|
export { default as TextField } from "./components/TextField";
|
|
25
|
+
export { default as ToggleButton } from "./components/ToggleButton";
|
|
25
26
|
export { default as Touchable } from "./components/Touchable";
|
|
26
27
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
27
28
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
|
|
@@ -0,0 +1,124 @@
|
|
|
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
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.
|
|
3
|
+
"version": "43.3.3",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^43.
|
|
44
|
+
"@draftbit/types": "^43.3.3",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.1.7",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
]
|
|
80
80
|
]
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "828219843d7a6261f77ed13ed635f25a56c6b102"
|
|
83
83
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
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);
|
|
@@ -0,0 +1,94 @@
|
|
|
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);
|
package/src/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { default as StarRating } from "./components/StarRating";
|
|
|
22
22
|
export { default as Surface } from "./components/Surface";
|
|
23
23
|
export { default as Switch, SwitchRow } from "./components/Switch";
|
|
24
24
|
export { default as TextField } from "./components/TextField";
|
|
25
|
+
export { default as ToggleButton } from "./components/ToggleButton";
|
|
25
26
|
export { default as Touchable } from "./components/Touchable";
|
|
26
27
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
27
28
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
|
package/src/index.tsx
CHANGED
|
@@ -23,6 +23,7 @@ export { default as StarRating } from "./components/StarRating";
|
|
|
23
23
|
export { default as Surface } from "./components/Surface";
|
|
24
24
|
export { default as Switch, SwitchRow } from "./components/Switch";
|
|
25
25
|
export { default as TextField } from "./components/TextField";
|
|
26
|
+
export { default as ToggleButton } from "./components/ToggleButton";
|
|
26
27
|
export { default as Touchable } from "./components/Touchable";
|
|
27
28
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
28
29
|
export {
|
package/src/mappings/Card.js
CHANGED
|
@@ -3,7 +3,7 @@ export const SEED_DATA = {
|
|
|
3
3
|
name: "Card",
|
|
4
4
|
tag: "Card",
|
|
5
5
|
description: "A card you can customize however you'd like",
|
|
6
|
-
category: COMPONENT_TYPES.
|
|
6
|
+
category: COMPONENT_TYPES.card,
|
|
7
7
|
triggers: [Triggers.OnPress, Triggers.OnPressIcon],
|
|
8
8
|
props: {
|
|
9
9
|
onPress: createActionProp(),
|
package/src/mappings/Card.ts
CHANGED
|
@@ -15,7 +15,7 @@ export const SEED_DATA = {
|
|
|
15
15
|
name: "Card",
|
|
16
16
|
tag: "Card",
|
|
17
17
|
description: "A card you can customize however you'd like",
|
|
18
|
-
category: COMPONENT_TYPES.
|
|
18
|
+
category: COMPONENT_TYPES.card,
|
|
19
19
|
triggers: [Triggers.OnPress, Triggers.OnPressIcon],
|
|
20
20
|
props: {
|
|
21
21
|
onPress: createActionProp(),
|
|
@@ -0,0 +1,50 @@
|
|
|
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.deprecated,
|
|
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
|
+
};
|
|
@@ -0,0 +1,62 @@
|
|
|
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.deprecated,
|
|
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
|
+
};
|