Skip to content

Commit 75f55ec

Browse files
ethansharInbal-Tish
ethanshar
and
Inbal-Tish
authored
Add docs for all S components (#1645)
* Add docs for all S components * Update src/components/sectionsWheelPicker/sectionsWheelPicker.api.json Co-authored-by: Inbal Tish <[email protected]> * Update src/components/skeletonView/skeletonView.api.json Co-authored-by: Inbal Tish <[email protected]> Co-authored-by: Inbal Tish <[email protected]>
1 parent d3db562 commit 75f55ec

File tree

8 files changed

+263
-0
lines changed

8 files changed

+263
-0
lines changed

‎src/components/sectionsWheelPicker/sectionsWheelPicker.api.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "SectionsWheelPicker",
3+
"category": "form",
4+
"description": "SectionsWheelPicker component for presenting set of WheelPickers",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SectionsWheelPickerScreen.tsx",
6+
"images": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/SectionsWheelPicker/SectionsWheelPicker.gif?raw=true"
8+
],
9+
"props": [
10+
{"name": "sections", "type": "WheelPickerProps", "description": "Array of sections"},
11+
{
12+
"name": "itemHeight",
13+
"type": "number",
14+
"description": "Describe the height of each item in the WheelPicker",
15+
"default": "44"
16+
},
17+
{
18+
"name": "numberOfVisibleRows",
19+
"type": "number",
20+
"description": "Describe the number of rows visible",
21+
"default": "5"
22+
},
23+
{"name": "activeTextColor", "type": "string", "description": "Text color for the focused row"},
24+
{"name": "inactiveTextColor", "type": "string", "description": "Text color for other, non-focused rows"},
25+
{"name": "textStyle", "type": "TextStyle", "description": "Row text style"},
26+
{"name": "xxx", "type": "xxxx", "description": "xxxxx"},
27+
{"name": "testID", "type": "string", "description": "The component test id"}
28+
]
29+
}

‎src/components/segmentedControl/segmentedControl.api.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "SegmentedControl",
3+
"category": "form",
4+
"description": "SegmentedControl component for toggling two values or more",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SegmentedControlScreen.tsx",
6+
"images": [],
7+
"props": [
8+
{"name": "segments", "type": "SegmentedControlItemProps", "description": "Array on segments"},
9+
{"name": "activeColor", "type": "string", "description": "The color of the active segment label"},
10+
{"name": "onChangeIndex", "type": "(index: number) => void", "description": "Callback for when index has change."},
11+
{"name": "initialIndex", "type": "number", "description": "Initial index to be active"},
12+
{"name": "borderRadius", "type": "number", "description": "The segmentedControl borderRadius"},
13+
{"name": "backgroundColor", "type": "string", "description": "The background color of the inactive segments"},
14+
{"name": "activeBackgroundColor", "type": "string", "description": "The background color of the active segment"},
15+
{"name": "outlineColor", "type": "string", "description": "The color of the active segment outline"},
16+
{"name": "outlineWidth", "type": "number", "description": "The width of the active segment outline"},
17+
{"name": "iconOnRight", "type": "boolean", "description": "Should the icon be on right of the label"},
18+
{"name": "throttleTime", "type": "number", "description": "Trailing throttle time of changing index in ms."},
19+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"},
20+
{"name": "style", "type": "ViewStyle", "description": "Custom style to inner container"},
21+
{"name": "testID", "type": "string", "description": "Component test id"}
22+
]
23+
}

