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

LiveLike React Native package

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LLGifPickerHeader = LLGifPickerHeader;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _hooks = require("../../hooks");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function LLGifPickerHeader(_ref) {
  let {
    onSearchInputChange,
    closeGifPicker,
    styles: stylesProp
  } = _ref;
  const [gifSearchInput, setGifSearchInput] = (0, _react.useState)('');
  const {
    theme,
    themeAssets
  } = (0, _hooks.useTheme)();
  const gifPickerHeaderStyles = (0, _hooks.useStyles)({
    componentStylesFn: getLLGifPickerHeaderStyles,
    stylesProp
  });
  const searchInputStyle = (0, _hooks.useCustomFontStyle)({
    style: gifPickerHeaderStyles.searchInput
  });
  const onSearchInputHandler = (0, _react.useCallback)(inputValue => {
    setGifSearchInput(inputValue);
    onSearchInputChange(inputValue);
  }, [onSearchInputChange]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: gifPickerHeaderStyles.headerContainer
  }, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
    placeholder: "Search Giphy",
    value: gifSearchInput,
    style: searchInputStyle,
    placeholderTextColor: theme.secondaryText,
    onChangeText: onSearchInputHandler
  }), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    onPress: closeGifPicker,
    accessibilityLabel: "Close Gif picker"
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
    style: gifPickerHeaderStyles.closeIcon,
    source: themeAssets.close
  })));
}
const getLLGifPickerHeaderStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return _reactNative.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