@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
224 lines (223 loc) • 10.4 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formRowPropTypes = exports.formRowDefaultProps = exports.default = void 0;
var _push = _interopRequireDefault(require("core-js-pure/stable/instance/push.js"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _Section = _interopRequireDefault(require("../section/Section.js"));
var _SpacingHelper = require("../space/SpacingHelper.js");
var _AlignmentHelper, _span;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const formRowPropTypes = exports.formRowPropTypes = {
id: _propTypes.default.string,
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
label_direction: _propTypes.default.oneOf(['vertical', 'horizontal']),
label_sr_only: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
label_id: _propTypes.default.string,
label_class: _propTypes.default.string,
no_label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
no_fieldset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
locale: _propTypes.default.string,
wrap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
direction: _propTypes.default.oneOf(['vertical', 'horizontal']),
vertical: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
centered: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
section_style: _propTypes.default.string,
section_spacing: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
globalStatus: _propTypes.default.shape({
id: _propTypes.default.string,
message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
}),
responsive: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
skipContentWrapperIfNested: _propTypes.default.bool,
..._SpacingHelper.spacingPropTypes,
className: _propTypes.default.string,
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node])
};
const formRowDefaultProps = exports.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
};
class FormRow extends _react.default.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 {
(0, _push.default)(pV).call(pV, cV);
}
return pV;
}, []);
}
return {
label,
children
};
}
constructor(props) {
super(props);
this._id = props.id || (0, _componentHelper.makeUniqueId)();
}
render() {
var _this$context, _this$context2, _this$context3, _this$context4;
const props = (0, _componentHelper.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: (0, _classnames.default)('dnb-form-row', ((0, _componentHelper.isTrue)(vertical) || direction) && `dnb-form-row--${(0, _componentHelper.isTrue)(vertical) ? 'vertical' : direction}`, ((0, _componentHelper.isTrue)(vertical) || label_direction) && `dnb-form-row--${(0, _componentHelper.isTrue)(vertical) ? 'vertical' : label_direction}-label`, (0, _SpacingHelper.createSpacingClasses)(props), className, centered && 'dnb-form-row--centered', isNested && 'dnb-form-row--nested'),
...attributes
};
(0, _componentHelper.validateDOMAttributes)(this.props, params);
const formElement = {
useId: () => {
if (this.isIsUsed) {
return (0, _componentHelper.makeUniqueId)();
}
this.isIsUsed = true;
return id;
},
itsMeAgain: true,
hasLabel,
globalStatus,
direction,
vertical,
label_direction: (0, _componentHelper.isTrue)(vertical) ? 'vertical' : label_direction,
responsive,
disabled,
skeleton
};
const providerContext = (0, _componentHelper.extendGracefully)(this.context, {
locale: locale ? locale : this.context.locale,
formElement,
FormRow: formElement
});
const useFieldset = !(0, _componentHelper.isTrue)(no_fieldset) && hasLabel;
return _react.default.createElement(_Context.default.Provider, {
value: providerContext
}, _react.default.createElement(Fieldset, {
useFieldset: useFieldset,
"aria-labelledby": useFieldset && label ? label_id !== null && label_id !== void 0 ? label_id : `${id}-label` : undefined
}, _react.default.createElement(_Section.default, _extends({
style_type: section_style || 'transparent',
spacing: section_spacing,
element: "div"
}, params), _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), label && _react.default.createElement(_FormLabel.default, {
className: (0, _classnames.default)('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
}), (0, _componentHelper.isTrue)(no_label) && (_span || (_span = _react.default.createElement("span", {
className: "dnb-form-label dnb-form-row__label-dummy",
"aria-hidden": true
}))), isNested && skipContentWrapperIfNested ? children : _react.default.createElement("div", {
className: (0, _classnames.default)('dnb-form-row__content', (0, _componentHelper.isTrue)(wrap) && 'dnb-form-row__content--wrap', label && !(0, _componentHelper.isTrue)(vertical) && direction !== 'vertical', responsive && 'dnb-responsive-component')
}, children))));
}
}
exports.default = FormRow;
_defineProperty(FormRow, "contextType", _Context.default);
_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.default.createElement("fieldset", _extends({
className: (0, _classnames.default)('dnb-form-row__fieldset', className)
}, props), children);
}
return _react.default.createElement("div", _extends({
className: (0, _classnames.default)('dnb-form-row__fieldset', className)
}, props), children);
};
process.env.NODE_ENV !== "production" ? Fieldset.propTypes = {
children: _propTypes.default.node,
useFieldset: _propTypes.default.bool,
className: _propTypes.default.string
} : void 0;
FormRow._supportsSpacingProps = true;
//# sourceMappingURL=FormRow.js.map