react-transition-group#SwitchTransition JavaScript Examples

function Logo(props) {
  let title = settings.title
  let logo = settings.logo
  const renderImageTitle = () => {
    if (props.opened) {
      return (
        <div className="sidebar-logo-link" key={'a'}>
          <img className="sidebar-logo" src={logo} />
          <h1 className="sidebar-title">{title}</h1>
        </div>
      )
    } else {
      return (
        <div className="sidebar-logo-link" key={'b'}>
          <img className="sidebar-logo" src={logo} />
        </div>
      )
    }
  }
  return (
    <div className={`sidebar-logo-container ${props.open && 'collapse'}`}>
      <SwitchTransition>
        <CSSTransition classNames="sidebar-fade" key={props.opened} timeout={100}>
          {renderImageTitle()}
        </CSSTransition>
      </SwitchTransition>
    </div>
  )
}

Tabs = (props) => {
    const [active, setActive] = useState(props.defaultTab ? props.defaultTab : 0);
    const [activeClass, setActiveClass] = useState('rui-tabs-next');
    let className = {
        name: 'rui-tabs',
        pos: props.position && props.position !== 'default' ? props.position : '',
        className: props.className ? props.className : ''
    }

    let classNameHeader = {
        name: 'rui-tabs__header',
        color: props.color ? props.color : 'primary',
        size: props.size && props.size !== 'default' ? props.size : '',
        centered: props.centered ? 'center' : '',
        stretch: props.stretch ? 'stretch' : ''
    }

    const getIconColor = (isActive) => {
        switch (props.color) {
            case 'info':
                return isActive ? '#42a5f5' : '';
            case 'success':
                return isActive ? '#1aaa55' : '';
            case 'error':
                return isActive ? '#f44336' : '';
            case 'dark':
                return isActive ? '#4d4d4d' : '';
            default:
                return isActive ? '#1678c2' : '';
        }
    }

    return (
        <div className={strinfigyClassObject(className)}>
            <div className={strinfigyClassObject(classNameHeader)}>
                {props.tabs.map((item, index) => 
                    <div 
                        key={index}
                        onClick={() => {
                            setActive(index)
                            if (props.onChange) props.onChange(index)
                        }}
                        className={index === active ? 
                            `rui-tabs__tab active ${props.activeHighlightFill ? 'fill' : ''}` : 
                            `rui-tabs__tab ${props.activeHighlightFill ? 'fill' : ''}`}>
                                {props.tabIconKey ? 
                                    <Icon
                                        size={18}
                                        className="mr-5" 
                                        name={item[props.tabIconKey]} 
                                        color={getIconColor(index === active)}/> : ''}
                                {props.tabTitleKey ? item[props.tabTitleKey] : item}
                            </div>
                )}
            </div>
            <div className="rui-tabs__content" style={{ padding: props.contentPadding }}>
                <SwitchTransition mode="out-in">
                    <CSSTransition
                        key={active}
                        addEndListener={(node, done) => {
                            node.addEventListener("transitionend", done, false)}}
                        classNames={activeClass}>
                        {props.tabItems[active]}
                    </CSSTransition>
                </SwitchTransition>
            </div>
        </div>
    )
}

Router = ({ history, routerAnimation }) => {
  return (
    <ConnectedRouter history={history}>
      <Layout>
        <Route
          render={state => {
            const { location } = state
            return (
              <SwitchTransition>
                <CSSTransition
                  key={location.pathname}
                  appear
                  classNames={routerAnimation}
                  timeout={routerAnimation === 'none' ? 0 : 300}
                >
                  <Switch location={location}>
                    <Route exact path='/' render={() => <Redirect to='/applications' />} />
                    {routes.map(({ path, Component, exact }) => (
                      <Route
                        path={path}
                        key={path}
                        exact={exact}
                        render={() => {
                          return (
                            <div className={routerAnimation}>
                              <Suspense fallback={null}>
                                <Component />
                              </Suspense>
                            </div>
                          )
                        }}
                      />
                    ))}
                    <Redirect to='/auth/404' />
                  </Switch>
                </CSSTransition>
              </SwitchTransition>
            )
          }}
        />
      </Layout>
    </ConnectedRouter>
  )
}

Counter = ({
  count,
  size,
  kind,
  color,
  className,
  // Backward compatibility for props naming
  wrapperClassName,
  maxDigits,
  ariaLabeledBy,
  ariaLabel,
  id,
  prefix,
  onMouseDown,
  noAnimation
}) => {
  // Variables
  const overrideClassName = backwardCompatibilityForProperties([className, wrapperClassName]);

  // State
  const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);

  // Refs
  const ref = useRef(null);

  // Callbacks
  const setCountChangedAnimationActive = useCallback(() => {
    setCountChangeAnimationState(true);
  }, [setCountChangeAnimationState]);

  const setCountChangedAnimationNotActive = useCallback(() => {
    setCountChangeAnimationState(false);
  }, [setCountChangeAnimationState]);

  // Listeners
  useEventListener({
    eventName: "animationend",
    callback: setCountChangedAnimationNotActive,
    ref
  });

  // Custom hooks
  const isAfterFirstRender = useAfterFirstRender();

  // Effects
  useEffect(() => {
    if (!isAfterFirstRender.current) {
      setCountChangedAnimationActive();
    }
  }, [count, isAfterFirstRender, setCountChangedAnimationActive]);

  useEffect(() => {
    if (maxDigits <= 0) {
      console.error("Max digits must be a positive number");
    }
  }, [maxDigits]);

  // Memos
  const classNames = useMemo(() => {
    return cx(
      "monday-style-counter",
      `monday-style-counter--size-${getActualSize(size)}`,
      `monday-style-counter--kind-${kind}`,
      `monday-style-counter--color-${color}`,
      {
        "monday-style-counter--with-animation": countChangeAnimationState
      }
    );
  }, [size, kind, color, countChangeAnimationState]);

  const countText = count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : count;
  const counter = <span id={`counter-${id}`}>{prefix + countText}</span>;

  return (
    <span
      className={overrideClassName}
      aria-label={`${ariaLabel} ${countText}`}
      aria-labelledby={ariaLabeledBy}
      onMouseDown={onMouseDown}
    >
      <div className={classNames} aria-label={countText} ref={ref}>
        {noAnimation ? (
          counter
        ) : (
          <SwitchTransition mode="out-in">
            <CSSTransition
              classNames="monday-style-counter--fade"
              addEndListener={(node, done) => {
                node.addEventListener("transitionend", done, false);
              }}
              key={countText}
            >
              <span id={`counter-${id}`}>{prefix + countText}</span>
            </CSSTransition>
          </SwitchTransition>
        )}
      </div>
    </span>
  );
}

