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

🌈 React Native UI library

"use strict";

import isNil from 'lodash/isNil';
import isUndefined from 'lodash/isUndefined';
import React, { memo } from 'react';
import { View, Text, ScrollView, TouchableHighlight } from 'react-native';
import Badge from "../badge/index.js";
import { useControllableValue } from "../hooks/index.js";
import Loading from "../loading/index.js";
import Locale from "../locale/index.js";
import Result from "../result/index.js";
import ResultIconEmpty from "../result/icons/result-icon-empty.js";
import Theme from "../theme/index.js";
import { varCreator, styleCreator } from "./style.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Sidebar = ({
  theme,
  width = 88,
  loading,
  options,
  empty,
  style,
  ...restProps
}) => {
  const [value, onChange] = useControllableValue(restProps, {
    valuePropName: 'activeValue',
    defaultValuePropName: 'defaultActiveValue'
  });
  const locale = Locale.useLocale().Sidebar;
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  const isEmpty = loading || options.length === 0;
  const curIndex = options.findIndex(o => o.value === value);
  return /*#__PURE__*/_jsx(View, {
    ...restProps,
    style: [STYLES.sidebar, isEmpty ? null : STYLES.sidebar_active, {
      width
    }, style],
    children: /*#__PURE__*/_jsxs(ScrollView, {
      bounces: false,
      contentContainerStyle: isEmpty ? STYLES.scroll_view_empty : null,
      children: [loading ? /*#__PURE__*/_jsx(Loading, {
        vertical: true,
        children: locale.labelLoading
      }) : null, !loading && options.length === 0 ? isUndefined(empty) ? /*#__PURE__*/_jsx(Result, {
        status: "warning",
        subtitle: locale.labelNoData,
        renderIcon: () => {
          return /*#__PURE__*/_jsx(ResultIconEmpty, {
            width: 60,
            height: 60
          });
        }
      }) : empty : null, !loading && options.length > 0 ? /*#__PURE__*/_jsx(View, {
        style: STYLES.list,
        children: options.map((item, index) => {
          const isActive = value === item.value;
          const isPrev = index + 1 === curIndex;
          const isNext = index - 1 === curIndex;
          const textJSX = /*#__PURE__*/_jsx(Text, {
            style: [STYLES.item_text, isActive ? STYLES.item_text_active : STYLES.item_text_inactive, item.disabled ? STYLES.item_text_disabled : null],
            children: item.label
          });
          return /*#__PURE__*/_jsx(TouchableHighlight, {
            underlayColor: CV.sidebar_item_underlay_color,
            onPress: () => {
              onChange(item.value);
            },
            disabled: item.disabled,
            style: [STYLES.item, isActive ? null : STYLES.item_inactive, isPrev ? STYLES.item_prev : null, isNext ? STYLES.item_next : null],
            children: /*#__PURE__*/_jsxs(_Fragment, {
              children: [isActive ? /*#__PURE__*/_jsx(View, {
                style: STYLES.item_bar
              }) : null, /*#__PURE__*/_jsx(View, {
                style: STYLES.item_inner,
                children: !isNil(item.badge) ? /*#__PURE__*/_jsx(Badge, {
                  ...item.badge,
                  children: textJSX
                }) : textJSX
              })]
            })
          }, item.value);
        })
      }) : null]
    })
  });
};
export default /*#__PURE__*/memo(Sidebar);
//# sourceMappingURL=sidebar.js.map