Skip to content

Commit b673b8d

Browse files
Inbal-TishInbal-Tish
authored
a components - api docs (#1642)
* ActionBar * ActionSheet, ActionBar fix * AnimatedImage, ActionsSheet fix * AnimatedScanner, fixs * defsaults * Avatar defaults * formatting files, adding 'extendsLink', rename avatar's api file * fix cat
1 parent 9d6b357 commit b673b8d

File tree

5 files changed

+165
-6
lines changed

5 files changed

+165
-6
lines changed

‎src/components/actionBar/actionBar.api.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "ActionBar",
3+
"category": "basic",
4+
"description": "Quick actions bar, each action support Button component props",
5+
"extends": ["View"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/view/index.tsx"],
7+
"modifiers": ["margin", "padding"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionBarScreen.tsx",
9+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ActionBar/ActionBar.gif?raw=true"],
10+
"props": [
11+
{"name": "actions", "type": "ButtonProps[]", "description": "The actions for the action bar", "required": true},
12+
{"name": "height", "type": "number", "description": "Height", "default": "48"},
13+
{"name": "backgroundColor", "type": "string", "description": "Background color", "default": "Colors.white"},
14+
{"name": "centered", "type": "boolean", "description": "Should action be equally centered"},
15+
{
16+
"name": "keepRelative",
17+
"type": "boolean",
18+
"description": "Keep the action bar position relative instead of it absolute position"
19+
},
20+
{
21+
"name": "useSafeArea",
22+
"type": "boolean",
23+
"description": "In iOS, use safe area, in case component attached to the bottom",
24+
"default": "true"
25+
},
26+
{"name": "style", "type": "ViewStyle", "description": "Component's style"}
27+
]
28+
}

‎src/components/actionSheet/actionSheet.api.json

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"name": "ActionSheet",
3+
"category": "overlays",
4+
"description": "Cross platform Action Sheet, with a support for native iOS solutions",
5+
"extends": ["Dialog"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/dialog/index.tsx"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionSheetScreen.tsx",
8+
"images": ["https://media.giphy.com/media/l0HUpXOR6RqB2ct5S/giphy.gif"],
9+
"props": [
10+
{"name": "visible", "type": "boolean", "description": "Whether to show the action sheet or not"},
11+
{
12+
"name": "title",
13+
"type": "string",
14+
"description": "Title of the action sheet",
15+
"note": "If both 'title' and 'message' are not passed will not render the title view at all"
16+
},
17+
{"name": "message", "type": "string", "description": "Message of the action sheet"},
18+
{
19+
"name": "cancelButtonIndex",
20+
"type": "number",
21+
"description": "Index of the option represents the cancel action (to be displayed as the separated bottom bold button)"
22+
},
23+
{
24+
"name": "destructiveButtonIndex",
25+
"type": "number",
26+
"description": "Index of the option represents the destructive action (will display red text. Usually used for delete or abort actions)"
27+
},
28+
{
29+
"name": "options",
30+
"type": "Array<ButtonProps>",
31+
"description": "List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress' function)"
32+
},
33+
{
34+
"name": "onDismiss",
35+
"type": "DialogProps['onDismiss']",
36+
"description": "Called when dismissing the action sheet (usually used for setting 'visible' prop to false)"
37+
},
38+
{
39+
"name": "onModalDismissed",
40+
"type": "DialogProps['onDialogDismissed']",
41+
"description": "Called once the modal has been dismissed",
42+
"note": "iOS only, modal only"
43+
},
44+
{"name": "useNativeIOS", "type": "boolean", "description": "Should use the native action sheet for iOS"},
45+
{
46+
"name": "showCancelButton",
47+
"type": "boolean",
48+
"description": "When passed (only with useNativeIOS), will display a cancel button at the bottom (overrides cancelButtonIndex)"
49+
},
50+
{
51+
"name": "containerStyle",
52+
"type": "ViewStyle",
53+
"description": "Add or override style of the action sheet (wraps the title and actions)"
54+
},
55+
{
56+
"name": "dialogStyle",
57+
"type": "ViewStyle",
58+
"description": "Add or override style of the dialog wrapping the action sheet"
59+
},
60+
{"name": "optionsStyle", "type": "ViewStyle", "description": "Add or override style of the options list"},
61+
{"name": "renderTitle", "type": "() => JSX.Element", "description": "Render custom title"},
62+
{
63+
"name": "renderAction",
64+
"type": "\n(\noption: ButtonProps, \nindex: number, \nonOptionPress: ActionSheetOnOptionPress\n) => JSX.Element",
65+
"description": "Render custom action",
66+
"note": "You will need to call 'onOptionPress' so the option's 'onPress' will be called"
67+
},
68+
{
69+
"name": "useSafeArea",
70+
"type": "boolean",
71+
"description": "In iOS, use safe area, in case component attached to the bottom"
72+
},
73+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
74+
]
75+
}

‎src/components/animatedImage/animatedImage.api.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "AnimatedImage",
3+
"category": "basic",
4+
"description": "Image component that fades-in the image with animation once it's loaded",
5+
"extends": ["Image"],
6+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/image/index.tsx"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AnimatedImageScreen.js",
8+
"images": ["https://media.giphy.com/media/l0HU7jj0ivEFyZIA0/giphy.gif"],
9+
"props": [
10+
{
11+
"name": "animationDuration",
12+
"type": "number",
13+
"description": "Duration for the fade animation when the image is loaded",
14+
"default": "300"
15+
},
16+
{"name": "loader", "type": "JSX.element", "description": "A component to render while the image is loading"},
17+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"}
18+
]
19+
}

‎src/components/animatedScanner/animatedScanner.api.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "AnimatedScanner",
3+
"category": "basic",
4+
"description": "description",
5+
"extends": ["Animated.View"],
6+
"extendsLink": ["https://reactnative.dev/docs/animated"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardScannerScreen.js",
8+
"images": ["https://media.giphy.com/media/l49JVcxoclUXbryiA/giphy.gif"],
9+
"props": [
10+
{"name": "progress", "type": "number", "description": "Animated value between 0 and 100", "default": "0"},
11+
{
12+
"name": "duration",
13+
"type": "number",
14+
"description": "Duration of current break (can be change between breaks)",
15+
"default": "1000"
16+
},
17+
{"name": "opacity", "type": "number", "description": "Opacity"},
18+
{"name": "backgroundColor", "type": "string", "description": "Background color"},
19+
{"name": "onBreakpoint", "type": "() => {progress, isDone}", "description": "Breakpoint callback"},
20+
{"name": "hideScannerLine", "type": "boolean", "description": "Whether to hide the scanner line"},
21+
{"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"}
22+
]
23+
}

‎src/components/avatar/api.json renamed to ‎src/components/avatar/avatar.api.json

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
{
22
"name": "Avatar",
33
"category": "basic",
4-
"description": " Avatar component for displaying user profile images",
4+
"description": "Avatar component for displaying user profile images",
55
"images": [
66
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_1.png?raw=true",
77
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Avatar/Avarat_2.png?raw=true"
88
],
99
"extends": ["TouchableOpacity", "Image"],
10+
"extendsLink": [
11+
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx",
12+
"https://github.com/wix/react-native-ui-lib/blob/master/src/components/image/index.tsx"
13+
],
1014
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx",
1115
"props": [
12-
{"name": "animate", "type": "boolean", "description": "Adds fade in animation when Avatar image loads"},
16+
{
17+
"name": "animate",
18+
"type": "boolean",
19+
"description": "Adds fade in animation when Avatar image loads",
20+
"default": "false"
21+
},
1322
{"name": "backgroundColor", "type": "string", "description": "Background color for Avatar"},
14-
{"name": "badgePosition", "type": "BadgePosition", "description": "Badge location on Avatar"},
23+
{
24+
"name": "badgePosition",
25+
"type": "TOP_RIGHT | TOP_LEFT | BOTTOM_RIGHT | BOTTOM_LEFT",
26+
"description": "Badge location on Avatar",
27+
"default": "BadgePosition.TOP_RIGHT"
28+
},
1529
{"name": "badgeProps", "type": "BadgeProps", "description": "Badge props passed down to Badge component"},
1630
{
1731
"name": "containerStyle",
1832
"type": "ViewStyle",
1933
"description": "Additional spacing styles for the container"
2034
},
21-
{"name": "source", "type": "ImageSourcePropType", "description": "The image source (external or assets)"},
35+
{"name": "source", "type": "ImageSourcePropType", "description": "The image source (external or from assets)"},
2236
{"name": "imageProps", "type": "ImageProps", "description": "Image props object"},
2337
{
2438
"name": "imageStyle",
@@ -57,7 +71,7 @@
5771
"description": "Send this to use the name to infer a backgroundColor"
5872
},
5973
{"name": "label", "type": "string", "description": "Label that can represent initials"},
60-
{"name": "labelColor", "type": "string", "description": "The label color"},
74+
{"name": "labelColor", "type": "string", "description": "The label color", "default": "Colors.grey10"},
6175
{"name": "ribbonLabel", "type": "string", "description": "Ribbon label to display on the avatar"},
6276
{"name": "ribbonStyle", "type": "ViewStyle", "description": "Ribbon custom style"},
6377
{"name": "ribbonLabelStyle", "type": "TextStyle", "description": "Ribbon label custom style"},
@@ -68,7 +82,7 @@
6882
"type": "StatusModes",
6983
"description": "AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)"
7084
},
71-
{"name": "size", "type": " number", "description": "Custom size for the Avatar"},
85+
{"name": "size", "type": " number", "description": "Custom size for the Avatar", "default": "50"},
7286
{"name": "onPress", "type": "(props: any) => void", "description": "Press handler"},
7387
{"name": "testID", "type": "string", "description": "Test identifier"}
7488
]

0 commit comments

Comments
 (0)