@vnmfify/core/rate/rate.js

```shell npm i @vnmfify/core -S ```

var _excluded = ["className", "defaultValue", "value", "count", "size", "gutter", "allowHalf", "readonly", "disabled", "touchable", "icon", "emptyIcon", "onClick", "onTouchStart", "onTouchMove", "onChange"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { useUncontrolled } from "@vnmfify/hooks";
import { Star, StarOutlined } from "@vnmfify/icons";
import { View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { useCallback, useMemo, useRef } from "react";
import { prefixClassname } from "../styles";
import { getClientCoordinates, preventDefault } from "../utils/dom/event";
import { getRects } from "../utils/dom/rect";
import { useTouch } from "../utils/touch";
import RateItem from "./rate-item";
import RateContext from "./rate.context";
import { RateStatus } from "./rate.shared";

function getRateStatus(value, index, allowHalf, readonly) {
  if (value >= index) {
    return {
      status: RateStatus.Full,
      value: 1
    };
  }

  if (value + 0.5 >= index && allowHalf && !readonly) {
    return {
      status: RateStatus.Half,
      value: 0.5
    };
  }

  if (value + 1 >= index && allowHalf && readonly) {
    var cardinal = 10 ** 10;
    return {
      status: RateStatus.Half,
      value: Math.round((value - index + 1) * cardinal) / cardinal
    };
  }

  return {
    status: RateStatus.Void,
    value: 0
  };
}

function Rate(props) {
  var {
    className,
    defaultValue,
    value: valueProp,
    count = 5,
    size,
    gutter,
    allowHalf = false,
    readonly = false,
    disabled = false,
    touchable = true,
    icon = /*#__PURE__*/React.createElement(Star, null),
    emptyIcon = /*#__PURE__*/React.createElement(StarOutlined, null),
    onClick,
    onTouchStart: _onTouchStart,
    onTouchMove: _onTouchMove,
    onChange: onChangeProp
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var {
    value = 0,
    setValue
  } = useUncontrolled({
    value: valueProp,
    defaultValue,
    onChange: onChangeProp
  });
  var rootRef = useRef();
  var untouchable = readonly || disabled || !touchable;
  var touch = useTouch();
  var getRanges = useCallback(() => getRects(rootRef, " .".concat(prefixClassname("rate__item"))).then(rects => rects.flatMap((rect, index) => allowHalf ? [{
    score: index + 0.5,
    left: rect.left
  }, {
    score: index + 1,
    left: rect.left + rect.width / 2
  }] : [{
    score: index + 1,
    left: rect.left
  }])), [allowHalf]);
  var getScoreByPosition = useCallback(x => getRanges().then(ranges => {
    for (var i = ranges.length - 1; i > 0; i--) {
      if (x > ranges[i].left) {
        return ranges[i].score;
      }
    }

    return allowHalf ? 0.5 : 1;
  }), [allowHalf, getRanges]);
  var onItemClick = useCallback(event => {
    onClick === null || onClick === void 0 ? void 0 : onClick(event);

    if (untouchable) {
      return;
    }

    var {
      clientX
    } = getClientCoordinates(event);
    getScoreByPosition(clientX).then(newValue => {
      setValue(newValue);
    });
  }, [onClick, untouchable, getScoreByPosition, setValue]);
  var handleTouchStart = useCallback(event => {
    if (untouchable) {
      return;
    }

    touch.start(event);
  }, [touch, untouchable]);
  var handleTouchMove = useCallback(event => {
    if (untouchable) {
      return;
    }

    touch.move(event);

    if (touch.isHorizontal()) {
      preventDefault(event);
      onItemClick(event);
    }
  }, [untouchable, touch, onItemClick]);
  var renderStar = useCallback((item, index) => {
    var renderHalf = allowHalf && item.value > 0 && item.value < 1;
    return /*#__PURE__*/React.createElement(RateItem, {
      key: index,
      score: index + 1,
      disabled: disabled,
      size: size,
      half: renderHalf,
      value: item.value,
      status: item.status
    });
  }, [allowHalf, disabled, size]);
  var stars = useMemo(() => Array(count).fill("").map((__, i) => getRateStatus(value, i + 1, allowHalf, readonly)).map(renderStar), [allowHalf, count, readonly, renderStar, value]);
  return /*#__PURE__*/React.createElement(View, _objectSpread({
    ref: rootRef,
    className: classNames(prefixClassname("rate"), {
      [prefixClassname("rate--disabled")]: disabled,
      [prefixClassname("rate--readonly")]: readonly
    }, className),
    catchMove: true,
    onClick: onItemClick,
    onTouchStart: event => {
      handleTouchStart(event);
      _onTouchStart === null || _onTouchStart === void 0 ? void 0 : _onTouchStart(event);
    },
    onTouchMove: event => {
      handleTouchMove(event);
      _onTouchMove === null || _onTouchMove === void 0 ? void 0 : _onTouchMove(event);
    }
  }, restProps), /*#__PURE__*/React.createElement(RateContext.Provider, {
    value: {
      gutter,
      count,
      icon,
      emptyIcon
    },
    children: stars
  }));
}

export default Rate;
//# sourceMappingURL=rate.js.map