fannypack-v5/es/Rating/Rating.js

An accessible, composable, and friendly React UI Kit

import { useState, createElement as createElement$1 } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { d as _objectWithoutPropertiesLoose, _ as _objectSpread2, c as _extends } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import { useClassName } from '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import { times } from '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import { createComponent } from '../utils/createComponent.js';
import { createElement } from '../utils/createElement.js';
import { createHook } from '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
import { Box } from 'reakit';
import '../Box/styles-579aeb3a.js';
import { Box as Box$1 } from '../Box/Box.js';
import '../Icon/styles-ca55138b.js';
import { Icon } from '../Icon/Icon.js';
import '../Rover/styles-5b0f31dc.js';
import '../Rover/RoverState.js';
import '../Rover/Rover.js';
import { Rover } from '../Rover/index.js';
import { R as Rating$1, a as RatingItem$1 } from './styles-6625a6bd.js';

var useProps = createHook(function (props, _ref) {
  var themeKey = _ref.themeKey,
      themeKeyOverride = _ref.themeKeyOverride;

  var color = props.color,
      item = props.item,
      items = props.items,
      isSingular = props.isSingular,
      isStatic = props.isStatic,
      onChange = props.onChange,
      overrides = props.overrides,
      maxValue = props.maxValue,
      roverProps = props.roverProps,
      size = props.size,
      value = props.value,
      restProps = _objectWithoutPropertiesLoose(props, ["color", "item", "items", "isSingular", "isStatic", "onChange", "overrides", "maxValue", "roverProps", "size", "value"]);

  var boxProps = Box$1.useProps(restProps);
  var rover = Rover.useState();

  var _React$useState = useState(-1),
      hoveringIndex = _React$useState[0],
      setHoveringIndex = _React$useState[1];

  var className = useClassName({
    style: Rating$1,
    styleProps: props,
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  var disabled = props.disabled || isStatic;
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    onMouseLeave: !disabled ? function () {
      return setHoveringIndex(-1);
    } : undefined,
    overrides: overrides,
    role: 'radiogroup',
    children: times(items ? items.length : maxValue, function (index) {
      return /*#__PURE__*/createElement$1(Rover, _extends({}, rover, roverProps, {
        disabled: disabled
      }), function (props) {
        return (
          /*#__PURE__*/

          /*
          // @ts-ignore */
          createElement$1(RatingItem, _extends({
            key: index
          }, props, {
            "aria-checked": value === index + 1,
            "aria-posinset": index + 1,
            "aria-setsize": maxValue,
            color: color,
            isActive: hoveringIndex >= 0 ? isSingular ? hoveringIndex === index : hoveringIndex >= index : isSingular ? value === index + 1 : value > index,
            isStatic: isStatic,
            onClick: !disabled ? function () {
              return onChange(index + 1);
            } : undefined,
            onMouseEnter: !disabled ? function () {
              return setHoveringIndex(index);
            } : undefined,
            overrides: overrides,
            size: size
          }), item || (items === null || items === void 0 ? void 0 : items[index]))
        );
      });
    })
  });
}, {
  defaultProps: {
    maxValue: 5,
    value: 0
  },
  themeKey: 'Rating'
});
var Rating = createComponent(function (props) {
  var ratingProps = useProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: ratingProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Rating'
  },
  themeKey: 'Rating'
}); ////////////////////////////////////////

var useRatingItemProps = createHook(function (props, _ref2) {
  var themeKey = _ref2.themeKey,
      themeKeyOverride = _ref2.themeKeyOverride;

  var children = props.children,
      color = props.color,
      restProps = _objectWithoutPropertiesLoose(props, ["children", "color"]);

  var boxProps = Box$1.useProps(restProps);
  var className = useClassName({
    style: RatingItem$1,
    styleProps: _objectSpread2(_objectSpread2({}, props), {}, {
      color: color
    }),
    themeKey: themeKey,
    themeKeyOverride: themeKeyOverride,
    prevClassName: boxProps.className
  });
  return _objectSpread2(_objectSpread2({}, boxProps), {}, {
    className: className,
    role: 'radio',
    children: children
  });
}, {
  defaultProps: {
    children: /*#__PURE__*/createElement$1(Icon, {
      icon: "star"
    }),
    color: 'gold'
  },
  themeKey: 'Rating.Item'
});
var RatingItem = createComponent(function (props) {
  var ratingItemProps = useRatingItemProps(props);
  return createElement({
    children: props.children,
    component: Box,
    use: props.use,
    htmlProps: ratingItemProps
  });
}, {
  attach: {
    useProps: useProps,
    displayName: 'Rating.Item'
  },
  themeKey: 'Rating.Item'
});

export { Rating, RatingItem };