@fruits-chain/react-native-xiaoshu/lib/module/tabs/tabs.js

🌈 React Native UI library

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useMemo, memo, isValidElement } from 'react';
import { childrenToArray } from '../helpers';
import { useControllableValue } from '../hooks';
import TabBar from '../tab-bar';
import TabView from './tab-view';

const parseTabList = children => {
  return childrenToArray(children).map(node => {
    if ( /*#__PURE__*/isValidElement(node)) {
      const key = node.key !== undefined ? String(node.key) : undefined;
      return {
        key,
        ...node.props,
        node
      };
    }

    return null;
  }).filter(tab => tab);
};

const Tabs = _ref => {
  var _options$;

  let {
    children,
    tabBarStyle,
    tabBarHeight,
    tabBarBackgroundColor,
    ...restProps
  } = _ref;
  const [_options, _tabs] = useMemo(() => {
    const tabs = parseTabList(children);
    const options = tabs.map(t => ({
      value: t.key,
      label: t.tab
    }));
    return [options, tabs];
  }, [children]);
  const [value, onChange] = useControllableValue(restProps, {
    valuePropName: 'activeKey',
    defaultValuePropName: 'defaultActiveKey',
    defaultValue: (_options$ = _options[0]) === null || _options$ === void 0 ? void 0 : _options$.value
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, _extends({}, restProps, {
    style: tabBarStyle,
    height: tabBarHeight,
    backgroundColor: tabBarBackgroundColor,
    indicator: true,
    divider: false,
    safeAreaInsetBottom: false,
    keyboardShowNotRender: false,
    hidden: false,
    value: value,
    options: _options,
    onChange: onChange
  })), _tabs.map(t => {
    return /*#__PURE__*/React.createElement(TabView, {
      key: t.key,
      lazyRender: t.node.props.lazyRender,
      active: t.key === value
    }, t.node);
  }));
};

export default /*#__PURE__*/memo(Tabs);
//# sourceMappingURL=tabs.js.map