argous 1.2.162 → 1.2.163

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

@@ -46,8 +46,14 @@ export interface StepperTypeMap<P ={}, D extends React.ElementType = 'div'> {
     disableActions?: boolean;
     /**
      * Orientação do Stepper
+     * default: horizontal
+     * opções: horizontal ou vertical
      */
     orientation?: string;
+    /**
+     * Mostra o progresso percorrido
+     */
+    showProgress?: boolean;
   };
   defaultComponent: D;
   classKey: StepperClassKey;

package/dist/components/Stepper/Stepper.js

@@ -53,9 +53,10 @@ var ColorlibConnector = core_1.withStyles(function (theme) { return ({
     alternativeLabel: function (_a) {
         var orientation = _a.orientation;
         return orientation === 'vertical' ? {
-            top: -30,
+            top: -38,
             transform: 'rotate(90deg)',
-            left: 'calc(-50% + 50px)',
+            left: 'calc(-50% + 40px)',
+            right: 'calc(50% + 10px)',
             '&>span': {
                 minHeight: 3
             }
@@ -158,7 +159,12 @@ var stepperStyles = function (theme) {
         selectedCaption: {
             color: theme.palette.text.secondary
         },
-        stepper: (_a = {},
+        stepper: (_a = {
+                padding: function (_a) {
+                    var orientation = _a.orientation;
+                    return orientation === 'vertical' ? '0 0 0 136px' : '';
+                }
+            },
             _a[theme.breakpoints.down('sm')] = {
                 padding: 0
             },
@@ -184,8 +190,8 @@ var stepperStyles = function (theme) {
             alignItems: 'center',
             justifyContent: 'end',
             position: 'absolute',
-            top: 'calc(50% - 24px)',
-            left: 'calc(-50% - 83px)',
+            top: 17,
+            left: -148,
         },
         icon: {
             fontSize: theme.typography.fontSize * 2,
@@ -201,20 +207,26 @@ var stepperStyles = function (theme) {
                 margin: function (_a) {
                     var orientation = _a.orientation;
                     return orientation === 'vertical' ? '0 0 0 8px' : '';
+                },
+                '&>span:nth-child(1)': {
+                    margin: function (_a) {
+                        var orientation = _a.orientation;
+                        return orientation === 'vertical' ? 0 : '';
+                    }
                 }
-            }
+            },
         }
     });
 };
 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, _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 theme = core_1.useTheme();
     var maxSteps = steps.length;
     var maxStep = maxStepProps || steps.length - 1;
+    var mobile = core_1.useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
+    var ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
     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 && 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 },

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

@@ -46,8 +46,14 @@ export interface StepperTypeMap<P ={}, D extends React.ElementType = 'div'> {
     disableActions?: boolean;
     /**
      * Orientação do Stepper
+     * default: horizontal
+     * opções: horizontal ou vertical
      */
     orientation?: string;
+    /**
+     * Mostra o progresso percorrido
+     */
+    showProgress?: boolean;
   };
   defaultComponent: D;
   classKey: StepperClassKey;

package/lib/components/Stepper/Stepper.js

@@ -6,9 +6,10 @@ import { MdCheck, MdChevronLeft, MdChevronRight } from 'react-icons/md';
 
 const ColorlibConnector = withStyles(theme => ({
   alternativeLabel: ({ orientation }) => orientation === 'vertical' ? {
-    top: -30,
+    top: -38,
     transform: 'rotate(90deg)',
-    left: 'calc(-50% + 50px)',
+    left: 'calc(-50% + 40px)',
+    right: 'calc(50% + 10px)',
     '&>span': {
       minHeight: 3
     }
@@ -105,6 +106,7 @@ const stepperStyles = theme => ({
     color: theme.palette.text.secondary
   },
   stepper: {
+    padding: ({ orientation }) => orientation === 'vertical' ? '0 0 0 136px' : '',
     [theme.breakpoints.down('sm')]: {
       padding: 0
     },
@@ -124,8 +126,8 @@ const stepperStyles = theme => ({
     alignItems: 'center',
     justifyContent: 'end',
     position: 'absolute',
-    top: 'calc(50% - 24px)',
-    left: 'calc(-50% - 83px)',
+    top: 17,
+    left: -148,
   },
   icon: {
     fontSize: theme.typography.fontSize * 2,
@@ -138,8 +140,11 @@ const stepperStyles = theme => ({
   },
   stepLabel: {
     '&>span:nth-child(2)': {
-      margin: ({ orientation }) => orientation === 'vertical' ? '0 0 0 8px' : ''
-    }
+      margin: ({ orientation }) => orientation === 'vertical' ? '0 0 0 8px' : '',
+      '&>span:nth-child(1)': {
+        margin: ({ orientation }) => orientation === 'vertical' ? 0 : ''
+      }
+    },
   }
 });
 
@@ -166,17 +171,14 @@ const Stepper = ({
   orientation = 'horizontal',
   ...props
 }) => {
+  const theme = useTheme();
   const maxSteps = steps.length;
   const maxStep = maxStepProps || steps.length - 1;
-
+  const mobile = useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
+  const ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
   const [initialStep, setInitialStep] = useState(-1);
   useEffect(() => (activeStep > initialStep && showProgress) && setInitialStep(activeStep), [activeStep, initialStep, showProgress]);
 
-  const ambienteTeste = JSON.parse(window.localStorage.getItem('ambienteTeste'));
-  
-  const theme = useTheme();
-  const mobile = useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
-  
   return <Component {...props}>
     {mobile && orientation !== 'vertical' ? (
       <Paper square elevation={0}>

package/package.json

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