Comments (11)
@clementkng You can go ahead and modify this PR.
from meep.
Hi, I'm interested in trying out this issue. How do issues get assigned?
from meep.
@clementkng thanks for expressing interest in the project! I'll invite you to collaborate and then assign you the issue.
from meep.
I'm not entirely sure what the expected behavior for this issue is. Is this saying that clicking the checkbox label i.e. label, vehicle transportation, etc. should toggle the checkbox the way clicking the form-check-input
does? Or is this referring to something else?
from meep.
@clementkng Yes I believe you are correct. If someone clicks on the text "Building", "Vehicle Transportation", or "Infastructure Transportation", the checkbox to the left of that text should toggle.
While you are working on this component, it would also be nice to add a hover effect where the mouse cursor changes to a pointing hand when the user mouses over a checkbox or checkbox text.
from meep.
@galbwe Thanks, that sounds good. I've been looking at PRs in this repo, and was wondering if you would prefer that I fork off the repository or simply create branches off master
when I make a pull request.
I've been able to get a solution working w/ pure Javascript, but since I'm pretty new to React, I'm not sure what's the best design decision for CheckBoxRow component ie add state? Is there a slack channel or some other channel to discuss this?
from meep.
@clementkng I don't have a preference for one way or the other, and we've been using both without any trouble so far. Use whichever method you are more comfortable with.
I'm new to React as well, so take this with a grain of salt - I would try to store the current combination of selections in the state of a parent component, maybe called CheckBox, and make CheckBoxRow a functional component that is passed event handlers and anything else it needs through props. @ASTPMeetup can you weigh in on this matter?
We have a slack channel in Code for KC's workspace. What is your email address? I'll reach out to one of the admins and get you added. If you are in the KC area, we also meet in person on Monday nights at the Code for KC meetup.
from meep.
@galbwe Thanks for letting me know, I'll try out the parent state approach. My email is [email protected]. Unfortunately, I'm not in the KC area.
from meep.
@galbwe I've found an approach that allows you to create custom checkboxes that have the desired behavior here. I was thinking we could use this approach to customize CheckBoxRow and the new CheckBox component and tailor it back to the appearance of a typical React checkbox, but would this introduce any breaking changes? Overall, this seems cleaner than getting and setting a React checkbox via DOM manipulation, but there is increased overhead due to the new styled-components dependency.
from meep.
@clementkng I'm for it. It seems way cleaner than messing with the default stylings on a checkbox element. @ASTPMeetup will introducing styled-components
as a dependency break anything with the scss stylings or the webpack build, to the best of your knowledge?
from meep.
@galbwe I made a PR for this issue, but I realize I forgot to add the hover effect for the event handler. Should I amend this PR or make a new one?
from meep.
Related Issues (20)
- Determine LOE to bring project under some standards
- Node 0.12 compatibility HOT 1
- Google Maps - Draw Polygon Line Around Geographic Area
- Google Maps - Draw Polygon Circle over Lat, Long Point
- Map API data to Polygon Schema HOT 1
- Map API to Project Sumarry Schema HOT 1
- Map API data to Project Details
- Add Redux store to project HOT 1
- Manipulate Redux store state in filters panel
- Add firebase connection to frontend HOT 1
- Roadmap for Meep App 2020
- Add Navigation Bar to Web App HOT 1
- Query for projects based on type
- Filter Projects Temporally HOT 1
- Populate "Stats for This Area" field in the Project Filters view
- Display project details in side panel for each project and be able to return back to project list
- Update Location Markers on Map
- Convert react-google-maps to @react-google-maps/api
- Determine Why Location Markers Do Not Show for Areas Outside of Kansas City HOT 1
- Related to meep-backend issue "120 start dates for test data"
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from meep.