@wix/design-system
Version:
@wix/design-system
208 lines (206 loc) • 7.97 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _FieldSetSt = require("./FieldSet.st.css.js");
var _constants = require("./constants");
var _Label = _interopRequireDefault(require("./components/Label"));
var _Suffix = _interopRequireDefault(require("./components/Suffix"));
var _StatusMessage = _interopRequireDefault(require("./components/StatusMessage"));
var _InlineLabelWrapper = _interopRequireDefault(require("./components/InlineLabelWrapper"));
var _FieldSet = require("./FieldSet.context");
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FieldSet/FieldSet.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var FieldSet = _ref => {
var dataHook = _ref.dataHook,
children = _ref.children,
label = _ref.legend,
_ref$legendPlacement = _ref.legendPlacement,
labelPlacement = _ref$legendPlacement === void 0 ? _constants.LEGEND_PLACEMENT.TOP : _ref$legendPlacement,
_ref$legendAlignment = _ref.legendAlignment,
labelAlignment = _ref$legendAlignment === void 0 ? _constants.LEGEND_ALIGNMENT.MIDDLE : _ref$legendAlignment,
_ref$legendSize = _ref.legendSize,
labelSize = _ref$legendSize === void 0 ? _constants.LEGEND_SIZE.SMALL : _ref$legendSize,
_ref$required = _ref.required,
required = _ref$required === void 0 ? false : _ref$required,
infoContent = _ref.infoContent,
infoTooltipProps = _ref.infoTooltipProps,
suffix = _ref.suffix,
charCount = _ref.charCount,
status = _ref.status,
statusMessage = _ref.statusMessage,
statusId = _ref.statusId,
_ref$alignment = _ref.alignment,
alignment = _ref$alignment === void 0 ? _constants.ALIGNMENT.START : _ref$alignment,
_ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? _constants.DIRECTION.HORIZONTAL : _ref$direction,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? _constants.GAP.SMALL : _ref$gap,
columns = _ref.columns,
ellipsis = _ref.ellipsis,
_ref$maxLines = _ref.maxLines,
maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines;
var hasSuffix = !!(suffix || charCount !== undefined);
var hasOnlySuffix = labelPlacement === _constants.LEGEND_PLACEMENT.NONE && hasSuffix;
var hasInlineElements = labelPlacement === _constants.LEGEND_PLACEMENT.LEFT || labelPlacement === _constants.LEGEND_PLACEMENT.RIGHT;
var SuffixWithProps = hasSuffix ? /*#__PURE__*/_react.default.createElement(_Suffix.default, {
suffix: suffix,
charCount: charCount,
labelPlacement: labelPlacement,
hasInlineElements: hasInlineElements,
labelSize: labelSize,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 5
}
}) : null;
// TODO: useId() hook, when React@18
var _useRef = (0, _react.useRef)((0, _uniqueId2.default)('fieldset-status-message-')),
uniqueStatusMessageId = _useRef.current;
return /*#__PURE__*/_react.default.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: (0, _FieldSetSt.st)(_FieldSetSt.classes.root, {
labelSize,
hasInlineElements,
labelPlacement,
labelAlignment,
required,
hasOnlySuffix,
minLabelHeight: !children
}),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("legend", {
className: _FieldSetSt.classes.visuallyHidden,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 7
}
}, label), labelPlacement === _constants.LEGEND_PLACEMENT.TOP && /*#__PURE__*/_react.default.createElement("div", {
className: _FieldSetSt.classes.labelRow,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _FieldSetSt.classes.labelRowMain,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
dataHook: _constants.dataHooks.label,
label: label,
labelSize: labelSize,
ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true,
maxLines: maxLines,
required: required,
infoContent: infoContent,
infoTooltipProps: infoTooltipProps,
"aria-hidden": true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}
})), SuffixWithProps), hasOnlySuffix && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _FieldSetSt.st)(_FieldSetSt.classes.suffixRow),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 9
}
}, SuffixWithProps), children && /*#__PURE__*/_react.default.createElement(_FieldSet.FieldSetContext.Provider, {
value: statusId ? {} : {
status,
statusId: uniqueStatusMessageId
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.children,
className: (0, _FieldSetSt.st)(_FieldSetSt.classes.children, {
childrenWithInlineLabel: hasInlineElements,
alignment,
direction,
gap
}),
style: {
gridTemplateColumns: direction === _constants.DIRECTION.HORIZONTAL ? columns : undefined
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 11
}
}, children)), hasInlineElements && /*#__PURE__*/_react.default.createElement(_InlineLabelWrapper.default, {
suffix: suffix,
charCount: charCount,
labelPlacement: labelPlacement,
labelSize: labelSize,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Label.default, {
dataHook: _constants.dataHooks.label,
label: label,
labelSize: labelSize,
ellipsis: ellipsis,
maxLines: maxLines,
required: required,
infoContent: infoContent,
infoTooltipProps: infoTooltipProps,
"aria-hidden": true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 11
}
}), SuffixWithProps), statusMessage && /*#__PURE__*/_react.default.createElement(_StatusMessage.default, {
statusId: statusId || uniqueStatusMessageId,
status: status,
statusMessage: statusMessage,
labelSize: "tiny",
labelPlacement: labelPlacement,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 9
}
}));
};
FieldSet.displayName = 'FieldSet';
var _default = exports.default = FieldSet;
//# sourceMappingURL=FieldSet.js.map