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

🌈 React Native UI library

"use strict";

import React, { memo } from 'react';
import { Text, View } from 'react-native';
import { useControllableValue } from "../hooks/index.js";
import Theme from "../theme/index.js";
import { varCreator, styleCreator } from "./style.js";
import { jsx as _jsx } from "react/jsx-runtime";
const NavTab = ({
  options,
  theme,
  ...restProps
}) => {
  const [, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  const [value, onChange] = useControllableValue(restProps);
  return /*#__PURE__*/_jsx(View, {
    style: STYLES.navWrapper,
    children: /*#__PURE__*/_jsx(View, {
      style: STYLES.nav,
      children: options?.map(item => {
        const isActive = item.value === value;
        return /*#__PURE__*/_jsx(View, {
          style: [STYLES.item, isActive ? STYLES.itemActive : null],
          children: /*#__PURE__*/_jsx(Text, {
            style: [STYLES.itemText, isActive ? STYLES.itemTextActive : null],
            onPress: () => {
              onChange(item.value);
            },
            suppressHighlighting: true,
            children: item.label
          })
        }, `${item.value}`);
      })
    })
  });
};
export default /*#__PURE__*/memo(NavTab);
//# sourceMappingURL=nav-tab.js.map