antd-mobile-taro-ui/2x/es/components/capsule-tabs/capsule-tabs.js

以antd-mobile为设计标准，基于taro框架的微信小程序组件库

import React, { useState, useMemo, useEffect, useCallback } from 'react';
import classNames from 'classnames';
import { ScrollView, View } from '@tarojs/components';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
import { usePropsValue } from 'antd-mobile/es/utils/use-props-value';
import { ShouldRender } from 'antd-mobile/es/utils/should-render';
import { traverseReactNode } from 'antd-mobile/es/utils/traverse-react-node';
import Taro from '@tarojs/taro';
import { uuid } from '../../utils/uuid';
const classPrefix = `adm-capsule-tabs`;
export const CapsuleTab = () => {
  return null;
};
export const CapsuleTabs = props => {
  var _a;

  const id = useMemo(() => uuid(16, undefined, false), []);
  let firstActiveKey = null;
  const panes = [];
  traverseReactNode(props.children, (child, index) => {
    if (!React.isValidElement(child)) return;
    const {
      key
    } = child;
    if (typeof key !== 'string') return;

    if (index === 0) {
      firstActiveKey = key;
    }

    panes.push(child);
  });
  const [activeKey, setActiveKey] = usePropsValue({
    value: props.activeKey,
    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
    onChange: v => {
      var _a;

      if (v === null) return;
      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
    }
  });
  const [scrollLeft, setScrollLeft] = useState(0);
  const [layoutWidth, setLayoutWidth] = useState(0);
  const [offsetLeft, setOffsetLeft] = useState([]);
  const computeScrollLeft = useCallback(index => {
    let left = 0;

    for (let i = 0; i < offsetLeft.length; i++) {
      if (i >= index) break;
      left += offsetLeft[i];
    }

    return left;
  }, [offsetLeft]);
  useEffect(() => {
    setTimeout(() => {
      let width = 0;
      Taro.createSelectorQuery().select(`#${id}  .${classPrefix}-header`).boundingClientRect(rect => {
        var _a, _b;

        setLayoutWidth((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
        width = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
      }).exec();
      const map = new Map();

      for (let i = 0; i < panes.length; i++) {
        map.set(panes[i].key, i);
      }

      Taro.createSelectorQuery().selectAll(`#${id} .${classPrefix}-tab-wrapper`).boundingClientRect(rect => {
        const n = [];

        for (let i = 0; i < rect.length; i++) {
          n.push(rect[i].width);
        }

        setOffsetLeft([...n]);
        let left = 0;
        const m = map.get(activeKey);

        for (const [, index] of map) {
          if (index < m) {
            left += rect[index].width;
          }
        }

        setScrollLeft(left - width / 2 + rect[m].width / 2);
      }).exec();
    }, 0);
  }, []);
  const handleAnimation = useCallback(index => {
    const left = computeScrollLeft(index);
    setScrollLeft(left - layoutWidth / 2 + offsetLeft[index] / 2);
  }, [layoutWidth, offsetLeft]);
  return withNativeProps(props, React.createElement(View, {
    className: classPrefix,
    id: id
  }, React.createElement(View, {
    className: `${classPrefix}-header`
  }, React.createElement(ScrollView, {
    scrollX: true,
    scrollLeft: scrollLeft,
    scrollWithAnimation: true
  }, React.createElement(View, {
    className: `${classPrefix}-tab-list`
  }, panes.map((pane, index) => withNativeProps(pane.props, React.createElement(View, {
    key: pane.key,
    className: `${classPrefix}-tab-wrapper`
  }, React.createElement(View, {
    onClick: () => {
      const {
        key
      } = pane;
      if (pane.props.disabled) return;

      if (key === undefined || key === null) {
        return;
      }

      setActiveKey(key.toString());
      handleAnimation(index);
    },
    className: classNames(`${classPrefix}-tab`, {
      [`${classPrefix}-tab-active`]: pane.key === activeKey,
      [`${classPrefix}-tab-disabled`]: pane.props.disabled
    })
  }, pane.props.title))))))), panes.map(pane => {
    if (pane.props.children === undefined) {
      return null;
    }

    const active = pane.key === activeKey;
    return React.createElement(ShouldRender, {
      key: pane.key,
      active: active,
      forceRender: pane.props.forceRender,
      destroyOnClose: pane.props.destroyOnClose
    }, React.createElement(View, {
      className: `${classPrefix}-content`,
      style: {
        display: active ? 'block' : 'none'
      }
    }, pane.props.children));
  })));
};