@draftbit/core 43.2.3-ab8de6.0 → 43.2.3-bd5c77.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 +5 -21
- package/lib/commonjs/components/Accordion/AccordionItem.js.map +1 -1
- package/lib/commonjs/components/ActionSheet/ActionSheet.js.map +1 -1
- package/lib/commonjs/components/DeprecatedButton.js +4 -19
- package/lib/commonjs/components/DeprecatedButton.js.map +1 -1
- package/lib/commonjs/components/DeprecatedCardWrapper.js +14 -2
- package/lib/commonjs/components/DeprecatedCardWrapper.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/Picker/PickerComponent.android.js +6 -20
- package/lib/commonjs/components/Picker/PickerComponent.android.js.map +1 -1
- package/lib/commonjs/components/ProgressCircle.js.map +1 -1
- package/lib/commonjs/components/TabView/TabView.js +103 -0
- package/lib/commonjs/components/TabView/TabView.js.map +1 -0
- package/lib/commonjs/components/TabView/TabViewItem.js +27 -0
- package/lib/commonjs/components/TabView/TabViewItem.js.map +1 -0
- package/lib/commonjs/components/TabView/index.js +24 -0
- package/lib/commonjs/components/TabView/index.js.map +1 -0
- package/lib/commonjs/index.js +6 -30
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/Card.js +1 -3
- package/lib/commonjs/mappings/Card.js.map +1 -1
- package/lib/commonjs/mappings/ImageBackground.js.map +1 -1
- package/lib/commonjs/mappings/Layout.js.map +1 -1
- package/lib/commonjs/mappings/TabView.js +80 -0
- package/lib/commonjs/mappings/TabView.js.map +1 -0
- package/lib/commonjs/utilities.js +2 -8
- package/lib/commonjs/utilities.js.map +1 -1
- package/lib/module/components/ProgressIndicator.js.map +1 -1
- package/lib/module/components/TabView/TabView.js +88 -0
- package/lib/module/components/TabView/TabView.js.map +1 -0
- package/lib/module/components/TabView/TabViewItem.js +19 -0
- package/lib/module/components/TabView/TabViewItem.js.map +1 -0
- package/lib/module/components/TabView/index.js +3 -0
- package/lib/module/components/TabView/index.js.map +1 -0
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/ActionSheetCancel.js.map +1 -1
- package/lib/module/mappings/TabView.js +71 -0
- package/lib/module/mappings/TabView.js.map +1 -0
- package/lib/module/utilities.js +2 -4
- package/lib/module/utilities.js.map +1 -1
- package/lib/typescript/src/components/TabView/TabView.d.ts +19 -0
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +10 -0
- package/lib/typescript/src/components/TabView/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/mappings/TabView.d.ts +111 -0
- package/lib/typescript/src/utilities.d.ts +3 -4
- package/package.json +4 -2
- package/src/components/TabView/TabView.js +33 -0
- package/src/components/TabView/TabView.tsx +97 -0
- package/src/components/TabView/TabViewItem.js +5 -0
- package/src/components/TabView/TabViewItem.tsx +21 -0
- package/src/components/TabView/index.js +2 -0
- package/src/components/TabView/index.ts +2 -0
- package/src/index.js +1 -1
- package/src/index.tsx +1 -9
- package/src/mappings/TabView.js +73 -0
- package/src/mappings/TabView.ts +80 -0
- package/src/utilities.js +1 -6
- package/src/utilities.ts +1 -6
- package/lib/commonjs/components/Table/index.js +0 -56
- package/lib/commonjs/components/Table/index.js.map +0 -1
- package/lib/commonjs/components/Table/table.js +0 -36
- package/lib/commonjs/components/Table/table.js.map +0 -1
- package/lib/commonjs/components/Table/tableCell.js +0 -44
- package/lib/commonjs/components/Table/tableCell.js.map +0 -1
- package/lib/commonjs/components/Table/tableHeader.js +0 -56
- package/lib/commonjs/components/Table/tableHeader.js.map +0 -1
- package/lib/commonjs/components/Table/tablePaginator.js +0 -18
- package/lib/commonjs/components/Table/tablePaginator.js.map +0 -1
- package/lib/commonjs/components/Table/tableRow.js +0 -48
- package/lib/commonjs/components/Table/tableRow.js.map +0 -1
- package/lib/commonjs/components/Table/tableTitle.js +0 -61
- package/lib/commonjs/components/Table/tableTitle.js.map +0 -1
- package/lib/commonjs/mappings/Table.js +0 -99
- package/lib/commonjs/mappings/Table.js.map +0 -1
- package/lib/module/components/Table/index.js +0 -7
- package/lib/module/components/Table/index.js.map +0 -1
- package/lib/module/components/Table/table.js +0 -24
- package/lib/module/components/Table/table.js.map +0 -1
- package/lib/module/components/Table/tableCell.js +0 -32
- package/lib/module/components/Table/tableCell.js.map +0 -1
- package/lib/module/components/Table/tableHeader.js +0 -28
- package/lib/module/components/Table/tableHeader.js.map +0 -1
- package/lib/module/components/Table/tablePaginator.js +0 -7
- package/lib/module/components/Table/tablePaginator.js.map +0 -1
- package/lib/module/components/Table/tableRow.js +0 -34
- package/lib/module/components/Table/tableRow.js.map +0 -1
- package/lib/module/components/Table/tableTitle.js +0 -48
- package/lib/module/components/Table/tableTitle.js.map +0 -1
- package/lib/module/mappings/Table.js +0 -90
- package/lib/module/mappings/Table.js.map +0 -1
- package/lib/typescript/src/components/Table/index.d.ts +0 -6
- package/lib/typescript/src/components/Table/table.d.ts +0 -8
- package/lib/typescript/src/components/Table/tableCell.d.ts +0 -10
- package/lib/typescript/src/components/Table/tableHeader.d.ts +0 -12
- package/lib/typescript/src/components/Table/tablePaginator.d.ts +0 -3
- package/lib/typescript/src/components/Table/tableRow.d.ts +0 -12
- package/lib/typescript/src/components/Table/tableTitle.d.ts +0 -12
- package/src/components/Table/index.js +0 -6
- package/src/components/Table/index.tsx +0 -6
- package/src/components/Table/table.js +0 -10
- package/src/components/Table/table.tsx +0 -22
- package/src/components/Table/tableCell.js +0 -17
- package/src/components/Table/tableCell.tsx +0 -37
- package/src/components/Table/tableHeader.js +0 -11
- package/src/components/Table/tableHeader.tsx +0 -28
- package/src/components/Table/tablePaginator.js +0 -5
- package/src/components/Table/tablePaginator.tsx +0 -10
- package/src/components/Table/tableRow.js +0 -16
- package/src/components/Table/tableRow.tsx +0 -31
- package/src/components/Table/tableTitle.js +0 -28
- package/src/components/Table/tableTitle.tsx +0 -59
- package/src/mappings/Table.js +0 -102
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","ToggleButton","Touchable","AccordionGroup","AccordionItem","ActionSheet","ActionSheetItem","ActionSheetCancel","Swiper","SwiperItem","Center","Circle","Square","Row","Stack","Spacer","RadioButton","RadioButtonGroup","RadioButtonRow","RadioButtonFieldGroup","
|
|
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","TabView","TabViewItem","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\";\nexport { TabView, TabViewItem } from \"./components/TabView\";\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ActionSheetCancel.
|
|
1
|
+
{"version":3,"sources":["ActionSheetCancel.js"],"names":["COMPONENT_TYPES","createActionProp","createColorProp","createTextProp","GROUPS","Triggers","SEED_DATA","name","tag","description","category","button","triggers","OnPress","props","onPress","label","group","basic","defaultValue","color"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,gBAA1B,EAA4CC,eAA5C,EAA6DC,cAA7D,EAA6EC,MAA7E,EAAqFC,QAArF,QAAsG,iBAAtG;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,qBADe;AAErBC,EAAAA,GAAG,EAAE,mBAFgB;AAGrBC,EAAAA,WAAW,EAAE,qBAHQ;AAIrBC,EAAAA,QAAQ,EAAEV,eAAe,CAACW,MAJL;AAKrBC,EAAAA,QAAQ,EAAE,CAACP,QAAQ,CAACQ,OAAV,CALW;AAMrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,OAAO,EAAEd,gBAAgB,EADtB;AAEHe,IAAAA,KAAK,EAAEb,cAAc,CAAC;AAClBc,MAAAA,KAAK,EAAEb,MAAM,CAACc,KADI;AAElBF,MAAAA,KAAK,EAAE,OAFW;AAGlBG,MAAAA,YAAY,EAAE;AAHI,KAAD,CAFlB;AAOHC,IAAAA,KAAK,EAAElB,eAAe,CAAC;AACnBc,MAAAA,KAAK,EAAE;AADY,KAAD;AAPnB;AANc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createActionProp, createColorProp, createTextProp, GROUPS, Triggers, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n name: \"Action Sheet Cancel\",\n tag: \"ActionSheetCancel\",\n description: \"Action Sheet cancel\",\n category: COMPONENT_TYPES.button,\n triggers: [Triggers.OnPress],\n props: {\n onPress: createActionProp(),\n label: createTextProp({\n group: GROUPS.basic,\n label: \"Label\",\n defaultValue: \"Cancel\",\n }),\n color: createColorProp({\n label: \"Font Color\",\n }),\n },\n};\n"]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = [{
|
|
3
|
+
name: "TabView",
|
|
4
|
+
tag: "TabView",
|
|
5
|
+
category: COMPONENT_TYPES.container,
|
|
6
|
+
layout: {},
|
|
7
|
+
props: {
|
|
8
|
+
tabBarPosition: createTextEnumProp({
|
|
9
|
+
label: "Tab Bar Position",
|
|
10
|
+
description: "Tab Bar Position",
|
|
11
|
+
options: ["top", "bottom"],
|
|
12
|
+
defaultValue: "top"
|
|
13
|
+
}),
|
|
14
|
+
keyboardDismissMode: createTextEnumProp({
|
|
15
|
+
label: "Keyboard Dismiss Mode",
|
|
16
|
+
description: "Keyboard Dismiss Mode",
|
|
17
|
+
options: ["auto", "on-drag", "none"],
|
|
18
|
+
defaultValue: "auto"
|
|
19
|
+
}),
|
|
20
|
+
swipeEnabled: createBoolProp({
|
|
21
|
+
label: "Swipe Enabled",
|
|
22
|
+
description: "Swipe Enabled",
|
|
23
|
+
defaultValue: true
|
|
24
|
+
}),
|
|
25
|
+
scrollEnabled: createBoolProp({
|
|
26
|
+
label: "Scroll Enabled",
|
|
27
|
+
description: "Scroll Enabled",
|
|
28
|
+
defaultValue: true
|
|
29
|
+
}),
|
|
30
|
+
activeColor: createColorProp({
|
|
31
|
+
label: "Active Color",
|
|
32
|
+
description: "Active Color",
|
|
33
|
+
defaultValue: "primary"
|
|
34
|
+
}),
|
|
35
|
+
inactiveColor: createColorProp({
|
|
36
|
+
label: "Inactive Color",
|
|
37
|
+
description: "Inactive Color",
|
|
38
|
+
defaultValue: null
|
|
39
|
+
}),
|
|
40
|
+
pressColor: createColorProp({
|
|
41
|
+
label: "Press Color",
|
|
42
|
+
description: "Press Color",
|
|
43
|
+
defaultValue: null
|
|
44
|
+
}),
|
|
45
|
+
indicatorColor: createColorProp({
|
|
46
|
+
label: "Indicator Color",
|
|
47
|
+
description: "Indicator Color",
|
|
48
|
+
defaultValue: null
|
|
49
|
+
})
|
|
50
|
+
}
|
|
51
|
+
}, {
|
|
52
|
+
name: "TabViewItem",
|
|
53
|
+
tag: "TabViewItem",
|
|
54
|
+
category: COMPONENT_TYPES.container,
|
|
55
|
+
layout: {},
|
|
56
|
+
props: {
|
|
57
|
+
title: createTextProp({
|
|
58
|
+
label: "Title",
|
|
59
|
+
description: "Tab Title"
|
|
60
|
+
}),
|
|
61
|
+
id: createTextProp({
|
|
62
|
+
label: "Id",
|
|
63
|
+
description: "Tab Id"
|
|
64
|
+
}),
|
|
65
|
+
accessibilityLabel: createTextProp({
|
|
66
|
+
label: "Accessibility Label",
|
|
67
|
+
description: "Accessibility Label"
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
}];
|
|
71
|
+
//# sourceMappingURL=TabView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["TabView.ts"],"names":["COMPONENT_TYPES","createTextProp","createTextEnumProp","createBoolProp","createColorProp","SEED_DATA","name","tag","category","container","layout","props","tabBarPosition","label","description","options","defaultValue","keyboardDismissMode","swipeEnabled","scrollEnabled","activeColor","inactiveColor","pressColor","indicatorColor","title","id","accessibilityLabel"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,kBAHF,EAIEC,cAJF,EAKEC,eALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,QAAQ,EAAER,eAAe,CAACS,SAH5B;AAIEC,EAAAA,MAAM,EAAE,EAJV;AAKEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,cAAc,EAAEV,kBAAkB,CAAC;AACjCW,MAAAA,KAAK,EAAE,kBAD0B;AAEjCC,MAAAA,WAAW,EAAE,kBAFoB;AAGjCC,MAAAA,OAAO,EAAE,CAAC,KAAD,EAAQ,QAAR,CAHwB;AAIjCC,MAAAA,YAAY,EAAE;AAJmB,KAAD,CAD7B;AAOLC,IAAAA,mBAAmB,EAAEf,kBAAkB,CAAC;AACtCW,MAAAA,KAAK,EAAE,uBAD+B;AAEtCC,MAAAA,WAAW,EAAE,uBAFyB;AAGtCC,MAAAA,OAAO,EAAE,CAAC,MAAD,EAAS,SAAT,EAAoB,MAApB,CAH6B;AAItCC,MAAAA,YAAY,EAAE;AAJwB,KAAD,CAPlC;AAaLE,IAAAA,YAAY,EAAEf,cAAc,CAAC;AAC3BU,MAAAA,KAAK,EAAE,eADoB;AAE3BC,MAAAA,WAAW,EAAE,eAFc;AAG3BE,MAAAA,YAAY,EAAE;AAHa,KAAD,CAbvB;AAkBLG,IAAAA,aAAa,EAAEhB,cAAc,CAAC;AAC5BU,MAAAA,KAAK,EAAE,gBADqB;AAE5BC,MAAAA,WAAW,EAAE,gBAFe;AAG5BE,MAAAA,YAAY,EAAE;AAHc,KAAD,CAlBxB;AAuBLI,IAAAA,WAAW,EAAEhB,eAAe,CAAC;AAC3BS,MAAAA,KAAK,EAAE,cADoB;AAE3BC,MAAAA,WAAW,EAAE,cAFc;AAG3BE,MAAAA,YAAY,EAAE;AAHa,KAAD,CAvBvB;AA4BLK,IAAAA,aAAa,EAAEjB,eAAe,CAAC;AAC7BS,MAAAA,KAAK,EAAE,gBADsB;AAE7BC,MAAAA,WAAW,EAAE,gBAFgB;AAG7BE,MAAAA,YAAY,EAAE;AAHe,KAAD,CA5BzB;AAiCLM,IAAAA,UAAU,EAAElB,eAAe,CAAC;AAC1BS,MAAAA,KAAK,EAAE,aADmB;AAE1BC,MAAAA,WAAW,EAAE,aAFa;AAG1BE,MAAAA,YAAY,EAAE;AAHY,KAAD,CAjCtB;AAsCLO,IAAAA,cAAc,EAAEnB,eAAe,CAAC;AAC9BS,MAAAA,KAAK,EAAE,iBADuB;AAE9BC,MAAAA,WAAW,EAAE,iBAFiB;AAG9BE,MAAAA,YAAY,EAAE;AAHgB,KAAD;AAtC1B;AALT,CADuB,EAmDvB;AACEV,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,QAAQ,EAAER,eAAe,CAACS,SAH5B;AAIEC,EAAAA,MAAM,EAAE,EAJV;AAKEC,EAAAA,KAAK,EAAE;AACLa,IAAAA,KAAK,EAAEvB,cAAc,CAAC;AACpBY,MAAAA,KAAK,EAAE,OADa;AAEpBC,MAAAA,WAAW,EAAE;AAFO,KAAD,CADhB;AAKLW,IAAAA,EAAE,EAAExB,cAAc,CAAC;AACjBY,MAAAA,KAAK,EAAE,IADU;AAEjBC,MAAAA,WAAW,EAAE;AAFI,KAAD,CALb;AASLY,IAAAA,kBAAkB,EAAEzB,cAAc,CAAC;AACjCY,MAAAA,KAAK,EAAE,qBAD0B;AAEjCC,MAAAA,WAAW,EAAE;AAFoB,KAAD;AAT7B;AALT,CAnDuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createTextProp,\n createTextEnumProp,\n createBoolProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = [\n {\n name: \"TabView\",\n tag: \"TabView\",\n category: COMPONENT_TYPES.container,\n layout: {},\n props: {\n tabBarPosition: createTextEnumProp({\n label: \"Tab Bar Position\",\n description: \"Tab Bar Position\",\n options: [\"top\", \"bottom\"],\n defaultValue: \"top\",\n }),\n keyboardDismissMode: createTextEnumProp({\n label: \"Keyboard Dismiss Mode\",\n description: \"Keyboard Dismiss Mode\",\n options: [\"auto\", \"on-drag\", \"none\"],\n defaultValue: \"auto\",\n }),\n swipeEnabled: createBoolProp({\n label: \"Swipe Enabled\",\n description: \"Swipe Enabled\",\n defaultValue: true,\n }),\n scrollEnabled: createBoolProp({\n label: \"Scroll Enabled\",\n description: \"Scroll Enabled\",\n defaultValue: true,\n }),\n activeColor: createColorProp({\n label: \"Active Color\",\n description: \"Active Color\",\n defaultValue: \"primary\",\n }),\n inactiveColor: createColorProp({\n label: \"Inactive Color\",\n description: \"Inactive Color\",\n defaultValue: null,\n }),\n pressColor: createColorProp({\n label: \"Press Color\",\n description: \"Press Color\",\n defaultValue: null,\n }),\n indicatorColor: createColorProp({\n label: \"Indicator Color\",\n description: \"Indicator Color\",\n defaultValue: null,\n }),\n },\n },\n {\n name: \"TabViewItem\",\n tag: \"TabViewItem\",\n category: COMPONENT_TYPES.container,\n layout: {},\n props: {\n title: createTextProp({\n label: \"Title\",\n description: \"Tab Title\",\n }),\n id: createTextProp({\n label: \"Id\",\n description: \"Tab Id\",\n }),\n accessibilityLabel: createTextProp({\n label: \"Accessibility Label\",\n description: \"Accessibility Label\",\n }),\n },\n },\n];\n"]}
|
package/lib/module/utilities.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
|
-
import omitBy from "lodash/omitBy";
|
|
3
|
-
import isNil from "lodash/isNil";
|
|
4
2
|
export function extractStyles(style) {
|
|
5
3
|
const {
|
|
6
4
|
color,
|
|
@@ -30,8 +28,8 @@ export function extractStyles(style) {
|
|
|
30
28
|
textDecorationStyle
|
|
31
29
|
};
|
|
32
30
|
return {
|
|
33
|
-
viewStyles
|
|
34
|
-
textStyles
|
|
31
|
+
viewStyles,
|
|
32
|
+
textStyles
|
|
35
33
|
};
|
|
36
34
|
}
|
|
37
35
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","
|
|
1
|
+
{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries"],"mappings":"AAAA,SAASA,UAAT,QAAiD,cAAjD;AAEA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFd,UAAU,CAACe,OAAX,CAAmBb,KAAK,IAAI,EAA5B,CAbJ;AAeA,QAAMc,UAAqB,GAAG;AAC5Bb,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcE,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGpB,UAAU,CAACe,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\n\nexport function extractStyles(style: StyleProp<any>) {\n const {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n ...viewStyles\n } = StyleSheet.flatten(style || {});\n\n const textStyles: TextStyle = {\n color,\n fontFamily,\n fontWeight,\n fontSize,\n lineHeight,\n letterSpacing,\n textTransform,\n textAlign,\n textDecorationLine,\n textDecorationColor,\n textDecorationStyle,\n };\n\n return { viewStyles, textStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n baseStyles: Array<StyleProp<any>>,\n stylesToApply: StyleProp<any> | undefined\n) {\n if (!stylesToApply) {\n return;\n }\n\n const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n for (const [key, value] of Object.entries(stylesToApply)) {\n if (value != null) {\n flattenedStyles[key] = value;\n }\n }\n\n return flattenedStyles;\n}\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
+
import type { IconSlot } from "../../interfaces/Icon";
|
|
4
|
+
declare type TabBarPosition = "top" | "bottom";
|
|
5
|
+
declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
6
|
+
declare type TabViewProps = {
|
|
7
|
+
tabBarPosition?: TabBarPosition;
|
|
8
|
+
keyboardDismissMode?: KeyboardDismissMode;
|
|
9
|
+
swipeEnabled?: boolean;
|
|
10
|
+
scrollEnabled?: boolean;
|
|
11
|
+
activeColor?: string;
|
|
12
|
+
inactiveColor?: string;
|
|
13
|
+
pressColor?: string;
|
|
14
|
+
indicatorColor?: string;
|
|
15
|
+
style?: StyleProp<TextStyle | ViewStyle>;
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
} & IconSlot;
|
|
18
|
+
declare const TabViewComponent: ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }: TabViewProps) => JSX.Element;
|
|
19
|
+
export default TabViewComponent;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface TabViewItemProps {
|
|
3
|
+
title: string;
|
|
4
|
+
id: string;
|
|
5
|
+
icon: string;
|
|
6
|
+
accessibilityLabel: string;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
declare const TabViewItem: ({ title, id, icon, children, accessibilityLabel, }: TabViewItemProps) => React.ReactNode;
|
|
10
|
+
export default TabViewItem;
|
|
@@ -27,9 +27,9 @@ export { default as Touchable } from "./components/Touchable";
|
|
|
27
27
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
28
28
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
|
|
29
29
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
30
|
+
export { TabView, TabViewItem } from "./components/TabView";
|
|
30
31
|
export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
|
|
31
32
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
|
|
32
|
-
export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle, } from "./components/Table";
|
|
33
33
|
export { default as Button } from "./components/DeprecatedButton";
|
|
34
34
|
export { default as CardBlock } from "./components/CardBlock";
|
|
35
35
|
export { default as CardContainer } from "./components/CardContainer";
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
export declare const SEED_DATA: ({
|
|
2
|
+
name: string;
|
|
3
|
+
tag: string;
|
|
4
|
+
category: string;
|
|
5
|
+
layout: {};
|
|
6
|
+
props: {
|
|
7
|
+
tabBarPosition: {
|
|
8
|
+
group: string;
|
|
9
|
+
label: string;
|
|
10
|
+
description: string;
|
|
11
|
+
editable: boolean;
|
|
12
|
+
required: boolean;
|
|
13
|
+
formType: string;
|
|
14
|
+
propType: string;
|
|
15
|
+
defaultValue: null;
|
|
16
|
+
options: never[];
|
|
17
|
+
};
|
|
18
|
+
keyboardDismissMode: {
|
|
19
|
+
group: string;
|
|
20
|
+
label: string;
|
|
21
|
+
description: string;
|
|
22
|
+
editable: boolean;
|
|
23
|
+
required: boolean;
|
|
24
|
+
formType: string;
|
|
25
|
+
propType: string;
|
|
26
|
+
defaultValue: null;
|
|
27
|
+
options: never[];
|
|
28
|
+
};
|
|
29
|
+
swipeEnabled: {
|
|
30
|
+
label: string;
|
|
31
|
+
description: string;
|
|
32
|
+
formType: string;
|
|
33
|
+
propType: string;
|
|
34
|
+
defaultValue: boolean;
|
|
35
|
+
editable: boolean;
|
|
36
|
+
required: boolean;
|
|
37
|
+
group: string;
|
|
38
|
+
};
|
|
39
|
+
scrollEnabled: {
|
|
40
|
+
label: string;
|
|
41
|
+
description: string;
|
|
42
|
+
formType: string;
|
|
43
|
+
propType: string;
|
|
44
|
+
defaultValue: boolean;
|
|
45
|
+
editable: boolean;
|
|
46
|
+
required: boolean;
|
|
47
|
+
group: string;
|
|
48
|
+
};
|
|
49
|
+
activeColor: {
|
|
50
|
+
group: string;
|
|
51
|
+
label: string;
|
|
52
|
+
description: string;
|
|
53
|
+
editable: boolean;
|
|
54
|
+
required: boolean;
|
|
55
|
+
defaultValue: null;
|
|
56
|
+
formType: string;
|
|
57
|
+
propType: string;
|
|
58
|
+
};
|
|
59
|
+
inactiveColor: {
|
|
60
|
+
group: string;
|
|
61
|
+
label: string;
|
|
62
|
+
description: string;
|
|
63
|
+
editable: boolean;
|
|
64
|
+
required: boolean;
|
|
65
|
+
defaultValue: null;
|
|
66
|
+
formType: string;
|
|
67
|
+
propType: string;
|
|
68
|
+
};
|
|
69
|
+
pressColor: {
|
|
70
|
+
group: string;
|
|
71
|
+
label: string;
|
|
72
|
+
description: string;
|
|
73
|
+
editable: boolean;
|
|
74
|
+
required: boolean;
|
|
75
|
+
defaultValue: null;
|
|
76
|
+
formType: string;
|
|
77
|
+
propType: string;
|
|
78
|
+
};
|
|
79
|
+
indicatorColor: {
|
|
80
|
+
group: string;
|
|
81
|
+
label: string;
|
|
82
|
+
description: string;
|
|
83
|
+
editable: boolean;
|
|
84
|
+
required: boolean;
|
|
85
|
+
defaultValue: null;
|
|
86
|
+
formType: string;
|
|
87
|
+
propType: string;
|
|
88
|
+
};
|
|
89
|
+
title?: undefined;
|
|
90
|
+
id?: undefined;
|
|
91
|
+
accessibilityLabel?: undefined;
|
|
92
|
+
};
|
|
93
|
+
} | {
|
|
94
|
+
name: string;
|
|
95
|
+
tag: string;
|
|
96
|
+
category: string;
|
|
97
|
+
layout: {};
|
|
98
|
+
props: {
|
|
99
|
+
title: any;
|
|
100
|
+
id: any;
|
|
101
|
+
accessibilityLabel: any;
|
|
102
|
+
tabBarPosition?: undefined;
|
|
103
|
+
keyboardDismissMode?: undefined;
|
|
104
|
+
swipeEnabled?: undefined;
|
|
105
|
+
scrollEnabled?: undefined;
|
|
106
|
+
activeColor?: undefined;
|
|
107
|
+
inactiveColor?: undefined;
|
|
108
|
+
pressColor?: undefined;
|
|
109
|
+
indicatorColor?: undefined;
|
|
110
|
+
};
|
|
111
|
+
})[];
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import { StyleProp } from "react-native";
|
|
1
|
+
import { StyleProp, TextStyle } from "react-native";
|
|
3
2
|
export declare function extractStyles(style: StyleProp<any>): {
|
|
4
|
-
viewStyles:
|
|
5
|
-
textStyles:
|
|
3
|
+
viewStyles: any;
|
|
4
|
+
textStyles: TextStyle;
|
|
6
5
|
};
|
|
7
6
|
/**
|
|
8
7
|
* Merges a style object on top of another style object. In React Native,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.2.3-
|
|
3
|
+
"version": "43.2.3-bd5c77.0+bd5c776c",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -53,6 +53,8 @@
|
|
|
53
53
|
"lodash.omit": "^4.5.0",
|
|
54
54
|
"lodash.tonumber": "^4.0.3",
|
|
55
55
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
56
|
+
"react-native-pager-view": "^5.4.9",
|
|
57
|
+
"react-native-tab-view": "^3.1.1",
|
|
56
58
|
"react-native-typography": "^1.4.1",
|
|
57
59
|
"react-native-web-swiper": "^2.2.1"
|
|
58
60
|
},
|
|
@@ -79,5 +81,5 @@
|
|
|
79
81
|
]
|
|
80
82
|
]
|
|
81
83
|
},
|
|
82
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "bd5c776c4fb08a66664b9d9e23212c1b6fe9fda1"
|
|
83
85
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
3
|
+
// import { withTheme } from "../../theming";
|
|
4
|
+
import TabViewItem from "./TabViewItem";
|
|
5
|
+
const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
|
|
6
|
+
const [index, setIndex] = React.useState(0);
|
|
7
|
+
const [routes, setRoutes] = React.useState([]);
|
|
8
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
9
|
+
React.useEffect(() => {
|
|
10
|
+
const newRoutes = [];
|
|
11
|
+
const scenes = {};
|
|
12
|
+
React.Children.toArray(children)
|
|
13
|
+
.filter((child) => child.type === TabViewItem)
|
|
14
|
+
.forEach((child) => {
|
|
15
|
+
if (child?.props?.id) {
|
|
16
|
+
newRoutes.push({
|
|
17
|
+
key: child?.props?.id,
|
|
18
|
+
...child?.props,
|
|
19
|
+
});
|
|
20
|
+
scenes[child?.props?.id] = () => child;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
setRoutes(newRoutes);
|
|
24
|
+
setTabScenes(scenes);
|
|
25
|
+
}, [children]);
|
|
26
|
+
const indexChangeHandler = (i) => setIndex(i);
|
|
27
|
+
const renderTabBar = (props) => {
|
|
28
|
+
console.log(props);
|
|
29
|
+
return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => route?.icon ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
|
|
30
|
+
};
|
|
31
|
+
return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
|
|
32
|
+
};
|
|
33
|
+
export default TabViewComponent;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
+
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
4
|
+
|
|
5
|
+
// import { withTheme } from "../../theming";
|
|
6
|
+
import TabViewItem from "./TabViewItem";
|
|
7
|
+
import type { IconSlot } from "../../interfaces/Icon";
|
|
8
|
+
|
|
9
|
+
type TabBarPosition = "top" | "bottom";
|
|
10
|
+
type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
11
|
+
|
|
12
|
+
type TabViewProps = {
|
|
13
|
+
tabBarPosition?: TabBarPosition;
|
|
14
|
+
keyboardDismissMode?: KeyboardDismissMode;
|
|
15
|
+
swipeEnabled?: boolean;
|
|
16
|
+
scrollEnabled?: boolean;
|
|
17
|
+
activeColor?: string;
|
|
18
|
+
inactiveColor?: string;
|
|
19
|
+
pressColor?: string;
|
|
20
|
+
indicatorColor?: string;
|
|
21
|
+
style?: StyleProp<TextStyle | ViewStyle>;
|
|
22
|
+
children: React.ReactNode;
|
|
23
|
+
} & IconSlot;
|
|
24
|
+
|
|
25
|
+
const TabViewComponent = ({
|
|
26
|
+
Icon,
|
|
27
|
+
tabBarPosition,
|
|
28
|
+
keyboardDismissMode,
|
|
29
|
+
swipeEnabled,
|
|
30
|
+
scrollEnabled,
|
|
31
|
+
activeColor,
|
|
32
|
+
inactiveColor,
|
|
33
|
+
pressColor,
|
|
34
|
+
indicatorColor,
|
|
35
|
+
style,
|
|
36
|
+
children,
|
|
37
|
+
}: TabViewProps) => {
|
|
38
|
+
const [index, setIndex] = React.useState(0);
|
|
39
|
+
const [routes, setRoutes] = React.useState([]);
|
|
40
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
41
|
+
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
const newRoutes: any = [];
|
|
44
|
+
const scenes: any = {};
|
|
45
|
+
|
|
46
|
+
React.Children.toArray(children)
|
|
47
|
+
.filter((child: any) => child.type === TabViewItem)
|
|
48
|
+
.forEach((child: any) => {
|
|
49
|
+
if (child?.props?.id) {
|
|
50
|
+
newRoutes.push({
|
|
51
|
+
key: child?.props?.id,
|
|
52
|
+
...child?.props,
|
|
53
|
+
});
|
|
54
|
+
scenes[child?.props?.id] = () => child;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
setRoutes(newRoutes);
|
|
59
|
+
setTabScenes(scenes);
|
|
60
|
+
}, [children]);
|
|
61
|
+
|
|
62
|
+
const indexChangeHandler = (i: any) => setIndex(i);
|
|
63
|
+
|
|
64
|
+
const renderTabBar = (props: any) => {
|
|
65
|
+
console.log(props);
|
|
66
|
+
return (
|
|
67
|
+
<TabBar
|
|
68
|
+
{...props}
|
|
69
|
+
activeColor={activeColor}
|
|
70
|
+
inactiveColor={inactiveColor}
|
|
71
|
+
pressColor={pressColor}
|
|
72
|
+
scrollEnabled={scrollEnabled}
|
|
73
|
+
indicatorStyle={{ backgroundColor: indicatorColor }}
|
|
74
|
+
renderIcon={({ route, color }) =>
|
|
75
|
+
route?.icon ? (
|
|
76
|
+
<Icon name={route.icon} color={color} size={36} />
|
|
77
|
+
) : null
|
|
78
|
+
}
|
|
79
|
+
style={style}
|
|
80
|
+
/>
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<TabView
|
|
86
|
+
navigationState={{ index, routes }}
|
|
87
|
+
renderScene={SceneMap(tabScenes)}
|
|
88
|
+
renderTabBar={renderTabBar}
|
|
89
|
+
onIndexChange={indexChangeHandler}
|
|
90
|
+
tabBarPosition={tabBarPosition}
|
|
91
|
+
keyboardDismissMode={keyboardDismissMode}
|
|
92
|
+
swipeEnabled={swipeEnabled}
|
|
93
|
+
/>
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export default TabViewComponent;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface TabViewItemProps {
|
|
3
|
+
title: string;
|
|
4
|
+
id: string;
|
|
5
|
+
icon: string;
|
|
6
|
+
accessibilityLabel: string;
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const TabViewItem = ({
|
|
11
|
+
title,
|
|
12
|
+
id,
|
|
13
|
+
icon,
|
|
14
|
+
children,
|
|
15
|
+
accessibilityLabel,
|
|
16
|
+
}: TabViewItemProps) => {
|
|
17
|
+
console.log({ title, id, icon, accessibilityLabel });
|
|
18
|
+
return children;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export default TabViewItem;
|
package/src/index.js
CHANGED
|
@@ -27,9 +27,9 @@ export { default as Touchable } from "./components/Touchable";
|
|
|
27
27
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
28
28
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
|
|
29
29
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
30
|
+
export { TabView, TabViewItem } from "./components/TabView";
|
|
30
31
|
export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
|
|
31
32
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
|
|
32
|
-
export { Table, TableRow, TablePaginator, TableHeader, TableCell, TableTitle, } from "./components/Table";
|
|
33
33
|
/* Deprecated: Fix or Delete! */
|
|
34
34
|
export { default as Button } from "./components/DeprecatedButton";
|
|
35
35
|
export { default as CardBlock } from "./components/CardBlock";
|
package/src/index.tsx
CHANGED
|
@@ -32,6 +32,7 @@ export {
|
|
|
32
32
|
ActionSheetCancel,
|
|
33
33
|
} from "./components/ActionSheet";
|
|
34
34
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
35
|
+
export { TabView, TabViewItem } from "./components/TabView";
|
|
35
36
|
|
|
36
37
|
export {
|
|
37
38
|
Center,
|
|
@@ -49,15 +50,6 @@ export {
|
|
|
49
50
|
RadioButtonFieldGroup,
|
|
50
51
|
} from "./components/RadioButton/index";
|
|
51
52
|
|
|
52
|
-
export {
|
|
53
|
-
Table,
|
|
54
|
-
TableRow,
|
|
55
|
-
TablePaginator,
|
|
56
|
-
TableHeader,
|
|
57
|
-
TableCell,
|
|
58
|
-
TableTitle,
|
|
59
|
-
} from "./components/Table";
|
|
60
|
-
|
|
61
53
|
/* Deprecated: Fix or Delete! */
|
|
62
54
|
export { default as Button } from "./components/DeprecatedButton";
|
|
63
55
|
export { default as CardBlock } from "./components/CardBlock";
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp, } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = [
|
|
3
|
+
{
|
|
4
|
+
name: "TabView",
|
|
5
|
+
tag: "TabView",
|
|
6
|
+
category: COMPONENT_TYPES.container,
|
|
7
|
+
layout: {},
|
|
8
|
+
props: {
|
|
9
|
+
tabBarPosition: createTextEnumProp({
|
|
10
|
+
label: "Tab Bar Position",
|
|
11
|
+
description: "Tab Bar Position",
|
|
12
|
+
options: ["top", "bottom"],
|
|
13
|
+
defaultValue: "top",
|
|
14
|
+
}),
|
|
15
|
+
keyboardDismissMode: createTextEnumProp({
|
|
16
|
+
label: "Keyboard Dismiss Mode",
|
|
17
|
+
description: "Keyboard Dismiss Mode",
|
|
18
|
+
options: ["auto", "on-drag", "none"],
|
|
19
|
+
defaultValue: "auto",
|
|
20
|
+
}),
|
|
21
|
+
swipeEnabled: createBoolProp({
|
|
22
|
+
label: "Swipe Enabled",
|
|
23
|
+
description: "Swipe Enabled",
|
|
24
|
+
defaultValue: true,
|
|
25
|
+
}),
|
|
26
|
+
scrollEnabled: createBoolProp({
|
|
27
|
+
label: "Scroll Enabled",
|
|
28
|
+
description: "Scroll Enabled",
|
|
29
|
+
defaultValue: true,
|
|
30
|
+
}),
|
|
31
|
+
activeColor: createColorProp({
|
|
32
|
+
label: "Active Color",
|
|
33
|
+
description: "Active Color",
|
|
34
|
+
defaultValue: "primary",
|
|
35
|
+
}),
|
|
36
|
+
inactiveColor: createColorProp({
|
|
37
|
+
label: "Inactive Color",
|
|
38
|
+
description: "Inactive Color",
|
|
39
|
+
defaultValue: null,
|
|
40
|
+
}),
|
|
41
|
+
pressColor: createColorProp({
|
|
42
|
+
label: "Press Color",
|
|
43
|
+
description: "Press Color",
|
|
44
|
+
defaultValue: null,
|
|
45
|
+
}),
|
|
46
|
+
indicatorColor: createColorProp({
|
|
47
|
+
label: "Indicator Color",
|
|
48
|
+
description: "Indicator Color",
|
|
49
|
+
defaultValue: null,
|
|
50
|
+
}),
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: "TabViewItem",
|
|
55
|
+
tag: "TabViewItem",
|
|
56
|
+
category: COMPONENT_TYPES.container,
|
|
57
|
+
layout: {},
|
|
58
|
+
props: {
|
|
59
|
+
title: createTextProp({
|
|
60
|
+
label: "Title",
|
|
61
|
+
description: "Tab Title",
|
|
62
|
+
}),
|
|
63
|
+
id: createTextProp({
|
|
64
|
+
label: "Id",
|
|
65
|
+
description: "Tab Id",
|
|
66
|
+
}),
|
|
67
|
+
accessibilityLabel: createTextProp({
|
|
68
|
+
label: "Accessibility Label",
|
|
69
|
+
description: "Accessibility Label",
|
|
70
|
+
}),
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
];
|