Add docs for components p-r

src/components/pageControl/pageControl.api.json

@@ -0,0 +1,56 @@
+{
+  "name": "PageControl",
+  "category": "basic",
+  "description": "Page indicator, typically used in paged scroll-views",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
+  "images": ["https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"],
+  "props": [
+    {
+      "name": "limitShownPages",
+      "type": "boolean",
+      "description": "Limit the number of page indicators shown.\\enlargeActive prop is disabled in this state, when set to true there will be maximum of 7 shown.\\Only relevant when numOfPages > 5."
+    },
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "Additional styles for the top container"
+    },
+    {"name": "numOfPages", "required": true, "type": "number", "description": "Total number of pages"},
+    {"name": "currentPage", "required": true, "type": "number", "description": "Zero-based index of the current page"},
+    {
+      "name": "onPagePress",
+      "type": "(index: number) => void",
+      "description": "Action handler for clicking on a page indicator"
+    },
+    {
+      "name": "color",
+      "type": "string",
+      "description": "Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages",
+      "default": "Colors.primary"
+    },
+    {
+      "name": "inactiveColor",
+      "type": "string",
+      "description": "Color of the unselected page dots and the border of the not selected pages"
+    },
+    {
+      "name": "size",
+      "type": "number | [number, number, number]",
+      "description": "The size of the page indicator.\\When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.\\An alternative is to send an array [smallSize, mediumSize, largeSize].",
+      "default": "10"
+    },
+    {
+      "name": "enlargeActive",
+      "type": "boolean",
+      "description": "Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect.",
+      "default": "false"
+    },
+    {
+      "name": "spacing",
+      "type": "number",
+      "description": "The space between the siblings page indicators",
+      "default": "4"
+    },
+    {"name": "testID", "type": "string", "description": "Used to identify the pageControl in tests"}
+  ]
+}

src/components/picker/PickerItem.js

