design-react-kit/dist/Rating/Rating.js

Componenti React per Bootstrap 5

import React, { Fragment } from 'react';
import classNames from 'classnames';
import { FormGroup, Label } from 'reactstrap';
import { Input } from '../Input/Input';
import { Icon } from '../Icon/Icon';
import { noop } from '../utils';
export const isCustomLegendObject = (legend) => {
    return legend != null && typeof legend === 'object' && 'content' in legend;
};
export const Rating = ({ className, inputs, legend, name, readOnly, value, wrapperClassName, testId, labelTemplate = (value) => `Valuta ${value} stelle su 5`, onChangeRating = noop, ...attributes }) => {
    // Input data
    // On the DOM we have to go from 5 to 1
    const safeInputs = (inputs || []).reverse();
    // Fields
    const labelFn = labelTemplate;
    const onChange = readOnly ? noop : onChangeRating;
    const wrapperClasses = classNames(wrapperClassName, {
        'rating rating-read-only': readOnly,
        'rating rating-label': legend
    });
    const fieldClasses = classNames(className);
    const extraFieldAttrs = readOnly ? { 'aria-hidden': true } : {};
    // Legend
    const isLegendString = typeof legend === 'string';
    let legendClass = '';
    let legendText = legend;
    if (isCustomLegendObject(legend)) {
        legendClass = classNames({
            'visually-hidden': legend.srOnly
        });
        legendText = legend.content;
    }
    const legendContent = isCustomLegendObject(legend) || isLegendString ? React.createElement("legend", { className: legendClass }, legendText) : legend;
    return (React.createElement(FormGroup, { cssModule: { 'form-group': 'rating' }, tag: 'fieldset', className: wrapperClasses, "data-testid": testId, ...attributes },
        legend && legendContent,
        safeInputs.map((id, i) => {
            const currentValue = (5 - i);
            return (React.createElement(Fragment, { key: id },
                React.createElement(Input, { type: 'radio', id: id, name: name, value: String(currentValue), cssModule: { 'form-control': '' }, className: fieldClasses, onChange: () => onChange(currentValue, name), checked: value === currentValue, disabled: readOnly, ...extraFieldAttrs }),
                React.createElement(Label, { className: 'full', for: id },
                    React.createElement(Icon, { icon: 'it-star-full', size: 'sm', "aria-hidden": 'true' }),
                    React.createElement("span", { className: 'visually-hidden' }, labelFn(currentValue)))));
        })));
};
//# sourceMappingURL=Rating.js.map