StepIndicator = ({
  stepComponentClassName,
  stepNumber,
  status,
  titleText,
  subtitleText,
  type,
  fulfilledStepIcon,
  fulfilledStepIconType,
  isFulfilledStepDisplayNumber,
  onClick,
  isFollowedByDivider,
  stepDividerClassName,
  isVertical
}) => {
  // Animations state
  const [statusChangeAnimationState, setStatusChangeAnimationState] = useState(false);

  // Refs
  const componentRef = useRef(null);
  const prevStatusRef = useRef(status);

  // Callbacks for modifying animation state
  const enableStatusChangeAnimation = useCallback(() => {
    setStatusChangeAnimationState(true);
  }, [setStatusChangeAnimationState]);

  const disableStatusChangeAnimation = useCallback(() => {
    setStatusChangeAnimationState(false);
  }, [setStatusChangeAnimationState]);

  const isStatusTransition = useCallback(() => prevStatusRef.current !== status, [prevStatusRef, status]);

  const handleClick = useCallback(() => {
    if (onClick) onClick(stepNumber);
  }, [onClick, stepNumber]);

  // Event listeners for removing animation.
  useEventListener({
    eventName: "animationend",
    callback: disableStatusChangeAnimation,
    ref: componentRef
  });

  useKeyEvent({
    keys: KEYS,
    callback: handleClick,
    ref: componentRef
  });

  // Effect - triggering animation when necessary.
  useEffect(() => {
    if (isStatusTransition()) {
      enableStatusChangeAnimation();
    }
  }, [status, isStatusTransition, enableStatusChangeAnimation]);

  // Effect - updating previous status ref value (for animation) after component update.
  useEffect(() => {
    prevStatusRef.current = status;
  }, [status]);

  const ariaLabel = useMemo(() => {
    return `Step ${stepNumber}: ${titleText} - ${subtitleText}, status: ${status}`;
  }, [status, titleText, stepNumber, subtitleText]);

  const baseClassNameWithType = `${baseClassName}--type-${type}`;
  const baseClassNameWithStatus = `${baseClassName}--status-${status}`;
  const baseClassNameWithAnimation = `${baseClassName}--with-animation`;

  const getClassNamesWithSuffix = suffix => {
    return [`${baseClassName}${suffix}`, `${baseClassNameWithType}${suffix}`, `${baseClassNameWithStatus}${suffix}`];
  };

  return (
    <Clickable
      tabIndex="-1"
      elementType="li"
      className={cx(...getClassNamesWithSuffix(""), stepComponentClassName, {
        [baseClassNameWithAnimation]: statusChangeAnimationState,
        clickable: onClick,
        [`${baseClassName}--text-placement-vertical`]: isVertical
      })}
      aria-label={ariaLabel}
      onClick={handleClick}
    >
      <div className={cx(...getClassNamesWithSuffix("__number-divider-container"))}>
        <div
          className={cx(...getClassNamesWithSuffix("__number-container"))}
          ref={componentRef}
          tabIndex="0"
          role="button"
        >
          <SwitchTransition mode="out-in">
            <CSSTransition
              classNames={`${baseClassName}--swap`}
              addEndListener={(node, done) => {
                node.addEventListener("transitionend", done, false);
              }}
              key={status}
            >
              <span className={cx(...getClassNamesWithSuffix("__number-container__text"))}>
                <StepCircleDisplay
                  fulfilledStepIcon={fulfilledStepIcon}
                  fulfilledStepIconType={fulfilledStepIconType}
                  isFulfilledStepDisplayNumber={isFulfilledStepDisplayNumber}
                  stepNumber={stepNumber}
                  status={status}
                />
              </span>
            </CSSTransition>
          </SwitchTransition>
        </div>
        {isFollowedByDivider && isVertical && <Divider classname={stepDividerClassName} />}
      </div>
      <div className={cx(...getClassNamesWithSuffix("__text-container"))}>
        <div className={cx(...getClassNamesWithSuffix("__text-container__title"))}>
          <HiddenText text={status} /> {/* for accessibility */}
          <span className={cx(...getClassNamesWithSuffix("__text-container__title__text"))}>{titleText}</span>
        </div>
        <span className={cx(...getClassNamesWithSuffix("__text-container__subtitle__text"))}>{subtitleText}</span>
      </div>
    </Clickable>
  );
}