Comments (11)
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.
from material-ui.
from material-ui.
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.
from material-ui.
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
from material-ui.
👍
React and JQuery do not play nicely and ideally no React components should rely on JQuery.
from material-ui.
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?
from material-ui.
It would be nice to remove the jQuery dependency, since people are currently avoiding to use it because of the overheat in some projects.
from material-ui.
React and JQuery do not play nicely
@DUBERT care to elaborate on that, I'd like to know
from material-ui.
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()
from material-ui.
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
from material-ui.
Figured it out. :)
from material-ui.
Related Issues (20)
- [material-ui][ListItem] Remove props which have been deprecated since 2021 HOT 10
- [tabs] How to stop re-rendering it? HOT 2
- Select value prop HOT 1
- [experimental_extendTheme] Unable to use custom css variable in theme HOT 2
- [material-ui][Menu] Several menu items inside a component are not accessible HOT 4
- [material-ui][Menu] Menu Item custom attribute is not accessible on a select TextField's onChange HOT 2
- [examples] Build error on the material-ui-nextjs-ts project HOT 2
- [material-ui][docs] v4 docs not available HOT 5
- [material-ui][TextareaAutosize] Resizing unstable and styles not applied in v5.15.11 HOT 3
- [material-ui][Alert] Can't set `slots` in theme's `defaultProps` in 5.15.11 HOT 3
- [icons] Mismatch design for `ThumbUpOffAltSharp` compared to `ThumbDownOffAltSharpIcon` HOT 3
- [material-ui][Autocomplete] Popover does not resize when `disableCloseOnSelect` is true for multiple variant when contained in a flex container HOT 2
- [material-ui][DialogContent] Problem with Tailwind CSS classes HOT 2
- [pigment-css][core] Use npm package name for folder name HOT 2
- [joy-ui] Add Spin component HOT 6
- [material-ui][Button] Hover animation glitches when component state changes HOT 1
- [material-ui][Select] SelectProps suddenly break by making variant required HOT 10
- [material-ui][StepLabel] Component displayed in the correct direction HOT 2
- [material-ui][ButtonGroup] Problems with inheriting styles from shared component HOT 3
- FormLabel
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 material-ui.