@fruits-chain/react-native-xiaoshu/lib/module/steps/step.js

🌈 React Native UI library

import isNil from 'lodash/isNil';
import React, { useContext, useEffect, useState } from 'react';
import { Dimensions, View } from 'react-native';
import { renderTextLikeJSX } from '../helpers';
import Icon from '../icon';
import Theme from '../theme';
import { varCreator, styleCreator } from './style';
import { maxSteps, StepsContext } from '.';
/** Step */

const Step = props => {
  const {
    status,
    icon,
    index,
    title
  } = props;
  const {
    current,
    data
  } = useContext(StepsContext);
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const STYLES = Theme.createStyle(CV, styleCreator, TOKENS);
  const windowWidth = Dimensions.get('window').width;
  const stepWidth = windowWidth / maxSteps;
  const [elementCount, setElementCount] = useState(0);
  let resIcon = null;
  let resStatus = status ? status : current >= index ? 'finish' : 'wait';
  let titleStyle = null;

  switch (resStatus) {
    case 'finish':
      resIcon = /*#__PURE__*/React.createElement(View, {
        style: STYLES.dotActive
      }, /*#__PURE__*/React.createElement(Icon.SuccessOutline, {
        color: CV.steps_background_color,
        size: CV.steps_icon_success_active_size
      })); // resIcon = <StepSuccess style={STYLES.dotActive} />

      titleStyle = STYLES.activeTitleText;
      break;

    case 'wait':
      resIcon = /*#__PURE__*/React.createElement(View, {
        style: STYLES.dot
      });
      titleStyle = STYLES.titleText;
      break;

    default:
      break;
  }

  if (!isNil(icon)) {
    resIcon = icon;
  }

  useEffect(() => {
    setElementCount(data === null || data === void 0 ? void 0 : data.length);
  }, [data === null || data === void 0 ? void 0 : data.length]);
  const isFirst = index === 0;
  const isLast = index === elementCount - 1;
  return /*#__PURE__*/React.createElement(View, {
    style: [STYLES.stepWrap, {
      width: stepWidth
    }]
  }, /*#__PURE__*/React.createElement(View, {
    style: [STYLES.line, // eslint-disable-next-line react-native/no-inline-styles
    {
      left: isFirst ? '50%' : 0,
      right: isLast ? '50%' : 0
    }]
  }), /*#__PURE__*/React.createElement(View, {
    style: STYLES.stepIconWrap
  }, resIcon), renderTextLikeJSX(title, titleStyle));
};

export default Step;
//# sourceMappingURL=step.js.map