‎src/components/skeletonView/skeletonView.api.json

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "SkeletonView",
3+
"category": "layoutsAndTemplates",
4+
"description": "Allows showing a temporary skeleton view while your real view is loading",
5+
"note": "Requires installing the 'react-native-shimmer-placeholder' and 'react-native-linear-gradient' libraries",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SkeletonViewScreen.tsx",
7+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Skeleton/Skeleton.gif?raw=true"],
8+
"props": [
9+
{
10+
"name": "showContent",
11+
"type": "boolean",
12+
"description": "The content has been loaded, start fading out the skeleton and fading in the content"
13+
},
14+
{
15+
"name": "renderContent",
16+
"type": "(customValue?: any) => React.ReactNode",
17+
"description": "A function that will render the content once the content is ready (i.e. showContent is true). The method will be called with the Skeleton's customValue (i.e. renderContent(props?.customValue))"
18+
},
19+
{
20+
"name": "customValue",
21+
"type": "any",
22+
"description": "Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback."
23+
},
24+
{
25+
"name": "template",
26+
"type": "listItem | content",
27+
"description": "The type of the skeleton view.",
28+
"note": "Accessible through SkeletonView.templates.xxx"
29+
},
30+
{
31+
"name": "listProps",
32+
"type": "SkeletonListProps",
33+
"description": "Props that are available when using template={SkeletonView.templates.LIST_ITEM}"
34+
},
35+
{"name": "times", "type": "number", "description": "Generates duplicate skeletons"},
36+
{"name": "timesKey", "type": "string", "description": "A key prefix for the duplicated SkeletonViews"},
37+
{"name": "height", "type": "number", "description": "The height of the skeleton view"},
38+
{"name": "width", "type": "number", "description": "The width of the skeleton view"},
39+
{"name": "borderRadius", "type": "number", "description": "The border radius of the skeleton view"},
40+
{
41+
"name": "circle",
42+
"type": "boolean",
43+
"description": "Whether the skeleton is a circle (will override the borderRadius)"
44+
},
45+
{"name": "style", "type": "ViewStyle", "description": "Override container styles"},
46+
{"name": "testID", "type": "string", "description": "The component test id"}
47+
]
48+
}

‎src/components/slider/slider.api.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"name": "Slider",
3+
"category": "form",
4+
"description": "A Slider component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx",
6+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Slider/Slider.gif?raw=true"],
7+
"props": [
8+
{"name": "value", "type": "number", "description": "Initial value"},
9+
{"name": "minimumValue", "type": "number", "description": "Minimum value"},
10+
{"name": "maximumValue", "type": "number", "description": "Maximum value"},
11+
{
12+
"name": "step",
13+
"type": "number",
14+
"description": "Step value of the slider. The value should be between 0 and (maximumValue - minimumValue)"
15+
},
16+
{
17+
"name": "minimumTrackTintColor",
18+
"type": "string",
19+
"description": "The color used for the track from minimum value to current value"
20+
},
21+
{"name": "maximumTrackTintColor", "type": "string", "description": "The track color"},
22+
{
23+
"name": "renderTrack?",
24+
"type": "() => ReactElement | ReactElement[]",
25+
"description": "Custom render instead of rendering the track"
26+
},
27+
{"name": "thumbTintColor", "type": "string", "description": "Thumb color"},
28+
{"name": "onValueChange", "type": "SliderOnValueChange", "description": "Callback for onValueChange"},
29+
{
30+
"name": "onSeekStart",
31+
"type": "() => void",
32+
"description": "Callback that notifies about slider seeking is started"
33+
},
34+
{
35+
"name": "onSeekEnd",
36+
"type": "() => void",
37+
"description": "Callback that notifies about slider seeking is finished"
38+
},
39+
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"},
40+
{"name": "trackStyle", "type": "ViewStyle", "description": "The track style"},
41+
{"name": "thumbStyle", "type": "ViewStyle", "description": "The thumb style"},
42+
{"name": "activeThumbStyle", "type": "ViewStyle", "description": "The active (during press) thumb style"},
43+
{
44+
"name": "disableActiveStyling",
45+
"type": "boolean",
46+
"description": "If true the Slider will not change it's style on press"
47+
},
48+
{
49+
"name": "disabled",
50+
"type": "boolean",
51+
"description": "If true the Slider will be disabled and will appear in disabled color"
52+
},
53+
{
54+
"name": "accessible",
55+
"type": "boolean",
56+
"description": "If true the component will have accessibility features enabled"
57+
},
58+
{"name": "testID", "type": "string", "description": "The component test id"}
59+
]
60+
}

‎src/components/stackAggregator/stackAggregator.api.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "StackAggregator",
3+
"category": "basic",
4+
"description": "Stack aggregator component",
5+
"modifiers": ["margin", "padding"],
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/StackAggregatorScreen.tsx",
7+
"images": [],
8+
"props": [
9+
{"name": "collapsed", "type": "boolean", "description": "The initial state of the stack"},
10+
{"name": "children", "type": "JSX.Element | JSX.Element[]", "description": "Component Children"},
11+
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"},
12+
{"name": "contentContainerStyle", "type": "ViewStyle", "description": "The content container style"},
13+
{"name": "itemBorderRadius", "type": "number", "description": "The items border radius"},
14+
{"name": "buttonProps", "type": "ButtonProps", "description": "Props passed to the 'show less' button"},
15+
{"name": "onItemPress", "type": "(index: number) => void", "description": "A callback for item press"},
16+
{
17+
"name": "onCollapseWillChange",
18+
"type": "(changed: boolean) => void",
19+
"description": "A callback for collapse state will change (value is future collapsed state)"
20+
},
21+
{
22+
"name": "onCollapseChanged",
23+
"type": "(changed: boolean) => void",
24+
"description": "A callback for collapse state change (value is collapsed state)"
25+
},
26+
{"name": "disablePresses", "type": "boolean", "description": "A setting that disables pressability on cards"}
27+
]
28+
}

