Skip to content

Commit c50f2ce

Browse files
Inbal-TishInbal-Tish
authored
d+e components - api docs (#1651)
* ExpandableSection * DateTimePicker * formatting file * Drawer * Dialog * func types * replacing notes with note
1 parent ce02465 commit c50f2ce

File tree

4 files changed

+193
-0
lines changed

4 files changed

+193
-0
lines changed

‎src/components/dateTimePicker/dateTimePicker.api.json

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"name": "DateTimePicker",
3+
"category": "form",
4+
"description": "Date and Time Picker Component that wraps RNDateTimePicker for date and time modes. See: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker",
5+
"note": "DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects",
6+
"extends": ["TextField"],
7+
"extendsLink": ["https://github.com/wix/react-native-ui-lib/blob/master/src/components/textField/index.tsx"],
8+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.js",
9+
"images": [
10+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true"
11+
],
12+
"props": [
13+
{
14+
"name": "mode",
15+
"type": "DATE | TIME",
16+
"description": "The type of picker to display ('date' or 'time')",
17+
"default": "MODES.DATE"
18+
},
19+
{
20+
"name": "value",
21+
"type": "Date",
22+
"description": "The initial value to set the picker to",
23+
"note": "Defaults to device's date and time"
24+
},
25+
{"name": "onChange", "type": "() => Date", "description": "Called when the date/time change"},
26+
{"name": "minimumDate", "type": "Date", "description": "The minimum date or time value to use"},
27+
{"name": "maximumDate", "type": "Date", "description": "The maximum date or time value to use"},
28+
{"name": "dateFormat", "type": "string", "description": "The date format for the text display"},
29+
{"name": "dateFormatter", "type": "() => Date", "description": "A callback function to format date"},
30+
{"name": "timeFormat", "type": "string", "description": "The time format for the text display"},
31+
{"name": "timeFormatter", "type": "() => Date", "description": "A callback function to format time"},
32+
{
33+
"name": "locale",
34+
"type": "string",
35+
"description": "Allows changing of the locale of the component",
36+
"note": "iOS only"
37+
},
38+
{
39+
"name": "is24Hour",
40+
"type": "boolean",
41+
"description": "Allows changing of the time picker to a 24 hour format",
42+
"note": "Android only"
43+
},
44+
{
45+
"name": "minuteInterval",
46+
"type": "number",
47+
"description": "The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30",
48+
"note": "iOS only"
49+
},
50+
{
51+
"name": "timeZoneOffsetInMinutes",
52+
"type": "number",
53+
"description": "Allows changing of the timeZone of the date picker. By default it uses the device's time zone",
54+
"note": "iOS only"
55+
},
56+
{"name": "dialogProps", "type": "DialogProps", "description": "Props to pass the Dialog component"},
57+
{"name": "headerStyle", "type": "ViewStyle", "description": "Style to apply to the iOS dialog header"},
58+
{"name": "renderInput", "type": "JSX.Element", "description": "Render custom input"},
59+
{
60+
"name": "themeVariant",
61+
"type": "LIGHT | DARK",
62+
"description": "Override system theme variant (dark or light mode) used by the date picker"
63+
}
64+
]
65+
}

