Skip to content

Commit dcac3b9

Browse files
M-i-k-e-lethanshar
M-i-k-e-l
and
ethanshar
authored
Add docs for components p-r (#1647)
* Add docs for components p-r * Update src/components/pageControl/pageControl.api.json Co-authored-by: Ethan Sharabi <[email protected]> * Reviwe fixes * Change extends to AnimatedImage Co-authored-by: Ethan Sharabi <[email protected]>
1 parent 2394394 commit dcac3b9

File tree

11 files changed

+291
-5
lines changed

11 files changed

+291
-5
lines changed

‎src/components/pageControl/pageControl.api.json

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
{
2+
"name": "PageControl",
3+
"category": "basic",
4+
"description": "Page indicator, typically used in paged scroll-views",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
6+
"images": ["https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"],
7+
"props": [
8+
{
9+
"name": "limitShownPages",
10+
"type": "boolean",
11+
"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."
12+
},
13+
{
14+
"name": "containerStyle",
15+
"type": "ViewStyle",
16+
"description": "Additional styles for the top container"
17+
},
18+
{"name": "numOfPages", "required": true, "type": "number", "description": "Total number of pages"},
19+
{"name": "currentPage", "required": true, "type": "number", "description": "Zero-based index of the current page"},
20+
{
21+
"name": "onPagePress",
22+
"type": "(index: number) => void",
23+
"description": "Action handler for clicking on a page indicator"
24+
},
25+
{
26+
"name": "color",
27+
"type": "string",
28+
"description": "Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages",
29+
"default": "Colors.primary"
30+
},
31+
{
32+
"name": "inactiveColor",
33+
"type": "string",
34+
"description": "Color of the unselected page dots and the border of the not selected pages"
35+
},
36+
{
37+
"name": "size",
38+
"type": "number | [number, number, number]",
39+
"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].",
40+
"default": "10"
41+
},
42+
{
43+
"name": "enlargeActive",
44+
"type": "boolean",
45+
"description": "Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect.",
46+
"default": "false"
47+
},
48+
{
49+
"name": "spacing",
50+
"type": "number",
51+
"description": "The space between the siblings page indicators",
52+
"default": "4"
53+
},
54+
{"name": "testID", "type": "string", "description": "Used to identify the pageControl in tests"}
55+
]
56+
}

‎src/components/picker/PickerItem.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import PickerContext from './PickerContext';
1515

1616
/**
1717
* @description: Picker.Item, for configuring the Picker's selectable options
18-
* @extends: TouchableOpacity
1918
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js
2019
*/
2120
const PickerItem = props => {

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"name": "Picker",
3+
"category": "form",
4+
"description": "Picker Component, support single or multiple selection, blurModel and native wheel picker",
5+
"extends": ["TextField"],
6+
"modifiers": ["margin", "padding", "position"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js",
8+
"images": [
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/Default.gif?raw=true",
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/MultiPicker.gif?raw=true",
11+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/NativePicker.gif?raw=true",
12+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/DialogPicker.gif?raw=true",
13+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
14+
],
15+
"props": [
16+
{"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to Picker's new API"},
17+
{"name": "value", "type": "string | number", "description": "Picker current value"},
18+
{
19+
"name": "onChange",
20+
"type": "(value: string | number) => void",
21+
"description": "Callback for when picker value change"
22+
},
23+
{
24+
"name": "mode",
25+
"type": "SINGLE | MULTI",
26+
"description": "SINGLE mode or MULTI mode",
27+
"default": "Picker.modes.SINGLE"
28+
},
29+
{"name": "selectionLimit", "type": "number", "description": "Limit the number of selected items"},
30+
{"name": "enableModalBlur", "type": "boolean", "description": "Adds blur effect to picker modal (iOS only)"},
31+
{
32+
"name": "renderPicker",
33+
"type": "(selectedItem, itemLabel) => void",
34+
"description": "Render custom picker - input will be value (see above)\\Example:\\renderPicker = (selectedItem) => {...}"
35+
},
36+
{
37+
"name": "renderItem",
38+
"type": "(value, {...props, isSelected}, itemLabel) => void",
39+
"description": "Render custom picker item"
40+
},
41+
{
42+
"name": "renderCustomModal",
43+
"type": "({visible, children, toggleModal}) => void)",
44+
"description": "Render custom picker modal"
45+
},
46+
{
47+
"name": "customPickerProps",
48+
"type": "object",
49+
"description": "Custom picker props (when using renderPicker, will apply on the button wrapper)"
50+
},
51+
{"name": "onPress", "type": "() => void", "description": "Add onPress callback for when pressing the picker"},
52+
{
53+
"name": "getLabel",
54+
"type": "(value: string | number) => void",
55+
"description": "A function that returns the label to show for the selected Picker value"
56+
},
57+
{"name": "topBarProps", "type": "Modal's TopBarProps", "description": "The picker modal top bar props"},
58+
{"name": "showSearch", "type": "boolean", "description": "Show search input to filter picker items by label"},
59+
{
60+
"name": "searchStyle",
61+
"type": "{color: string, placeholderTextColor: string, selectionColor: string}",
62+
"description": "Style object for the search input (only when passing showSearch)"
63+
},
64+
{
65+
"name": "searchPlaceholder",
66+
"type": "string",
67+
"description": "Placeholder text for the search input (only when passing showSearch)"
68+
},
69+
{
70+
"name": "onSearchChange",
71+
"type": "(searchValue: string) => void",
72+
"description": "Callback for picker modal search input text change (only when passing showSearch)"
73+
},
74+
{
75+
"name": "renderCustomSearch",
76+
"type": "(props) => void",
77+
"description": "Render custom search input (only when passing showSearch)"
78+
},
79+
{
80+
"name": "useNativePicker",
81+
"type": "boolean",
82+
"description": "Allow to use the native picker solution (different style for iOS and Android)"
83+
},
84+
{
85+
"name": "renderNativePicker",
86+
"type": "(props) => void",
87+
"description": "Callback for rendering a custom native picker inside the dialog (relevant to native picker only)"
88+
},
89+
{
90+
"name": "listProps",
91+
"type": "FlatListProps",
92+
"description": "Pass props to the list component that wraps the picker options (allows to control FlatList behavior)"
93+
},
94+
{"name": "pickerModalProps", "type": "ModalProps", "description": "Pass props to the picker modal"}
95+
]
96+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "Picker.Item",
3+
"category": "form",
4+
"description": "Picker.Item, for configuring the Picker's selectable options",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js",
6+
"images": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/Default.gif?raw=true",
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/MultiPicker.gif?raw=true",
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/NativePicker.gif?raw=true",
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/DialogPicker.gif?raw=true",
11+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
12+
],
13+
"props": [
14+
{"name": "value", "type": "string | number", "description": "Item's value"},
15+
{"name": "label", "type": "string", "description": "Item's label"},
16+
{"name": "labelStyle", "type": "ViewStyle", "description": "Item's label style"},
17+
{
18+
"name": "getItemLabel",
19+
"type": "(value: string | number) => string",
20+
"description": "Custom function for the item label"
21+
},
22+
{"name": "isSelected", "type": "boolean", "description": "Is the item selected"},
23+
{"name": "selectedIcon", "type": "string", "description": "Pass to change the selected icon"},
24+
{"name": "selectedIconColor", "type": "ImageSource", "description": "Pass to change the selected icon color"},
25+
{"name": "disabled", "type": "boolean", "description": "Is the item disabled"},
26+
{"name": "onPress", "type": "(value: string | number) => void", "description": "Callback for onPress action"},
27+
{
28+
"name": "onSelectedLayout",
29+
"type": "(event: LayoutChangeEvent) => void",
30+
"description": "Callback for onLayout event"
31+
}
32+
]
33+
}

‎src/components/picker/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,9 @@ const ItemType = PropTypes.oneOfType([
3232
]);
3333

3434
/**
35-
* @description: Picker Component, support single or multiple selection, blurModel and nativePicker
35+
* @description: Picker Component, support single or multiple selection, blurModel and native wheel picker
3636
* @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
3737
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PickerScreen.js
38-
* @notes: 'useNativePicker' prop requires installing the '@react-native-picker/picker' native library
3938
*/
4039
class Picker extends Component {
4140
static displayName = 'Picker';
@@ -94,10 +93,12 @@ class Picker extends Component {
9493
*/
9594
onPress: PropTypes.func,
9695
/**
96+
* @deprecated
9797
* A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
9898
*/
9999
getItemValue: PropTypes.func,
100100
/**
101+
* @deprecated
101102
* A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
102103
*/
103104
getItemLabel: PropTypes.func,

‎src/components/progressBar/progressBar.api.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "ProgressBar",
3+
"category": "basic",
4+
"description": "Progress bar",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.js",
6+
"props": [
7+
{"name": "progress", "type": "number", "description": "The progress of the bar from 0 to 100", "default": "0"},
8+
{"name": "fullWidth", "type": "boolean", "description": "FullWidth Ui preset"},
9+
{"name": "style", "type": "ViewStyle", "description": "Override container style"},
10+
{"name": "progressColor", "type": "string", "description": "Progress color"},
11+
{
12+
"name": "customElement",
13+
"type": "JSX.Element",
14+
"description": "Custom element to render on top of the animated progress"
15+
}
16+
]
17+
}

‎src/components/progressiveImage/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {Colors} from '../../style';
77
/**
88
* @description: Image component that loads first a small thumbnail of the images,
99
* and fades-in the full-sized image with animation once it's loaded
10-
* @extends: Animated.Image
10+
* @extends: AnimatedImage
1111
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js
1212
*/
1313
class ProgressiveImage extends React.Component {

‎src/components/progressiveImage/progressiveImage.api.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "ProgressiveImage",
3+
"category": "basic",
4+
"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",
5+
"extends": ["AnimatedImage"],
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js",
7+
"props": [
8+
{
9+
"name": "thumbnailSource",
10+
"type": "ImageSource",
11+
"description": "Small thumbnail source to display while the full-size image is loading"
12+
}
13+
]
14+
}

‎src/components/radioButton/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ interface RadioButtonState {
9090
type Props = RadioButtonProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
9191

9292
/**
93-
* @description: A Radio Button component, should be wrapped inside a RadioGroup
93+
* @description: A Radio Button component, should be wrapped with a RadioGroup
9494
* @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
9595
* @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true
9696
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js

‎src/components/radioButton/radioButton.api.json

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "RadioButton",
3+
"category": "form",
4+
"description": "A Radio Button component, should be wrapped with a RadioGroup",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
6+
"images": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true",
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true",
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true",
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true"
11+
],
12+
"props": [
13+
{
14+
"name": "value",
15+
"type": "string | number | boolean",
16+
"description": "The identifier value of the radio button. must be different than other RadioButtons in the same group"
17+
},
18+
{
19+
"name": "selected",
20+
"type": "boolean",
21+
"description": "When using RadioButton without a RadioGroup, use this prop to toggle selection"
22+
},
23+
{"name": "onPress", "type": "(selected: boolean) => void", "description": "Invoked when pressing the button"},
24+
{"name": "disabled", "type": "boolean", "description": "Whether the radio button should be disabled"},
25+
{"name": "color", "type": "string", "description": "The color of the radio button", "default": "Colors.primary"},
26+
{
27+
"name": "size",
28+
"type": "number",
29+
"description": "The size of the radio button, affect both width & height",
30+
"default": "24"
31+
},
32+
{"name": "borderRadius", "type": "number", "description": "The radio button border radius", "default": "24"},
33+
{"name": "label", "type": "string", "description": "A label for the radio button description"},
34+
{"name": "labelStyle", "type": "TextStyle", "description": "Label style"},
35+
{"name": "iconSource", "type": "ImageSource", "description": "Icon image source"},
36+
{"name": "iconStyle", "type": "ImageStyle", "description": "Icon image style"},
37+
{
38+
"name": "iconOnRight",
39+
"type": "boolean",
40+
"description": "Should the icon be on the right side of the label",
41+
"default": "false"
42+
},
43+
{"name": "contentOnRight", "type": "boolean", "description": "Should the content be rendered right to the button"},
44+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional styling for the container"}
45+
]
46+
}

‎src/components/radioGroup/radioGroup.api.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "RadioGroup",
3+
"category": "form",
4+
"description": "Wrap a group of Radio Buttons to automatically control their selection",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js",
6+
"images": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true",
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true",
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true",
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true"
11+
],
12+
"props": [
13+
{
14+
"name": "initialValue",
15+
"type": "string | number | boolean",
16+
"description": "The initial value of the selected radio button"
17+
},
18+
{
19+
"name": "onValueChange",
20+
"type": "((value?: string) => void) | ((value?: number) => void) | ((value?: boolean) => void) | ((value?: any) => void)",
21+
"description": "Invoked once when value changes, by selecting one of the radio buttons in the group"
22+
}
23+
]
24+
}

0 commit comments

Comments
 (0)