@@ -15,7 +15,6 @@ import PickerContext from './PickerContext';
 
 /**
  * @description: Picker.Item, for configuring the Picker's selectable options
- * @extends: TouchableOpacity
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js
  */
 const PickerItem = props => {

src/components/picker/api/picker.api.json

@@ -0,0 +1,96 @@
+{
+  "name": "Picker",
+  "category": "form",
+  "description": "Picker Component, support single or multiple selection, blurModel and native wheel picker",
+  "extends": ["TextField"],
+  "modifiers": ["margin", "padding", "position"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/Default.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/MultiPicker.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/NativePicker.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/DialogPicker.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
+  ],
+  "props": [
+    {"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to Picker's new API"},
+    {"name": "value", "type": "string | number", "description": "Picker current value"},
+    {
+      "name": "onChange",
+      "type": "(value: string | number) => void",
+      "description": "Callback for when picker value change"
+    },
+    {
+      "name": "mode",
+      "type": "SINGLE | MULTI",
+      "description": "SINGLE mode or MULTI mode",
+      "default": "Picker.modes.SINGLE"
+    },
+    {"name": "selectionLimit", "type": "number", "description": "Limit the number of selected items"},
+    {"name": "enableModalBlur", "type": "boolean", "description": "Adds blur effect to picker modal (iOS only)"},
+    {
+      "name": "renderPicker",
+      "type": "(selectedItem, itemLabel) => void",
+      "description": "Render custom picker - input will be value (see above)\\Example:\\renderPicker = (selectedItem) => {...}"
+    },
+    {
+      "name": "renderItem",
+      "type": "(value, {...props, isSelected}, itemLabel) => void",
+      "description": "Render custom picker item"
+    },
+    {
+      "name": "renderCustomModal",
+      "type": "({visible, children, toggleModal}) => void)",
+      "description": "Render custom picker modal"
+    },
+    {
+      "name": "customPickerProps",
+      "type": "object",
+      "description": "Custom picker props (when using renderPicker, will apply on the button wrapper)"
+    },
+    {"name": "onPress", "type": "() => void", "description": "Add onPress callback for when pressing the picker"},
+    {
+      "name": "getLabel",
+      "type": "(value: string | number) => void",
+      "description": "A function that returns the label to show for the selected Picker value"
+    },
+    {"name": "topBarProps", "type": "Modal's TopBarProps", "description": "The picker modal top bar props"},
+    {"name": "showSearch", "type": "boolean", "description": "Show search input to filter picker items by label"},
+    {
+      "name": "searchStyle",
+      "type": "{color: string, placeholderTextColor: string, selectionColor: string}",
+      "description": "Style object for the search input (only when passing showSearch)"
+    },
+    {
+      "name": "searchPlaceholder",
+      "type": "string",
+      "description": "Placeholder text for the search input (only when passing showSearch)"
+    },
+    {
+      "name": "onSearchChange",
+      "type": "(searchValue: string) => void",
+      "description": "Callback for picker modal search input text change (only when passing showSearch)"
+    },
+    {
+      "name": "renderCustomSearch",
+      "type": "(props) => void",
+      "description": "Render custom search input (only when passing showSearch)"
+    },
+    {
+      "name": "useNativePicker",
+      "type": "boolean",
+      "description": "Allow to use the native picker solution (different style for iOS and Android)"
+    },
+    {
+      "name": "renderNativePicker",
+      "type": "(props) => void",
+      "description": "Callback for rendering a custom native picker inside the dialog (relevant to native picker only)"
+    },
+    {
+      "name": "listProps",
+      "type": "FlatListProps",
+      "description": "Pass props to the list component that wraps the picker options (allows to control FlatList behavior)"
+    },
+    {"name": "pickerModalProps", "type": "ModalProps", "description": "Pass props to the picker modal"}
+  ]
+}

src/components/picker/api/pickerItem.api.json

@@ -0,0 +1,33 @@
+{
+  "name": "Picker.Item",
+  "category": "form",
+  "description": "Picker.Item, for configuring the Picker's selectable options",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/Default.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/MultiPicker.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/NativePicker.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/DialogPicker.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
+  ],
+  "props": [
+    {"name": "value", "type": "string | number", "description": "Item's value"},
+    {"name": "label", "type": "string", "description": "Item's label"},
+    {"name": "labelStyle", "type": "ViewStyle", "description": "Item's label style"},
+    {
+      "name": "getItemLabel",
+      "type": "(value: string | number) => string",
+      "description": "Custom function for the item label"
+    },
+    {"name": "isSelected", "type": "boolean", "description": "Is the item selected"},
+    {"name": "selectedIcon", "type": "string", "description": "Pass to change the selected icon"},
+    {"name": "selectedIconColor", "type": "ImageSource", "description": "Pass to change the selected icon color"},
+    {"name": "disabled", "type": "boolean", "description": "Is the item disabled"},
+    {"name": "onPress", "type": "(value: string | number) => void", "description": "Callback for onPress action"},
+    {
+      "name": "onSelectedLayout",
+      "type": "(event: LayoutChangeEvent) => void",
+      "description": "Callback for onLayout event"
+    }
+  ]
+}

src/components/picker/index.js

