diff --git a/lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json b/lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json index 97051417bf..64eeedb1d0 100644 --- a/lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json +++ b/lib/components/Keyboard/KeyboardTracking/keyboardAwareInsetsView.api.json @@ -3,6 +3,12 @@ "category": "keyboard", "description": "Used to add an inset when a keyboard is used and might hide part of the screen.", "note": "This view is useful only for iOS.", - "extends": ["KeyboardTrackingView"], - "snippet": [""] + "extends": ["keyboard/KeyboardTrackingView"], + "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx", + "snippet": ["", + " ", + " ", + " ", + "" + ] } diff --git a/scripts/buildDocs.js b/scripts/buildDocs.js index 3c3ac22a68..50aab97887 100644 --- a/scripts/buildDocs.js +++ b/scripts/buildDocs.js @@ -46,8 +46,7 @@ components.forEach(component => { if (component.extendsLink) { extendsText = `[${extendsText}](${component.extendsLink})`; } else { - const extendedComponentName = _.last(_.split(extendsText, '/')); // Incubator/TextField -> TextField - extendsText = `[${extendedComponentName}](/docs/components/${extendsText})`; + extendsText = _.map(component.extends, generateExtendsLink).join(', '); } content += `:::info\n`; content += `This component extends **${extendsText}** props.\n`; @@ -110,3 +109,9 @@ function getComponentNameParts(componentName) { return [parts[1], parts[0]]; } } + +function generateExtendsLink(extendsLink) { + const extendedComponentName = _.last(_.split(extendsLink, '/')); // Incubator/TextField -> TextField + const extendsText = `[${extendedComponentName}](/docs/components/${extendsLink})`; + return extendsText; +} diff --git a/src/components/actionBar/actionBar.api.json b/src/components/actionBar/actionBar.api.json index 8d688a16c7..9399894cf0 100644 --- a/src/components/actionBar/actionBar.api.json +++ b/src/components/actionBar/actionBar.api.json @@ -2,7 +2,7 @@ "name": "ActionBar", "category": "basic", "description": "Quick actions bar, each action support Button component props", - "extends": ["View"], + "extends": ["basic/View"], "modifiers": ["margin", "padding"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionBarScreen.tsx", "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ActionBar/ActionBar.gif?raw=true"], diff --git a/src/components/actionSheet/actionSheet.api.json b/src/components/actionSheet/actionSheet.api.json index 9479ba4fe5..38dd229773 100644 --- a/src/components/actionSheet/actionSheet.api.json +++ b/src/components/actionSheet/actionSheet.api.json @@ -2,7 +2,7 @@ "name": "ActionSheet", "category": "overlays", "description": "Cross platform Action Sheet, with a support for native iOS solutions", - "extends": ["Dialog"], + "extends": ["overlays/Dialog"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionSheetScreen.tsx", "images": ["https://media.giphy.com/media/l0HUpXOR6RqB2ct5S/giphy.gif"], "props": [ diff --git a/src/components/animatedImage/animatedImage.api.json b/src/components/animatedImage/animatedImage.api.json index a83f310d22..02e8e54aec 100644 --- a/src/components/animatedImage/animatedImage.api.json +++ b/src/components/animatedImage/animatedImage.api.json @@ -2,7 +2,7 @@ "name": "AnimatedImage", "category": "basic", "description": "Image component that fades-in the image with animation once it's loaded", - "extends": ["Image"], + "extends": ["basic/Image"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AnimatedImageScreen.js", "images": ["https://media.giphy.com/media/l0HU7jj0ivEFyZIA0/giphy.gif"], "props": [ diff --git a/src/components/avatar/avatar.api.json b/src/components/avatar/avatar.api.json index e5ce652e3c..ebc28cc318 100644 --- a/src/components/avatar/avatar.api.json +++ b/src/components/avatar/avatar.api.json @@ -6,7 +6,7 @@ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_1.png?raw=true", "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_2.png?raw=true" ], - "extends": ["TouchableOpacity", "Image"], + "extends": ["basic/TouchableOpacity", "basic/Image"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx", "props": [ { diff --git a/src/components/badge/badge.api.json b/src/components/badge/badge.api.json index 55c249009d..1b45ab3d77 100644 --- a/src/components/badge/badge.api.json +++ b/src/components/badge/badge.api.json @@ -2,7 +2,7 @@ "name": "Badge", "category": "basic", "description": "Round colored badge, typically used to show a number", - "extends": ["TouchableOpacity", "View"], + "extends": ["basic/TouchableOpacity", "basic/View"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx", "images": ["https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png"], "props": [ diff --git a/src/components/button/button.api.json b/src/components/button/button.api.json index fb8d687b80..6af9c7722d 100644 --- a/src/components/button/button.api.json +++ b/src/components/button/button.api.json @@ -2,7 +2,7 @@ "name": "Button", "category": "basic", "description": "Customizable button component that handles press events", - "extends": ["TouchableOpacity"], + "extends": ["basic/TouchableOpacity"], "modifiers": ["margin", "background"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx", "images": [ diff --git a/src/components/card/card.api.json b/src/components/card/card.api.json index 4f3833d596..a65a1ca29b 100644 --- a/src/components/card/card.api.json +++ b/src/components/card/card.api.json @@ -2,7 +2,7 @@ "name": "Card", "category": "basic", "description": "Customizable card component that handles press events", - "extends": ["TouchableOpacity"], + "extends": ["basic/TouchableOpacity"], "modifiers": ["margin", "padding"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx", "images": [ diff --git a/src/components/card/cardImage.api.json b/src/components/card/cardImage.api.json index 88477951f4..e166c16c48 100644 --- a/src/components/card/cardImage.api.json +++ b/src/components/card/cardImage.api.json @@ -2,7 +2,7 @@ "name": "Card.Image", "category": "basic", "description": "Inner component for the Card component (better be a direct child)", - "extends": ["Image"], + "extends": ["basic/Image"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx", "props": [ {"name": "width", "type": "number", "description": "Width"}, diff --git a/src/components/card/cardSection.api.json b/src/components/card/cardSection.api.json index b87242b77c..cb7266ee33 100644 --- a/src/components/card/cardSection.api.json +++ b/src/components/card/cardSection.api.json @@ -2,7 +2,7 @@ "name": "Card.Section", "category": "basic", "description": "Inner component for rendering content easily inside a Card component", - "extends": ["View"], + "extends": ["basic/View"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx", "props": [ { diff --git a/src/components/checkbox/checkbox.api.json b/src/components/checkbox/checkbox.api.json index 8bf73e480e..11151e8aa1 100644 --- a/src/components/checkbox/checkbox.api.json +++ b/src/components/checkbox/checkbox.api.json @@ -2,7 +2,7 @@ "name": "Checkbox", "category": "form", "description": "Checkbox component for toggling boolean value related to some context", - "extends": ["TouchableOpacity"], + "extends": ["basic/TouchableOpacity"], "modifiers": ["margin", "background"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx", "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"], diff --git a/src/components/chipsInput/chipsInput.api.json b/src/components/chipsInput/chipsInput.api.json index d87c372c49..ae5afa1074 100644 --- a/src/components/chipsInput/chipsInput.api.json +++ b/src/components/chipsInput/chipsInput.api.json @@ -2,7 +2,7 @@ "name": "ChipsInput", "category": "form", "description": "Chips input component", - "extends": ["TextField"], + "extends": ["incubator/TextField"], "modifiers": ["typography"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ChipsInputScreen.js", "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ChipsInput/ChipsInput.gif?raw=true"], diff --git a/src/components/dateTimePicker/dateTimePicker.api.json b/src/components/dateTimePicker/dateTimePicker.api.json index de19881f38..c51075d5b8 100644 --- a/src/components/dateTimePicker/dateTimePicker.api.json +++ b/src/components/dateTimePicker/dateTimePicker.api.json @@ -3,7 +3,7 @@ "category": "form", "description": "Date and Time Picker Component that wraps RNDateTimePicker for date and time modes. See: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker", "note": "DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects", - "extends": ["TextField"], + "extends": ["incubator/TextField"], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.js", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true"