antd-mobile-taro-ui/es/components/tabs/tabs.js

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

import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import classNames from 'classnames';
import { withNativeProps } from 'antd-mobile/es/utils/native-props';
import { usePropsValue } from 'antd-mobile/es/utils/use-props-value';
import { mergeProps } from 'antd-mobile/es/utils/with-default-props';
import { ShouldRender } from 'antd-mobile/es/utils/should-render';
import { traverseReactNode } from 'antd-mobile/es/utils/traverse-react-node';
import { ScrollView, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { uuid } from '../../utils/uuid';
const classPrefix = `adm-tabs`;
export const Tab = () => {
  return null;
};
const defaultProps = {
  activeLineMode: 'auto',
  stretch: true
};
export const Tabs = p => {
  var _a;

  const props = mergeProps(defaultProps, p);
  let firstActiveKey = null;
  const panes = [];
  const ref = useRef(new Map());
  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);
    ref.current.set(child.key, index);
  });
  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 id = useMemo(() => uuid(16, undefined, false), []);
  const [scrollLeft, setScrollLeft] = useState(0);
  const [layoutWidth, setLayoutWidth] = useState(0);
  const [offsetLeft, setOffsetLeft] = useState([]);
  useEffect(() => {
    setTimeout(() => {
      Taro.createSelectorQuery().select(`#${id}  .${classPrefix}-header`).boundingClientRect(rect => {
        var _a;

        setLayoutWidth((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
      }).exec();
      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]);
        setScrollLeft(computeScrollLeft(activeKey));
      }).exec();
    }, 0);
  }, []);
  const computeScrollLeft = useCallback(key => {
    if (!ref.current) return 0;
    const index = ref.current.get(key);
    let left = 0;

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

    if (left < layoutWidth / 2) return 0;
    const count = offsetLeft.reduce((a, b) => a + b, 0);
    if (count - left < layoutWidth / 2) return left;
    return left - layoutWidth / 2 + offsetLeft[index] / 2;
  }, [offsetLeft, layoutWidth]);
  const handleAnimation = useCallback(key => {
    setScrollLeft(computeScrollLeft(key));
  }, [layoutWidth, offsetLeft]);
  const computeLineLeft = useCallback(key => {
    if (!ref.current) return 0;
    const index = ref.current.get(key);
    let left = 0;

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

    if (left < layoutWidth / 2) return left;
    const count = offsetLeft.reduce((a, b) => a + b, 0);
    if (count - left < layoutWidth / 2) return left;
    return left;
  }, [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`
  }, React.createElement(View, {
    className: `${classPrefix}-tab-line`,
    style: {
      margin: '0 auto',
      width: offsetLeft[ref.current.get(activeKey)],
      left: computeLineLeft(activeKey),
      transition: 'all 0.5s'
    }
  }, React.createElement(View, {
    className: `${classPrefix}-tab-line-content`,
    style: {
      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : offsetLeft[ref.current.get(activeKey)]
    }
  })), panes.map(pane => withNativeProps(pane.props, React.createElement(View, {
    key: pane.key,
    className: classNames(`${classPrefix}-tab-wrapper`, {
      [`${classPrefix}-tab-wrapper-stretch`]: props.stretch
    })
  }, React.createElement(View, {
    onClick: () => {
      const {
        key
      } = pane;
      if (pane.props.disabled) return;

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

      setActiveKey(key.toString());
      handleAnimation(key.toString());
    },
    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));
  })));
};