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

Generic block editor.

"use strict";

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

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

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

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

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const MAX_ITEM_WIDTH = 120;
const HALF_COLUMN = 0.5;

function StylePreview(_ref) {
  let {
    onPress,
    isActive,
    style,
    url
  } = _ref;
  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 availabilty, 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();

    _reactNative.Dimensions.addEventListener('change', onLayout);

    return () => {
      _reactNative.Dimensions.removeEventListener('change', onLayout);
    };
  }, []);
  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 (0, _element.createElement)(_reactNative.Animated.View, {
      style: [outlineStyle, {
        opacity
      }, _style.default[name]],
      key: index
    });
  });

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

var _default = StylePreview;
exports.default = _default;
//# sourceMappingURL=preview.native.js.map