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

🌈 React Native UI library

"use strict";

import React, { useMemo, memo, isValidElement } from 'react';
import Divider from "../divider/index.js";
import { childrenToArray } from "../helpers/index.js";
import { useControllableValue } from "../hooks/index.js";
import TabBar from "../tab-bar/index.js";
import TabView from "./tab-view.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const parseTabList = children => {
  return childrenToArray(children).map(node => {
    if (/*#__PURE__*/isValidElement(node)) {
      const key = node.key !== undefined ? String(node.key) : undefined;
      return {
        // @ts-ignore
        key,
        ...node.props,
        node
      };
    }
    return null;
  }).filter(tab => tab);
};
const Tabs = ({
  children,
  tabBarStyle,
  tabBarHeight,
  tabBarBackgroundColor,
  divider,
  dividerColor,
  ...restProps
}) => {
  const [_options, _tabs] = useMemo(() => {
    const tabs = parseTabList(children);
    const options = tabs.map(t => ({
      value: t.key,
      label: t.tab,
      badge: t.badge
    }));
    return [options, tabs];
  }, [children]);
  const [value, onChange] = useControllableValue(restProps, {
    valuePropName: 'activeKey',
    defaultValuePropName: 'defaultActiveKey',
    defaultValue: _options[0]?.value
  });
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(TabBar, {
      ...restProps,
      style: tabBarStyle,
      height: tabBarHeight,
      backgroundColor: tabBarBackgroundColor,
      indicator: true,
      divider: false,
      safeAreaInsetBottom: false,
      keyboardShowNotRender: false,
      hidden: false,
      value: value,
      options: _options,
      onChange: onChange
    }), divider ? /*#__PURE__*/_jsx(Divider, {
      color: dividerColor
    }) : null, _tabs.map(t => {
      return /*#__PURE__*/_jsx(TabView, {
        lazyRender: t.node.props.lazyRender,
        active: t.key === value,
        children: t.node
      }, t.key);
    })]
  });
};
export default /*#__PURE__*/memo(Tabs);
//# sourceMappingURL=tabs.js.map