Untitled diff
325 lines
import React from "react";
import { render } from "react-dom";
import "./index.css";
let navConfigData = {
let navConfigData = {
isDashboardVisible: true,
isDashboardVisible: true,
tierOneLinks: [
tierOneLinks: [
{
{
name: "First Page",
name: "First Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
tierTwoItems: [
tierTwoItems: [
{
{
name: "Tier 2 Page",
name: "Tier 2 Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
tierThreeItems: [
tierThreeItems: [
{
{
name: "Tier 3 Page",
name: "Tier 3 Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
path: "#"
path: "#"
}
}
]
]
},
},
{
{
name: "Tier 2 sec Page",
name: "Tier 2 sec Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
path: "#"
path: "#"
}
}
]
]
},
},
{
{
name: "Second Page",
name: "Second Page",
iconName: "",
iconName: "",
iconAbbreviation: "SP",
iconAbbreviation: "SP",
path: "#"
path: "#"
},
},
{
{
name: "Third Page",
name: "Third Page",
iconAbbreviation: "TP",
iconAbbreviation: "TP",
path: "#",
path: "#",
tierTwoItems: [
tierTwoItems: [
{
{
name: "Tier 2 Page",
name: "Tier 2 Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
tierThreeItems: [
tierThreeItems: [
{
{
name: "Tier 3 Page",
name: "Tier 3 Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
path: "#"
path: "#"
}
}
]
]
},
},
{
{
name: "Tier 2 sec Page",
name: "Tier 2 sec Page",
iconName: "star",
iconName: "star",
iconAbbreviation: "FP",
iconAbbreviation: "FP",
path: "#"
path: "#"
}
}
]
]
},
},
{
{
name: "Fourth Page",
name: "Fourth Page",
iconName: "send",
iconName: "send",
iconAbbreviation: "FO",
iconAbbreviation: "FO",
path: "#"
path: "#"
}
}
],
],
supportLinks: [
supportLinks: [
{
{
name: "First Support Page",
name: "First Support Page",
iconName: "settings",
iconName: "settings",
iconAbbreviation: "FI",
iconAbbreviation: "FI",
path: "#"
path: "#"
},
},
{
{
name: "Second Support Page",
name: "Second Support Page",
iconName: "security",
iconName: "security",
iconAbbreviation: "SE",
iconAbbreviation: "SE",
path: "#"
path: "#"
},
},
{
{
name: "Third Support Page",
name: "Third Support Page",
iconName: "help",
iconName: "help",
iconAbbreviation: "TH",
iconAbbreviation: "TH",
path: "#"
path: "#"
}
}
]
]
};
};
Text moved with changes from lines 267-271 (92.0% similarity)
const initialState = navConfigData.tierOneLinks.reduce((acc, { name }) => {
acc[name] = false;
return acc;
}, {});
class NavigationDrawerTierThree extends React.Component {
class NavigationDrawerTierThree extends React.Component {
onClick = evt => {
onClick = evt => {
this.props.onSelect(this.props.tierThree.name);
this.props.onSelect(this.props.tierThree.name);
};
};
render() {
render() {
const { tierThree, selectedTierThreeLink } = this.props;
const { tierThree, selectedTierThreeLink } = this.props;
debugger;
return (
return (
<a
<a
className="mdc-list-item my-nav-drawer__tier-three"
className="mdc-list-item my-nav-drawer__tier-three"
onClick={this.onClick}
onClick={this.onClick}
>
>
<span className="my-nav-drawer__tier-two-label">{tierThree.name}</span>
<span className="my-nav-drawer__tier-two-label">{tierThree.name}</span>
</a>
</a>
);
);
}
}
}
}
class NavigationDrawerTierTwo extends React.Component {
class NavigationDrawerTierTwo extends React.Component {
// static propTypes = {
// static propTypes = {
// tierTwo: object.isRequired,
// tierTwo: object.isRequired,
// showNavIcon: bool,
// showNavIcon: bool,
// onSelect: func.isRequired,
// onSelect: func.isRequired,
// selectedTierTwoLink: string.isRequired
// selectedTierTwoLink: string.isRequired
// };
// };
state = { tierTwoIsExpanded: false };
state = { tierTwoIsExpanded: false };
onClick = evt => {
onClick = evt => {
debugger;
this.props.onSelect(this.props.tierTwo.name, "tier2");
this.props.onSelect(this.props.tierTwo.name, "tier2");
const { tierTwoIsExpanded } = this.state;
const { tierTwoIsExpanded } = this.state;
this.setState({ tierTwoIsExpanded: !tierTwoIsExpanded });
this.setState({ tierTwoIsExpanded: !tierTwoIsExpanded });
};
};
getArrowIcon = () => {
getArrowIcon = () => {
return this.state.tierTwoIsExpanded ? (
return this.state.tierTwoIsExpanded ? (
<span class="material-icons cdk-nav-drawer__tier-two-icon">></span>
<span class="material-icons cdk-nav-drawer__tier-two-icon">></span>
) : (
) : (
<span class="material-icons cdk-nav-drawer__tier-two-icon">^</span>
<span class="material-icons cdk-nav-drawer__tier-two-icon">^</span>
);
);
};
};
getAnchorClassBasedOnTier = () => {
getAnchorClassBasedOnTier = () => {
return this.props.showNavIcon
return this.props.showNavIcon
? "cdk-nav-drawer__tier-two"
? "cdk-nav-drawer__tier-two"
: "cdk-nav-drawer__tier-three";
: "cdk-nav-drawer__tier-three";
};
};
getLabelClassBasedOnTier = () => {
getLabelClassBasedOnTier = () => {
return this.props.showNavIcon
return this.props.showNavIcon
? "cdk-nav-drawer__tier-two-label"
? "cdk-nav-drawer__tier-two-label"
: "cdk-nav-drawer__tier-three-label";
: "cdk-nav-drawer__tier-three-label";
};
};
render() {
render() {
const { tierTwo, showNavIcon, selectedTierTwoLink } = this.props;
const { tierTwo, showNavIcon, selectedTierTwoLink } = this.props;
const { tierTwoIsExpanded } = this.state;
const { tierTwoIsExpanded } = this.state;
debugger;
return (
return (
<div>
<div>
<a
<a
className="mdc-list-item my-nav-drawer__tier-two"
className="mdc-list-item my-nav-drawer__tier-two"
onClick={this.onClick}
onClick={this.onClick}
>
>
{showNavIcon && this.getArrowIcon()}
{showNavIcon && this.getArrowIcon()}
<span className="my-nav-drawer__tier-two-label">{tierTwo.name}</span>
<span className="my-nav-drawer__tier-two-label">{tierTwo.name}</span>
</a>
</a>
{tierTwoIsExpanded && this.props.children}
{tierTwoIsExpanded && this.props.children}
</div>
</div>
);
);
}
}
}
}
class NavigationDrawerTierOneAnchor extends React.Component {
class NavigationDrawerTierOneAnchor extends React.Component {
// static propTypes = {
// static propTypes = {
// tierOne: object.isRequired,
// tierOne: object.isRequired,
// onSelect: func.isRequired,
// onSelect: func.isRequired,
// selectedTierOneLink: string.isRequired
// selectedTierOneLink: string.isRequired
// };
// };
// state = { tierIsExpanded: false };
// state = { tierIsExpanded: false };
onClick = evt => {
onClick = evt => {
this.props.onSelect(this.props.tierOne.name, "tier1");
this.props.onSelect(this.props.tierOne.name, "tier1");
// const { tierIsExpanded } = this.state;
// const { tierIsExpanded } = this.state;
// this.setState({ tierIsExpanded: !tierIsExpanded });
// this.setState({ tierIsExpanded: !tierIsExpanded });
};
};
render() {
render() {
const { tierOne, selectedTierOneLink, expanded } = this.props;
const { tierOne, selectedTierOneLink, expanded } = this.props;
return (
return (
<div>
<div>
<a
<a
className="mdc-list-item my-nav-drawer__tier-one"
className="mdc-list-item my-nav-drawer__tier-one"
href={tierOne.path}
href={tierOne.path}
onClick={this.onClick}
onClick={this.onClick}
ref={a => {
ref={a => {
this.anchor = a;
this.anchor = a;
}}
}}
>
>
<span className="cdk-nav-drawer__tier-one-label">{tierOne.name}</span>
<span className="cdk-nav-drawer__tier-one-label">{tierOne.name}</span>
</a>
</a>
{expanded && this.props.children}
{expanded && this.props.children}
</div>
</div>
);
);
}
}
}
}
class NavigationDrawerAppTiers extends React.Component {
class NavigationDrawerAppTiers extends React.Component {
// static propTypes = {
// static propTypes = {
// tierOneArray: array.isRequired,
// tierOneArray: array.isRequired,
// onToggleExpand: func.isRequired,
// onToggleExpand: func.isRequired,
// onSelect: func.isRequired,
// onSelect: func.isRequired,
// selectedTierOneLink: string.isRequired,
// selectedTierOneLink: string.isRequired,
// selectedTierTwoLink: string.isRequired,
// selectedTierTwoLink: string.isRequired,
// selectedTierThreeLink: string.isRequired,
// selectedTierThreeLink: string.isRequired,
// expandedTierOneName: string.isRequired
// expandedTierOneName: string.isRequired
// };
// };
render() {
render() {
const {
const {
tierOneArray,
tierOneArray,
onSelect,
onSelect,
selectedTierOneLink,
selectedTierOneLink,
selectedTierTwoLink,
selectedTierTwoLink,
selectedTierThreeLink,
selectedTierThreeLink,
expandedTierOneName
expandedTierOneName
} = this.props;
} = this.props;
return (
return (
<div className="mdc-drawer__content my-nav-drawer__app-tiers">
<div className="mdc-drawer__content my-nav-drawer__app-tiers">
<nav className="mdc-list">
<nav className="mdc-list">
{tierOneArray.map((tierOneLink, index) => (
{tierOneArray.map((tierOneLink, index) => (
<NavigationDrawerTierOneAnchor
<NavigationDrawerTierOneAnchor
tierOne={tierOneLink}
tierOne={tierOneLink}
onSelect={onSelect}
onSelect={onSelect}
key={index}
key={index}
expanded={tierOneLink.name === this.props.expandedTierOneName}
expanded={this.props.expandedTierOne[tierOneLink.name]}
selectedTierOneLink={selectedTierOneLink}
selectedTierOneLink={selectedTierOneLink}
>
>
{(tierOneLink.tierTwoItems || []).map((tierTwoItem, index) => (
{(tierOneLink.tierTwoItems || []).map((tierTwoItem, index) => (
<NavigationDrawerTierTwo
<NavigationDrawerTierTwo
tierTwo={tierTwoItem}
tierTwo={tierTwoItem}
onSelect={onSelect}
onSelect={onSelect}
selectedTierTwoLink={selectedTierTwoLink}
selectedTierTwoLink={selectedTierTwoLink}
showNavIcon={
showNavIcon={
(tierTwoItem.tierThreeItems &&
(tierTwoItem.tierThreeItems &&
tierTwoItem.tierThreeItems.length > 0) ||
tierTwoItem.tierThreeItems.length > 0) ||
false
false
}
}
>
>
{(tierTwoItem.tierThreeItems || []).map(
{(tierTwoItem.tierThreeItems || []).map(
(tierThreeItem, index) => (
(tierThreeItem, index) => (
<NavigationDrawerTierThree
<NavigationDrawerTierThree
tierThree={tierThreeItem}
tierThree={tierThreeItem}
onSelect={onSelect}
onSelect={onSelect}
selectedTierThreeLink={selectedTierThreeLink}
selectedTierThreeLink={selectedTierThreeLink}
/>
/>
)
)
)}
)}
</NavigationDrawerTierTwo>
</NavigationDrawerTierTwo>
))}
))}
</NavigationDrawerTierOneAnchor>
</NavigationDrawerTierOneAnchor>
))}
))}
</nav>
</nav>
</div>
</div>
);
);
}
}
}
}
class NavigationDrawer extends React.Component {
class NavigationDrawer extends React.Component {
// static propTypes = {
// static propTypes = {
// navConfig: object.isRequired
// navConfig: object.isRequired
// };
// };
Text moved with changes to lines 95-99 (92.0% similarity)
initialState = this.props.navConfig.tierOneLinks.reduce((acc, { name }) => {
acc[name] = false;
return acc;
}, {});
state = {
state = {
expanded: initialState,
expanded: initialState,
isDrawerCollapsed: false,
isDrawerCollapsed: false,
selectedTierOneLink: "",
selectedTierOneLink: "",
selectedTierTwoLink: "",
selectedTierTwoLink: "",
selectedTierThreeLink: "",
selectedTierThreeLink: "",
expandedTierOneName: ""
expandedTierOneName: ""
};
};
onSelect = (selectedLinkName, selectedTier) => {
onSelect = (selectedLinkName, selectedTier) => {
console.log("link", selectedLinkName, selectedTier);
if (selectedTier == "tier1") {
if (selectedTier == "tier1") {
if (selectedLinkName === this.state.selectedTierOneLink) {
// if (selectedLinkName === this.state.selectedTierOneLink) {
// User clicked on the same link again
// // User clicked on the same link again
this.setState(state => ({
// this.setState(state => ({
expandedTierOneName: state.expandedTierOneName ? "" : selectedLinkName
// expandedTierOneName: state.expandedTierOneName ? "" : selectedLinkName
}));
// }));
// } else {
// this.setState(state => ({
// expandedTierOneName: selectedLinkName
// }));
// }
if (this.state.expanded[selectedLinkName]) {
this.setState({ expanded: initialState });
} else {
} else {
this.setState(state => ({
this.setState(prevState => ({
expandedTierOneName: selectedLinkName
expanded: {
...(prevState.selectedTierTwoLink || prevState.selectedTierThreeLink
? prevState.expanded
: initialState),
[selectedLinkName]: true
}
}));
}));
}
}
this.setState(state => ({ selectedTierOneLink: selectedLinkName }));
this.setState({
this.setState(state => ({ selectedTierTwoLink: "" }));
selectedTierOneLink: selectedLinkName,
selectedTierTwoLink: ""
});
} else if (selectedTier == "tier2") {
} else if (selectedTier == "tier2") {
this.setState(state => ({ selectedTierTwoLink: selectedLinkName }));
this.setState(prevState => ({
this.setState(state => ({ selectedTierThreeLink: "" }));
selectedTierTwoLink: selectedLinkName,
selectedTierThreeLink: "",
expanded: {
...initialState,
[prevState.selectedTierOneLink]: true
}
}));
} else {
} else {
this.setState(state => ({ selectedTierThreeLink: selectedLinkName }));
this.setState(prevState => ({
this.setState(state => ({ selectedTierTwoLink: "" }));
selectedTierThreeLink: selectedLinkName,
selectedTierTwoLink: "",
expanded: {
...initialState,
[prevState.selectedTierOneLink]: true
}
}));
}
}
};
};
render() {
render() {
const { navConfig } = this.props;
const { navConfig } = this.props;
return (
return (
<nav className="mdc-drawer mdc-drawer--permanent mdc-typography my-nav-drawer">
<nav className="mdc-drawer mdc-drawer--permanent mdc-typography my-nav-drawer">
<div className="my-nav-drawer__links">
<div className="my-nav-drawer__links">
<NavigationDrawerAppTiers
<NavigationDrawerAppTiers
tierOneArray={navConfig.tierOneLinks}
tierOneArray={navConfig.tierOneLinks}
onSelect={this.onSelect}
onSelect={this.onSelect}
selectedTierOneLink={this.state.selectedTierOneLink}
selectedTierOneLink={this.state.selectedTierOneLink}
selectedTierTwoLink={this.state.selectedTierTwoLink}
selectedTierTwoLink={this.state.selectedTierTwoLink}
selectedTierThreeLink={this.state.selectedTierThreeLink}
selectedTierThreeLink={this.state.selectedTierThreeLink}
expandedTierOneName={this.state.expandedTierOneName}
expandedTierOne={this.state.expanded}
/>
/>
</div>
</div>
</nav>
</nav>
);
);
}
}
}
}
React.render(<NavigationDrawer navConfig={navConfigData} />, document.body);
render(
<NavigationDrawer navConfig={navConfigData} />,
document.getElementById("root")
);