@wordpress/components
Version:
UI components for WordPress.
155 lines (151 loc) • 6.69 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.getAutoCompleterUI = getAutoCompleterUI;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
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"));
var _icon = _interopRequireDefault(require("../icon"));
var _autocompletionItems = require("../mobile/autocompletion-items");
var _jsxRuntime = require("react/jsx-runtime");
/**
* 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({
filterValue,
selectedIndex,
onChangeOptions,
onSelect,
value,
reset
}) {
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)(() => {
onChangeOptions(items);
scrollViewRef.current?.scrollTo({
x: 0,
animated: false
});
if (isVisible && text.length > 0) {
startAnimation(true);
} else if (isVisible && text.length === 0) {
startAnimation(false);
}
// We want to avoid introducing unexpected side effects.
// See https://github.com/WordPress/gutenberg/pull/41820
}, [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(({
finished
}) => {
if (finished && !show && isVisible) {
setIsVisible(false);
reset();
}
});
},
// We want to avoid introducing unexpected side effects.
// See https://github.com/WordPress/gutenberg/pull/41820
[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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_autocompletionItems.__unstableAutocompletionItemsFill, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default['components-autocomplete'],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
style: contentStyles,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_backgroundView.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_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'),
children: filteredItems.map((option, index) => {
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?.value?.icon?.src || option?.value?.icon;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
activeOpacity: 0.5,
style: itemStyle,
onPress: () => onSelect(option),
accessibilityLabel: (0, _i18n.sprintf)(
// translators: %s: Block name e.g. "Image block"
(0, _i18n.__)('%s block'), option?.value?.title),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _style.default['components-autocomplete__icon'],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
icon: iconSource,
size: 24,
style: iconStyle
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: textStyle,
children: option?.value?.title
})]
}, index);
})
})
})
})
})
});
}
return AutocompleterUI;
}
var _default = exports.default = getAutoCompleterUI;
//# sourceMappingURL=autocompleter-ui.native.js.map