@wordpress/block-editor
Version:
96 lines (92 loc) • 3.14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const MAX_ITEM_WIDTH = 120;
const HALF_COLUMN = 0.5;
function StylePreview({
onPress,
isActive,
style,
url
}) {
const [itemWidth, setItemWidth] = (0, _element.useState)(MAX_ITEM_WIDTH);
const {
label,
name
} = style;
const opacity = (0, _element.useRef)(new _reactNative.Animated.Value(1)).current;
function onLayout() {
const columnsNum =
// To indicate scroll availability, there is a need to display additional half the column.
Math.floor(_components.BottomSheet.getWidth() / MAX_ITEM_WIDTH) + HALF_COLUMN;
setItemWidth(_components.BottomSheet.getWidth() / columnsNum);
}
(0, _element.useEffect)(() => {
onLayout();
const dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', onLayout);
return () => {
dimensionsChangeSubscription.remove();
};
}, []);
const labelStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.label, _style.default.labelDark);
const animateOutline = () => {
opacity.setValue(0);
_reactNative.Animated.timing(opacity, {
toValue: 1,
duration: 100,
useNativeDriver: true,
easing: _reactNative.Easing.linear
}).start();
};
const innerOutlineStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.innerOutline, _style.default.innerOutlineDark);
const getOutline = outlineStyles => outlineStyles.map((outlineStyle, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
style: [outlineStyle, {
opacity
}, _style.default[name]]
}, index);
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
onPress: () => {
onPress();
animateOutline();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [_style.default.container, {
width: itemWidth
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default.imageWrapper,
children: [isActive && getOutline([_style.default.outline, innerOutlineStyle]), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
style: [_style.default.image, _style.default[name]],
source: {
uri: url
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [labelStyle, isActive && _style.default.labelSelected],
children: label
})]
})
});
}
var _default = exports.default = StylePreview;
//# sourceMappingURL=preview.native.js.map