@gechiui/block-editor/build-module/components/inserter/tabs.native.js

Generic block editor.

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

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

import { useCallback, useEffect, useMemo, useRef, useState } from '@gechiui/element';
import { __ } from '@gechiui/i18n';
import { SegmentedControl } from '@gechiui/components';
/**
 * Internal dependencies
 */

import BlockTypesTab from './block-types-tab';
import ReusableBlocksTab from './reusable-blocks-tab';
import styles from './style.scss';
const TAB_ANIMATION_DURATION = 250;

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

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

  const onWrapperLayout = useCallback(_ref2 => {
    let {
      nativeEvent
    } = _ref2;
    setWrapperWidth(nativeEvent.layout.width);
  }, [setWrapperWidth]);
  useEffect(() => {
    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
  } = useMemo(() => {
    const filteredTabs = InserterTabs.TABS.filter(_ref3 => {
      let {
        name
      } = _ref3;
      return showReusableBlocks || name !== 'reusable';
    });
    return {
      tabs: filteredTabs,
      tabKeys: [...filteredTabs.keys()]
    };
  }, [showReusableBlocks]);
  const translateX = useMemo(() => tabKeys.length > 1 ? tabAnimation.interpolate({
    inputRange: tabKeys,
    outputRange: tabKeys.map(key => key * -wrapperWidth)
  }) : tabAnimation, [tabAnimation, tabKeys, wrapperWidth]);
  const containerStyle = [styles['inserter-tabs__container'], {
    width: wrapperWidth * tabKeys.length,
    transform: [{
      translateX
    }]
  }];
  return createElement(View, {
    style: styles['inserter-tabs__wrapper'],
    onLayout: onWrapperLayout
  }, createElement(Animated.View, {
    style: containerStyle
  }, tabs.map((_ref4, index) => {
    let {
      component: TabComponent
    } = _ref4;
    return createElement(View, {
      key: `tab-${index}`
    }, createElement(TabComponent, {
      rootClientId: rootClientId,
      onSelect: onSelect,
      listProps: { ...listProps,
        onScroll
      }
    }));
  })));
}

function TabsControl(_ref5) {
  let {
    onChangeTab,
    showReusableBlocks
  } = _ref5;
  const segments = 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 = useCallback(selectedTab => {
    const tabTitles = InserterTabs.TABS.map(_ref8 => {
      let {
        title
      } = _ref8;
      return title;
    });
    onChangeTab(tabTitles.indexOf(selectedTab));
  }, [onChangeTab]);
  return segments.length > 1 ? createElement(SegmentedControl, {
    segments: segments,
    segmentHandler: segmentHandler
  }) : null;
}

InserterTabs.Control = TabsControl;
InserterTabs.TABS = [{
  name: 'blocks',
  title: __('区块'),
  component: BlockTypesTab
}, {
  name: 'reusable',
  title: __('可重用'),
  component: ReusableBlocksTab
}];
export default InserterTabs;
//# sourceMappingURL=tabs.native.js.map