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

🌈 React Native UI library

"use strict";

import { SuccessOutline } from '@fruits-chain/icons-react-native';
import isNil from 'lodash/isNil';
import React, { useContext, useEffect, useState } from 'react';
import { Dimensions, View } from 'react-native';
import { renderTextLikeJSX } from "../helpers/index.js";
import Theme from "../theme/index.js";
import { maxSteps, StepsContext } from "./context.js";
import { varCreator, styleCreator } from "./style.js";

/** Step */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Step = ({
  status,
  icon,
  index,
  title,
  theme
}) => {
  const {
    current,
    data
  } = useContext(StepsContext);
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  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__*/_jsx(View, {
        style: STYLES.dotActive,
        children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
        style: STYLES.dot
      });
      titleStyle = STYLES.titleText;
      break;
    default:
      break;
  }
  if (!isNil(icon)) {
    resIcon = icon;
  }
  useEffect(() => {
    setElementCount(data?.length || 0);
  }, [data?.length]);
  const isFirst = index === 0;
  const isLast = index === elementCount - 1;
  return /*#__PURE__*/_jsxs(View, {
    style: [STYLES.stepWrap, {
      width: stepWidth
    }],
    children: [!isFirst && /*#__PURE__*/_jsx(View, {
      style: [STYLES.line, current < index ? {
        backgroundColor: CV.steps_line_normal_color
      } : {},
      // eslint-disable-next-line react-native/no-inline-styles
      {
        left: 0,
        right: '50%'
      }]
    }), !isLast && /*#__PURE__*/_jsx(View, {
      style: [STYLES.line, current <= index ? {
        backgroundColor: CV.steps_line_normal_color
      } : {},
      // eslint-disable-next-line react-native/no-inline-styles
      {
        left: '50%',
        right: 0
      }]
    }), /*#__PURE__*/_jsx(View, {
      style: STYLES.stepIconWrap,
      children: resIcon
    }), renderTextLikeJSX(title, titleStyle)]
  });
};
export default Step;
//# sourceMappingURL=step.js.map