@craftercms/studio-ui/components/MobileStepper/MobileStepper.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
      }
    return t;
  };
import React from 'react';
import clsx from 'clsx';
import Paper from '@mui/material/Paper';
import { LinearProgress } from '@mui/material';
import { withStyles } from 'tss-react/mui';
import { RedColor } from '../../styles/theme';
import { capitalize } from '../../utils/string';
export const UnstyledMobileStepper = React.forwardRef(function MobileStepper(props, ref) {
  const {
      activeStep = 0,
      backButton,
      onDotClick,
      classes = {},
      className,
      LinearProgressProps,
      nextButton,
      position = 'bottom',
      steps,
      variant = 'dots'
    } = props,
    other = __rest(props, [
      'activeStep',
      'backButton',
      'onDotClick',
      'classes',
      'className',
      'LinearProgressProps',
      'nextButton',
      'position',
      'steps',
      'variant'
    ]);
  return React.createElement(
    Paper,
    Object.assign(
      {
        square: true,
        elevation: 0,
        className: clsx(classes.root, classes[`position${capitalize(position)}`], className),
        onClick: (e) => e.stopPropagation(),
        ref: ref
      },
      other
    ),
    backButton,
    variant === 'text' && React.createElement(React.Fragment, null, activeStep + 1, ' / ', steps),
    variant === 'dots' &&
      React.createElement(
        'div',
        { className: classes.dots },
        [...new Array(steps)].map((_, index) =>
          React.createElement('div', {
            key: index,
            onClick: onDotClick ? (e) => onDotClick(e, index) : null,
            className: clsx(classes.dot, {
              [classes.dotActive]: index === activeStep
            })
          })
        )
      ),
    variant === 'progress' &&
      React.createElement(
        LinearProgress,
        Object.assign(
          { className: classes.progress, variant: 'determinate', value: Math.ceil((activeStep / (steps - 1)) * 100) },
          LinearProgressProps
        )
      ),
    nextButton
  );
});
export const MobileStepper = withStyles(
  UnstyledMobileStepper,
  (theme) => ({
    /* Styles applied to the root element. */
    root: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      background: theme.palette.background.default,
      padding: 8,
      width: '100%'
    },
    /* Styles applied to the root element if `position="bottom"`. */
    positionBottom: {
      position: 'fixed',
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: theme.zIndex.mobileStepper
    },
    /* Styles applied to the root element if `position="top"`. */
    positionTop: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      zIndex: theme.zIndex.mobileStepper
    },
    /* Styles applied to the root element if `position="static"`. */
    positionStatic: {},
    /* Styles applied to the dots container if `variant="dots"`. */
    dots: {
      display: 'flex',
      flexDirection: 'row',
      margin: 'auto'
    },
    /* Styles applied to each dot if `variant="dots"`. */
    dot: {
      backgroundColor: theme.palette.action.disabled,
      borderRadius: '50%',
      width: 8,
      height: 8,
      margin: '0 2px'
    },
    /* Styles applied to a dot if `variant="dots"` and this is the active step. */
    dotActive: {
      backgroundColor: RedColor
    },
    /* Styles applied to the Linear Progress component if `variant="progress"`. */
    progress: {
      width: '50%'
    }
  }),
  { name: 'MuiMobileStepper' }
);
export default MobileStepper;