saagie-ui/src/react/formsy/formMultiSteps/FormMultiStepsFooter.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../core/atoms/icon/Icon';

const propTypes = {
  isWizard: PropTypes.bool,
  isFormLoading: PropTypes.bool,
  loadingMessage: PropTypes.node,
  submitLabel: PropTypes.string,

  stepsValidations: PropTypes.arrayOf(PropTypes.bool),
  page: PropTypes.number,
  lastAvailablePage: PropTypes.number,
  setPage: PropTypes.func,
  submitStep: PropTypes.func,
  submitForm: PropTypes.func,
  onCancel: PropTypes.func,
};

const defaultProps = {
  isWizard: false,
  isFormLoading: false,
  loadingMessage: '',
  submitLabel: 'Save',

  stepsValidations: [],
  page: 0,
  lastAvailablePage: 0,
  setPage: () => {},
  submitStep: () => {},
  submitForm: () => {},
  onCancel: () => {},
};

export const FormMultiStepsFooter = ({
  isWizard,
  isFormLoading,
  lastAvailablePage,
  loadingMessage,
  submitLabel,
  stepsValidations,
  setPage,
  submitStep,
  submitForm,
  page,
  onCancel,
}) => {
  const stepIsDisabled = (stepPage) => (
    isWizard
      && stepPage > lastAvailablePage
  );

  const stepIsValid = (isStepValid, stepPage) => (
    isStepValid
      || (isWizard && stepIsDisabled(stepPage))
      || (isWizard && page <= stepPage)
  );

  const isFirst = page <= 0;
  const isLast = page >= (stepsValidations.length - 1);
  const stepsNotValid = stepsValidations
    .filter((isStepValid, stepPage) => !stepIsValid(isStepValid, stepPage)).length;

  const isStepIndicatorVisible = (
    isWizard
      && !!stepsValidations
      && stepsValidations.length > 1
  );
  const isStandaloneErrorMessageVisible = !isWizard && !!stepsNotValid;
  const isLoadingMessageIsVisible = isFormLoading && loadingMessage;

  return (
    <div className="sui-g-grid as--auto as--no-wrap@sm as--middle as--center">
      <div className="sui-g-grid__item as--full as--fill@sm sui-h-text-center">
        {(
          isStepIndicatorVisible
            || isStandaloneErrorMessageVisible
            || isLoadingMessageIsVisible
        ) && (
          <div
            style={{
              minHeight: isWizard ? '4rem' : false,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {isLoadingMessageIsVisible
              ? (
                <>
                  {loadingMessage}
                </>
              )
              : (
                <>
                  {isStepIndicatorVisible && (
                    <div className="sui-a-step-indicator as--interactive">
                      {stepsValidations.map((isStepValid, stepPage) => {
                        const isValid = stepIsValid(isStepValid, stepPage);
                        const activeClass = stepPage === page ? 'as--active' : '';
                        const dangerClass = !isValid ? 'as--danger' : '';

                        return (
                          <button
                            key={stepPage} // eslint-disable-line react/no-array-index-key
                            type="button"
                            onClick={() => setPage(stepPage)}
                            className={`sui-a-step-indicator__step ${activeClass} ${dangerClass}`}
                            disabled={stepIsDisabled(stepPage)}
                          >
                            {!isValid ? <Icon name="fa-warning" /> : ''}
                          </button>
                        );
                      })}
                      {!!stepsNotValid && (
                        <div className="sui-a-step-indicator__message as--danger">
                          {stepsNotValid > 1 ? stepsNotValid : 'One'}
                          {' '}
                          step
                          {stepsNotValid > 1 && 's'}
                          {' '}
                          need your attention!
                        </div>
                      )}
                    </div>
                  )}
                  {isStandaloneErrorMessageVisible && (
                    <small className="sui-h-text-danger">
                      {stepsNotValid > 1 ? stepsNotValid : 'One'}
                      {' '}
                      step
                      {stepsNotValid > 1 && 's'}
                      {' '}
                      need your attention!
                    </small>
                  )}
                </>
              )}
          </div>
        )}
      </div>
      <div className="sui-g-grid__item as--first@sm">
        <button
          type="button"
          className="sui-a-button as--min-width-lg"
          onClick={() => (!isWizard || isFirst ? onCancel() : setPage(page - 1))}
        >
          {!isWizard || isFirst ? 'Cancel' : 'Back' }
        </button>
      </div>
      <div className="sui-g-grid__item as--last@sm">
        <button
          type="button"
          onClick={() => (!isWizard || isLast ? submitForm() : submitStep())}
          className={`sui-a-button as--min-width-lg as--primary ${isFormLoading ? ' as--loading' : ''} `}
        >
          {!isWizard || isLast ? submitLabel : 'Continue'}
        </button>
      </div>
    </div>
  );
};

FormMultiStepsFooter.propTypes = propTypes;
FormMultiStepsFooter.defaultProps = defaultProps;