‎src/components/dialog/dialog.api.json

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "Dialog",
3+
"category": "overlays",
4+
"description": "Component for displaying custom content inside a popup dialog",
5+
"note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
6+
"modifiers": ["alignment"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js",
8+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true"],
9+
"props": [
10+
{"name": "visible", "type": "boolean", "description": "Control visibility of the component"},
11+
{"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press"},
12+
{
13+
"name": "overlayBackgroundColor",
14+
"type": "string",
15+
"description": "The color of the overlay background",
16+
"default": "Colors.rgba(Colors.grey10, 0.6)"
17+
},
18+
{"name": "width", "type": "string | number", "description": "Width", "default": "90%"},
19+
{"name": "height", "type": "string | number", "description": "Height", "default": "undefined"},
20+
{
21+
"name": "panDirection",
22+
"type": "UP | DOWN | LEFT | RIGHT",
23+
"description": "The direction of the allowed pan",
24+
"default": "PanningProvider.Directions.DOWN"
25+
},
26+
{"name": "onDismiss", "type": "(props?: any) => void", "description": "Called when clicking on the background"},
27+
{
28+
"name": "onDialogDismissed",
29+
"type": "(props: any) => void",
30+
"description": "Called once the dialog has been dismissed completely"
31+
},
32+
{
33+
"name": "renderPannableHeader",
34+
"type": "(props: any) => JSX.Element",
35+
"description": "For scrollable content (the children of the dialog)",
36+
"note": "If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'"
37+
},
38+
{
39+
"name": "pannableHeaderProps",
40+
"type": "any",
41+
"description": "The props that will be passed to the pannable header"
42+
},
43+
{
44+
"name": "useSafeArea",
45+
"type": "boolean",
46+
"description": "In iOS, use safe area, in case component attached to the bottom"
47+
},
48+
{"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
49+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
50+
]
51+
}

‎src/components/drawer/drawer.api.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "Drawer",
3+
"category": "lists",
4+
"description": "Drawer Component",
5+
"notes": "If your app works with RNN, your screen must be wrapped with gestureHandlerRootHOC from 'react-native-gesture-handler'. see: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation",
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DrawerScreen.tsx",
7+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true"],
8+
"props": [
9+
{
10+
"name": "rightItems",
11+
"type": "ItemProps[]",
12+
"description": "The bottom layer's items to appear when opened from the right"
13+
},
14+
{
15+
"name": "leftItem",
16+
"type": "ItemProps",
17+
"description": "The bottom layer's item to appear when opened from the left (a single item)"
18+
},
19+
{"name": "bounciness", "type": "number", "description": "The drawer animation bounciness"},
20+
{"name": "itemsMinWidth", "type": "number", "description": "Set a different minimum width"},
21+
{
22+
"name": "itemsTintColor",
23+
"type": "string",
24+
"description": "The color for the text and icon tint of the items",
25+
"default": "Colors.white"
26+
},
27+
{"name": "itemsIconSize", "type": "number", "description": "The items' icon size", "default": "24"},
28+
{"name": "itemsTextStyle", "type": "TextStyle", "description": "The items' text style"},
29+
{"name": "useNativeAnimations", "type": "boolean", "description": "Perform the animation in natively"},
30+
{"name": "fullSwipeLeft", "type": "boolean", "description": "Whether to allow a full left swipe"},
31+
{"name": "fullLeftThreshold", "type": "number", "description": "Threshold for a left full swipe (0-1)"},
32+
{"name": "onFullSwipeLeft", "type": "() => void", "description": "Callback for left item full swipe"},
33+
{"name": "onWillFullSwipeLeft", "type": "() => void", "description": "Callback for just before left item full swipe"},
34+
{"name": "onToggleSwipeLeft", "type": "() => {rowWidth, leftWidth, dragX, resetItemPosition}", "description": "Callback for left item toggle swipe"},
35+
{
36+
"name": "leftToggleHapticTrigger",
37+
"type": "() => void",
38+
"description": "Haptic trigger callback to use onToggleSwipeLeft",
39+
"deprecated": true
40+
},
41+
{"name": "fullSwipeRight", "type": "boolean", "description": "Whether to allow a full right swipe"},
42+
{"name": "fullRightThreshold", "type": "number", "description": "Threshold for a right full swipe (0-1)"},
43+
{"name": "onFullSwipeRight", "type": "() => void", "description": "Callback for right item full swipe"},
44+
{
45+
"name": "onWillFullSwipeRight",
46+
"type": "() => void",
47+
"description": "Callback for just before right item full swipe"
48+
},
49+
{"name": "disableHaptic", "type": "boolean", "description": "Whether to disable the haptic"},
50+
{"name": "onDragStart", "type": "() => any", "description": "Called when drag gesture starts"},
51+
{"name": "onSwipeableWillOpen", "type": "() => void", "description": "Callback for open action"},
52+
{"name": "onSwipeableWillClose", "type": "() => void", "description": "Callback for close action"},
53+
{
54+
"name": "customValue",
55+
"type": "any",
56+
"description": "Custom value of any type to pass on to the component and receive back in the action callbacks"
57+
},
58+
{"name": "style", "type": "ViewStyle", "description": "Component's style"},
59+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
60+
]
61+
}

‎src/components/expandableSection/expandableSection.api.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "ExpandableSection",
3+
"category": "basic",
4+
"description": "Component to render expanded section below or above the SectionHeader",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ExpandableSectionScreen.tsx",
6+
"images": [
7+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ExpandableSection/ExpandableSection.gif?raw=true"
8+
],
9+
"props": [
10+
{"name": "sectionHeader", "type": "JSX.Element", "description": "Header element"},
11+
{"name": "children", "type": "React.ReactNode", "description": "The expandable's children"},
12+
{"name": "expanded", "type": "boolean", "description": "Should the ExpandableSection be expanded"},
13+
{"name": "top", "type": "boolean", "description": "Should it open above the 'sectionHeader'"},
14+
{"name": "onPress", "type": "() => void", "description": "Called when pressing the header of the ExpandableSection"}
15+
]
16+
}

0 commit comments

Comments
 (0)