Skip to content

Commit

Permalink
feat: add root level component navigation and ability to have string …
Browse files Browse the repository at this point in the history 
…children
  • Loading branch information
@janechu
janechu committed Feb 13, 2019
1 parent 01d2644 commit bf63207
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 92 deletions.
1 change: 1 addition & 0 deletions packages/fast-navigation-generator-react/app/configs/example.data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const noChildren: any = {

const children: any = {
children: [
"Foo",
{
id: get(noChildrenSchema, "id"),
props: noChildren,
Expand Down
2 changes: 1 addition & 1 deletion packages/fast-navigation-generator-react/src/navigation/navigation.props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export interface NavigationState {
/**
* The navigation data
*/
navigation: TreeNavigation[];
navigation: TreeNavigation;

/**
* The open items tracked by data location
Expand Down
48 changes: 24 additions & 24 deletions packages/fast-navigation-generator-react/src/navigation/navigation.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,9 @@ describe("Navigation", () => {
const rendered: any = shallow(<Navigation {...props} />);
const item: any = rendered.find(treeItemEndPointSelector);
expect(item).toHaveLength(1);
expect(rendered.find(treeItemExpandListTriggerSelector)).toHaveLength(0);
expect(rendered.find(treeItemExpandListTriggerSelector)).toHaveLength(1);
expect(item.props().className).toEqual(managedClasses.navigation_itemLink);
expect(item.props()["aria-level"]).toEqual(1);
expect(item.props()["aria-level"]).toEqual(2);
expect(item.props()["aria-setsize"]).toEqual(1);
expect(item.props()["aria-posinset"]).toEqual(1);
});
Expand All @@ -127,13 +127,13 @@ describe("Navigation", () => {
const rendered: any = shallow(<Navigation {...props} />);
const item: any = rendered.find(treeItemEndPointSelector);
expect(item).toHaveLength(2);
expect(rendered.find(treeItemExpandListTriggerSelector)).toHaveLength(0);
expect(rendered.find(treeItemExpandListTriggerSelector)).toHaveLength(1);
expect(item.at(0).props().className).toEqual(managedClasses.navigation_itemLink);
expect(item.at(0).props()["aria-level"]).toEqual(1);
expect(item.at(0).props()["aria-level"]).toEqual(2);
expect(item.at(0).props()["aria-setsize"]).toEqual(2);
expect(item.at(0).props()["aria-posinset"]).toEqual(1);
expect(item.at(1).props().className).toEqual(managedClasses.navigation_itemLink);
expect(item.at(1).props()["aria-level"]).toEqual(1);
expect(item.at(1).props()["aria-level"]).toEqual(2);
expect(item.at(1).props()["aria-setsize"]).toEqual(2);
expect(item.at(1).props()["aria-posinset"]).toEqual(2);
});
Expand All @@ -156,18 +156,18 @@ describe("Navigation", () => {

const rendered: any = shallow(<Navigation {...props} />);
const linkItem: any = rendered.find(treeItemEndPointSelector);
const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector);
const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector).at(1);

expect(triggerItem).toHaveLength(1);
expect(triggerItem.props().className).toEqual(
managedClasses.navigation_itemExpandListTrigger
);
expect(triggerItem.parent().props()["aria-level"]).toEqual(1);
expect(triggerItem.parent().props()["aria-level"]).toEqual(2);
expect(triggerItem.parent().props()["aria-setsize"]).toEqual(1);
expect(triggerItem.parent().props()["aria-posinset"]).toEqual(1);
expect(linkItem).toHaveLength(1);
expect(linkItem.props().className).toEqual(managedClasses.navigation_itemLink);
expect(linkItem.props()["aria-level"]).toEqual(2);
expect(linkItem.props()["aria-level"]).toEqual(3);
expect(linkItem.props()["aria-setsize"]).toEqual(1);
expect(linkItem.props()["aria-posinset"]).toEqual(1);
});
Expand Down Expand Up @@ -196,26 +196,26 @@ describe("Navigation", () => {

const rendered: any = shallow(<Navigation {...props} />);
const linkItem: any = rendered.find(treeItemEndPointSelector);
const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector);
const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector).at(1);

expect(triggerItem).toHaveLength(1);
expect(triggerItem.props().className).toEqual(
managedClasses.navigation_itemExpandListTrigger
);
expect(triggerItem.parent().props()["aria-level"]).toEqual(1);
expect(triggerItem.parent().props()["aria-level"]).toEqual(2);
expect(triggerItem.parent().props()["aria-setsize"]).toEqual(1);
expect(triggerItem.parent().props()["aria-posinset"]).toEqual(1);
expect(linkItem).toHaveLength(2);
expect(linkItem.at(0).props().className).toEqual(
managedClasses.navigation_itemLink
);
expect(linkItem.at(0).props()["aria-level"]).toEqual(2);
expect(linkItem.at(0).props()["aria-level"]).toEqual(3);
expect(linkItem.at(0).props()["aria-setsize"]).toEqual(2);
expect(linkItem.at(0).props()["aria-posinset"]).toEqual(1);
expect(linkItem.at(1).props().className).toEqual(
managedClasses.navigation_itemLink
);
expect(linkItem.at(1).props()["aria-level"]).toEqual(2);
expect(linkItem.at(1).props()["aria-level"]).toEqual(3);
expect(linkItem.at(1).props()["aria-setsize"]).toEqual(2);
expect(linkItem.at(1).props()["aria-posinset"]).toEqual(2);
});
Expand Down Expand Up @@ -257,51 +257,51 @@ describe("Navigation", () => {
const linkItem: any = rendered.find(treeItemEndPointSelector);
const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector);

expect(triggerItem).toHaveLength(2);
expect(triggerItem).toHaveLength(3);
expect(
triggerItem
.at(0)
.at(1)
.parent()
.props()["aria-level"]
).toEqual(1);
).toEqual(2);
expect(
triggerItem
.at(0)
.at(1)
.parent()
.props()["aria-setsize"]
).toEqual(2);
expect(
triggerItem
.at(0)
.at(1)
.parent()
.props()["aria-posinset"]
).toEqual(1);
expect(
triggerItem
.at(1)
.at(2)
.parent()
.props()["aria-level"]
).toEqual(1);
).toEqual(2);
expect(
triggerItem
.at(1)
.at(2)
.parent()
.props()["aria-setsize"]
).toEqual(2);
expect(
triggerItem
.at(1)
.at(2)
.parent()
.props()["aria-posinset"]
).toEqual(2);
expect(linkItem).toHaveLength(3);
expect(linkItem.at(0).props()["aria-level"]).toEqual(2);
expect(linkItem.at(0).props()["aria-level"]).toEqual(3);
expect(linkItem.at(0).props()["aria-setsize"]).toEqual(2);
expect(linkItem.at(0).props()["aria-posinset"]).toEqual(1);
expect(linkItem.at(1).props()["aria-level"]).toEqual(2);
expect(linkItem.at(1).props()["aria-level"]).toEqual(3);
expect(linkItem.at(1).props()["aria-setsize"]).toEqual(2);
expect(linkItem.at(1).props()["aria-posinset"]).toEqual(2);
expect(linkItem.at(2).props()["aria-level"]).toEqual(2);
expect(linkItem.at(2).props()["aria-level"]).toEqual(3);
expect(linkItem.at(2).props()["aria-setsize"]).toEqual(1);
expect(linkItem.at(2).props()["aria-posinset"]).toEqual(1);
});
Expand Down
122 changes: 66 additions & 56 deletions packages/fast-navigation-generator-react/src/navigation/navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default class Navigation extends Foundation<
role={"tree"}
className={this.props.managedClasses.navigation}
>
{this.renderTreeItems(this.state.navigation, 1)}
{this.renderTreeItem(this.state.navigation, 1, 1, 1, 0)}
</div>
);
}
Expand All @@ -75,6 +75,64 @@ export default class Navigation extends Foundation<
);
}

private renderTreeItem(
navigation: TreeNavigation,
level: number,
navigationLength: number,
positionInNavigation: number,
index: number
): React.ReactNode {
if (Array.isArray(navigation.items)) {
return (
<div
className={this.props.managedClasses.navigation_item}
key={index}
role={"treeitem"}
aria-level={level}
aria-setsize={navigationLength}
aria-posinset={positionInNavigation}
aria-expanded={this.isExpanded(navigation.dataLocation)}
onClick={this.handleTreeItemClick(navigation.dataLocation)}
onKeyUp={this.handleTreeItemKeyUp(navigation.dataLocation)}
>
<span
className={this.getTriggerClassNames(navigation.dataLocation)}
onClick={this.handleTreeItemClick(navigation.dataLocation)}
onKeyUp={this.handleTreeItemKeyUp(navigation.dataLocation)}
tabIndex={0}
data-location={navigation.dataLocation}
>
{navigation.text}
</span>
{this.renderTreeItemContainer(navigation.items, level)}
</div>
);
}

return (
<div
className={this.props.managedClasses.navigation_item}
key={index}
role={"none"}
>
<a
className={this.getLinkClassNames(navigation.dataLocation)}
role={"treeitem"}
data-location={navigation.dataLocation}
aria-level={level}
aria-setsize={navigationLength}
aria-posinset={positionInNavigation}
href={"#"}
onClick={this.handleTreeItemClick(navigation.dataLocation)}
onKeyUp={this.handleTreeItemKeyUp(navigation.dataLocation)}
tabIndex={0}
>
{navigation.text}
</a>
</div>
);
}

/**
* Renders tree items
*/
Expand All @@ -86,60 +144,12 @@ export default class Navigation extends Foundation<
const navigationLength: number = navigation.length;
const positionInNavigation: number = index + 1;

if (Array.isArray(navigationItem.items)) {
return (
<div
className={this.props.managedClasses.navigation_item}
key={index}
role={"treeitem"}
aria-level={level}
aria-setsize={navigationLength}
aria-posinset={positionInNavigation}
aria-expanded={this.isExpanded(navigationItem.dataLocation)}
onClick={this.handleTreeItemClick(navigationItem.dataLocation)}
onKeyUp={this.handleTreeItemKeyUp(navigationItem.dataLocation)}
>
<span
className={this.getTriggerClassNames(
navigationItem.dataLocation
)}
onClick={this.handleTreeItemClick(
navigationItem.dataLocation
)}
onKeyUp={this.handleTreeItemKeyUp(
navigationItem.dataLocation
)}
tabIndex={0}
data-location={navigationItem.dataLocation}
>
{navigationItem.text}
</span>
{this.renderTreeItemContainer(navigationItem.items, level)}
</div>
);
}

return (
<div
className={this.props.managedClasses.navigation_item}
key={index}
role={"none"}
>
<a
className={this.getLinkClassNames(navigationItem.dataLocation)}
role={"treeitem"}
data-location={navigationItem.dataLocation}
aria-level={level}
aria-setsize={navigationLength}
aria-posinset={positionInNavigation}
href={"#"}
onClick={this.handleTreeItemClick(navigationItem.dataLocation)}
onKeyUp={this.handleTreeItemKeyUp(navigationItem.dataLocation)}
tabIndex={0}
>
{navigationItem.text}
</a>
</div>
return this.renderTreeItem(
navigationItem,
level,
navigationLength,
positionInNavigation,
index
);
});
}
Expand Down Expand Up @@ -376,7 +386,7 @@ export default class Navigation extends Foundation<
this.state.openItems.find(
(openItem: string) =>
openItem.slice(0, dataLocation.length) === dataLocation
)
) !== undefined
) {
return true;
}
Expand Down
Loading

0 comments on commit bf63207

Please sign in to comment.