‎src/components/stateScreen/stateScreen.api.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "StateScreen",
3+
"category": "layoutsAndTemplates",
4+
"description": "Component that shows a full screen for a certain state, like an empty state",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/EmptyStateScreen.tsx",
6+
"images": ["https://user-images.githubusercontent.com/33805983/34672894-f262ab84-f488-11e7-83f0-4ee0f0ac34ba.png"],
7+
"props": [
8+
{
9+
"name": "imageSource",
10+
"type": "ImageURISource",
11+
"description": "The image source that's showing at the top. use an image that was required locally"
12+
},
13+
{"name": "title", "type": "string", "description": "To to show as the title"},
14+
{"name": "ctaLabel", "type": "string", "description": "Text to to show in the CTA button"},
15+
{"name": "onCtaPress", "type": "() => void", "description": "Action handler for CTA button"},
16+
{"name": "testID", "type": "string", "description": "Use to identify the container in tests"}
17+
]
18+
}

‎src/components/stepper/stepper.api.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "Stepper",
3+
"category": "Form",
4+
"description": "A stepper component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/StepperScreen.tsx",
6+
"images": [],
7+
"props": [
8+
{"name": "value", "type": "number", "description": "Initial value of the Stepper"},
9+
{"name": "minValue", "type": "number", "description": "Minimum value"},
10+
{"name": "maxValue", "type": "number", "description": "Maximum value"},
11+
{
12+
"name": "step",
13+
"type": "number",
14+
"description": "The step to increase and decrease by (default is 1)",
15+
"default": "1"
16+
},
17+
{
18+
"name": "onValueChange",
19+
"type": "(value: number, testID?: string) => void",
20+
"description": "Value change callback function"
21+
},
22+
{"name": "disabled", "type": "boolean", "description": "Disables interaction with the stepper"},
23+
{"name": "small", "type": "boolean", "description": "Renders a small sized Stepper"},
24+
{"name": "accessibilityLabel", "type": "string", "description": "Component accessibility label"},
25+
{"name": "testID", "type": "string", "description": "Test id for component"}
26+
]
27+
}

‎src/components/switch/switch.api.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "Switch",
3+
"category": "form",
4+
"description": "Switch component for toggling boolean value related to some context",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SwitchScreen.tsx",
6+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Switch/Switch.gif?raw=true"],
7+
"props": [
8+
{
9+
"name": "value",
10+
"type": "boolean",
11+
"description": "The value of the switch. If true the switch will be turned on. Default value is false"
12+
},
13+
{
14+
"name": "onValueChange",
15+
"type": "(value: boolean) => void",
16+
"description": "Invoked with the new value when the value changes"
17+
},
18+
{"name": "disabled", "type": "boolean", "description": "Whether the switch should be disabled"},
19+
{"name": "width", "type": "number", "description": "The Switch width"},
20+
{"name": "height", "type": "number", "description": "The Switch height"},
21+
{"name": "onColor", "type": "string", "description": "The Switch background color when it's turned on"},
22+
{"name": "offColor", "type": "string", "description": "The Switch background color when it's turned off"},
23+
{"name": "disabledColor", "type": "string", "description": "The Switch background color when it's disabled"},
24+
{"name": "thumbColor", "type": "string", "description": "The Switch's thumb color"},
25+
{"name": "thumbSize", "type": "number", "description": "The Switch's thumb size (width & height)"},
26+
{"name": "thumbStyle", "type": "ViewStyle", "description": "The Switch's thumb style"},
27+
{"name": "style", "type": "ViewStyle", "description": "Custom style"},
28+
{"name": "testID", "type": "string", "description": "Component test id"}
29+
]
30+
}

0 commit comments

Comments
 (0)