@gechiui/block-editor/build-module/components/floating-toolbar/index.native.js

Generic block editor.

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

/**
 * External dependencies
 */
import { Animated, Easing, View, Platform } from 'react-native';
/**
 * GeChiUI dependencies
 */

import { ToolbarButton, ToolbarGroup } from '@gechiui/components';
import { useEffect, useState, useRef } from '@gechiui/element';
import { withSelect, withDispatch } from '@gechiui/data';
import { compose } from '@gechiui/compose';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import styles from './styles.scss';
import NavigateUpSVG from './nav-up-icon';
import BlockSelectionButton from '../block-list/block-selection-button.native';
import { store as blockEditorStore } from '../../store';
const EASE_IN_DURATION = 250;
const EASE_OUT_DURATION = 80;
const TRANSLATION_RANGE = 8;

const FloatingToolbar = _ref => {
  let {
    selectedClientId,
    parentId,
    showFloatingToolbar,
    onNavigateUp,
    isRTL
  } = _ref;
  const opacity = useRef(new Animated.Value(0)).current; // Sustain old selection for proper block selection button rendering when exit animation is ongoing.

  const [previousSelection, setPreviousSelection] = useState({});
  useEffect(() => {
    Animated.timing(opacity, {
      toValue: showFloatingToolbar ? 1 : 0,
      duration: showFloatingToolbar ? EASE_IN_DURATION : EASE_OUT_DURATION,
      easing: Easing.ease,
      useNativeDriver: true
    }).start();
  }, [showFloatingToolbar]);
  useEffect(() => {
    if (showFloatingToolbar) setPreviousSelection({
      clientId: selectedClientId,
      parentId
    });
  }, [selectedClientId]);
  const translationRange = (Platform.OS === 'android' ? -1 : 1) * TRANSLATION_RANGE;
  const translation = opacity.interpolate({
    inputRange: [0, 1],
    outputRange: [translationRange, 0]
  });
  const animationStyle = {
    opacity,
    transform: [{
      translateY: translation
    }]
  };
  const {
    clientId: previousSelectedClientId,
    parentId: previousSelectedParentId
  } = previousSelection;
  const showPrevious = previousSelectedClientId && !showFloatingToolbar;
  const blockSelectionButtonClientId = showPrevious ? previousSelectedClientId : selectedClientId;
  const showNavUpButton = !!parentId || showPrevious && !!previousSelectedParentId;
  return !!opacity && createElement(Animated.View, {
    style: [styles.floatingToolbar, animationStyle],
    pointerEvents: showFloatingToolbar ? 'auto' : 'none'
  }, showNavUpButton && createElement(ToolbarGroup, {
    passedStyle: styles.toolbar
  }, createElement(ToolbarButton, {
    title: __('Navigate Up'),
    onClick: !showPrevious && (() => onNavigateUp(parentId)),
    icon: createElement(NavigateUpSVG, {
      isRTL: isRTL
    })
  }), createElement(View, {
    style: styles.pipe
  })), createElement(BlockSelectionButton, {
    clientId: blockSelectionButtonClientId
  }));
};

export default compose([withSelect(select => {
  const {
    getSelectedBlockClientId,
    getBlockHierarchyRootClientId,
    getBlockRootClientId,
    getBlockCount,
    getSettings
  } = select(blockEditorStore);
  const selectedClientId = getSelectedBlockClientId();
  if (!selectedClientId) return;
  const rootBlockId = getBlockHierarchyRootClientId(selectedClientId);
  return {
    selectedClientId,
    showFloatingToolbar: !!getBlockCount(rootBlockId),
    parentId: getBlockRootClientId(selectedClientId),
    isRTL: getSettings().isRTL
  };
}), withDispatch(dispatch => {
  const {
    selectBlock
  } = dispatch(blockEditorStore);
  return {
    onNavigateUp(clientId, initialPosition) {
      selectBlock(clientId, initialPosition);
    }

  };
})])(FloatingToolbar);
//# sourceMappingURL=index.native.js.map