@livelike/react-native/lib/module/components/LLGifPicker/LLGifPickerHeader.js

LiveLike React Native package

import React, { useCallback, useState } from 'react';
import { View, TextInput, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { useCustomFontStyle, useStyles, useTheme } from '../../hooks';
export function LLGifPickerHeader(_ref) {
  let {
    onSearchInputChange,
    closeGifPicker,
    styles: stylesProp
  } = _ref;
  const [gifSearchInput, setGifSearchInput] = useState('');
  const {
    theme,
    themeAssets
  } = useTheme();
  const gifPickerHeaderStyles = useStyles({
    componentStylesFn: getLLGifPickerHeaderStyles,
    stylesProp
  });
  const searchInputStyle = useCustomFontStyle({
    style: gifPickerHeaderStyles.searchInput
  });
  const onSearchInputHandler = useCallback(inputValue => {
    setGifSearchInput(inputValue);
    onSearchInputChange(inputValue);
  }, [onSearchInputChange]);
  return /*#__PURE__*/React.createElement(View, {
    style: gifPickerHeaderStyles.headerContainer
  }, /*#__PURE__*/React.createElement(TextInput, {
    placeholder: "Search Giphy",
    value: gifSearchInput,
    style: searchInputStyle,
    placeholderTextColor: theme.secondaryText,
    onChangeText: onSearchInputHandler
  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: closeGifPicker,
    accessibilityLabel: "Close Gif picker"
  }, /*#__PURE__*/React.createElement(Image, {
    style: gifPickerHeaderStyles.closeIcon,
    source: themeAssets.close
  })));
}
const getLLGifPickerHeaderStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    headerContainer: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 15,
      paddingTop: 15
    },
    searchInput: {
      borderRadius: 10,
      height: 45,
      paddingVertical: 5,
      paddingHorizontal: 12,
      flex: 1,
      color: theme.text,
      backgroundColor: theme.background
    },
    closeIcon: {
      width: 30,
      height: 30,
      marginLeft: 10
    }
  });
};
//# sourceMappingURL=LLGifPickerHeader.js.map