@braineet/ui/dist/esm/components/rate/index.js

Braineet design system

var _excluded = ["value", "defaultValue", "field", "form", "count", "allowHalf", "allowClear", "onChange", "rateIconUncheck", "rateIconChecked", "onHoverChange", "onFocus", "onBlur", "onKeyDown", "autoFocus", "disabled", "readOnly"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React, { useState, useEffect, useRef } from 'react';
import { getIn } from 'formik';
import Character from './Character';
import { StyledRate } from './styles';
import { jsx as _jsx } from "react/jsx-runtime";
function getClientPosition(elem) {
  var x;
  var y;
  var doc = elem.ownerDocument;
  var body = doc.body;
  var docElem = doc && doc.documentElement;
  var box = elem.getBoundingClientRect();
  x = box.left;
  y = box.top;
  x -= docElem.clientLeft || body.clientLeft || 0;
  y -= docElem.clientTop || body.clientTop || 0;
  return {
    left: x,
    top: y
  };
}
function getScroll(w) {
  var ret = w.pageXOffset;
  var method = 'scrollLeft';
  if (typeof ret !== 'number') {
    var d = w.document;
    // ie6,7,8 standard mode
    ret = d.documentElement[method];
    if (typeof ret !== 'number') {
      // quirks mode
      ret = d.body[method];
    }
  }
  return ret;
}
function getOffsetLeft(el) {
  var pos = getClientPosition(el);
  var doc = el.ownerDocument;
  // Only IE use `parentWindow`
  var w = doc.defaultView || doc.parentWindow;
  pos.left += getScroll(w);
  return pos.left;
}
var Rate = function Rate(_ref) {
  var valueProps = _ref.value,
    defaultValue = _ref.defaultValue,
    field = _ref.field,
    form = _ref.form,
    count = _ref.count,
    allowHalf = _ref.allowHalf,
    allowClear = _ref.allowClear,
    onChange = _ref.onChange,
    rateIconUncheck = _ref.rateIconUncheck,
    rateIconChecked = _ref.rateIconChecked,
    onHoverChange = _ref.onHoverChange,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    onKeyDown = _ref.onKeyDown,
    autoFocus = _ref.autoFocus,
    disabled = _ref.disabled,
    readOnly = _ref.readOnly,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var charactersRef = useRef([]);
  var _useState = useState(form && form.values && getIn(form.values, field.name) || valueProps || defaultValue || 0),
    value = _useState[0],
    setValue = _useState[1];
  var _useState2 = useState(),
    hoverValue = _useState2[0],
    setHoverValue = _useState2[1];
  var _useState3 = useState(false),
    focused = _useState3[0],
    setFocused = _useState3[1];
  var _useState4 = useState(null),
    cleanedValue = _useState4[0],
    setCleanedValue = _useState4[1];
  useEffect(function () {
    if (autoFocus && !disabled && !readOnly && charactersRef.current[0]) {
      var _charactersRef$curren;
      (_charactersRef$curren = charactersRef.current[0]) == null || _charactersRef$curren.focus == null || _charactersRef$curren.focus();
    }
  }, [autoFocus]);
  useEffect(function () {
    if (form && form.values) {
      setValue(getIn(form.values, field.name));
    } else {
      setValue(valueProps);
    }
  }, [form && form.values ? form.values : valueProps]);
  var onHover = function onHover(e, i) {
    var hoverVal = getCharacterValue(i, e.pageX);
    if (hoverVal !== cleanedValue) {
      setHoverValue(hoverVal);
      setCleanedValue(null);
    }
    onHoverChange(hoverVal);
  };
  var onMouseLeave = function onMouseLeave() {
    setHoverValue(undefined);
    setCleanedValue(null);
    onHoverChange(undefined);
  };
  var onClick = function onClick(e, i) {
    var newValue = getCharacterValue(i, e.pageX);
    var isReset = false;
    if (allowClear) {
      isReset = newValue === value;
    }
    onMouseLeave();
    changeValue(isReset ? 0 : newValue);
    setCleanedValue(isReset ? newValue : null);
  };
  var handleFocus = function handleFocus() {
    setFocused(true);
    if (onFocus) {
      onFocus();
    }
  };
  var handleBlur = function handleBlur() {
    setFocused(false);
    if (onBlur) {
      onBlur();
    }
  };
  var handleKeyDown = function handleKeyDown(e) {
    var keyCode = e.keyCode;
    var val = value;
    if (keyCode === 39 && val < count) {
      if (allowHalf) {
        val += 0.5;
      } else {
        val += 1;
      }
      changeValue(val);
      e.preventDefault();
      if (charactersRef.current[Math.floor(val) - 1]) {
        charactersRef.current[Math.floor(val) - 1].focus();
      }
    } else if (keyCode === 37 && val > 0) {
      if (allowHalf) {
        val -= 0.5;
      } else {
        val -= 1;
      }
      changeValue(val);
      e.preventDefault();
      if (charactersRef.current[Math.floor(val) - 1]) {
        charactersRef.current[Math.floor(val) - 1].focus();
      }
    }
    if (onKeyDown) {
      onKeyDown(e);
    }
  };
  var getCharacterDOM = function getCharacterDOM(index) {
    return charactersRef.current[index];
  };
  var getCharacterValue = function getCharacterValue(index, x) {
    var val = index + 1;
    if (allowHalf) {
      var characterEle = getCharacterDOM(index);
      var leftDis = getOffsetLeft(characterEle);
      var width = characterEle.clientWidth;
      if (x - leftDis < width / 2) {
        val -= 0.5;
      }
    }
    return val;
  };
  var saveRef = function saveRef(index) {
    return function (node) {
      charactersRef.current[index] = node;
    };
  };
  var changeValue = function changeValue(val) {
    if (!valueProps) setValue(val);
    if (form && form.setFieldValue) {
      form.setFieldValue(field.name, val);
    }
    onChange(val);
  };
  var nbCharacter = Array.from(Array(count).keys());
  return /*#__PURE__*/_jsx(StyledRate, _extends({
    as: "ul",
    onMouseLeave: disabled || readOnly ? null : onMouseLeave,
    onFocus: disabled || readOnly ? null : handleFocus,
    onBlur: disabled || readOnly ? null : handleBlur,
    onKeyDown: disabled || readOnly ? null : handleKeyDown,
    role: disabled || readOnly ? null : 'radiogroup',
    disabled: disabled
  }, restProps, {
    children: nbCharacter.map(function (char, index) {
      return /*#__PURE__*/_jsx(Character, {
        ref: saveRef(index),
        index: index,
        count: count,
        disabled: disabled,
        readOnly: readOnly,
        allowHalf: allowHalf,
        value: hoverValue === undefined || disabled ? value : hoverValue,
        onClick: disabled || readOnly ? null : onClick,
        onHover: disabled || readOnly ? null : onHover,
        focused: focused,
        rateIconChecked: rateIconChecked,
        rateIconUncheck: rateIconUncheck
      }, "character-" + char);
    })
  }));
};
Rate.defaultProps = {
  defaultValue: 0,
  count: 5,
  value: 0,
  autoFocus: false,
  allowHalf: false,
  allowClear: true,
  field: null,
  form: null,
  readOnly: false,
  disabled: false,
  rateIconUncheck: 'star_full',
  rateIconChecked: 'star_full',
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  onKeyDown: function onKeyDown() {},
  onChange: function onChange() {},
  onHoverChange: function onHoverChange() {}
};
export default Rate;