@gechiui/block-editor/build/components/inserter/tabs.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 _i18n = require("@gechiui/i18n");

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

var _blockTypesTab = _interopRequireDefault(require("./block-types-tab"));

var _reusableBlocksTab = _interopRequireDefault(require("./reusable-blocks-tab"));

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const TAB_ANIMATION_DURATION = 250;

function InserterTabs(_ref) {
  let {
    listProps,
    onSelect,
    rootClientId,
    showReusableBlocks,
    tabIndex
  } = _ref;
  const tabAnimation = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
  const lastScrollEvents = (0, _element.useRef)([]).current;
  const [wrapperWidth, setWrapperWidth] = (0, _element.useState)(0);

  function onScroll(event) {
    lastScrollEvents[tabIndex] = event.nativeEvent;
    listProps.onScroll(event);
  }

  const onWrapperLayout = (0, _element.useCallback)(_ref2 => {
    let {
      nativeEvent
    } = _ref2;
    setWrapperWidth(nativeEvent.layout.width);
  }, [setWrapperWidth]);
  (0, _element.useEffect)(() => {
    _reactNative.Animated.timing(tabAnimation, {
      duration: TAB_ANIMATION_DURATION,
      toValue: tabIndex,
      useNativeDriver: true
    }).start(); // Notify upstream with the last scroll event of the current tab.


    const lastScrollEvent = lastScrollEvents[tabIndex];

    if (lastScrollEvent) {
      listProps.onScroll({
        nativeEvent: lastScrollEvent
      });
    }
  }, [tabIndex]);
  const {
    tabs,
    tabKeys
  } = (0, _element.useMemo)(() => {
    const filteredTabs = InserterTabs.TABS.filter(_ref3 => {
      let {
        name
      } = _ref3;
      return showReusableBlocks || name !== 'reusable';
    });
    return {
      tabs: filteredTabs,
      tabKeys: [...filteredTabs.keys()]
    };
  }, [showReusableBlocks]);
  const translateX = (0, _element.useMemo)(() => tabKeys.length > 1 ? tabAnimation.interpolate({
    inputRange: tabKeys,
    outputRange: tabKeys.map(key => key * -wrapperWidth)
  }) : tabAnimation, [tabAnimation, tabKeys, wrapperWidth]);
  const containerStyle = [_style.default['inserter-tabs__container'], {
    width: wrapperWidth * tabKeys.length,
    transform: [{
      translateX
    }]
  }];
  return (0, _element.createElement)(_reactNative.View, {
    style: _style.default['inserter-tabs__wrapper'],
    onLayout: onWrapperLayout
  }, (0, _element.createElement)(_reactNative.Animated.View, {
    style: containerStyle
  }, tabs.map((_ref4, index) => {
    let {
      component: TabComponent
    } = _ref4;
    return (0, _element.createElement)(_reactNative.View, {
      key: `tab-${index}`
    }, (0, _element.createElement)(TabComponent, {
      rootClientId: rootClientId,
      onSelect: onSelect,
      listProps: { ...listProps,
        onScroll
      }
    }));
  })));
}

function TabsControl(_ref5) {
  let {
    onChangeTab,
    showReusableBlocks
  } = _ref5;
  const segments = (0, _element.useMemo)(() => {
    const filteredTabs = InserterTabs.TABS.filter(_ref6 => {
      let {
        name
      } = _ref6;
      return showReusableBlocks || name !== 'reusable';
    });
    return filteredTabs.map(_ref7 => {
      let {
        title
      } = _ref7;
      return title;
    });
  }, [showReusableBlocks]);
  const segmentHandler = (0, _element.useCallback)(selectedTab => {
    const tabTitles = InserterTabs.TABS.map(_ref8 => {
      let {
        title
      } = _ref8;
      return title;
    });
    onChangeTab(tabTitles.indexOf(selectedTab));
  }, [onChangeTab]);
  return segments.length > 1 ? (0, _element.createElement)(_components.SegmentedControl, {
    segments: segments,
    segmentHandler: segmentHandler
  }) : null;
}

InserterTabs.Control = TabsControl;
InserterTabs.TABS = [{
  name: 'blocks',
  title: (0, _i18n.__)('区块'),
  component: _blockTypesTab.default
}, {
  name: 'reusable',
  title: (0, _i18n.__)('可重用'),
  component: _reusableBlocksTab.default
}];
var _default = InserterTabs;
exports.default = _default;
//# sourceMappingURL=tabs.native.js.map