Añadir plantilla

Base para front

1 files changed, 144 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Rating/Rating.js b/front/odiparpack/app/components/Rating/Rating.js
new file mode 100644
index 0000000..6f65d06
--- /dev/null
+++ b/front/odiparpack/app/components/Rating/Rating.js
@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ToggleStar from '@material-ui/icons/Star';
+import ToggleStarBorder from '@material-ui/icons/StarBorder';
+import { orange, grey } from '@material-ui/core/colors';
+
+import { IconButton } from '@material-ui/core';
+
+const styles = {
+  disabled: {
+    pointerEvents: 'none'
+  }
+};
+
+class Rating extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hoverValue: props.value
+    };
+  }
+
+  renderIcon(i) {
+    const filled = i <= this.props.value;
+    const hovered = i <= this.state.hoverValue;
+
+    if ((hovered && !filled) || (!hovered && filled)) {
+      return this.props.iconHoveredRenderer ? this.props.iconHoveredRenderer({
+        ...this.props,
+        index: i
+      }) : this.props.iconHovered;
+    } if (filled) {
+      return this.props.iconFilledRenderer ? this.props.iconFilledRenderer({
+        ...this.props,
+        index: i
+      }) : this.props.iconFilled;
+    }
+    return this.props.iconNormalRenderer ? this.props.iconNormalRenderer({
+      ...this.props,
+      index: i
+    }) : this.props.iconNormal;
+  }
+
+  render() {
+    const {
+      disabled,
+      iconFilled,
+      iconHovered,
+      iconNormal,
+      tooltip,
+      tooltipRenderer,
+      tooltipPosition,
+      tooltipStyles,
+      iconFilledRenderer,
+      iconHoveredRenderer,
+      iconNormalRenderer,
+      itemStyle,
+      itemClassName,
+      itemIconStyle,
+      max,
+      onChange,
+      readOnly,
+      style,
+      value,
+      ...other
+    } = this.props;
+
+    const rating = [];
+
+    for (let i = 1; i <= max; i += 1) {
+      rating.push(
+        <IconButton
+          key={i}
+          className={itemClassName}
+          disabled={disabled}
+          onMouseEnter={() => this.setState({ hoverValue: i })}
+          onMouseLeave={() => this.setState({ hoverValue: value })}
+          onClick={() => {
+            if (!readOnly && onChange) {
+              onChange(i);
+            }
+          }}
+        >
+          {this.renderIcon(i)}
+        </IconButton>
+      );
+    }
+
+    return (
+      <div
+        style={this.props.disabled || this.props.readOnly ? { ...styles.disabled, ...this.props.style } : this.props.style}
+        {...other}
+      >
+        {rating}
+      </div>
+    );
+  }
+}
+
+Rating.propTypes = {
+  disabled: PropTypes.bool,
+  iconFilled: PropTypes.node,
+  iconHovered: PropTypes.node,
+  iconNormal: PropTypes.node,
+  tooltip: PropTypes.node,
+  tooltipRenderer: PropTypes.func,
+  tooltipPosition: PropTypes.string,
+  tooltipStyles: PropTypes.object,
+  iconFilledRenderer: PropTypes.func,
+  iconHoveredRenderer: PropTypes.func,
+  iconNormalRenderer: PropTypes.func,
+  itemStyle: PropTypes.object,
+  itemClassName: PropTypes.object,
+  itemIconStyle: PropTypes.object,
+  max: PropTypes.number,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool,
+  style: PropTypes.object,
+  value: PropTypes.number
+};
+
+Rating.defaultProps = {
+  disabled: false,
+  iconFilled: <ToggleStar style={{ color: orange[500] }} />,
+  iconHovered: <ToggleStarBorder style={{ color: orange[500] }} />,
+  iconNormal: <ToggleStarBorder style={{ color: grey[300] }} />,
+  tooltipPosition: 'bottom-center',
+  max: 5,
+  readOnly: false,
+  value: 0,
+  tooltip: null,
+  tooltipRenderer: () => {},
+  tooltipStyles: null,
+  iconFilledRenderer: undefined,
+  iconHoveredRenderer: undefined,
+  iconNormalRenderer: undefined,
+  itemStyle: undefined,
+  itemClassName: undefined,
+  itemIconStyle: undefined,
+  onChange: () => {},
+  style: null,
+};
+
+export default Rating;