wix-style-react/dist/es/src/FieldSet/FieldSet.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { st, classes } from './FieldSet.st.css';
import { ALIGNMENT, DIRECTION, GAP, LEGEND_ALIGNMENT, LEGEND_PLACEMENT, LEGEND_SIZE, STATUS_TYPE, dataHooks, } from './constants';
import Label from './components/Label';
import Asterisk from './components/Asterisk';
import Suffix from './components/Suffix';
import InfoContentIcon from './components/InfoContentIcon';
import StatusMessage from './components/StatusMessage';
import InlineLabelWrapper from './components/InlineLabelWrapper';
const FieldSet = ({ dataHook, children, legend: label, legendPlacement: labelPlacement = LEGEND_PLACEMENT.TOP, legendAlignment: labelAlignment = LEGEND_ALIGNMENT.MIDDLE, legendSize: labelSize = LEGEND_SIZE.SMALL, required = false, infoContent, infoTooltipProps, suffix, charCount, status, statusMessage, statusId, alignment = ALIGNMENT.START, direction = DIRECTION.HORIZONTAL, gap = GAP.SMALL, columns, }) => {
    const hasSuffix = !!(suffix || charCount !== undefined);
    const hasOnlySuffix = labelPlacement === LEGEND_PLACEMENT.NONE && hasSuffix;
    const hasInlineElements = labelPlacement === LEGEND_PLACEMENT.LEFT ||
        labelPlacement === LEGEND_PLACEMENT.RIGHT;
    const InfoIconWithProps = (React.createElement(InfoContentIcon, { required: required, labelSize: labelSize, infoContent: infoContent, infoTooltipProps: infoTooltipProps }));
    const SuffixWithProps = hasSuffix ? (React.createElement(Suffix, { suffix: suffix, charCount: charCount, labelPlacement: labelPlacement, hasInlineElements: hasInlineElements, labelSize: labelSize })) : null;
    return (React.createElement("fieldset", { "data-hook": dataHook, "data-legend-placement": labelPlacement, "data-legend-alignment": labelAlignment, "data-status": status, "data-alignment": alignment, "data-direction": direction, "data-gap": gap, className: st(classes.root, {
            labelSize,
            hasInlineElements,
            labelPlacement,
            labelAlignment,
            required,
            hasOnlySuffix,
            minLabelHeight: !children,
        }) },
        React.createElement("legend", { className: classes.visuallyHidden }, label),
        labelPlacement === LEGEND_PLACEMENT.TOP && (React.createElement("div", { className: classes.labelRow },
            React.createElement("div", { className: classes.labelRowMain },
                React.createElement(Label, { dataHook: dataHooks.label, label: label, labelSize: labelSize, ellipsis: true, "aria-hidden": true }),
                required && React.createElement(Asterisk, { labelSize: labelSize }),
                InfoIconWithProps),
            SuffixWithProps)),
        hasOnlySuffix && (React.createElement("div", { className: st(classes.suffixRow) }, SuffixWithProps)),
        children && (React.createElement("div", { "data-hook": dataHooks.children, className: st(classes.children, {
                childrenWithInlineLabel: hasInlineElements,
                alignment,
                direction,
                gap,
            }), style: {
                gridTemplateColumns: direction === DIRECTION.HORIZONTAL ? columns : undefined,
            } }, children)),
        hasInlineElements && (React.createElement(InlineLabelWrapper, { suffix: suffix, charCount: charCount, labelPlacement: labelPlacement, labelSize: labelSize },
            React.createElement(Label, { dataHook: dataHooks.label, label: label, labelSize: labelSize, "aria-hidden": true }),
            required && React.createElement(Asterisk, { labelSize: labelSize }),
            InfoIconWithProps,
            SuffixWithProps)),
        statusMessage && (React.createElement(StatusMessage, { statusId: statusId, status: status, statusMessage: statusMessage, labelSize: labelSize, labelPlacement: labelPlacement }))));
};
FieldSet.displayName = 'FieldSet';
FieldSet.propTypes = {
    dataHook: PropTypes.string,
    children: PropTypes.node,
    legend: PropTypes.node.isRequired,
    legendPlacement: PropTypes.oneOf(Object.values(LEGEND_PLACEMENT)),
    legendAlignment: PropTypes.oneOf(Object.values(LEGEND_ALIGNMENT)),
    legendSize: PropTypes.oneOf(Object.values(LEGEND_SIZE)),
    required: PropTypes.bool,
    infoContent: PropTypes.node,
    infoTooltipProps: PropTypes.shape(TooltipCommonProps),
    suffix: PropTypes.node,
    charCount: PropTypes.number,
    status: PropTypes.oneOf(Object.values(STATUS_TYPE)),
    statusMessage: PropTypes.node,
    statusId: PropTypes.string,
    alignment: PropTypes.oneOf(Object.values(ALIGNMENT)),
    direction: PropTypes.oneOf(Object.values(DIRECTION)),
    gap: PropTypes.oneOf(Object.values(GAP)),
    columns: PropTypes.string,
};
export default FieldSet;
//# sourceMappingURL=FieldSet.js.map