react-gosuslugi/components/Service_FirstStep/index.js

react-gosuslugi collection of common React UI components

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

require('./FirstStep.sass');

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

var FirstStep = function FirstStep(_ref) {
  var color = _ref.color,
      procedure = _ref.procedure,
      selectedOption = _ref.selectedOption,
      handleOptionChange = _ref.handleOptionChange;
  return _react2.default.createElement(
    'ul',
    { className: 'firstStep ' + color },
    _react2.default.createElement(
      'li',
      { className: 'firstStep__caption' },
      _react2.default.createElement('span', null),
      procedure && procedure.length === 1 ? 'Тип получения услуги' : 'Выберите тип получения услуги'
    ),
    procedure && Object.keys(procedure).map(function (procedureName) {
      return _react2.default.createElement(
        'li',
        { key: procedureName, className: 'firstStep__radio-wrapper field-radio-group' },
        _react2.default.createElement(
          'div',
          { className: 'option-wrapper' },
          _react2.default.createElement('input', {
            className: 'firstStep__radio',
            type: 'radio',
            id: 'service-quest__' + procedureName,
            value: procedureName,
            checked: selectedOption === procedureName,
            onChange: handleOptionChange
          }),
          _react2.default.createElement(
            'label',
            { className: 'firstStep__label', htmlFor: 'service-quest__' + procedureName },
            Object.values(procedure[procedureName].name).map(function (name) {
              return name;
            })
          )
        )
      );
    })
  );
};

FirstStep.propTypes = {
  color: _propTypes2.default.string,
  selectedOption: _propTypes2.default.string.isRequired,
  procedure: _propTypes2.default.object.isRequired,
  handleOptionChange: _propTypes2.default.func.isRequired
};

FirstStep.defaultProps = {
  color: 'primary'
};

exports.default = FirstStep;