@gechiui/block-editor/build/components/floating-toolbar/index.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 _data = require("@gechiui/data");

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

var _i18n = require("@gechiui/i18n");

var _styles = _interopRequireDefault(require("./styles.scss"));

var _navUpIcon = _interopRequireDefault(require("./nav-up-icon"));

var _blockSelectionButton = _interopRequireDefault(require("../block-list/block-selection-button.native"));

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
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 = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current; // Sustain old selection for proper block selection button rendering when exit animation is ongoing.

  const [previousSelection, setPreviousSelection] = (0, _element.useState)({});
  (0, _element.useEffect)(() => {
    _reactNative.Animated.timing(opacity, {
      toValue: showFloatingToolbar ? 1 : 0,
      duration: showFloatingToolbar ? EASE_IN_DURATION : EASE_OUT_DURATION,
      easing: _reactNative.Easing.ease,
      useNativeDriver: true
    }).start();
  }, [showFloatingToolbar]);
  (0, _element.useEffect)(() => {
    if (showFloatingToolbar) setPreviousSelection({
      clientId: selectedClientId,
      parentId
    });
  }, [selectedClientId]);
  const translationRange = (_reactNative.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 && (0, _element.createElement)(_reactNative.Animated.View, {
    style: [_styles.default.floatingToolbar, animationStyle],
    pointerEvents: showFloatingToolbar ? 'auto' : 'none'
  }, showNavUpButton && (0, _element.createElement)(_components.ToolbarGroup, {
    passedStyle: _styles.default.toolbar
  }, (0, _element.createElement)(_components.ToolbarButton, {
    title: (0, _i18n.__)('Navigate Up'),
    onClick: !showPrevious && (() => onNavigateUp(parentId)),
    icon: (0, _element.createElement)(_navUpIcon.default, {
      isRTL: isRTL
    })
  }), (0, _element.createElement)(_reactNative.View, {
    style: _styles.default.pipe
  })), (0, _element.createElement)(_blockSelectionButton.default, {
    clientId: blockSelectionButtonClientId
  }));
};

var _default = (0, _compose.compose)([(0, _data.withSelect)(select => {
  const {
    getSelectedBlockClientId,
    getBlockHierarchyRootClientId,
    getBlockRootClientId,
    getBlockCount,
    getSettings
  } = select(_store.store);
  const selectedClientId = getSelectedBlockClientId();
  if (!selectedClientId) return;
  const rootBlockId = getBlockHierarchyRootClientId(selectedClientId);
  return {
    selectedClientId,
    showFloatingToolbar: !!getBlockCount(rootBlockId),
    parentId: getBlockRootClientId(selectedClientId),
    isRTL: getSettings().isRTL
  };
}), (0, _data.withDispatch)(dispatch => {
  const {
    selectBlock
  } = dispatch(_store.store);
  return {
    onNavigateUp(clientId, initialPosition) {
      selectBlock(clientId, initialPosition);
    }

  };
})])(FloatingToolbar);

exports.default = _default;
//# sourceMappingURL=index.native.js.map