Skip to content

Commit

Permalink
fix: path and pathstep issues in behaviour
Browse files Browse the repository at this point in the history
  • Loading branch information
@wildergd
wildergd committed Dec 6, 2020
1 parent 3d12cea commit fc4b95e
Show file tree
Hide file tree
Showing 8 changed files with 18 additions and 32 deletions.
5 changes: 0 additions & 5 deletions src/components/Path/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export default function Path(props) {
const { currentStepName, onClick, children, id, className, style } = props;
const [hoveredStepName, setHoveredStepName] = useState(null);
const [stepsCount, setStepsCount] = useState(0);
const [hasErrors, setHasErrors] = useState(false);
const registeredSteps = useRef([]);
const containerRef = useRef();

Expand All @@ -27,7 +26,6 @@ export default function Path(props) {
);
registeredSteps.current = newStepsList;
setStepsCount(registeredSteps.current.length);
setHasErrors(stepProps.hasError);
}, []);

const privateUnregisterStep = useCallback((stepRef, stepName) => {
Expand Down Expand Up @@ -56,7 +54,6 @@ export default function Path(props) {
...updatedStep,
...stepProps,
};
setHasErrors(registeredSteps.current.some(step => step.hasError));
}, []);

const context = useMemo(() => {
Expand All @@ -70,7 +67,6 @@ export default function Path(props) {
return {
selectedIndex,
hoveredIndex,
someStepHasError: hasErrors,
privateGetStepIndex: getStepIndex,
privateGetStepZIndex,
privateRegisterStep,
Expand All @@ -82,7 +78,6 @@ export default function Path(props) {
}, [
currentStepName,
getStepIndex,
hasErrors,
hoveredStepName,
onClick,
privateGetStepZIndex,
Expand Down
9 changes: 3 additions & 6 deletions src/components/Path/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
##### Path basic example

```js

import React, { useState } from 'react';
import { Path, PathStep } from 'react-rainbow-components';

Expand Down Expand Up @@ -32,21 +31,19 @@ import { Path, PathStep } from 'react-rainbow-components';


const PathWithErrorInStep = () => {
const [currentStep, setCurrentStep] = useState('delivered');
const [stepHasError, setStepHasError] = useState(true);
const [currentStep, setCurrentStep] = useState(null);

const handleClick = useCallback(stepName => {
setCurrentStep(stepName);
setStepHasError(stepName === 'delivered');
}, []);

return (
<div className="rainbow-p-around_x-large rainbow-align-content_center">
<Path currentStepName={currentStep} onClick={handleClick}>
<PathStep name="scheduled" label="Scheduled" />
<PathStep name="in-progress" label="InProgress" />
<PathStep name="in-progress" label="InProgress" hasError/>
<PathStep name="arrived" label="Arrived" />
<PathStep name="delivered" label="Delivered" hasError={stepHasError} />
<PathStep name="delivered" label="Delivered" />
</Path>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions src/components/Path/styled/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,11 @@ export const StyledContainer = styled.nav`
padding: 0.25rem;
`;

export const StyledStepsList = styled.ol`
export const StyledStepsList = styled.div`
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
`;
3 changes: 1 addition & 2 deletions src/components/PathStep/helpers/getActiveStepIndex.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export default function getActiveStepIndex(params) {
const { hoveredIndex, someStepHasError, selectedIndex } = params;
const { hoveredIndex, selectedIndex } = params;
if (hoveredIndex !== -1) return hoveredIndex;
if (someStepHasError) return -1;
return selectedIndex;
}
4 changes: 2 additions & 2 deletions src/components/PathStep/helpers/isStepSelected.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default function isStepSelected(params) {
const { hoveredIndex, someStepHasError, selectedIndex, index } = params;
if (hoveredIndex !== -1 || someStepHasError) return false;
const { hoveredIndex, selectedIndex, index } = params;
if (hoveredIndex !== -1) return false;
return selectedIndex === index;
}
10 changes: 3 additions & 7 deletions src/components/PathStep/icons/exclamation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,13 @@ const Exclamation = props => {
>
<g id="components" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g
id="Components-Path-DesignGuidelines"
transform="translate(-909.000000, -628.000000)"
fill="currentColor"
fillRule="nonzero"
>
<g id="Group-10" transform="translate(429.000000, 617.000000)">
<g id="cancel" transform="translate(480.000000, 11.000000)">
<path
d="M8.98247368,-1.47082346e-12 C13.9433569,-1.47082346e-12 17.9649474,4.02159045 17.9649474,8.98247368 C17.9649474,13.9433569 13.9433569,17.9649474 8.98247368,17.9649474 C4.02159045,17.9649474 -5.61328761e-13,13.9433569 -5.61328761e-13,8.98247368 C-5.61328761e-13,4.02159045 4.02159045,-1.47082346e-12 8.98247368,-1.47082346e-12 Z M9.16988641,12.2673399 C8.87027215,12.2673399 8.61678887,12.3707789 8.40997849,12.5775893 C8.20343906,12.7846707 8.1,13.0356476 8.1,13.3306555 C8.1,13.6682719 8.20797765,13.9311033 8.42440712,14.1186756 C8.64036241,14.306451 8.89384569,14.4 9.18404408,14.4 C9.46943293,14.4 9.71885181,14.304893 9.9327749,14.1151531 C10.1472399,13.9248035 10.2542015,13.6634624 10.2542015,13.3306555 C10.2542015,13.0355798 10.148256,12.7843997 9.93663608,12.5775893 C9.72474519,12.370508 9.46970389,12.2673399 9.16988641,12.2673399 Z M9.22692354,3.6 C8.88951033,3.6 8.61678887,3.71028081 8.40997849,3.93206174 C8.20343906,4.15309754 8.1,4.46104382 8.1,4.85569738 C8.1,5.14562481 8.12106716,5.62366637 8.16387887,6.2895511 L8.16387887,6.2895511 L8.39223059,9.70629167 C8.43483909,10.1485665 8.50630484,10.4780541 8.60642464,10.6940771 C8.70600252,10.9107776 8.8842266,11.0184843 9.14123237,11.0184843 C9.39295441,11.0184843 9.57395583,10.9069164 9.68342376,10.6836452 C9.79316265,10.459832 9.86442518,10.1389474 9.89761781,9.72024612 L9.89761781,9.72024612 L10.204548,6.20338575 C10.2374697,5.88073987 10.2542015,5.56161648 10.2542015,5.24757359 C10.2542015,4.71554321 10.1850389,4.30747712 10.0473911,4.0243237 C9.90974328,3.74144123 9.63600572,3.6 9.22692354,3.6 Z"
id="Combined-Shape"
/>
<g transform="translate(429.000000, 617.000000)">
<g transform="translate(480.000000, 11.000000)">
<path d="M8.98247368,-1.47082346e-12 C13.9433569,-1.47082346e-12 17.9649474,4.02159045 17.9649474,8.98247368 C17.9649474,13.9433569 13.9433569,17.9649474 8.98247368,17.9649474 C4.02159045,17.9649474 -5.61328761e-13,13.9433569 -5.61328761e-13,8.98247368 C-5.61328761e-13,4.02159045 4.02159045,-1.47082346e-12 8.98247368,-1.47082346e-12 Z M9.16988641,12.2673399 C8.87027215,12.2673399 8.61678887,12.3707789 8.40997849,12.5775893 C8.20343906,12.7846707 8.1,13.0356476 8.1,13.3306555 C8.1,13.6682719 8.20797765,13.9311033 8.42440712,14.1186756 C8.64036241,14.306451 8.89384569,14.4 9.18404408,14.4 C9.46943293,14.4 9.71885181,14.304893 9.9327749,14.1151531 C10.1472399,13.9248035 10.2542015,13.6634624 10.2542015,13.3306555 C10.2542015,13.0355798 10.148256,12.7843997 9.93663608,12.5775893 C9.72474519,12.370508 9.46970389,12.2673399 9.16988641,12.2673399 Z M9.22692354,3.6 C8.88951033,3.6 8.61678887,3.71028081 8.40997849,3.93206174 C8.20343906,4.15309754 8.1,4.46104382 8.1,4.85569738 C8.1,5.14562481 8.12106716,5.62366637 8.16387887,6.2895511 L8.16387887,6.2895511 L8.39223059,9.70629167 C8.43483909,10.1485665 8.50630484,10.4780541 8.60642464,10.6940771 C8.70600252,10.9107776 8.8842266,11.0184843 9.14123237,11.0184843 C9.39295441,11.0184843 9.57395583,10.9069164 9.68342376,10.6836452 C9.79316265,10.459832 9.86442518,10.1389474 9.89761781,9.72024612 L9.89761781,9.72024612 L10.204548,6.20338575 C10.2374697,5.88073987 10.2542015,5.56161648 10.2542015,5.24757359 C10.2542015,4.71554321 10.1850389,4.30747712 10.0473911,4.0243237 C9.90974328,3.74144123 9.63600572,3.6 9.22692354,3.6 Z" />
</g>
</g>
</g>
Expand Down
12 changes: 5 additions & 7 deletions src/components/PathStep/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export default function PathStep(props) {
const {
selectedIndex,
hoveredIndex,
someStepHasError,
privateGetStepIndex,
privateGetStepZIndex,
privateRegisterStep,
Expand All @@ -35,9 +34,10 @@ export default function PathStep(props) {
useEffect(() => {
privateUpdateStepProps({
name,
label,
hasError,
});
}, [name, hasError, privateUpdateStepProps]);
}, [name, label, hasError, privateUpdateStepProps]);

const index = privateGetStepIndex(name);

Expand All @@ -46,21 +46,19 @@ export default function PathStep(props) {
getActiveStepIndex({
hoveredIndex,
selectedIndex,
someStepHasError,
}),
[hoveredIndex, selectedIndex, someStepHasError],
[hoveredIndex, selectedIndex],
);

const isChecked = index !== hoveredIndex && activeStepIndex > index;
const isChecked = index !== hoveredIndex && activeStepIndex > index && !hasError;
const isSelected = useMemo(
() =>
isStepSelected({
index,
hoveredIndex,
selectedIndex,
someStepHasError,
}),
[hoveredIndex, index, selectedIndex, someStepHasError],
[hoveredIndex, index, selectedIndex],
);

const renderErrorIcon = hasError && index !== hoveredIndex;
Expand Down
4 changes: 3 additions & 1 deletion src/components/PathStep/styled/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from 'styled-components';
import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
import { FONT_SIZE_TEXT_LARGE } from '../../../styles/fontSizes';

export const StyledStepItem = attachThemeAttrs(styled.li)`
export const StyledStepItem = attachThemeAttrs(styled.button)`
display: inline-flex;
align-items: center;
position: relative;
Expand All @@ -12,6 +12,7 @@ export const StyledStepItem = attachThemeAttrs(styled.li)`
height: 2.5rem;
padding-left: 3.5rem;
padding-right: 2.5rem;
border: none;
background: ${props => props.palette.background.highlight};
color: ${props => props.palette.text.header};
border-radius: 20px;
Expand All @@ -20,6 +21,7 @@ export const StyledStepItem = attachThemeAttrs(styled.li)`
cursor: pointer;
font-size: ${FONT_SIZE_TEXT_LARGE};
font-weight: 400;
transition: all 0.3s linear;
&:hover {
background: ${props => props.palette.brand.main};
Expand Down

0 comments on commit fc4b95e

Please sign in to comment.