argous 1.2.161 → 1.2.162

package/dist/components/Stepper/Stepper.d.ts

@@ -40,6 +40,14 @@ export interface StepperTypeMap<P ={}, D extends React.ElementType = 'div'> {
      * Array de booleans que mudam o passo para erro
      */
     errors?: boolean[];
+    /**
+     * Desabilita ações/botões
+     */
+    disableActions?: boolean;
+    /**
+     * Orientação do Stepper
+     */
+    orientation?: string;
   };
   defaultComponent: D;
   classKey: StepperClassKey;

package/dist/components/Stepper/Stepper.js

@@ -50,8 +50,18 @@ var react_1 = __importStar(require("react"));
 var lib_1 = require("react-icons/lib");
 var md_1 = require("react-icons/md");
 var ColorlibConnector = core_1.withStyles(function (theme) { return ({
-    alternativeLabel: {
-        top: 22,
+    alternativeLabel: function (_a) {
+        var orientation = _a.orientation;
+        return orientation === 'vertical' ? {
+            top: -30,
+            transform: 'rotate(90deg)',
+            left: 'calc(-50% + 50px)',
+            '&>span': {
+                minHeight: 3
+            }
+        } : {
+            top: 22,
+        };
     },
     active: {
         '& $line': {
@@ -72,7 +82,7 @@ var ColorlibConnector = core_1.withStyles(function (theme) { return ({
         backgroundPosition: 'right bottom',
         transition: 'background-position 500ms ease',
         borderRadius: 1,
-    },
+    }
 }); })(core_1.StepConnector);
 var ColorlibStepIcon = core_1.withStyles(function (theme) { return ({
     root: {
@@ -152,7 +162,31 @@ var stepperStyles = function (theme) {
             _a[theme.breakpoints.down('sm')] = {
                 padding: 0
             },
+            _a['&>div'] = {
+                display: 'flex',
+                padding: function (_a) {
+                    var orientation = _a.orientation;
+                    return orientation === 'vertical' ? '0 0 30px' : '';
+                },
+                '&>button': {
+                    '&>span:nth-child(1)': {
+                        flexDirection: function (_a) {
+                            var orientation = _a.orientation;
+                            return orientation === 'vertical' ? 'row' : 'column';
+                        }
+                    }
+                }
+            },
             _a),
+        subDescription: {
+            minWidth: 140,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'end',
+            position: 'absolute',
+            top: 'calc(50% - 24px)',
+            left: 'calc(-50% - 83px)',
+        },
         icon: {
             fontSize: theme.typography.fontSize * 2,
             '& path': {
@@ -161,34 +195,49 @@ var stepperStyles = function (theme) {
         },
         mobileDivider: {
             marginBottom: theme.spacing(2)
+        },
+        stepLabel: {
+            '&>span:nth-child(2)': {
+                margin: function (_a) {
+                    var orientation = _a.orientation;
+                    return orientation === 'vertical' ? '0 0 0 8px' : '';
+                }
+            }
         }
     });
 };
 var Stepper = function (_a) {
-    var children = _a.children, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c, _d = _a.onClick, onClick = _d === void 0 ? function (index) { return function (event) { return void (index, event); }; } : _d, _e = _a.onNext, onNext = _e === void 0 ? function (event) { return void (event); } : _e, _f = _a.onPrevious, onPrevious = _f === void 0 ? function (event) { return void (event); } : _f, _g = _a.onFinish, onFinish = _g === void 0 ? function (event) { return void (event); } : _g, maxStepProps = _a.maxStep, _h = _a.activeStep, activeStep = _h === void 0 ? 0 : _h, _j = _a.errors, errors = _j === void 0 ? [] : _j, _k = _a.component, Component = _k === void 0 ? 'div' : _k, _l = _a.backLabel, backLabel = _l === void 0 ? 'Voltar' : _l, _m = _a.nextLabel, nextLabel = _m === void 0 ? 'Avançar' : _m, _o = _a.finishLabel, finishLabel = _o === void 0 ? 'Finalizar' : _o, _p = _a.disableFinish, disableFinish = _p === void 0 ? false : _p, _q = _a.disableNext, disableNext = _q === void 0 ? false : _q, _r = _a.disablePrevious, disablePrevious = _r === void 0 ? false : _r, _s = _a.showProgress, showProgress = _s === void 0 ? false : _s, props = __rest(_a, ["children", "classes", "steps", "onClick", "onNext", "onPrevious", "onFinish", "maxStep", "activeStep", "errors", "component", "backLabel", "nextLabel", "finishLabel", "disableFinish", "disableNext", "disablePrevious", "showProgress"]);
+    var children = _a.children, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c, _d = _a.onClick, onClick = _d === void 0 ? function (index) { return function (event) { return void (index, event); }; } : _d, _e = _a.onNext, onNext = _e === void 0 ? function (event) { return void (event); } : _e, _f = _a.onPrevious, onPrevious = _f === void 0 ? function (event) { return void (event); } : _f, _g = _a.onFinish, onFinish = _g === void 0 ? function (event) { return void (event); } : _g, maxStepProps = _a.maxStep, _h = _a.activeStep, activeStep = _h === void 0 ? 0 : _h, _j = _a.errors, errors = _j === void 0 ? [] : _j, _k = _a.component, Component = _k === void 0 ? 'div' : _k, _l = _a.backLabel, backLabel = _l === void 0 ? 'Voltar' : _l, _m = _a.nextLabel, nextLabel = _m === void 0 ? 'Avançar' : _m, _o = _a.finishLabel, finishLabel = _o === void 0 ? 'Finalizar' : _o, _p = _a.disableFinish, disableFinish = _p === void 0 ? false : _p, _q = _a.disableNext, disableNext = _q === void 0 ? false : _q, _r = _a.disablePrevious, disablePrevious = _r === void 0 ? false : _r, _s = _a.showProgress, showProgress = _s === void 0 ? false : _s, _t = _a.disableActions, disableActions = _t === void 0 ? false : _t, _u = _a.orientation, orientation = _u === void 0 ? 'horizontal' : _u, props = __rest(_a, ["children", "classes", "steps", "onClick", "onNext", "onPrevious", "onFinish", "maxStep", "activeStep", "errors", "component", "backLabel", "nextLabel", "finishLabel", "disableFinish", "disableNext", "disablePrevious", "showProgress", "disableActions", "orientation"]);
     var maxSteps = steps.length;
     var maxStep = maxStepProps || steps.length - 1;
-    var _t = react_1.useState(-1), initialStep = _t[0], setInitialStep = _t[1];
+    var _v = react_1.useState(-1), initialStep = _v[0], setInitialStep = _v[1];
     react_1.useEffect(function () { return (activeStep > initialStep && showProgress) && setInitialStep(activeStep); }, [activeStep, initialStep, showProgress]);
     var ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
     var theme = core_1.useTheme();
     var mobile = core_1.useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
     return react_1.default.createElement(Component, __assign({}, props),
-        mobile ? (react_1.default.createElement(core_1.Paper, { square: true, elevation: 0 },
+        mobile && orientation !== 'vertical' ? (react_1.default.createElement(core_1.Paper, { square: true, elevation: 0 },
             react_1.default.createElement(core_1.ListItem, { dense: true, className: classes.header },
                 react_1.default.createElement(core_1.ListItemIcon, { className: classes.icon }, steps[activeStep][0]),
                 react_1.default.createElement(core_1.ListItemText, { primary: steps[activeStep][1], secondary: steps[activeStep][2] })),
-            react_1.default.createElement(core_1.Divider, { className: classes.mobileDivider }))) : (react_1.default.createElement(core_1.Stepper, { className: classes.stepper, alternativeLabel: true, activeStep: activeStep, connector: react_1.default.createElement(ColorlibConnector, null) }, steps.map(function (_a, i) {
-            var _b;
-            var icon = _a[0], label = _a[1], description = _a[2];
+            react_1.default.createElement(core_1.Divider, { className: classes.mobileDivider }))) : (react_1.default.createElement(core_1.Stepper, { className: classes.stepper, alternativeLabel: true, activeStep: activeStep, orientation: orientation, connector: react_1.default.createElement(ColorlibConnector, null) }, steps.map(function (_a, i) {
+            var _b, _c, _d;
+            var icon = _a[0], label = _a[1], description = _a[2], subDescription = _a[3];
             return (react_1.default.createElement(core_1.Step, { key: label },
-                react_1.default.createElement(core_1.StepButton, { disabled: i > maxStep, onClick: onClick(i), optional: react_1.default.createElement(core_1.Typography, { variant: 'caption', className: clsx_1.default(classes.caption, (_b = {}, _b[classes.selectedCaption] = activeStep >= i, _b)) }, description) },
-                    react_1.default.createElement(core_1.StepLabel, { disabled: i > maxStep, error: errors[i], StepIconComponent: ColorlibStepIcon, StepIconProps: { icon: icon, error: errors[i], initial: initialStep >= i, ambienteTeste: ambienteTeste } }, label))));
+                orientation === 'vertical' && subDescription &&
+                    react_1.default.createElement("div", { className: classes.subDescription },
+                        react_1.default.createElement(core_1.Typography, { variant: 'caption', className: clsx_1.default(classes.caption, (_b = {}, _b[classes.selectedCaption] = activeStep >= i, _b)) }, subDescription)),
+                react_1.default.createElement(core_1.StepButton, { onClick: onClick(i), disabled: i > maxStep, optional: react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(core_1.Typography, { variant: 'caption', className: clsx_1.default(classes.caption, (_c = {}, _c[classes.selectedCaption] = activeStep >= i, _c)) }, description),
+                        orientation !== 'vertical' && subDescription &&
+                            react_1.default.createElement(core_1.Typography, { variant: 'caption', className: clsx_1.default(classes.caption, (_d = {}, _d[classes.selectedCaption] = activeStep >= i, _d)) }, subDescription)) },
+                    react_1.default.createElement(core_1.StepLabel, { className: classes.stepLabel, disabled: i > maxStep, error: errors[i], StepIconComponent: ColorlibStepIcon, StepIconProps: { icon: icon, error: errors[i], initial: initialStep >= i, ambienteTeste: ambienteTeste } }, label))));
         }))),
-        react_1.default.createElement(core_1.Box, { padding: mobile ? 0 : 4, pt: 1, pb: 0 }, children),
-        mobile ? (react_1.default.createElement(core_1.MobileStepper, { steps: maxSteps, position: 'bottom', variant: 'dots', activeStep: activeStep, backButton: react_1.default.createElement(core_1.Button, { startIcon: react_1.default.createElement(md_1.MdChevronLeft, null), onClick: onPrevious, disabled: activeStep === 0 }, backLabel), nextButton: react_1.default.createElement(core_1.Button, { variant: 'contained', color: 'primary', endIcon: activeStep === maxSteps - 1 ? react_1.default.createElement(md_1.MdCheck, null) : react_1.default.createElement(md_1.MdChevronRight, null), onClick: activeStep === steps.length - 1 ? onFinish : onNext }, activeStep === steps.length - 1 ? finishLabel : nextLabel) })) : (react_1.default.createElement(core_1.DialogActions, null,
+        children &&
+            react_1.default.createElement(core_1.Box, { padding: mobile ? 0 : 4, pt: 1, pb: 0 }, children),
+        mobile && orientation !== 'vertical' ? (react_1.default.createElement(core_1.MobileStepper, { steps: maxSteps, position: 'bottom', variant: 'dots', activeStep: activeStep, backButton: react_1.default.createElement(core_1.Button, { startIcon: react_1.default.createElement(md_1.MdChevronLeft, null), onClick: onPrevious, disabled: activeStep === 0 }, backLabel), nextButton: react_1.default.createElement(core_1.Button, { variant: 'contained', color: 'primary', endIcon: activeStep === maxSteps - 1 ? react_1.default.createElement(md_1.MdCheck, null) : react_1.default.createElement(md_1.MdChevronRight, null), onClick: activeStep === steps.length - 1 ? onFinish : onNext }, activeStep === steps.length - 1 ? finishLabel : nextLabel) })) : !disableActions ? (react_1.default.createElement(core_1.DialogActions, null,
             react_1.default.createElement(core_1.Box, { padding: mobile ? 0 : 4, paddingTop: 1, paddingBottom: 1 },
                 react_1.default.createElement(core_1.Button, { disabled: activeStep === 0 || disablePrevious, onClick: onPrevious }, backLabel),
-                react_1.default.createElement(core_1.Button, { variant: 'contained', color: 'primary', onClick: activeStep === steps.length - 1 ? onFinish : onNext, disabled: activeStep === steps.length - 1 ? disableFinish : disableNext }, activeStep === steps.length - 1 ? finishLabel : nextLabel)))));
+                react_1.default.createElement(core_1.Button, { variant: 'contained', color: 'primary', onClick: activeStep === steps.length - 1 ? onFinish : onNext, disabled: activeStep === steps.length - 1 ? disableFinish : disableNext }, activeStep === steps.length - 1 ? finishLabel : nextLabel)))) : null);
 };
 exports.default = core_1.withStyles(stepperStyles, { name: 'ArgousStepper' })(Stepper);

package/lib/components/Stepper/Stepper.d.ts

@@ -40,6 +40,14 @@ export interface StepperTypeMap<P ={}, D extends React.ElementType = 'div'> {
      * Array de booleans que mudam o passo para erro
      */
     errors?: boolean[];
+    /**
+     * Desabilita ações/botões
+     */
+    disableActions?: boolean;
+    /**
+     * Orientação do Stepper
+     */
+    orientation?: string;
   };
   defaultComponent: D;
   classKey: StepperClassKey;

package/lib/components/Stepper/Stepper.js

@@ -5,7 +5,14 @@ import { IconContext } from 'react-icons/lib';
 import { MdCheck, MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
 const ColorlibConnector = withStyles(theme => ({
-  alternativeLabel: {
+  alternativeLabel: ({ orientation }) => orientation === 'vertical' ? {
+    top: -30,
+    transform: 'rotate(90deg)',
+    left: 'calc(-50% + 50px)',
+    '&>span': {
+      minHeight: 3
+    }
+  } : {
     top: 22,
   },
   active: {
@@ -27,7 +34,7 @@ const ColorlibConnector = withStyles(theme => ({
     backgroundPosition: 'right bottom',
     transition: 'background-position 500ms ease',
     borderRadius: 1,
-  },
+  }
 }))(StepConnector);
 
 const ColorlibStepIcon = withStyles(theme => ({
@@ -100,8 +107,26 @@ const stepperStyles = theme => ({
   stepper: {
     [theme.breakpoints.down('sm')]: {
       padding: 0
+    },
+    '&>div': {
+      display: 'flex',
+      padding: ({ orientation }) => orientation === 'vertical' ? '0 0 30px' : '',
+      '&>button': {
+        '&>span:nth-child(1)': {
+          flexDirection: ({ orientation }) => orientation === 'vertical' ? 'row' : 'column'
+        }
+      }
     }
   },
+  subDescription: {
+    minWidth: 140,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'end',
+    position: 'absolute',
+    top: 'calc(50% - 24px)',
+    left: 'calc(-50% - 83px)',
+  },
   icon: {
     fontSize: theme.typography.fontSize * 2,
     '& path': {
@@ -110,6 +135,11 @@ const stepperStyles = theme => ({
   },
   mobileDivider: {
     marginBottom: theme.spacing(2)
+  },
+  stepLabel: {
+    '&>span:nth-child(2)': {
+      margin: ({ orientation }) => orientation === 'vertical' ? '0 0 0 8px' : ''
+    }
   }
 });
 
@@ -132,6 +162,8 @@ const Stepper = ({
   disableNext = false,
   disablePrevious = false,
   showProgress = false,
+  disableActions = false,
+  orientation = 'horizontal',
   ...props
 }) => {
   const maxSteps = steps.length;
@@ -146,7 +178,7 @@ const Stepper = ({
   const mobile = useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
   
   return <Component {...props}>
-    {mobile ? (
+    {mobile && orientation !== 'vertical' ? (
       <Paper square elevation={0}>
         <ListItem dense className={classes.header}>
           <ListItemIcon className={classes.icon}>{steps[activeStep][0]}</ListItemIcon>
@@ -159,20 +191,46 @@ const Stepper = ({
         className={classes.stepper} 
         alternativeLabel 
         activeStep={activeStep} 
-        connector={<ColorlibConnector />}>
-        {steps.map(([icon, label, description], i) => (
+        orientation={orientation}
+        connector={<ColorlibConnector />}
+      >
+        {steps.map(([icon, label, description, subDescription], i) => (
           <Step key={label}>
-            <StepButton disabled={i > maxStep} onClick={onClick(i)} optional={
-              <Typography 
-                variant='caption' 
-                className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
-                {description}
-              </Typography>}>
+            {orientation === 'vertical' && subDescription &&
+              <div className={classes.subDescription}>
+                <Typography 
+                  variant='caption' 
+                  className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
+                  {subDescription}
+                </Typography>
+              </div>
+            }
+            <StepButton 
+              onClick={onClick(i)}
+              disabled={i > maxStep} 
+              optional={
+                <>
+                  <Typography 
+                    variant='caption' 
+                    className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
+                    {description}
+                  </Typography>
+                  {orientation !== 'vertical' && subDescription && 
+                    <Typography 
+                      variant='caption'
+                      className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
+                      {subDescription}
+                    </Typography>
+                  }
+                </>
+              }
+            >
               <StepLabel 
+                className={classes.stepLabel}
                 disabled={i > maxStep} 
                 error={errors[i]} 
                 StepIconComponent={ColorlibStepIcon}
-                StepIconProps={{ icon, error: errors[i], initial: initialStep >= i, ambienteTeste }} 
+                StepIconProps={{ icon, error: errors[i], initial: initialStep >= i, ambienteTeste }}
               >
                 {label}
               </StepLabel>
@@ -182,11 +240,13 @@ const Stepper = ({
       </MuiStepper>
     )}
 
-    <Box padding={mobile ? 0 : 4} pt={1} pb={0}>
-      {children}
-    </Box>
+    {children && 
+      <Box padding={mobile ? 0 : 4} pt={1} pb={0}>
+        {children}
+      </Box>
+    }
 
-    {mobile ? (
+    {mobile && orientation !== 'vertical' ? (
       <MobileStepper
         steps={maxSteps}
         position='bottom'
@@ -210,7 +270,7 @@ const Stepper = ({
           </Button>
         }
       />
-    ) : (
+    ) : !disableActions ? (
       <DialogActions>
         <Box padding={mobile ? 0 : 4} paddingTop={1} paddingBottom={1}>
           <Button 
@@ -228,7 +288,7 @@ const Stepper = ({
           </Button>
         </Box>
       </DialogActions>
-    ) }
+    ) : null }
   </Component>;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.161",
+  "version": "1.2.162",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",