@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
214 lines (213 loc) • 9.46 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _AlignmentHelper, _span;
const _excluded = ["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", "label"],
_excluded2 = ["useFieldset", "children", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { extendGracefully, extendPropsWithContextInClassComponent, isTrue, makeUniqueId, validateDOMAttributes } from '../../shared/component-helper';
import AlignmentHelper from '../../shared/AlignmentHelper';
import Context from '../../shared/Context';
import FormLabel from '../form-label/FormLabel';
import Section from '../section/Section';
import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
export const formRowPropTypes = _objectSpread(_objectSpread({
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 {
pV.push(cV);
}
return pV;
}, []);
}
return {
label,
children
};
}
constructor(props) {
super(props);
this._id = props.id || makeUniqueId();
}
render() {
var _this$context, _this$context2, _this$context3, _this$context3$FormRo, _this$context4, _this$context4$formEl;
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
} = props,
attributes = _objectWithoutProperties(props, _excluded);
let {
label
} = props;
const isNested = ((_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : (_this$context3$FormRo = _this$context3.FormRow) === null || _this$context3$FormRo === void 0 ? void 0 : _this$context3$FormRo.itsMeAgain) || ((_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : (_this$context4$formEl = _this$context4.formElement) === null || _this$context4$formEl === void 0 ? void 0 : _this$context4$formEl.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 = _objectSpread({
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
}, 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", _objectSpread({}, formRowDefaultProps));
process.env.NODE_ENV !== "production" ? FormRow.propTypes = _objectSpread({}, formRowPropTypes) : void 0;
const Fieldset = _ref => {
let {
useFieldset = false,
children = null,
className = null
} = _ref,
props = _objectWithoutProperties(_ref, _excluded2);
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