linear-react-components-ui 1.1.20-beta.3 → 1.1.20-beta.5

package/lib/assets/styles/wizard.scss

@@ -7,8 +7,10 @@
       flex-direction: column;
       .wizard-progresbar {
         width: 100%;
-        display: flex;
-        align-items: center;
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        justify-content: space-between;
         padding: 20px;
         margin-bottom: 20px;
         border-bottom: 2px solid $component-border-color;
@@ -22,12 +24,14 @@
           flex-direction: column;
           position: relative;
           flex: 1;
+          text-align: center;
           &:first-child {
             .step {
               align-self: flex-start;
             }
             .step-title {
               align-self: flex-start;
+              text-align: left;
             }
             &:before {
               right: auto;
@@ -40,6 +44,7 @@
             }
             .step-title {
               align-self: flex-end;
+              text-align: right;
             }
             &:after {
               left: auto;
@@ -52,7 +57,7 @@
             height: 2px;
             background-color: $component-border-color;
             top: 18px;
-            width: calc(100% - 27px);
+            width: calc(100% - 25px);
             transition: all 0.2s ease-in-out;
           }
           &::after {
@@ -109,8 +114,6 @@
           > .step-title {
             max-width: 150px;
             overflow: hidden;
-            text-overflow: ellipsis;
-            text-wrap: nowrap;
             margin-top: 6px;
             font-weight: 500;
             color: $font-color-soft;

package/lib/dialog/types.d.ts

@@ -75,7 +75,7 @@ interface WizardComponentProps extends Omit<IFormProps, 'content'> {
     showProgressbar?: boolean;
     title?: string;
     handlerClose?: () => void;
-    controls: Omit<UseWizardReturn, 'controls'>;
+    controls: WizardControls;
 }
 interface WizardStepComponentProps {
     children: React.ReactNode;
@@ -84,6 +84,7 @@ interface WizardStepComponentProps {
     customStyle?: CSSProperties;
 }
 interface WizardControls extends Omit<UseWizardReturn, 'controls'> {
+    setTotalSteps: Dispatch<React.SetStateAction<number>>;
 }
 interface UseWizardReturn {
     changeStep: (nextStep: number) => void;
@@ -91,11 +92,8 @@ interface UseWizardReturn {
     hasNextStep: boolean;
     previousStep: () => void;
     hasPreviousStep: boolean;
-    steps: ReactNode[];
-    currentStep: ReactElement;
-    currentStepIndex: number;
+    currentStep: number;
     totalSteps: number;
-    setSteps: Dispatch<React.SetStateAction<ReactNode[]>>;
     controls: WizardControls;
 }
 

package/lib/dialog/wizard/index.js

@@ -43,22 +43,32 @@ function Wizard(_ref) {
     } = _ref,
     dialogProps = _objectWithoutProperties(_ref, _excluded);
   const {
-    setSteps,
-    currentStep
+    currentStep,
+    setTotalSteps
   } = controls;
+  const steps = _react.default.Children.toArray(children);
+  const stepsTitle = steps.map((step, index) => {
+    return {
+      title: String(step.props.title),
+      number: index + 1,
+      completed: index < currentStep - 1 && index !== currentStep
+    };
+  });
+  const currentStepElement = steps[currentStep - 1];
   if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
-  const propSteps = _react.default.Children.toArray(children);
   (0, _react.useEffect)(() => {
-    setSteps(propSteps);
-  }, []);
+    setTotalSteps(steps.length);
+  }, [steps.length]);
   return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
     value: controls
   }, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
     className: "wizard-dialog",
     wrapperClassName: "wizard-wrapper",
     contentClassName: "wizard-content"
-  }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, null), /*#__PURE__*/_react.default.createElement("div", {
+  }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
+    stepsTitle: stepsTitle
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "wizard-body"
-  }, currentStep)));
+  }, currentStepElement)));
 }
 var _default = exports.default = Wizard;

package/lib/dialog/wizard/progressbar.d.ts

@@ -1,7 +1,12 @@
 import { CSSProperties } from 'react';
 
-declare function Progressbar({ customClass, customStyle }: Readonly<{
+declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
     customClass?: string;
+    stepsTitle: {
+        title: string;
+        number: number;
+        completed: boolean;
+    }[];
     customStyle?: CSSProperties;
 }>): JSX.Element;
 

package/lib/dialog/wizard/progressbar.js

@@ -10,20 +10,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function Progressbar(_ref) {
   let {
     customClass,
-    customStyle
+    customStyle,
+    stepsTitle
   } = _ref;
   const context = (0, _.useWizardContext)();
   if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
   const {
-    steps,
-    currentStepIndex
+    currentStep
   } = context;
-  const stepsElements = _react.default.Children.toArray(steps);
-  const stepsTitle = stepsElements.map((step, index) => ({
-    title: step.props.title,
-    number: index + 1,
-    completed: index < currentStepIndex - 1 && index !== currentStepIndex
-  }));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "wizard-progresbar ".concat(customClass),
     style: customStyle
@@ -31,7 +25,7 @@ function Progressbar(_ref) {
     key: step.number,
     className: "title",
     "data-completed": step.completed,
-    "data-disabled": step.number > currentStepIndex
+    "data-disabled": step.number > currentStep
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "step"
   }, /*#__PURE__*/_react.default.createElement("span", {

package/lib/dialog/wizard/useWizard.js

@@ -8,15 +8,12 @@ var _react = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useWizard = () => {
-  var _ref;
-  const [steps, setSteps] = (0, _react.useState)([]);
-  const totalSteps = steps.length;
-  const [step, setStep] = _react.default.useState(1);
-  const currentStep = (_ref = steps[step - 1]) !== null && _ref !== void 0 ? _ref : null;
-  const hasNextStep = step < totalSteps;
-  const hasPreviousStep = step > 1;
+  const [totalSteps, setTotalSteps] = (0, _react.useState)(0);
+  const [currentStep, setCurrentStep] = _react.default.useState(1);
+  const hasNextStep = currentStep < totalSteps;
+  const hasPreviousStep = currentStep > 1;
   const changeStep = nextStep => {
-    setStep(state => state + nextStep);
+    setCurrentStep(state => state + nextStep);
   };
   const nextStep = () => {
     if (hasNextStep) {
@@ -34,10 +31,7 @@ const useWizard = () => {
     hasNextStep,
     previousStep,
     hasPreviousStep,
-    steps,
     currentStep,
-    currentStepIndex: step,
-    setSteps,
     totalSteps,
     controls: {
       changeStep,
@@ -45,11 +39,9 @@ const useWizard = () => {
       hasNextStep,
       previousStep,
       hasPreviousStep,
-      steps,
       currentStep,
-      currentStepIndex: step,
-      setSteps,
-      totalSteps
+      totalSteps,
+      setTotalSteps
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.20-beta.3",
+  "version": "1.1.20-beta.5",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",