@antmjs/vantui/es/tree-select/index.js

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 { get } from '../default-props';
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 _useState = useState(get().TreeSelect),
    _useState2 = _slicedToArray(_useState, 1),
    d = _useState2[0];
  var _d$props = _objectSpread(_objectSpread({}, d), props),
    _d$props$items = _d$props.items,
    items = _d$props$items === void 0 ? [] : _d$props$items,
    _d$props$selectedIcon = _d$props.selectedIcon,
    selectedIcon = _d$props$selectedIcon === void 0 ? 'success' : _d$props$selectedIcon,
    _d$props$height = _d$props.height,
    height = _d$props$height === void 0 ? 300 : _d$props$height,
    _d$props$mainActiveIn = _d$props.mainActiveIndex,
    mainActiveIndex = _d$props$mainActiveIn === void 0 ? 0 : _d$props$mainActiveIn,
    activeId = _d$props.activeId,
    _d$props$max = _d$props.max,
    max = _d$props$max === void 0 ? Infinity : _d$props$max,
    onClickItem = _d$props.onClickItem,
    onClickNav = _d$props.onClickNav,
    renderContent = _d$props.renderContent;
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    subItems = _useState4[0],
    setSubItems = _useState4[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;