feat(components): autocomplete - add placement property

Author: artyorsh

src/components/ui/autocomplete/autocomplete.component.tsx

@@ -30,6 +30,7 @@ import {
   PopoverElement,
 } from '../popover/popover.component';
 import { InputFocusEvent } from '../support/typings';
+import { PopoverPlacement } from '../popover/type';
 
 export interface AutocompleteOption {
   title: string;
@@ -40,6 +41,7 @@ export interface AutocompleteProps<O extends Option = Option> extends InputProps
   placeholderData?: O[];
   onSelect?: (option: O) => void;
   renderItem?: (info: ListRenderItemInfo<O>) => React.ReactElement;
+  placement?: PopoverPlacement | string;
 }
 
 export type AutocompleteElement<O extends Option = Option> = React.ReactElement<AutocompleteProps<O>>;
@@ -79,6 +81,12 @@ interface State {
  * @property {(info: ListRenderItemInfo<AutocompleteOption>) => ReactElement} renderItem - Takes an
  * item from data and renders it into the list. If not provided, ListItem is rendered.
  *
+ * @property {string | PopoverPlacement} placement - Determines the actual placement of the popover.
+ * Can be `left`, `top`, `right`, `bottom`, `left start`, `left end`, `top start`, `top end`, `right start`,
+ * `right end`, `bottom start` or `bottom end`.
+ * Default is `bottom`.
+ * Tip: use one of predefined placements instead of strings, e.g `PopoverPlacements.TOP`
+ *
  * @property {InputProps} ...InputProps - Any props applied to Input component.
  *
  * @overview-example AutocompleteSimpleUsage
@@ -93,6 +101,8 @@ interface State {
  *
  * @overview-example AutocompleteWithLabel
  *
+ * @example AutocompleteHandleKeyboard
+ *
  * @example AutocompleteAsync
  */
 export class Autocomplete<O extends Option = Option> extends React.Component<AutocompleteProps<O>, State> {
@@ -206,6 +216,7 @@ export class Autocomplete<O extends Option = Option> extends React.Component<Aut
       <Popover
         ref={this.popoverRef}
         style={styles.popover}
+        placement={this.props.placement}
         visible={this.state.optionsVisible}
         fullWidth={true}
         content={listElement}

src/components/ui/datepicker/datepicker.component.tsx

@@ -88,7 +88,7 @@ export type DatepickerElement<D = Date> = React.ReactElement<DatepickerProps<D>>
  *
  * @property {() => ReactElement} renderFooter - Should return the footer.
  *
- * @property {string | PopoverPlacement} placement - Determines the actualPlacement of the popover.
+ * @property {string | PopoverPlacement} placement - Determines the actual placement of the popover.
  * Can be `left`, `top`, `right`, `bottom`, `left start`, `left end`, `top start`, `top end`, `right start`,
  * `right end`, `bottom start` or `bottom end`.
  * Default is `bottom`.

src/components/ui/datepicker/rangeDatepicker.component.tsx

@@ -88,7 +88,7 @@ export type RangeDatepickerElement<D = Date> = React.ReactElement<RangeDatepicke
  *
  * @property {() => ReactElement} renderFooter - Should return the footer.
  *
- * @property {string | PopoverPlacement} placement - Determines the actualPlacement of the popover.
+ * @property {string | PopoverPlacement} placement - Determines the placement of the popover.
  * Can be `left`, `top`, `right`, `bottom`, `left start`, `left end`, `top start`, `top end`, `right start`,
  * `right end`, `bottom start` or `bottom end`.
  * Default is `bottom`.

src/components/ui/overflowMenu/overflowMenu.component.tsx

@@ -55,7 +55,7 @@ export type OverflowMenuElement = React.ReactElement<OverflowMenuProps>;
  *
  * @property {(index: number, event: GestureResponderEvent) => void} onSelect - Fires when selected item is changed.
  *
- * @property {string | PopoverPlacement} placement - Determines the actualPlacement of the popover.
+ * @property {string | PopoverPlacement} placement - Determines the placement of the popover.
  * Can be `left`, `top`, `right`, `bottom`, `left start`, `left end`, `top start`, `top end`, `right start`,
  * `right end`, `bottom start` or `bottom end`.
  * Default is `bottom`.

src/components/ui/popover/popover.component.tsx

@@ -63,7 +63,7 @@ const POINT_OUTSCREEN: Point = new Point(-999, -999);
  *
  * @property {ReactElement} children - Determines the element "above" which popover will be shown.
  *
- * @property {string | PopoverPlacement} placement - Determines the actualPlacement of the popover.
+ * @property {string | PopoverPlacement} placement - Determines the placement of the popover.
  * Can be `left`, `top`, `right`, `bottom`, `left start`, `left end`, `top start`, `top end`, `right start`,
  * `right end`, `bottom start` or `bottom end`.
  * Default is `bottom`.

src/components/ui/tooltip/tooltip.component.tsx

@@ -62,7 +62,7 @@ export type TooltipElement = React.ReactElement<TooltipProps>;
  *
  * @property {ReactElement} children - Determines the element "above" which popover will be shown.
  *
- * @property {string | PopoverPlacement} placement - Determines the actualPlacement of the popover.
+ * @property {string | PopoverPlacement} placement - Determines the placement of the popover.
  * Can be `left`, `top`, `right`, `bottom`, `left start`, `left end`, `top start`, `top end`, `right start`,
  * `right end`, `bottom start` or `bottom end`.
  * Default is `bottom`.

src/showcases/components/autocomplete/autocompleteHandleKeyboard.component.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Keyboard, Platform, StyleSheet } from 'react-native';
+import { Autocomplete, Layout } from '@ui-kitten/components';
+
+const DATA = [
+  { title: 'Star Wars' },
+  { title: 'Back to the Future' },
+  { title: 'The Matrix' },
+  { title: 'Inception' },
+  { title: 'Interstellar' },
+];
+
+const showEvent = Platform.select({
+  android: 'keyboardDidShow',
+  default: 'keyboardWillShow',
+});
+
+const hideEvent = Platform.select({
+  android: 'keyboardDidHide',
+  default: 'keyboardWillHide',
+});
+
+export const AutocompleteHandleKeyboardShowcase = () => {
+
+  const [value, setValue] = React.useState(null);
+  const [data, setData] = React.useState(DATA);
+  const [placement, setPlacement] = React.useState('bottom');
+
+  React.useEffect(() => {
+    const keyboardShowListener = Keyboard.addListener(showEvent, () => {
+      setPlacement('top');
+    });
+
+    const keyboardHideListener = Keyboard.addListener(hideEvent, () => {
+      setPlacement('bottom');
+    });
+
+    return () => {
+      keyboardShowListener.remove();
+      keyboardHideListener.remove();
+    };
+  });
+
+  const onSelect = ({ title }) => {
+    setValue(title);
+  };
+
+  const onChangeText = (query) => {
+    setValue(query);
+    setData(DATA.filter(item => item.title.toLowerCase().includes(query.toLowerCase())));
+  };
+
+  return (
+    <Layout style={styles.container}>
+      <Autocomplete
+        placeholder='Place your Text'
+        value={value}
+        data={data}
+        placement={placement}
+        onChangeText={onChangeText}
+        onSelect={onSelect}
+      />
+    </Layout>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 228,
+  },
+});