@@ -32,10 +32,9 @@ const ItemType = PropTypes.oneOfType([
 ]);
 
 /**
- * @description: Picker Component, support single or multiple selection, blurModel and nativePicker
+ * @description: Picker Component, support single or multiple selection, blurModel and native wheel picker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/MultiPicker.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/NativePicker.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/DialogPicker.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js
- * @notes: 'useNativePicker' prop requires installing the '@react-native-picker/picker' native library
  */
 class Picker extends Component {
   static displayName = 'Picker';
@@ -94,10 +93,12 @@ class Picker extends Component {
      */
     onPress: PropTypes.func,
     /**
+     * @deprecated
      * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
      */
     getItemValue: PropTypes.func,
     /**
+     * @deprecated
      * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
      */
     getItemLabel: PropTypes.func,

src/components/progressBar/progressBar.api.json

@@ -0,0 +1,17 @@
+{
+  "name": "ProgressBar",
+  "category": "basic",
+  "description": "Progress bar",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.js",
+  "props": [
+    {"name": "progress", "type": "number", "description": "The progress of the bar from 0 to 100", "default": "0"},
+    {"name": "fullWidth", "type": "boolean", "description": "FullWidth Ui preset"},
+    {"name": "style", "type": "ViewStyle", "description": "Override container style"},
+    {"name": "progressColor", "type": "string", "description": "Progress color"},
+    {
+      "name": "customElement",
+      "type": "JSX.Element",
+      "description": "Custom element to render on top of the animated progress"
+    }
+  ]
+}

src/components/progressiveImage/index.js

@@ -7,7 +7,7 @@ import {Colors} from '../../style';
 /**
  * @description: Image component that loads first a small thumbnail of the images, 
  *               and fades-in the full-sized image with animation once it's loaded
- * @extends: Animated.Image 
+ * @extends: AnimatedImage
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js
  */
 class ProgressiveImage extends React.Component {

src/components/progressiveImage/progressiveImage.api.json

@@ -0,0 +1,14 @@
+{
+  "name": "ProgressiveImage",
+  "category": "basic",
+  "description": "Image component that loads first a small thumbnail of the images, and fades-in the full-sized image with animation once it's loaded",
+  "extends": ["AnimatedImage"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js",
+  "props": [
+    {
+      "name": "thumbnailSource",
+      "type": "ImageSource",
+      "description": "Small thumbnail source to display while the full-size image is loading"
+    }
+  ]
+}

src/components/radioButton/index.tsx

@@ -90,7 +90,7 @@ interface RadioButtonState {
 type Props = RadioButtonProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
 
 /**
- * @description: A Radio Button component, should be wrapped inside a RadioGroup
+ * @description: A Radio Button component, should be wrapped with a RadioGroup
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true
  * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js

src/components/radioButton/radioButton.api.json

@@ -0,0 +1,46 @@
+{
+  "name": "RadioButton",
+  "category": "form",
+  "description": "A Radio Button component, should be wrapped with a RadioGroup",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true"
+  ],
+  "props": [
+    {
+      "name": "value",
+      "type": "string | number | boolean",
+      "description": "The identifier value of the radio button. must be different than other RadioButtons in the same group"
+    },
+    {
+      "name": "selected",
+      "type": "boolean",
+      "description": "When using RadioButton without a RadioGroup, use this prop to toggle selection"
+    },
+    {"name": "onPress", "type": "(selected: boolean) => void", "description": "Invoked when pressing the button"},
+    {"name": "disabled", "type": "boolean", "description": "Whether the radio button should be disabled"},
+    {"name": "color", "type": "string", "description": "The color of the radio button", "default": "Colors.primary"},
+    {
+      "name": "size",
+      "type": "number",
+      "description": "The size of the radio button, affect both width & height",
+      "default": "24"
+    },
+    {"name": "borderRadius", "type": "number", "description": "The radio button border radius", "default": "24"},
+    {"name": "label", "type": "string", "description": "A label for the radio button description"},
+    {"name": "labelStyle", "type": "TextStyle", "description": "Label style"},
+    {"name": "iconSource", "type": "ImageSource", "description": "Icon image source"},
+    {"name": "iconStyle", "type": "ImageStyle", "description": "Icon image style"},
+    {
+      "name": "iconOnRight",
+      "type": "boolean",
+      "description": "Should the icon be on the right side of the label",
+      "default": "false"
+    },
+    {"name": "contentOnRight", "type": "boolean", "description": "Should the content be rendered right to the button"},
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Additional styling for the container"}
+  ]
+}

src/components/radioGroup/radioGroup.api.json

@@ -0,0 +1,24 @@
+{
+  "name": "RadioGroup",
+  "category": "form",
+  "description": "Wrap a group of Radio Buttons to automatically control their selection",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true",
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true"
+  ],
+  "props": [
+    {
+      "name": "initialValue",
+      "type": "string | number | boolean",
+      "description": "The initial value of the selected radio button"
+    },
+    {
+      "name": "onValueChange",
+      "type": "((value?: string) => void) | ((value?: number) => void) | ((value?: boolean) => void) | ((value?: any) => void)",
+      "description": "Invoked once when value changes, by selecting one of the radio buttons in the group"
+    }
+  ]
+}