@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
224 lines (223 loc) • 12.1 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formRowPropTypes = exports.formRowDefaultProps = exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper"));
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
var _Section = _interopRequireDefault(require("../section/Section"));
var _SpacingHelper = require("../space/SpacingHelper");
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 _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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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; }
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 = _objectSpread(_objectSpread({
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 {
pV.push(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$context3$FormRo, _this$context4, _this$context4$formEl;
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
} = 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: (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
}, _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", _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.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