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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TreeSelect = TreeSelect;
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _components = require("@tarojs/components");

var _react = require("react");

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _index = _interopRequireDefault(require("../sidebar-item/index"));

var _index2 = _interopRequireDefault(require("../sidebar/index"));

var _index3 = _interopRequireDefault(require("../icon/index"));

var computed = _interopRequireWildcard(require("./wxs"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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 = (0, _react.useState)([]),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      subItems = _useState2[0],
      setSubItems = _useState2[1];

  var _onSelectItem = (0, _react.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 = (0, _react.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]);

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

    setSubItems(children);
  }, [items, mainActiveIndex, setSubItems]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
    className: "van-tree-select",
    style: 'height: ' + utils.addUnit(height),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ScrollView, {
      scrollY: true,
      className: "van-tree-select__nav",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
        activeKey: mainActiveIndex,
        onChange: _onClickNav,
        className: "van-tree-select__nav__inner",
        children: items.map(function (item, index) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
            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__*/(0, _jsxRuntime.jsxs)(_components.ScrollView, {
      scrollY: true,
      className: "van-tree-select__content",
      children: [renderContent, subItems.map(function (item) {
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.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__*/(0, _jsxRuntime.jsx)(_index3.default, {
            name: selectedIcon,
            size: "16px",
            className: "van-tree-select__selected"
          })]
        }, item.id);
      })]
    })]
  });
}

var _default = TreeSelect;
exports.default = _default;