vantui-edit/es/tree-select/index.js

一套适用于Taro3及React的vantui组件库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { View, ScrollView } from '@tarojs/components';
import { useCallback, useState, useEffect } from 'react';
import * as utils from '../wxs/utils';
import VanSidebarItem from '../sidebar-item/index';
import VanSidebar from '../sidebar/index';
import VanIcon from '../icon/index';
import * as computed from './wxs';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function TreeSelect(props) {
  var _props$items = props.items,
      items = _props$items === void 0 ? [] : _props$items,
      _props$selectedIcon = props.selectedIcon,
      selectedIcon = _props$selectedIcon === void 0 ? 'success' : _props$selectedIcon,
      _props$height = props.height,
      height = _props$height === void 0 ? 300 : _props$height,
      _props$mainActiveInde = props.mainActiveIndex,
      mainActiveIndex = _props$mainActiveInde === void 0 ? 0 : _props$mainActiveInde,
      activeId = props.activeId,
      _props$max = props.max,
      max = _props$max === void 0 ? Infinity : _props$max,
      onClickItem = props.onClickItem,
      onClickNav = props.onClickNav,
      renderContent = props.renderContent;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      subItems = _useState2[0],
      setSubItems = _useState2[1];

  var _onSelectItem = useCallback(function (event, item) {
    var isArray = Array.isArray(activeId); // 判断有没有超出右侧选择的最大数

    var isOverMax = isArray && activeId.length >= max; // 判断该项有没有被选中, 如果有被选中，则忽视是否超出的条件

    var isSelected = isArray ? activeId.includes(item.id) : activeId === item.id;

    if (!item.disabled && (!isOverMax || isSelected)) {
      Object.defineProperty(event, 'detail', {
        value: item
      });
      onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(event);
    }
  }, [activeId, max, onClickItem]);

  var _onClickNav = useCallback(function (_ref) {
    var index = _ref.detail;
    var item = items[index];

    if (!(item !== null && item !== void 0 && item.disabled)) {
      onClickNav === null || onClickNav === void 0 ? void 0 : onClickNav({
        detail: {
          index: index
        }
      });
    }
  }, [onClickNav, items]);

  useEffect(function () {
    var _ref2 = items[mainActiveIndex] || {},
        _ref2$children = _ref2.children,
        children = _ref2$children === void 0 ? [] : _ref2$children;

    setSubItems(children);
  }, [items, mainActiveIndex, setSubItems]);
  return /*#__PURE__*/_jsxs(View, {
    className: "van-tree-select",
    style: 'height: ' + utils.addUnit(height),
    children: [/*#__PURE__*/_jsx(ScrollView, {
      scrollY: true,
      className: "van-tree-select__nav",
      children: /*#__PURE__*/_jsx(VanSidebar, {
        activeKey: mainActiveIndex,
        onChange: _onClickNav,
        className: "van-tree-select__nav__inner",
        children: items.map(function (item, index) {
          return /*#__PURE__*/_jsx(VanSidebarItem, {
            className: "main-item-class" // activeClass="main-active-class"
            // disabledClass="main-disabled-class"
            ,
            badge: item.badge,
            dot: item.dot,
            title: item.text,
            disabled: item.disabled
          }, index);
        })
      })
    }), /*#__PURE__*/_jsxs(ScrollView, {
      scrollY: true,
      className: "van-tree-select__content",
      children: [renderContent, subItems.map(function (item) {
        return /*#__PURE__*/_jsxs(View, {
          className: 'van-ellipsis content-item-class ' + utils.bem('tree-select__item', {
            active: computed.isActive(activeId, item.id),
            disabled: item.disabled
          }) + ' ' + (computed.isActive(activeId, item.id) ? 'content-active-class' : '') + ' ' + (item.disabled ? 'content-disabled-class' : ''),
          "data-item": item,
          onClick: function onClick(e) {
            _onSelectItem(e, item);
          },
          children: [item.text, computed.isActive(activeId, item.id) && /*#__PURE__*/_jsx(VanIcon, {
            name: selectedIcon,
            size: "16px",
            className: "van-tree-select__selected"
          })]
        }, item.id);
      })]
    })]
  });
}
export default TreeSelect;