@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
215 lines (214 loc) • 8.24 kB
JavaScript
"use client";
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
var _AlignmentHelper, _span;
import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { extendGracefully, extendPropsWithContextInClassComponent, isTrue, makeUniqueId, validateDOMAttributes } from "../../shared/component-helper.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import Context from "../../shared/Context.js";
import FormLabel from "../form-label/FormLabel.js";
import Section from "../section/Section.js";
import { spacingPropTypes, createSpacingClasses } from "../space/SpacingHelper.js";
export const formRowPropTypes = {
id: PropTypes.string,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
label_direction: PropTypes.oneOf(['vertical', 'horizontal']),
label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
label_id: PropTypes.string,
label_class: PropTypes.string,
no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
no_fieldset: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
locale: PropTypes.string,
wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
direction: PropTypes.oneOf(['vertical', 'horizontal']),
vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
centered: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
section_style: PropTypes.string,
section_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
globalStatus: PropTypes.shape({
id: PropTypes.string,
message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
}),
responsive: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
skipContentWrapperIfNested: PropTypes.bool,
...spacingPropTypes,
className: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node])
};
export const formRowDefaultProps = {
id: null,
label: null,
label_direction: null,
label_sr_only: null,
label_id: null,
label_class: null,
no_label: false,
no_fieldset: null,
locale: null,
wrap: null,
direction: null,
vertical: null,
centered: null,
section_style: null,
section_spacing: null,
globalStatus: null,
responsive: null,
disabled: null,
skeleton: null,
skipContentWrapperIfNested: false,
className: null,
children: null
};
export default class FormRow extends React.PureComponent {
static getContent(props) {
let label = null;
let children = typeof props.children === 'function' ? props.children(props) : props.children;
if (Array.isArray(props.children)) {
children = children.reduce((pV, cV) => {
if (cV && cV.type && cV.type.name === 'FormLabel') {
label = cV.props.children;
} else {
_pushInstanceProperty(pV).call(pV, cV);
}
return pV;
}, []);
}
return {
label,
children
};
}
constructor(props) {
super(props);
this._id = props.id || makeUniqueId();
}
render() {
var _this$context, _this$context2, _this$context3, _this$context4;
const props = extendPropsWithContextInClassComponent(this.props, FormRow.defaultProps, (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow, (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.formElement);
const {
label_direction,
label_sr_only,
label_id,
label_class,
no_fieldset,
no_label,
locale,
direction,
vertical,
centered,
section_style,
section_spacing,
globalStatus,
responsive,
disabled,
skeleton,
wrap,
className,
skipContentWrapperIfNested,
id: _id,
label: _label,
...attributes
} = props;
let {
label
} = props;
const isNested = ((_this$context3 = this.context) === null || _this$context3 === void 0 || (_this$context3 = _this$context3.FormRow) === null || _this$context3 === void 0 ? void 0 : _this$context3.itsMeAgain) || ((_this$context4 = this.context) === null || _this$context4 === void 0 || (_this$context4 = _this$context4.formElement) === null || _this$context4 === void 0 ? void 0 : _this$context4.itsMeAgain);
const {
label: nestedLabel,
children
} = FormRow.getContent(this.props);
if (!label && nestedLabel) {
label = nestedLabel;
}
const hasLabel = typeof label === 'string' && label.length > 0 || label ? true : false;
const id = this._id;
const params = {
className: classnames('dnb-form-row', (isTrue(vertical) || direction) && `dnb-form-row--${isTrue(vertical) ? 'vertical' : direction}`, (isTrue(vertical) || label_direction) && `dnb-form-row--${isTrue(vertical) ? 'vertical' : label_direction}-label`, createSpacingClasses(props), className, centered && 'dnb-form-row--centered', isNested && 'dnb-form-row--nested'),
...attributes
};
validateDOMAttributes(this.props, params);
const formElement = {
useId: () => {
if (this.isIsUsed) {
return makeUniqueId();
}
this.isIsUsed = true;
return id;
},
itsMeAgain: true,
hasLabel,
globalStatus,
direction,
vertical,
label_direction: isTrue(vertical) ? 'vertical' : label_direction,
responsive,
disabled,
skeleton
};
const providerContext = extendGracefully(this.context, {
locale: locale ? locale : this.context.locale,
formElement,
FormRow: formElement
});
const useFieldset = !isTrue(no_fieldset) && hasLabel;
return React.createElement(Context.Provider, {
value: providerContext
}, React.createElement(Fieldset, {
useFieldset: useFieldset,
"aria-labelledby": useFieldset && label ? label_id !== null && label_id !== void 0 ? label_id : `${id}-label` : undefined
}, React.createElement(Section, _extends({
style_type: section_style || 'transparent',
spacing: section_spacing,
element: "div"
}, params), _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), label && React.createElement(FormLabel, {
className: classnames('dnb-form-row__label', label_class),
id: label_id ? label_id : id + '-label',
forId: useFieldset ? null : id,
text: label,
element: useFieldset ? 'legend' : 'label',
labelDirection: label_direction,
srOnly: label_sr_only,
disabled: disabled,
skeleton: skeleton
}), isTrue(no_label) && (_span || (_span = React.createElement("span", {
className: "dnb-form-label dnb-form-row__label-dummy",
"aria-hidden": true
}))), isNested && skipContentWrapperIfNested ? children : React.createElement("div", {
className: classnames('dnb-form-row__content', isTrue(wrap) && 'dnb-form-row__content--wrap', label && !isTrue(vertical) && direction !== 'vertical', responsive && 'dnb-responsive-component')
}, children))));
}
}
_defineProperty(FormRow, "contextType", Context);
_defineProperty(FormRow, "defaultProps", {
...formRowDefaultProps
});
process.env.NODE_ENV !== "production" ? FormRow.propTypes = {
...formRowPropTypes
} : void 0;
const Fieldset = ({
useFieldset = false,
children = null,
className = null,
...props
}) => {
if (useFieldset) {
return React.createElement("fieldset", _extends({
className: classnames('dnb-form-row__fieldset', className)
}, props), children);
}
return React.createElement("div", _extends({
className: classnames('dnb-form-row__fieldset', className)
}, props), children);
};
process.env.NODE_ENV !== "production" ? Fieldset.propTypes = {
children: PropTypes.node,
useFieldset: PropTypes.bool,
className: PropTypes.string
} : void 0;
FormRow._supportsSpacingProps = true;
//# sourceMappingURL=FormRow.js.map