sanity-plugin-simple-star-rating/lib/index.js

A Sanity.io star rating input component.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _fa = require('react-icons/fa');

var _patchEvent = require('part:@sanity/form-builder/patch-event');

var _patchEvent2 = _interopRequireDefault(_patchEvent);

var _DefaultLabel = require('@sanity/base/lib/__legacy/@sanity/components/labels/DefaultLabel');

var _DefaultLabel2 = _interopRequireDefault(_DefaultLabel);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var createPatchFrom = function createPatchFrom(value) {
  return _patchEvent2.default.from(value === '' ? (0, _patchEvent.unset)() : (0, _patchEvent.set)(Number(value)));
};

var makeIterable = function makeIterable(end) {
  var range = [];

  for (var i = 0; i < end; i++) {
    range.push(i + 1);
  }

  return range;
};

var RadioButton = function RadioButton(_ref) {
  var item = _ref.item,
      selected = _ref.selected,
      value = _ref.value;
  return _react2.default.createElement(
    'label',
    { htmlFor: item, style: { marginRight: '0.25rem' } },
    _react2.default.createElement('input', {
      type: 'radio',
      id: item,
      name: 'rating',
      value: item,
      style: {
        position: 'absolute',
        top: '-9999px',
        width: '1px',
        height: '1px'
      },
      selected: selected
    }),
    value >= item ? _react2.default.createElement(_fa.FaStar, null) : _react2.default.createElement(_fa.FaRegStar, null)
  );
};

var RatingInput = function RatingInput(_ref2) {
  var type = _ref2.type,
      value = _ref2.value,
      onChange = _ref2.onChange;
  var title = type.title,
      description = type.description,
      options = type.options;

  var end = options && options.stars ? parseFloat(options.stars) : 5;
  var stars = makeIterable(end);

  var handleChange = function handleChange(evt) {
    var val = evt.target.value;
    onChange(createPatchFrom(val));
  };

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _DefaultLabel2.default,
      null,
      title
    ),
    description && _react2.default.createElement(
      'p',
      { style: { marginTop: '0.25rem', fontSize: '0.8125rem' } },
      description
    ),
    _react2.default.createElement(
      'div',
      { onChange: handleChange },
      stars.map(function (item) {
        return _react2.default.createElement(RadioButton, { item: item, selected: value === item, value: value });
      })
    )
  );
};

exports.default = RatingInput;