-
-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #47 from hackforla/react_containers_2
Enabled containerization of collab components
- Loading branch information
Showing
8 changed files
with
300 additions
and
32 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,15 +1,34 @@ | ||
| import React from 'react'; | ||
| import './App.css'; | ||
| import TreeMapVis from './components/TreeMapVis/TreeMapVis.js'; | ||
| import PinMap from './components/TreeMapVis/TreeMapVis.jsx'; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div className="App"> | ||
| <TreeMapVis /> | ||
| <PinMap /> | ||
| </div> | ||
| ); | ||
|
|
||
| class App extends React.Component{ | ||
| constructor(props){ | ||
| super(props); | ||
| this.state = {selectedId: ""} | ||
| } | ||
|
|
||
| handleMockSelected = (e) => { | ||
| this.setState({selectedId: e.target.value}); | ||
| } | ||
|
|
||
| render(){ | ||
| const prototypeMap = { | ||
| TreeMapVis: <TreeMapVis/>, | ||
| // PinMap: <PinMap/> | ||
| } | ||
|
|
||
| return ( | ||
| <div className="App" > | ||
| {Object.keys(prototypeMap).map( proto => | ||
| <div key={proto}> | ||
| <input type="radio" name="prototypes" value={proto} onClick={this.handleMockSelected}/>{proto}<br/> | ||
| </div> | ||
| )} | ||
| { prototypeMap[this.state.selectedId] } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
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,73 @@ | ||
| // import React from 'react'; | ||
| // import Picker from 'react-month-picker'; | ||
| // | ||
| // const DateSlider = () => { | ||
| // let pickerLang = { | ||
| // months: ['Jan', 'Feb', 'Mar', 'Spr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | ||
| // , from: 'From', to: 'To' | ||
| // } | ||
| // , mvalue = {year: 2015, month: 11} | ||
| // , mrange = {from: {year: 2014, month: 8}, to: {year: 2015, month: 5}} | ||
| // | ||
| // let makeText = m => { | ||
| // if (m && m.year && m.month) return (pickerLang.months[m.month-1] + '. ' + m.year) | ||
| // return '?' | ||
| // } | ||
| // | ||
| // const handleRangeChange = () =>{ | ||
| // | ||
| // }; | ||
| // const handleRangeDismiss = () =>{ | ||
| // | ||
| // }; | ||
| // return ( | ||
| // <div className="edit"> | ||
| // <label>Pick A Span of Months</label> | ||
| // <Picker | ||
| // ref="pickRange" | ||
| // years={{min: 2015, max: 2018}} | ||
| // range={mrange} | ||
| // lang={pickerLang} | ||
| // theme="dark" | ||
| // onChange={handleRangeChange} | ||
| // onDismiss={handleRangeDismiss} | ||
| // > | ||
| // | ||
| // </Picker> | ||
| // </div> | ||
| // ); | ||
| // } | ||
| // | ||
| // | ||
| // // | ||
| // // | ||
| // // class DateSlider extends React.Component { | ||
| // // constructor(props) { | ||
| // // super(props); | ||
| // // | ||
| // // this.state = { | ||
| // // value: { min: 0, max: 13 }, | ||
| // // }; | ||
| // // } | ||
| // // render(){ | ||
| // // return ( | ||
| // // <InputRange | ||
| // // maxValue={13} | ||
| // // minValue={0} | ||
| // // value={this.state.value} | ||
| // // onChange={this.props.onSliderChange} /> | ||
| // // ); | ||
| // // } | ||
| // // } | ||
| // export default DateSlider; | ||
| // // | ||
| // // // | ||
| // // // | ||
| // // // const DateSlider = (label) => { | ||
| // // // return ( | ||
| // // // <div class="slidecontainer"> | ||
| // // // <p>{label}:</p> | ||
| // // // <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> | ||
| // // // </div> | ||
| // // // ); | ||
| // // // } |
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,34 @@ | ||
| .slidecontainer { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .slider { | ||
| -webkit-appearance: none; | ||
| width: 100%; | ||
| height: 25px; | ||
| background: #d3d3d3; | ||
| outline: none; | ||
| opacity: 0.7; | ||
| -webkit-transition: .2s; | ||
| transition: opacity .2s; | ||
| } | ||
|
|
||
| .slider:hover { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .slider::-webkit-slider-thumb { | ||
| -webkit-appearance: none; | ||
| appearance: none; | ||
| width: 25px; | ||
| height: 25px; | ||
| background: #4CAF50; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .slider::-moz-range-thumb { | ||
| width: 25px; | ||
| height: 25px; | ||
| background: #4CAF50; | ||
| cursor: pointer; | ||
| } |
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,75 @@ | ||
| import React from 'react'; | ||
| // import DateSlider from '../DateSlider/DateSlider.js'; | ||
| const Filters = ({yearChange, sMonthChange, eMonthChange, targetYear, sMonth, eMonth}) => { | ||
| const months = [ | ||
| { | ||
| num:1, | ||
| name:"January" | ||
| },{ | ||
| num:2, | ||
| name:"February" | ||
| },{ | ||
| num:3, | ||
| name:"March" | ||
| },{ | ||
| num:4, | ||
| name:"April" | ||
| },{ | ||
| num:5, | ||
| name:"May" | ||
| },{ | ||
| num:6, | ||
| name:"June" | ||
| },{ | ||
| num:7, | ||
| name:"July" | ||
| },{ | ||
| nunm:8, | ||
| name:"August" | ||
| },{ | ||
| num:9, | ||
| name:"September" | ||
| },{ | ||
| num:10, | ||
| name:"October" | ||
| },{ | ||
| num:11, | ||
| name:"November" | ||
| },{ | ||
| num:12, | ||
| name:"December" | ||
| }]; | ||
|
|
||
| const years = [2015, 2016, 2017, 2018, 2019]; | ||
|
|
||
| return ( | ||
| <div> | ||
| Year | ||
| <select id="yearSelection" className="data-dropdown" value={targetYear} onChange={yearChange}> | ||
| { | ||
| years.map(year => { | ||
| return <option key={year} value={year}>{year}</option> | ||
| }) | ||
| } | ||
| </select> | ||
| Start Month | ||
| <select id="startMonthSelection" className="data-dropdown" value={sMonth} onChange={sMonthChange}> | ||
| { | ||
| months.map(month => { | ||
| return <option key={month.name} value={month.num}>{month.name}</option> | ||
| }) | ||
| } | ||
| </select> | ||
| <br/> | ||
| End Month | ||
| <select id="endMonthSelection" className="data-dropdown" value={eMonth} onChange={eMonthChange}> | ||
| { | ||
| months.map(month => { | ||
| return <option key={month.name} value={month.num}>{month.name}</option> | ||
| }) | ||
| } | ||
| </select> | ||
| </div> | ||
| ); | ||
| } | ||
| export default Filters; |
Oops, something went wrong.