teamwertarbyte / material-ui-rating Goto Github PK

See it here: https://codesandbox.io/s/q95402151j

Also, why isn't there an option/way to set the className on the root div element?

This is a feature request.
Some other star rating components have ability to render rating to half-star precision, like so:

It would be nice to have this ability together with material-ui integration in one component.

Then, if the style is changed to have the stars smaller and closer to each other (because they don't need to be clicked, and look better in the design), google's test will consider that those button elements are too close, and the page is not mobile friendly.

Please switch from onTouchTap to onClick for compatibility with:
https://github.com/callemall/material-ui/releases/tag/v0.19.0

material-ui-rating depends on the classnames package but it's not listed as a dependency in package.json. Unless I'm missing something it should be added.

I have the problem ./node_modules/material-ui-rating/lib/components/Rating/Rating.js Module not found: Can't resolve 'material-ui/IconButton' in I changed some lines on Rating.js (updated material-ui calls to @material-ui/core/) and then a new error comes:
TypeError: Cannot read property 'orange500' of undefined

I'm using material-ui-rating V 2.0.0

It would be great to be able to disable the hover effect. Is there a way to achieve this now? If not, I'd be happy to create a pull request.

Hi could you provide an example about how to change the style via react hooks?

Thank you

Hi
In commit was broken change which don't mark how broken.

Icon classes don't work and now i can't set size for icon svg.

Demo

Also docs have old information see code

I would like to return this opportunity.

I'm using this with webpack and material-ui and the component shows up, the max and value properties work as expected, but the onChange function is never triggered. I have tried on Firefox and Chrome for Ubuntu.

I think this project has no typescript definitions, I think it could be of great help.

If you don't have bandwith to achieve this task, I can tackle on it.

Thanks for the quick turnaround on TeamWertarbyte/material-ui-fullscreen-dialog#14. Similarly, can we bump this to not throw a warning with React 16?

Thanks again for the great components!

See image below.

# cat client/node_modules/material-ui-rating/package.json | grep version      
"version": "4.1.0",

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import MuiRating from 'material-ui-rating'
import { withStyles } from '@material-ui/core'

class Rating extends Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    value: PropTypes.number.isRequired,
    muiRatingClasses: PropTypes.object,
    readOnly: PropTypes.bool,
  }

  static defaultProps = {
    muiRatingClasses: {},
    readOnly: true,
  }

  render() {
    const {
      classes,
      value,
      muiRatingClasses,
      readOnly,
      ...restOfProps
    } = this.props
    return (
      <MuiRating
        classes={{
          root: classes.starsRoot,
          icon: classes.star,
          iconButton: classes.starButton,
          ...muiRatingClasses,
        }}
        value={value}
        readOnly
        {...restOfProps}
      />
    )
  }
}

const HEIGHT = 20

const styles = () => ({
  starsRoot: {
    display: 'flex',
    alignItems: 'center',
    height: HEIGHT,
  },
  starButton: {
    padding: 0,
    margin: 0,
    transform: 'scaleX(-1)',
    '& > span': {
      height: HEIGHT,
    },
  },
  star: {
    height: HEIGHT,
    width: 16,
  },
})

export default withStyles(styles)(Rating)

can you look into it? thanks!

following the MUI conventions, I'd like to pass <Rating component="span" />

I have a use case in which <Rating /> is nested within a <p /> element, and I get a dom violation.

Shall I prepare a PR?

I can also add an example in Rating.md, and for story book I'd love some guidance since I've never done that before.

while working on #28 accidentally formatted many of the files automatically through prettier. I see there's no prettier nor eslint in the project. I can add it with the config of your choice, i.e. semistandard.

I think it will make it easier to maintain/extend.

Thoughts?

After add file of type index.d.ts, the file all the same don't send in package. I think problem in system build.
Maybe can you use tsdx with great support typescript?

I actually do this already in my project by setting transform: 'translateX(180deg)'. I can PR here it here as well :)

I wanted to use your library as a customizable solution because our design expects it, and we cannot use the original package from the material ui library.
And so I created the component based on this file but with fixing type and re-work from Classic React Component to Functional Component, maybe it help to use in future, but I can't use it without the above mentioned functionality. =(
https://github.com/TeamWertarbyte/material-ui-rating/blob/master/src/components/Rating/Rating.js

Link to the library with hooks
https://drive.google.com/file/d/1jVOePLPnqDwnzofa7BCIBgOve099SNKf/view?usp=sharing

PS: I mean full support how the original component does it
https://material-ui.com/api/rating/#rating-api

I added a rating in my react project with precision set to 0.5. "averageRating" is a state that is evaluated on render. Image shows how the star is a bit off. Did I do anything wrong or is this a bug?

<Rating precision={0.5} name="averageRating" value={averageRating} />

When clicking on a star and moving the mouse away from it, it will be rendered as a hovered star. This happens with a slow connection. Is this intended behaviour?

You can try it out here: Click on a star and move the mouse away from it. The stars will only be renderer as filled stars when hovering over them again.

https://codesandbox.io/embed/zen-einstein-58c61

hey guys great job with the package!

I'm using react 16.8.6 and I'm getting a warning (attached console screenshot). I'm PRing a fix, let me know if it's ok :)

Not compatible with Material ui 1.0 beta. Produce error