@activecollab/components 2.0.247 → 2.0.248
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ContentWizard/ContentWizard.js +12 -10
- package/dist/cjs/components/ContentWizard/ContentWizard.js.map +1 -1
- package/dist/esm/components/ContentWizard/ContentWizard.d.ts.map +1 -1
- package/dist/esm/components/ContentWizard/ContentWizard.js +10 -5
- package/dist/esm/components/ContentWizard/ContentWizard.js.map +1 -1
- package/dist/index.js +12 -10
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -34,22 +34,24 @@ var ContentWizard = exports.ContentWizard = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
34
34
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
35
35
|
enteredStep = _useState4[0],
|
|
36
36
|
setEnteredStep = _useState4[1];
|
|
37
|
-
var _useState5 = (0, _react.useState)(
|
|
37
|
+
var _useState5 = (0, _react.useState)("auto"),
|
|
38
38
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var
|
|
42
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
43
|
-
height = _useState8[0],
|
|
44
|
-
setHeight = _useState8[1];
|
|
39
|
+
height = _useState6[0],
|
|
40
|
+
setHeight = _useState6[1];
|
|
41
|
+
var previousStepRef = (0, _react.useRef)(0);
|
|
45
42
|
|
|
46
43
|
// Use controlled step if provided, otherwise use internal state
|
|
47
44
|
var activeStep = controlledStep !== undefined ? controlledStep : internalStep;
|
|
45
|
+
|
|
46
|
+
// Calculate direction synchronously based on step change
|
|
47
|
+
var isLeft = (0, _react.useMemo)(function () {
|
|
48
|
+
var prevStep = previousStepRef.current;
|
|
49
|
+
var direction = activeStep > prevStep;
|
|
50
|
+
previousStepRef.current = activeStep;
|
|
51
|
+
return direction;
|
|
52
|
+
}, [activeStep]);
|
|
48
53
|
var setActiveStep = (0, _react.useCallback)(function (newStep) {
|
|
49
54
|
if (newStep === activeStep) return;
|
|
50
|
-
|
|
51
|
-
// Determine direction: if going to higher index, slide left
|
|
52
|
-
setIsLeft(newStep > activeStep);
|
|
53
55
|
if (controlledStep === undefined) {
|
|
54
56
|
setInternalStep(newStep);
|
|
55
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentWizard.js","names":["_react","_interopRequireWildcard","require","_reactFocusLock","_ContentStep","_ContentWizardContext","_Styles","_Transitions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","length","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","ContentWizard","exports","forwardRef","_ref","ref","children","className","controlledStep","step","onStepChange","childrenCollection","useMemo","React","Children","toArray","_useState","useState","_useState2","internalStep","setInternalStep","_useState3","_useState4","enteredStep","setEnteredStep","_useState5","_useState6","isLeft","setIsLeft","_useState7","_useState8","height","setHeight","activeStep","undefined","setActiveStep","useCallback","newStep","goNext","nextIndex","Math","min","goPrevious","prevIndex","max","handleHeight","element","concat","offsetHeight","handleEntered","stepIndex","renderSteps","map","child","index","type","ContentStep","stepContent","cloneElement","key","isFirst","isLast","createElement","SlideLeftRightTransition","in","direction","onEnter","onEntered","MoveFocusInside","disabled","StyledStepWrapper","ContentWizardContextProvider","totalSteps","ResizeTransition","style","width","StyledContentWizardContainer","$height","displayName"],"sources":["../../../../src/components/ContentWizard/ContentWizard.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactElement,\n ReactNode,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\n\nimport { ContentStep } from \"./ContentStep\";\nimport { ContentWizardContextProvider } from \"./context/ContentWizardContext\";\nimport { StyledContentWizardContainer, StyledStepWrapper } from \"./Styles\";\nimport { SlideLeftRightTransition, ResizeTransition } from \"../Transitions\";\n\nexport interface IContentWizard {\n children: ReactNode;\n className?: string;\n step?: number;\n onStepChange?: (step: number) => void;\n}\n\nexport const ContentWizard = forwardRef<HTMLDivElement, IContentWizard>(\n ({ children, className, step: controlledStep, onStepChange }, ref) => {\n const childrenCollection = useMemo(\n () => React.Children.toArray(children),\n [children]\n );\n\n const [internalStep, setInternalStep] = useState(0);\n const [enteredStep, setEnteredStep] = useState(0);\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(\"auto\");\n\n // Use controlled step if provided, otherwise use internal state\n const activeStep =\n controlledStep !== undefined ? controlledStep : internalStep;\n\n const setActiveStep = useCallback(\n (newStep: number) => {\n if (newStep === activeStep) return;\n\n // Determine direction: if going to higher index, slide left\n setIsLeft(newStep > activeStep);\n\n if (controlledStep === undefined) {\n setInternalStep(newStep);\n }\n\n onStepChange?.(newStep);\n },\n [activeStep, controlledStep, onStepChange]\n );\n\n const goNext = useCallback(() => {\n const nextIndex = Math.min(activeStep + 1, childrenCollection.length - 1);\n setActiveStep(nextIndex);\n }, [activeStep, childrenCollection.length, setActiveStep]);\n\n const goPrevious = useCallback(() => {\n const prevIndex = Math.max(activeStep - 1, 0);\n setActiveStep(prevIndex);\n }, [activeStep, setActiveStep]);\n\n const handleHeight = useCallback((element: HTMLElement) => {\n setHeight(`${element.offsetHeight}px`);\n }, []);\n\n const handleEntered = useCallback((stepIndex: number) => {\n setEnteredStep(stepIndex);\n }, []);\n\n const renderSteps = useMemo(() => {\n return childrenCollection.map((child, index) => {\n const element = child as ReactElement;\n\n if (element?.type === ContentStep) {\n const stepContent = React.cloneElement(element, {\n key: `step-${index}`,\n index,\n isFirst: index === 0,\n isLast: index === childrenCollection.length - 1,\n });\n\n return (\n <SlideLeftRightTransition\n key={`transition-${index}`}\n in={activeStep === index}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => handleEntered(index)}\n >\n <MoveFocusInside disabled={enteredStep !== index}>\n <StyledStepWrapper>{stepContent}</StyledStepWrapper>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n );\n }\n\n return null;\n });\n }, [\n activeStep,\n childrenCollection,\n isLeft,\n enteredStep,\n handleHeight,\n handleEntered,\n ]);\n\n return (\n <ContentWizardContextProvider\n value={{\n activeStep,\n setActiveStep,\n goNext,\n goPrevious,\n direction: isLeft ? \"left\" : \"right\",\n totalSteps: childrenCollection.length,\n }}\n >\n <ResizeTransition in style={{ height, width: \"100%\" }}>\n <StyledContentWizardContainer\n ref={ref}\n className={className}\n $height={height}\n >\n {renderSteps}\n </StyledContentWizardContainer>\n </ResizeTransition>\n </ContentWizardContextProvider>\n );\n }\n);\n\nContentWizard.displayName = \"ContentWizard\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ContentWizard.js","names":["_react","_interopRequireWildcard","require","_reactFocusLock","_ContentStep","_ContentWizardContext","_Styles","_Transitions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","length","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","ContentWizard","exports","forwardRef","_ref","ref","children","className","controlledStep","step","onStepChange","childrenCollection","useMemo","React","Children","toArray","_useState","useState","_useState2","internalStep","setInternalStep","_useState3","_useState4","enteredStep","setEnteredStep","_useState5","_useState6","height","setHeight","previousStepRef","useRef","activeStep","undefined","isLeft","prevStep","current","direction","setActiveStep","useCallback","newStep","goNext","nextIndex","Math","min","goPrevious","prevIndex","max","handleHeight","element","concat","offsetHeight","handleEntered","stepIndex","renderSteps","map","child","index","type","ContentStep","stepContent","cloneElement","key","isFirst","isLast","createElement","SlideLeftRightTransition","in","onEnter","onEntered","MoveFocusInside","disabled","StyledStepWrapper","ContentWizardContextProvider","totalSteps","ResizeTransition","style","width","StyledContentWizardContainer","$height","displayName"],"sources":["../../../../src/components/ContentWizard/ContentWizard.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactElement,\n ReactNode,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\n\nimport { ContentStep } from \"./ContentStep\";\nimport { ContentWizardContextProvider } from \"./context/ContentWizardContext\";\nimport { StyledContentWizardContainer, StyledStepWrapper } from \"./Styles\";\nimport { SlideLeftRightTransition, ResizeTransition } from \"../Transitions\";\n\nexport interface IContentWizard {\n children: ReactNode;\n className?: string;\n step?: number;\n onStepChange?: (step: number) => void;\n}\n\nexport const ContentWizard = forwardRef<HTMLDivElement, IContentWizard>(\n ({ children, className, step: controlledStep, onStepChange }, ref) => {\n const childrenCollection = useMemo(\n () => React.Children.toArray(children),\n [children]\n );\n\n const [internalStep, setInternalStep] = useState(0);\n const [enteredStep, setEnteredStep] = useState(0);\n const [height, setHeight] = useState(\"auto\");\n const previousStepRef = useRef(0);\n\n // Use controlled step if provided, otherwise use internal state\n const activeStep =\n controlledStep !== undefined ? controlledStep : internalStep;\n\n // Calculate direction synchronously based on step change\n const isLeft = useMemo(() => {\n const prevStep = previousStepRef.current;\n const direction = activeStep > prevStep;\n previousStepRef.current = activeStep;\n return direction;\n }, [activeStep]);\n\n const setActiveStep = useCallback(\n (newStep: number) => {\n if (newStep === activeStep) return;\n\n if (controlledStep === undefined) {\n setInternalStep(newStep);\n }\n\n onStepChange?.(newStep);\n },\n [activeStep, controlledStep, onStepChange]\n );\n\n const goNext = useCallback(() => {\n const nextIndex = Math.min(activeStep + 1, childrenCollection.length - 1);\n setActiveStep(nextIndex);\n }, [activeStep, childrenCollection.length, setActiveStep]);\n\n const goPrevious = useCallback(() => {\n const prevIndex = Math.max(activeStep - 1, 0);\n setActiveStep(prevIndex);\n }, [activeStep, setActiveStep]);\n\n const handleHeight = useCallback((element: HTMLElement) => {\n setHeight(`${element.offsetHeight}px`);\n }, []);\n\n const handleEntered = useCallback((stepIndex: number) => {\n setEnteredStep(stepIndex);\n }, []);\n\n const renderSteps = useMemo(() => {\n return childrenCollection.map((child, index) => {\n const element = child as ReactElement;\n\n if (element?.type === ContentStep) {\n const stepContent = React.cloneElement(element, {\n key: `step-${index}`,\n index,\n isFirst: index === 0,\n isLast: index === childrenCollection.length - 1,\n });\n\n return (\n <SlideLeftRightTransition\n key={`transition-${index}`}\n in={activeStep === index}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => handleEntered(index)}\n >\n <MoveFocusInside disabled={enteredStep !== index}>\n <StyledStepWrapper>{stepContent}</StyledStepWrapper>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n );\n }\n\n return null;\n });\n }, [\n activeStep,\n childrenCollection,\n isLeft,\n enteredStep,\n handleHeight,\n handleEntered,\n ]);\n\n return (\n <ContentWizardContextProvider\n value={{\n activeStep,\n setActiveStep,\n goNext,\n goPrevious,\n direction: isLeft ? \"left\" : \"right\",\n totalSteps: childrenCollection.length,\n }}\n >\n <ResizeTransition in style={{ height, width: \"100%\" }}>\n <StyledContentWizardContainer\n ref={ref}\n className={className}\n $height={height}\n >\n {renderSteps}\n </StyledContentWizardContainer>\n </ResizeTransition>\n </ContentWizardContextProvider>\n );\n }\n);\n\nContentWizard.displayName = \"ContentWizard\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentWizard.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentWizard/ContentWizard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,
|
|
1
|
+
{"version":3,"file":"ContentWizard.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentWizard/ContentWizard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,aAAa,uFAoHzB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef, useCallback, useMemo, useState } from "react";
|
|
1
|
+
import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
|
|
2
2
|
import { MoveFocusInside } from "react-focus-lock";
|
|
3
3
|
import { ContentStep } from "./ContentStep";
|
|
4
4
|
import { ContentWizardContextProvider } from "./context/ContentWizardContext";
|
|
@@ -14,16 +14,21 @@ export const ContentWizard = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
14
14
|
const childrenCollection = useMemo(() => React.Children.toArray(children), [children]);
|
|
15
15
|
const [internalStep, setInternalStep] = useState(0);
|
|
16
16
|
const [enteredStep, setEnteredStep] = useState(0);
|
|
17
|
-
const [isLeft, setIsLeft] = useState(true);
|
|
18
17
|
const [height, setHeight] = useState("auto");
|
|
18
|
+
const previousStepRef = useRef(0);
|
|
19
19
|
|
|
20
20
|
// Use controlled step if provided, otherwise use internal state
|
|
21
21
|
const activeStep = controlledStep !== undefined ? controlledStep : internalStep;
|
|
22
|
+
|
|
23
|
+
// Calculate direction synchronously based on step change
|
|
24
|
+
const isLeft = useMemo(() => {
|
|
25
|
+
const prevStep = previousStepRef.current;
|
|
26
|
+
const direction = activeStep > prevStep;
|
|
27
|
+
previousStepRef.current = activeStep;
|
|
28
|
+
return direction;
|
|
29
|
+
}, [activeStep]);
|
|
22
30
|
const setActiveStep = useCallback(newStep => {
|
|
23
31
|
if (newStep === activeStep) return;
|
|
24
|
-
|
|
25
|
-
// Determine direction: if going to higher index, slide left
|
|
26
|
-
setIsLeft(newStep > activeStep);
|
|
27
32
|
if (controlledStep === undefined) {
|
|
28
33
|
setInternalStep(newStep);
|
|
29
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentWizard.js","names":["React","forwardRef","useCallback","useMemo","useState","MoveFocusInside","ContentStep","ContentWizardContextProvider","StyledContentWizardContainer","StyledStepWrapper","SlideLeftRightTransition","ResizeTransition","ContentWizard","_ref","ref","children","className","step","controlledStep","onStepChange","childrenCollection","Children","toArray","internalStep","setInternalStep","enteredStep","setEnteredStep","
|
|
1
|
+
{"version":3,"file":"ContentWizard.js","names":["React","forwardRef","useCallback","useMemo","useRef","useState","MoveFocusInside","ContentStep","ContentWizardContextProvider","StyledContentWizardContainer","StyledStepWrapper","SlideLeftRightTransition","ResizeTransition","ContentWizard","_ref","ref","children","className","step","controlledStep","onStepChange","childrenCollection","Children","toArray","internalStep","setInternalStep","enteredStep","setEnteredStep","height","setHeight","previousStepRef","activeStep","undefined","isLeft","prevStep","current","direction","setActiveStep","newStep","goNext","nextIndex","Math","min","length","goPrevious","prevIndex","max","handleHeight","element","offsetHeight","handleEntered","stepIndex","renderSteps","map","child","index","type","stepContent","cloneElement","key","isFirst","isLast","createElement","in","onEnter","onEntered","disabled","value","totalSteps","style","width","$height","displayName"],"sources":["../../../../src/components/ContentWizard/ContentWizard.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactElement,\n ReactNode,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\n\nimport { ContentStep } from \"./ContentStep\";\nimport { ContentWizardContextProvider } from \"./context/ContentWizardContext\";\nimport { StyledContentWizardContainer, StyledStepWrapper } from \"./Styles\";\nimport { SlideLeftRightTransition, ResizeTransition } from \"../Transitions\";\n\nexport interface IContentWizard {\n children: ReactNode;\n className?: string;\n step?: number;\n onStepChange?: (step: number) => void;\n}\n\nexport const ContentWizard = forwardRef<HTMLDivElement, IContentWizard>(\n ({ children, className, step: controlledStep, onStepChange }, ref) => {\n const childrenCollection = useMemo(\n () => React.Children.toArray(children),\n [children]\n );\n\n const [internalStep, setInternalStep] = useState(0);\n const [enteredStep, setEnteredStep] = useState(0);\n const [height, setHeight] = useState(\"auto\");\n const previousStepRef = useRef(0);\n\n // Use controlled step if provided, otherwise use internal state\n const activeStep =\n controlledStep !== undefined ? controlledStep : internalStep;\n\n // Calculate direction synchronously based on step change\n const isLeft = useMemo(() => {\n const prevStep = previousStepRef.current;\n const direction = activeStep > prevStep;\n previousStepRef.current = activeStep;\n return direction;\n }, [activeStep]);\n\n const setActiveStep = useCallback(\n (newStep: number) => {\n if (newStep === activeStep) return;\n\n if (controlledStep === undefined) {\n setInternalStep(newStep);\n }\n\n onStepChange?.(newStep);\n },\n [activeStep, controlledStep, onStepChange]\n );\n\n const goNext = useCallback(() => {\n const nextIndex = Math.min(activeStep + 1, childrenCollection.length - 1);\n setActiveStep(nextIndex);\n }, [activeStep, childrenCollection.length, setActiveStep]);\n\n const goPrevious = useCallback(() => {\n const prevIndex = Math.max(activeStep - 1, 0);\n setActiveStep(prevIndex);\n }, [activeStep, setActiveStep]);\n\n const handleHeight = useCallback((element: HTMLElement) => {\n setHeight(`${element.offsetHeight}px`);\n }, []);\n\n const handleEntered = useCallback((stepIndex: number) => {\n setEnteredStep(stepIndex);\n }, []);\n\n const renderSteps = useMemo(() => {\n return childrenCollection.map((child, index) => {\n const element = child as ReactElement;\n\n if (element?.type === ContentStep) {\n const stepContent = React.cloneElement(element, {\n key: `step-${index}`,\n index,\n isFirst: index === 0,\n isLast: index === childrenCollection.length - 1,\n });\n\n return (\n <SlideLeftRightTransition\n key={`transition-${index}`}\n in={activeStep === index}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => handleEntered(index)}\n >\n <MoveFocusInside disabled={enteredStep !== index}>\n <StyledStepWrapper>{stepContent}</StyledStepWrapper>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n );\n }\n\n return null;\n });\n }, [\n activeStep,\n childrenCollection,\n isLeft,\n enteredStep,\n handleHeight,\n handleEntered,\n ]);\n\n return (\n <ContentWizardContextProvider\n value={{\n activeStep,\n setActiveStep,\n goNext,\n goPrevious,\n direction: isLeft ? \"left\" : \"right\",\n totalSteps: childrenCollection.length,\n }}\n >\n <ResizeTransition in style={{ height, width: \"100%\" }}>\n <StyledContentWizardContainer\n ref={ref}\n className={className}\n $height={height}\n >\n {renderSteps}\n </StyledContentWizardContainer>\n </ResizeTransition>\n </ContentWizardContextProvider>\n );\n }\n);\n\nContentWizard.displayName = \"ContentWizard\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -23448,22 +23448,24 @@
|
|
|
23448
23448
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
23449
23449
|
enteredStep = _useState4[0],
|
|
23450
23450
|
setEnteredStep = _useState4[1];
|
|
23451
|
-
var _useState5 = React.useState(
|
|
23451
|
+
var _useState5 = React.useState("auto"),
|
|
23452
23452
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
23453
|
-
|
|
23454
|
-
|
|
23455
|
-
var
|
|
23456
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
23457
|
-
height = _useState8[0],
|
|
23458
|
-
setHeight = _useState8[1];
|
|
23453
|
+
height = _useState6[0],
|
|
23454
|
+
setHeight = _useState6[1];
|
|
23455
|
+
var previousStepRef = React.useRef(0);
|
|
23459
23456
|
|
|
23460
23457
|
// Use controlled step if provided, otherwise use internal state
|
|
23461
23458
|
var activeStep = controlledStep !== undefined ? controlledStep : internalStep;
|
|
23459
|
+
|
|
23460
|
+
// Calculate direction synchronously based on step change
|
|
23461
|
+
var isLeft = React.useMemo(function () {
|
|
23462
|
+
var prevStep = previousStepRef.current;
|
|
23463
|
+
var direction = activeStep > prevStep;
|
|
23464
|
+
previousStepRef.current = activeStep;
|
|
23465
|
+
return direction;
|
|
23466
|
+
}, [activeStep]);
|
|
23462
23467
|
var setActiveStep = React.useCallback(function (newStep) {
|
|
23463
23468
|
if (newStep === activeStep) return;
|
|
23464
|
-
|
|
23465
|
-
// Determine direction: if going to higher index, slide left
|
|
23466
|
-
setIsLeft(newStep > activeStep);
|
|
23467
23469
|
if (controlledStep === undefined) {
|
|
23468
23470
|
setInternalStep(newStep);
|
|
23469
23471
|
}
|