Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
110ccfe
commit e73be14
Showing
12 changed files
with
227 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,54 @@ | ||
| import React from 'react' | ||
|
|
||
| import ColorTags from './ColorTags' | ||
| import HierarchicalTagsContainer from '../containers/HierarchicalTagsContainer' | ||
|
|
||
| import '../static/css/Filters.css' | ||
|
|
||
|
|
||
| const Filters = ({ data, onToggle, onScroll, onMouseDown, onTouchStart, containerRef, scrollbarHandleRef, displayScrollbar }) => ( | ||
| <section className="Filters" onScroll={onScroll} ref={containerRef}> | ||
| <div className="FiltersContent"> | ||
| { | ||
| data.map((group) => ( | ||
| <div className="FilterGroup" key={group.name}> | ||
| <h2>{group.name}</h2> | ||
| { | ||
| group.name === 'Colors' | ||
| ? | ||
| <ColorTags tags={group.items.map((item) => { | ||
| item.onClick = () => onToggle(item.id, group.name, item.name) | ||
| return item | ||
| })} /> | ||
| : | ||
| group.items.map((item) => ( | ||
| <li key={item.id} onClick={() => onToggle(item.id, group.name, item.name)}>{item.name}</li> | ||
| )) | ||
| const Filters = ({ data, onToggle, onScroll, onMouseDown, onTouchStart, containerRef, scrollbarHandleRef, displayScrollbar }) => { | ||
| return ( | ||
| <section className="Filters" onScroll={onScroll} ref={containerRef}> | ||
| <div className="FiltersContent"> | ||
| { | ||
| data.map((group) => { | ||
| let items = '' | ||
|
|
||
| if (group.name === 'Colors') { | ||
| items = <ColorTags tags={group.items.map((item) => { | ||
| item.onClick = () => onToggle(item.id, group.name, item.name) | ||
| return item | ||
| })} /> | ||
| } | ||
|
|
||
| else if (group.name === 'Locations') { | ||
| items = <HierarchicalTagsContainer tags={group.items} /> | ||
| } | ||
| </div> | ||
| )) | ||
| } | ||
| <div className="filterGradient"></div> | ||
| </div> | ||
| <div className="scrollbar" ref={scrollbarHandleRef} style={{opacity: displayScrollbar ? 1 : null}} onMouseDown={onMouseDown} onTouchStart={onTouchStart}></div> | ||
| </section> | ||
| ) | ||
|
|
||
| else { | ||
| items = group.items.map((item) => { | ||
| if (item.id) { | ||
| return <li key={item.id} onClick={() => onToggle(item.id, group.name, item.name)}>{item.name}</li> | ||
| } | ||
| else { | ||
| return <li key={item} onClick={() => onToggle(item, group.name, item)}>{item}</li> | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="FilterGroup" key={group.name}> | ||
| <h2>{group.name}</h2> | ||
| {items} | ||
| </div> | ||
| ) | ||
| }) | ||
| } | ||
| <div className="filterGradient"></div> | ||
| </div> | ||
| <div className="scrollbar" ref={scrollbarHandleRef} style={{opacity: displayScrollbar ? 1 : null}} onMouseDown={onMouseDown} onTouchStart={onTouchStart}></div> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| export default Filters |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react' | ||
|
|
||
| import '../static/css/HierarchicalTags.css' | ||
|
|
||
|
|
||
| function displayChildren(items) { | ||
| return items.map((item) => { | ||
| let mainEl = <li key={item.id} title={item.name} onClick={item.onClick}>{item.name}</li> | ||
| let childrenEl = <ul></ul> | ||
|
|
||
| if (item.children) { | ||
| childrenEl = ( | ||
| <ul> | ||
| {displayChildren(item.children)} | ||
| </ul> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {mainEl} | ||
| {childrenEl} | ||
| </> | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| const HierarchicalTags = ({ tags }) => { | ||
| return ( | ||
| <ul className="HeirarchicalTags"> | ||
| {displayChildren(tags)} | ||
| </ul> | ||
| ) | ||
| } | ||
|
|
||
| export default HierarchicalTags |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import React from 'react' | ||
|
|
||
| import HierarchicalTags from '../components/HierarchicalTags' | ||
|
|
||
|
|
||
| export default class HierarchicalTagsContainer extends React.Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| hierarchicalTags: [], | ||
| } | ||
| } | ||
|
|
||
| onSelectParent = (e, id) => { | ||
| console.log(e, id) | ||
| this.selectedTagId = id | ||
| } | ||
|
|
||
| componentDidMount = () => { | ||
| this.generateTags() | ||
| } | ||
|
|
||
| componentDidUpdate = (prevProps) => { | ||
| if (this.props.tags !== prevProps.tags) { | ||
| this.generateTags() | ||
| } | ||
| } | ||
|
|
||
| buildTree = (tree, item) => { | ||
| if (item) { | ||
| // Current item has a parent | ||
| for (let i = 0; i < tree.length; i++) { // Traverse the entire tree in to find the parent | ||
| if (tree[i].id === item.parent) { | ||
| tree[i].children.push(item) // add the child to his parent | ||
| tree[i].onClick = () => this.onSelectParent(tree[i].id) | ||
| break | ||
| } | ||
| else { | ||
| // if item doesn't match but tree have children then parses children again to find item parent | ||
| this.buildTree(tree[i].children, item) | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| // We're at a root item | ||
| let i = 0 | ||
| while (i < tree.length) { | ||
| if (tree[i].parent) { | ||
| // if have parent then remove it from the array and move it to the right place | ||
| this.buildTree(tree, tree.splice(i, 1)[0]) | ||
| } | ||
| else { | ||
| i++ | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| generateTags = () => { | ||
| let hierarchicalTags = this.props.tags | ||
| for (var i = 0; i < hierarchicalTags.length; i++) { | ||
| hierarchicalTags[i].children = [] | ||
| } | ||
|
|
||
| this.buildTree(hierarchicalTags) | ||
| console.log(hierarchicalTags) | ||
|
|
||
| this.setState({hierarchicalTags: hierarchicalTags}) | ||
| } | ||
|
|
||
| render = () => { | ||
| return ( | ||
| <> | ||
| <div>{this.selectedTagId}</div> | ||
| <HierarchicalTags tags={this.state.hierarchicalTags} onSelectParent={this.onSelectParent} expandAll={true} /> | ||
| </> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -40,7 +40,11 @@ query Photo($id: UUID) { | |
| locationTags { | ||
| id | ||
| tag { | ||
| id | ||
| name | ||
| parent { | ||
| id | ||
| } | ||
| } | ||
| } | ||
| objectTags { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,6 +12,8 @@ body { | |
| background: #1d1d1d; | ||
| color: #ddd; | ||
| height: 100%; | ||
| font-size: 14px; | ||
| line-height: 1.4; | ||
| } | ||
|
|
||
| a { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .HeirarchicalTags li { | ||
| background: #383838; | ||
| display: inline-block; | ||
| margin: 0 10px 10px 0; | ||
| padding: 6px 10px 4px; | ||
| font-size: 12px; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| } |
Oops, something went wrong.