Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What is jQuery needed for? #25

Closed
killercup opened this issue Nov 10, 2014 · 11 comments
Closed

What is jQuery needed for? #25

killercup opened this issue Nov 10, 2014 · 11 comments
Labels
support: question Community support but can be turned into an improvement

Comments

@killercup
Copy link

I'd like to use parts of this, but without the jQuery dependency.

I've search for jQuery and found some files that say they require jQuery but never actually use it (like table-header.jsx).

Is there a list of features jQuery is used for? Or is there a plan to get rid of the dependency?

@zzmp
Copy link

zzmp commented Nov 10, 2014

Isn't that just a docs specific dependency?

Does this mean that all of the source is implemented under the docs folder? That's incredibly unintuitive.

@totty90
Copy link

totty90 commented Nov 10, 2014

Look here var $el = $(this.getDOMNode()),. You are right docs is the worst folder to put your src in. That's that I opened this issue

@felixakiragreen
Copy link

👍

React and JQuery do not play nicely and ideally no React components should rely on JQuery.

@hai-cea
Copy link
Member

hai-cea commented Nov 11, 2014

Here's what we're currently using out of the jQuery library:

Components:

  • Dialog - innerHeight(), css()
  • DropdownIcon - width(), css()
  • DropdownMenu - width(), css()
  • Menu - outterWidth(), width(), height(), css()
  • Ripple - parent(), offset(), addClass(), removeClass(), css()

Mixins & Utils:

  • ClickAwayable - on(), off()
  • CssEvent - one()

Any suggestions on how we could remove the jQuery dependency and still have the above functionality?

@felixakiragreen
Copy link

innerHeight() - this.getDOMNode().clientHeight
css() - React classSet or Element classList or this.getDOMNode().style or this.getDOMNode().cssText
width() - this.getDOMNode().style.width
outerWidth() - this.getDOMNode().offsetWidth
height() - this.getDOMNode().style.height
parent() - Node.parentElement
addClass() / removeClass() - I would encourage using React's classSet, but Element.classList.add or remove can also be used
offset() - Element.getBoundingClientRect()
on() / off() - Element.addEventListener, but this can be handled by React's native events and probably shouldn't be necessary.

However, while these can be directly substituted, for many of them (like classes, events) React has its own pattern and way of doing things. This will require changing a little logic, but it will make everything run much smoother and allow for easier future development.

@philipgiuliani
Copy link

It would be nice to remove the jQuery dependency, since people are currently avoiding to use it because of the overheat in some projects.

@plus-
Copy link

plus- commented Nov 14, 2014

React and JQuery do not play nicely

@DUBERT care to elaborate on that, I'd like to know

@hai-cea
Copy link
Member

hai-cea commented Nov 14, 2014

I've removed some of the jQuery dependencies. Still working on the others. Here's what's left:

  • Menu - outterWidth(), width(), height(), children(), css()
  • Ripple - parent(), offset(), addClass(), removeClass(), css()

Mixins & Utils:

  • ClickAwayable - on(), off()
  • CssEvent - one()

@hai-cea
Copy link
Member

hai-cea commented Nov 15, 2014

There is one jQuery dependency that I can't get rid of. Currently, I'm using jQuery to namespace click events for the click-awayable mixin. This mixin allows components to do something if a click event happens outside of the component.

Anyone have a good way to do this with native JS? Here's the JS file I'm talking about:
https://github.com/callemall/material-ui/blob/master/src/js/mixins/click-awayable.js

@hai-cea
Copy link
Member

hai-cea commented Nov 15, 2014

Figured it out. :)

mnajdova referenced this issue in mnajdova/material-ui Nov 10, 2020
Move picker sources into lab (#4)

Update README.md

[DatePicker] Refactor pickers tests to testing-library and mocha (#5)

[TimePicker] Migrate tests to testing library (#8)

[DateTimePicker] Migrate tests  (#9)

Fix all pickers linter errors (#10)

Fix all circular dependencies (#11)

* Fix all circular dependencies

* Enable mocha eslint rules for typescript tests

[test] The last step to a green CI (#15)

Migrate pickers docs (#12)

Downgrade to withStyles for pickers sources (#16)

Add public api exports for pickers components (#17)

Consolidate component namespace and theme augmentation  (#18)

Describe conformance for pickers sub-components (#19)

Autogenerate proptypes for typescript sources  (#20)

Proper build output (#21)

Clear migration artifacts  (#23)

Eslint rule for lower-case test name convention  (#24)

DateRangePicker  (#25)

yarn deduplicate

Remove GridListTile

[DateTimePicker] Fix migration unit tests

Fix types

Fix typescript types migration issues

Fix yarn lerna build (#33)

Fix karma tests

use window.Touch for CI karma tests

Remove more outdated diff noise (#34)

Replace not valid formats with valid ISO strings

Try to fix CI touch tests

Skip tests if Touch events are not supported

Fix merge conflicts

Actually type-check

Fix safari tests

Remove lowercase test name rule

The casing is up to the test author.
We're not the grammar police in tests.

Fix lint

Format

Remove overzealous eslint-disable*

Debug failing tests

Better debugging

Timezones are fun

was isoString th efix?

Let's find out what's failing and then skip it

Branch for safari

Skip DateRangePicker in browsers

review

Matt's review

Co-authored-by: Matt <github@nospam.33m.co>

format

docs:i18n
@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 25, 2022
@zannager zannager added support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
support: question Community support but can be turned into an improvement
Projects
None yet
Development

No branches or pull requests

9 participants