@wordpress/components/build/autocomplete/autocompleter-ui.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.getAutoCompleterUI = getAutoCompleterUI;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

var _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _backgroundView = _interopRequireDefault(require("./background-view"));

var _getDefaultUseItems = _interopRequireDefault(require("./get-default-use-items"));

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const {
  compose: stylesCompose
} = _reactNative.StyleSheet;

function getAutoCompleterUI(autocompleter) {
  const useItems = autocompleter.useItems ? autocompleter.useItems : (0, _getDefaultUseItems.default)(autocompleter);

  function AutocompleterUI(_ref) {
    let {
      filterValue,
      selectedIndex,
      onChangeOptions,
      onSelect,
      value,
      reset
    } = _ref;
    const [items] = useItems(filterValue);
    const filteredItems = items.filter(item => !item.isDisabled);
    const scrollViewRef = (0, _element.useRef)();
    const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
    const [isVisible, setIsVisible] = (0, _element.useState)(false);
    const {
      text
    } = value;
    (0, _element.useEffect)(() => {
      if (!isVisible && text.length > 0) {
        setIsVisible(true);
      }
    }, [isVisible, text]);
    (0, _element.useLayoutEffect)(() => {
      var _scrollViewRef$curren;

      onChangeOptions(items);
      (_scrollViewRef$curren = scrollViewRef.current) === null || _scrollViewRef$curren === void 0 ? void 0 : _scrollViewRef$curren.scrollTo({
        x: 0,
        animated: false
      });

      if (isVisible && text.length > 0) {
        startAnimation(true);
      } else if (isVisible && text.length === 0) {
        startAnimation(false);
      } // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
      // See https://github.com/WordPress/gutenberg/pull/41820
      // eslint-disable-next-line react-hooks/exhaustive-deps

    }, [items, isVisible, text]);
    const activeItemStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__item-active'], _style.default['components-autocomplete__item-active-dark']);
    const iconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon'], _style.default['components-autocomplete__icon-active-dark']);
    const activeIconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon-active '], _style.default['components-autocomplete__icon-active-dark']);
    const textStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__text'], _style.default['components-autocomplete__text-dark']);
    const activeTextStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__text-active'], _style.default['components-autocomplete__text-active-dark']);
    const startAnimation = (0, _element.useCallback)(show => {
      _reactNative.Animated.timing(animationValue, {
        toValue: show ? 1 : 0,
        duration: show ? 200 : 100,
        useNativeDriver: true
      }).start(_ref2 => {
        let {
          finished
        } = _ref2;

        if (finished && !show && isVisible) {
          setIsVisible(false);
          reset();
        }
      });
    }, // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
    // See https://github.com/WordPress/gutenberg/pull/41820
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [isVisible]);
    const contentStyles = {
      transform: [{
        translateY: animationValue.interpolate({
          inputRange: [0, 1],
          outputRange: [_style.default['components-autocomplete'].height, 0]
        })
      }]
    };

    if (!filteredItems.length > 0 || !isVisible) {
      return null;
    }

    return (0, _element.createElement)(_components.__unstableAutocompletionItemsFill, null, (0, _element.createElement)(_reactNative.View, {
      style: _style.default['components-autocomplete']
    }, (0, _element.createElement)(_reactNative.Animated.View, {
      style: contentStyles
    }, (0, _element.createElement)(_backgroundView.default, null, (0, _element.createElement)(_reactNative.ScrollView, {
      testID: "autocompleter",
      ref: scrollViewRef,
      horizontal: true,
      contentContainerStyle: _style.default['components-autocomplete__content'],
      showsHorizontalScrollIndicator: false,
      keyboardShouldPersistTaps: "always",
      accessibilityLabel: // translators: Slash inserter autocomplete results
      (0, _i18n.__)('Slash inserter results')
    }, filteredItems.map((option, index) => {
      var _option$value, _option$value$icon, _option$value2, _option$value3, _option$value4;

      const isActive = index === selectedIndex;
      const itemStyle = stylesCompose(_style.default['components-autocomplete__item'], isActive && activeItemStyles);
      const textStyle = stylesCompose(textStyles, isActive && activeTextStyles);
      const iconStyle = stylesCompose(iconStyles, isActive && activeIconStyles);
      const iconSource = (option === null || option === void 0 ? void 0 : (_option$value = option.value) === null || _option$value === void 0 ? void 0 : (_option$value$icon = _option$value.icon) === null || _option$value$icon === void 0 ? void 0 : _option$value$icon.src) || (option === null || option === void 0 ? void 0 : (_option$value2 = option.value) === null || _option$value2 === void 0 ? void 0 : _option$value2.icon);
      return (0, _element.createElement)(_reactNative.TouchableOpacity, {
        activeOpacity: 0.5,
        style: itemStyle,
        key: index,
        onPress: () => onSelect(option),
        accessibilityLabel: (0, _i18n.sprintf)( // translators: %s: Block name e.g. "Image block"
        (0, _i18n.__)('%s block'), option === null || option === void 0 ? void 0 : (_option$value3 = option.value) === null || _option$value3 === void 0 ? void 0 : _option$value3.title)
      }, (0, _element.createElement)(_reactNative.View, {
        style: _style.default['components-autocomplete__icon']
      }, (0, _element.createElement)(_components.Icon, {
        icon: iconSource,
        size: 24,
        style: iconStyle
      })), (0, _element.createElement)(_reactNative.Text, {
        style: textStyle
      }, option === null || option === void 0 ? void 0 : (_option$value4 = option.value) === null || _option$value4 === void 0 ? void 0 : _option$value4.title));
    }))))));
  }

  return AutocompleterUI;
}

var _default = getAutoCompleterUI;
exports.default = _default;
//# sourceMappingURL=autocompleter-ui.native.js.map