@td-design/react-native/lib/module/flow/index.js

react-native UI组件库

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { useSafeState } from '@td-design/rn-hooks';
import Box from '../box';
import helpers from '../helpers';
import Step from './step';
const {
  px
} = helpers;
const Flow = _ref => {
  let {
    steps = [],
    size = px(36),
    current = 0,
    status = 'process'
  } = _ref;
  /**当前容器的宽度，用于计算线的长度 */
  const [wrapWidth, setWrapWidth] = useSafeState(0);

  /** icon或者自定义组件的总长度，用于计算线的长度 */
  const iconWidth = steps.reduce((pre, cur) => {
    const iconWidth = (cur.size ?? size) + px(4);
    return pre + iconWidth;
  }, 0);

  /** 单条线的长度 */
  const tailWidth = (wrapWidth - iconWidth) / (steps.length - 1);
  const handleLayout = e => {
    setWrapWidth(e.nativeEvent.layout.width);
  };
  return /*#__PURE__*/React.createElement(Box, {
    flexDirection: 'row',
    onLayout: handleLayout
  }, steps.map((item, i) => {
    return /*#__PURE__*/React.createElement(Step, _extends({
      key: i,
      size: size,
      active: current > i,
      isCurrent: current === i + 1,
      isLast: i === steps.length - 1,
      status: current === i + 1 ? status : undefined
    }, Object.assign(item, {
      tailWidth: tailWidth
    })));
  }));
};
Flow.displayName = 'Flow';
export default Flow;
//# sourceMappingURL=index.js.map