@gechiui/block-editor/build-module/components/block-styles/preview.native.js

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * External dependencies
 */
import { View, TouchableWithoutFeedback, Text, Dimensions, Animated, Easing, Image } from 'react-native';
/**
 * GeChiUI dependencies
 */

import { BottomSheet } from '@gechiui/components';
import { useState, useEffect, useRef } from '@gechiui/element';
import { usePreferredColorSchemeStyle } from '@gechiui/compose';
/**
 * Internal dependencies
 */

import styles from './style.scss';
const MAX_ITEM_WIDTH = 120;
const HALF_COLUMN = 0.5;

function StylePreview(_ref) {
  let {
    onPress,
    isActive,
    style,
    url
  } = _ref;
  const [itemWidth, setItemWidth] = useState(MAX_ITEM_WIDTH);
  const {
    label,
    name
  } = style;
  const opacity = useRef(new Animated.Value(1)).current;

  function onLayout() {
    const columnsNum = // To indicate scroll availabilty, there is a need to display additional half the column
    Math.floor(BottomSheet.getWidth() / MAX_ITEM_WIDTH) + HALF_COLUMN;
    setItemWidth(BottomSheet.getWidth() / columnsNum);
  }

  useEffect(() => {
    onLayout();
    Dimensions.addEventListener('change', onLayout);
    return () => {
      Dimensions.removeEventListener('change', onLayout);
    };
  }, []);
  const labelStyle = usePreferredColorSchemeStyle(styles.label, styles.labelDark);

  const animateOutline = () => {
    opacity.setValue(0);
    Animated.timing(opacity, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true,
      easing: Easing.linear
    }).start();
  };

  const innerOutlineStyle = usePreferredColorSchemeStyle(styles.innerOutline, styles.innerOutlineDark);

  const getOutline = outlineStyles => outlineStyles.map((outlineStyle, index) => {
    return createElement(Animated.View, {
      style: [outlineStyle, {
        opacity
      }, styles[name]],
      key: index
    });
  });

  return createElement(TouchableWithoutFeedback, {
    onPress: () => {
      onPress();
      animateOutline();
    }
  }, createElement(View, {
    style: [styles.container, {
      width: itemWidth
    }]
  }, createElement(View, {
    style: styles.imageWrapper
  }, isActive && getOutline([styles.outline, innerOutlineStyle]), createElement(Image, {
    style: [styles.image, styles[name]],
    source: {
      uri: url
    }
  })), createElement(Text, {
    style: [labelStyle, isActive && styles.labelSelected]
  }, label)));
}

export default StylePreview;
//# sourceMappingURL=preview.native.js.map