@wix/design-system
Version:
@wix/design-system
49 lines • 4.04 kB
JavaScript
import React, { useRef } from 'react';
import { st, classes } from './FieldSet.st.css.js';
import { ALIGNMENT, DIRECTION, GAP, LEGEND_ALIGNMENT, LEGEND_PLACEMENT, LEGEND_SIZE, dataHooks, } from './constants';
import Label from './components/Label';
import Suffix from './components/Suffix';
import StatusMessage from './components/StatusMessage';
import InlineLabelWrapper from './components/InlineLabelWrapper';
import { FieldSetContext } from './FieldSet.context';
import _uniqueId from 'lodash/uniqueId';
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, ellipsis, maxLines = 1, }) => {
const hasSuffix = !!(suffix || charCount !== undefined);
const hasOnlySuffix = labelPlacement === LEGEND_PLACEMENT.NONE && hasSuffix;
const hasInlineElements = labelPlacement === LEGEND_PLACEMENT.LEFT ||
labelPlacement === LEGEND_PLACEMENT.RIGHT;
const SuffixWithProps = hasSuffix ? (React.createElement(Suffix, { suffix: suffix, charCount: charCount, labelPlacement: labelPlacement, hasInlineElements: hasInlineElements, labelSize: labelSize })) : null;
// TODO: useId() hook, when React@18
const { current: uniqueStatusMessageId } = useRef(_uniqueId('fieldset-status-message-'));
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: ellipsis ?? true, maxLines: maxLines, required: required, infoContent: infoContent, infoTooltipProps: infoTooltipProps, "aria-hidden": true })),
SuffixWithProps)),
hasOnlySuffix && (React.createElement("div", { className: st(classes.suffixRow) }, SuffixWithProps)),
children && (React.createElement(FieldSetContext.Provider, { value: statusId ? {} : { status, statusId: uniqueStatusMessageId } },
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, ellipsis: ellipsis, maxLines: maxLines, required: required, infoContent: infoContent, infoTooltipProps: infoTooltipProps, "aria-hidden": true }),
SuffixWithProps)),
statusMessage && (React.createElement(StatusMessage, { statusId: statusId || uniqueStatusMessageId, status: status, statusMessage: statusMessage, labelSize: "tiny", labelPlacement: labelPlacement }))));
};
FieldSet.displayName = 'FieldSet';
export default FieldSet;
//# sourceMappingURL=FieldSet.js.map