Skip to content

Commit faeea20

Browse files
ethansharethanshar
authored
Infra/add more docs (#1595)
* Add Card api.jso * Add Carousel api.json * Add api file for Checkbox component * Update checkbox api example screen
1 parent bb450cb commit faeea20

File tree

8 files changed

+188
-27
lines changed

8 files changed

+188
-27
lines changed

‎generatedTypes/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export {
2727
export {default as ActionBar, ActionBarProps} from './src/components/actionBar';
2828
export {default as Avatar, AvatarProps} from './src/components/avatar';
2929
export {default as Badge, BadgeProps} from './src/components/badge';
30-
export {default as Card, CardProps, CardSectionProps} from './src/components/card';
30+
export {default as Card, CardProps, CardSectionProps, CardSelectionOptions} from './src/components/card';
3131
export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './src/components/connectionStatusBar';
3232
export {default as Constants} from './src/helpers/Constants';
3333
export {default as GradientSlider, GradientSliderProps} from './src/components/slider/GradientSlider';

‎generatedTypes/src/components/card/index.d.ts

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ import { ViewProps } from '../view';
44
import { TouchableOpacityProps } from '../touchableOpacity';
55
import CardImage from './CardImage';
66
import CardSection, { CardSectionProps } from './CardSection';
7+
export interface CardSelectionOptions {
8+
icon?: number;
9+
iconColor?: string;
10+
color?: string;
11+
borderWidth?: number;
12+
indicatorSize?: number;
13+
hideIndicator?: boolean;
14+
}
715
export { CardSectionProps };
816
export declare type CardProps = ViewProps & TouchableOpacityProps & {
917
/**
@@ -53,14 +61,7 @@ export declare type CardProps = ViewProps & TouchableOpacityProps & {
5361
/**
5462
* Custom options for styling the selection indication
5563
*/
56-
selectionOptions?: {
57-
icon?: number;
58-
iconColor?: string;
59-
color?: string;
60-
borderWidth?: number;
61-
indicatorSize?: number;
62-
hideIndicator?: boolean;
63-
};
64+
selectionOptions?: CardSelectionOptions;
6465
};
6566
declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps & {
6667
/**
@@ -110,14 +111,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
110111
/**
111112
* Custom options for styling the selection indication
112113
*/
113-
selectionOptions?: {
114-
icon?: number | undefined;
115-
iconColor?: string | undefined;
116-
color?: string | undefined;
117-
borderWidth?: number | undefined;
118-
indicatorSize?: number | undefined;
119-
hideIndicator?: boolean | undefined;
120-
} | undefined;
114+
selectionOptions?: CardSelectionOptions | undefined;
121115
} & {
122116
useCustomTheme?: boolean | undefined;
123117
}, any> & {

‎src/components/button/api.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "Button",
33
"category": "basic",
4-
"description": "Customizable button component than handles press events",
4+
"description": "Customizable button component that handles press events",
55
"extends": ["TouchableOpacity"],
66
"modifiers": ["margin", "background"],
77
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx",

‎src/components/card/api.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "Card",
3+
"category": "basic",
4+
"description": "Customizable card component that handles press events",
5+
"extends": ["TouchableOpacity"],
6+
"modifiers": ["margin", "padding"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx",
8+
"images": [
9+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_01.png?raw=true",
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_02.png?raw=true",
11+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Card/Cards_03.png?raw=true"
12+
],
13+
"props": [
14+
{"name": "width", "type": "number | string", "description": "Card custom width"},
15+
{"name": "height", "type": "number | string", "description": "Card custom height"},
16+
{"name": "row", "type": "boolean", "description": "Should inner card flow direction be horizontal"},
17+
{
18+
"name": "borderRadius",
19+
"type": "number",
20+
"description": "Card border radius (will be passed to inner Card.Image component)"
21+
},
22+
{"name": "onPress", "type": "function", "description": "Callback function for card press event"},
23+
{"name": "enableShadow", "type": "boolean", "description": "Whether the card should have shadow or not"},
24+
{"name": "elevation", "type": "number", "description": "Elevation value (Android only)"},
25+
{"name": "enableBlur", "type": "boolean", "description": "Enable blur effect (iOS only)"},
26+
{
27+
"name": "blurOptions",
28+
"type": "object",
29+
"description": "Blur options for blur effect according to @react-native-community/blur lib (make sure enableBlur is on)"
30+
},
31+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the card container"},
32+
{"name": "selected", "type": "boolean", "description": "Adds visual indication that the card is selected"},
33+
{
34+
"name": "selectionOptions",
35+
"type": "CardSelectionOptions",
36+
"description": "Custom options for styling the selection indication"
37+
}
38+
]
39+
}

‎src/components/card/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@ const DEFAULT_SELECTION_PROPS = {
2828
hideIndicator: false
2929
};
3030

31+
export interface CardSelectionOptions {
32+
icon?: number;
33+
iconColor?: string;
34+
color?: string;
35+
borderWidth?: number;
36+
indicatorSize?: number;
37+
hideIndicator?: boolean;
38+
}
39+
3140
export {CardSectionProps};
3241
export type CardProps = ViewProps &
3342
TouchableOpacityProps & {
@@ -78,14 +87,7 @@ export type CardProps = ViewProps &
7887
/**
7988
* Custom options for styling the selection indication
8089
*/
81-
selectionOptions?: {
82-
icon?: number;
83-
iconColor?: string;
84-
color?: string;
85-
borderWidth?: number;
86-
indicatorSize?: number;
87-
hideIndicator?: boolean;
88-
};
90+
selectionOptions?: CardSelectionOptions;
8991
};
9092

9193
type PropTypes = BaseComponentInjectedProps & ForwardRefInjectedProps & CardProps;

‎src/components/carousel/api.json

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
{
2+
"name": "Carousel",
3+
"category": "basic",
4+
"description": "Carousel for scrolling pages",
5+
"extends": ["ScrollView"],
6+
"extendsLink": ["https://reactnative.dev/docs/scrollview"],
7+
"modifiers": [],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx",
9+
"images": [
10+
"https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif",
11+
"https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif"
12+
],
13+
"props": [
14+
{"name": "initialPage", "type": "number", "description": "The initial page to start at"},
15+
{
16+
"name": "pageWidth",
17+
"type": "number",
18+
"description": "The page width (all pages should have the same width). Does not work if passing 'loop' prop"
19+
},
20+
{"name": "pageHeight", "type": "number", "description": "The page height (all pages should have the same height)."},
21+
{"name": "itemSpacings", "type": "number", "description": "The spacing between the pages"},
22+
{
23+
"name": "containerMarginHorizontal",
24+
"type": "number",
25+
"description": "Horizontal margin for the carousel container"
26+
},
27+
{
28+
"name": "containerPaddingVertical",
29+
"type": "number",
30+
"description": "Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android)."
31+
},
32+
{
33+
"name": "horizontal",
34+
"type": "boolean",
35+
"description": "Whether pages will be rendered horizontally or vertically"
36+
},
37+
{
38+
"name": "loop",
39+
"type": "boolean",
40+
"description": "If true, will have infinite scroll (works only for horizontal carousel)"
41+
},
42+
{
43+
"name": "onChangePage",
44+
"type": "(pageIndex, oldPageIndex, info) => void",
45+
"description": "Callback for page change event"
46+
},
47+
{
48+
"name": "onScroll",
49+
"type": "function",
50+
"description": "Attach a callback for onScroll event of the internal ScrollView"
51+
},
52+
{
53+
"name": "animated",
54+
"type": "boolean",
55+
"description": "Should the container be animated (send the animation style via containerStyle)"
56+
},
57+
{"name": "containerStyle", "type": "ViewStyle", "description": "The carousel container style"},
58+
{
59+
"name": "pageControlPosition",
60+
"type": "PageControlPosition",
61+
"description": "The position of the PageControl component ['over', 'under'], otherwise it won't display"
62+
},
63+
{"name": "pageControlProps", "type": "PageControlProps", "description": "PageControl component props"},
64+
{
65+
"name": "showCounter",
66+
"type": "boolean",
67+
"description": "Whether to show a page counter (will not work with 'pageWidth' prop)"
68+
},
69+
{"name": "counterTextStyle", "type": "ViewStyle", "description": "The counter's text style"},
70+
{
71+
"name": "pagingEnabled",
72+
"type": "boolean",
73+
"description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)"
74+
},
75+
{"name": "allowAccessibleLayout", "type": "boolean", "description": "Whether to layout Carousel for accessibility"},
76+
{"name": "autoplay", "type": "boolean", "description": "Enable to switch automatically between the pages"},
77+
{
78+
"name": "autoplayInterval",
79+
"type": "number",
80+
"description": "Time is ms to wait before switching to the next page (requires autoplay to be enabled)"
81+
},
82+
{
83+
"name": "animatedScrollOffset",
84+
"type": "Animated.ValueXY",
85+
"description": "Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY())"
86+
}
87+
]
88+
}

‎src/components/checkbox/api.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "Checkbox",
3+
"category": "form",
4+
"description": "Checkbox component for toggling boolean value related to some context",
5+
"extends": ["TouchableOpacity"],
6+
"modifiers": ["margin", "background"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx",
8+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true"],
9+
"props": [
10+
{
11+
"name": "value",
12+
"type": "boolean",
13+
"description": "The Checkbox value. If true the switch will be turned on. Default value is false"
14+
},
15+
{"name": "onValueChange", "type": "(value) => void", "description": "Callback function for value change event"},
16+
{"name": "disabled", "type": "boolean", "description": "Whether the checkbox should be disabled"},
17+
{"name": "color", "type": "string", "description": "The Checkbox color"},
18+
{"name": "outline", "type": "boolean", "description": "Alternative Checkbox outline style"},
19+
{"name": "size", "type": "number", "description": "The Checkbox size, affect both width and height"},
20+
{"name": "borderRadius", "type": "number", "description": "The Checkbox border radius"},
21+
{
22+
"name": "selectedIcon",
23+
"type": "ImageRequireSource",
24+
"description": "The icon asset to use for the selected indication"
25+
},
26+
27+
{"name": "iconColor", "type": "string", "description": "The selected icon color"},
28+
{"name": "label", "type": "string", "description": "Add a label to the Checkbox"},
29+
{"name": "labelStyle", "type": "TextStyle", "description": "Pass to style the label"},
30+
{"name": "labelProps", "type": "TextProps", "description": "Props to pass on to the label component"},
31+
{"name": "style", "type": "ViewStyle", "description": "Custom styling for the Checkbox"},
32+
{
33+
"name": "containerStyle",
34+
"type": "ViewStyle",
35+
"description": "Custom styling for the checkbox and label container"
36+
}
37+
]
38+
}

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export {default as ActionBar, ActionBarProps} from './components/actionBar';
2424
export {default as Avatar, AvatarProps} from './components/avatar';
2525
export {AvatarHelper} from './helpers';
2626
export {default as Badge, BadgeProps} from './components/badge';
27-
export {default as Card, CardProps, CardSectionProps} from './components/card';
27+
export {default as Card, CardProps, CardSectionProps, CardSelectionOptions} from './components/card';
2828
export {default as ConnectionStatusBar, ConnectionStatusBarProps} from './components/connectionStatusBar';
2929
export {default as Constants} from './helpers/Constants';
3030
export {default as HapticService, HapticType} from './services/HapticService';

0 commit comments

Comments
 (0)