See webpackbin demo
Created
January 12, 2017 19:19
-
-
Save rococodogs/e9f44c703921196779d081d9949e4f5d to your computer and use it in GitHub Desktop.
fiddling around w/ selecting fields
This file contains hidden or 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
| import React from 'react' | |
| import fields from './work-fields' | |
| class FieldSelect extends React.Component { | |
| constructor (props) { | |
| super(props) | |
| this.state = { | |
| selected: {} | |
| } | |
| this.handleSelectField = this.handleSelectField.bind(this) | |
| this.renderItem = this.renderItem.bind(this) | |
| } | |
| handleSelectField (key) { | |
| const selected = { ...this.state.selected } | |
| // toggle field | |
| if (selected[key]) { | |
| delete selected[key] | |
| } else { | |
| selected[key] = true | |
| } | |
| this.setState({selected}) | |
| } | |
| renderItem (fieldKey, index) { | |
| const props = { | |
| children: fields[fieldKey], | |
| key: index, | |
| onClick: this.handleSelectField.bind(null, fieldKey), | |
| style: { | |
| cursor: 'pointer' | |
| } | |
| } | |
| if (this.state.selected[fieldKey]) { | |
| props.style = { | |
| ...props.style, | |
| backgroundColor: '#1d5f83', | |
| color: '#fff', | |
| listStyleType: 'bullet' | |
| } | |
| } | |
| return <li {...props}/> | |
| } | |
| render () { | |
| const keys = Object.keys(fields) | |
| return ( | |
| <div> | |
| <pre>{JSON.stringify(Object.keys(this.state.selected))}</pre> | |
| <ul style={{listStyleType: 'none', padding: '0'}}> | |
| {keys.map(this.renderItem)} | |
| </ul> | |
| </div> | |
| ) | |
| } | |
| } | |
| export default FieldSelect |
This file contains hidden or 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
| import React from 'react'; | |
| import FieldSelect from './FieldSelect' | |
| function HelloWorld () { | |
| return ( | |
| <FieldSelect /> | |
| ); | |
| } | |
| export default HelloWorld; |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| import React from 'react'; | |
| import {render} from 'react-dom'; | |
| import HelloWorld from './HelloWorld.js'; | |
| render(<HelloWorld/>, document.querySelector('#app')); |
This file contains hidden or 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
| const fields = { | |
| 'id': 'ID', | |
| 'title': 'Title', | |
| 'creator': 'Creator', | |
| 'creator_photographer': 'Creator - Photographer', | |
| 'format_medium': 'Format - Medium', | |
| 'format_size': 'Format - Size', | |
| 'date_approximate': 'Date (Approximate)', | |
| 'date_range': 'Date Range', | |
| 'creator_maker': 'Creator - Maker', | |
| 'date_original_display': 'Date - Original (Display)', | |
| 'description_size': 'Size', | |
| 'description_note': 'Note', | |
| 'subject_lcsh': 'Subject (LCSH)', | |
| 'publisher_original': 'Publisher - Original', | |
| 'date_original': 'Date - Original', | |
| 'format_extent': 'Extent', | |
| 'description_condition': 'Condition', | |
| 'description_provenance': 'Provenance', | |
| 'description_series': 'Series', | |
| 'identifier_itemnumber': 'Item Number', | |
| 'publisher_digital': 'Publisher - Digital', | |
| 'format_digital': 'Format - Digital', | |
| 'rights_digital': 'Rights - Digital', | |
| 'subject_ocm': 'Subject (OCM)', | |
| 'description_critical': 'Description - Critial', | |
| 'description_indicia': 'Indicia', | |
| 'description_text': 'Description - Text', | |
| 'description_inscription': 'Inscription', | |
| 'description_ethnicity': 'Ethnicity', | |
| 'description_citation': 'Citation', | |
| 'coverage_location_country': 'Location - Country', | |
| 'coverage_location': 'Location', | |
| 'creator_company': 'Company', | |
| 'relation_seealso': 'See Also', | |
| 'date_image_upper': 'Date - Image (Upper)', | |
| 'date_image_lower': 'Date - Image (Lower)', | |
| 'title_name': 'Title - Name', | |
| 'description_class': 'Class', | |
| 'date_birth_display': 'Date - Birth (Display)', | |
| 'coverage_place_birth': 'Place - Birth', | |
| 'description_military_branch': 'Military Branch', | |
| 'description_military_rank': 'Military Rank', | |
| 'description_military_unit': 'Military Unit', | |
| 'date_death_display': 'Date - Death (Display)', | |
| 'coverage_place_death': 'Place - Death', | |
| 'description_cause_death': 'Cause of Death', | |
| 'description_honors': 'Honors', | |
| 'type': 'Type', | |
| 'contributor': 'Contributor(s)', | |
| 'description': 'Description', | |
| 'keyword': 'Keyword', | |
| 'rights': 'Rights', | |
| 'publisher': 'Publisher', | |
| 'date_created': 'Date - Created', | |
| 'subject': 'Subject', | |
| 'language': 'Language', | |
| 'identifier': 'Identifier', | |
| 'based_near': 'Based Near', | |
| 'related_url': 'Related URL', | |
| 'bibliographic_citation': 'Bibliographic Citation', | |
| 'source': 'Source', | |
| 'date_artifact_upper': 'Date - Artifact (Upper)', | |
| 'date_artifact_lower': 'Date - Artifact (Lower)' | |
| //'thumbnail_path': 'Thumbnail Path', | |
| //'uses_vocabulary': 'Uses Vocabulary', | |
| } | |
| export default fields |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment