@wix/design-system
Version:
@wix/design-system
225 lines (223 loc) • 8.32 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
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,
children,
legend: label,
legendPlacement: labelPlacement = _constants.LEGEND_PLACEMENT.TOP,
legendAlignment: labelAlignment = _constants.LEGEND_ALIGNMENT.MIDDLE,
legendSize: labelSize = _constants.LEGEND_SIZE.SMALL,
required = false,
infoContent,
infoTooltipProps,
suffix,
charCount,
status,
statusMessage,
statusId,
alignment = _constants.ALIGNMENT.START,
direction = _constants.DIRECTION.HORIZONTAL,
gap = _constants.GAP.SMALL,
columns,
ellipsis,
maxLines = 1
} = _ref;
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: 55,
columnNumber: 5
}
}) : null;
// TODO: useId() hook, when React@18
var {
current: uniqueStatusMessageId
} = (0, _react.useRef)((0, _uniqueId2.default)('fieldset-status-message-'));
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: 70,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("legend", {
className: _FieldSetSt.classes.visuallyHidden,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 7
}
}, label), labelPlacement === _constants.LEGEND_PLACEMENT.TOP && /*#__PURE__*/_react.default.createElement("div", {
className: _FieldSetSt.classes.labelRow,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _FieldSetSt.classes.labelRowMain,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
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: 92,
columnNumber: 13
}
})), SuffixWithProps), hasOnlySuffix && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _FieldSetSt.st)(_FieldSetSt.classes.suffixRow),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 9
}
}, SuffixWithProps), children && /*#__PURE__*/_react.default.createElement(_FieldSet.FieldSetContext.Provider, {
value: statusId ? {} : {
status,
statusId: uniqueStatusMessageId
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 112,
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: 115,
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: 134,
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: 140,
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: 156,
columnNumber: 9
}
}));
};
FieldSet.displayName = 'FieldSet';
FieldSet.propTypes = {
dataHook: _propTypes.default.string,
children: _propTypes.default.node,
legend: _propTypes.default.node.isRequired,
legendPlacement: _propTypes.default.oneOf(Object.values(_constants.LEGEND_PLACEMENT)),
legendAlignment: _propTypes.default.oneOf(Object.values(_constants.LEGEND_ALIGNMENT)),
legendSize: _propTypes.default.oneOf(Object.values(_constants.LEGEND_SIZE)),
required: _propTypes.default.bool,
infoContent: _propTypes.default.node,
infoTooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
suffix: _propTypes.default.node,
charCount: _propTypes.default.number,
status: _propTypes.default.oneOf(Object.values(_constants.STATUS_TYPE)),
statusMessage: _propTypes.default.node,
statusId: _propTypes.default.string,
alignment: _propTypes.default.oneOf(Object.values(_constants.ALIGNMENT)),
direction: _propTypes.default.oneOf(Object.values(_constants.DIRECTION)),
gap: _propTypes.default.oneOf(Object.values(_constants.GAP)),
columns: _propTypes.default.string
};
var _default = exports.default = FieldSet;
//# sourceMappingURL=FieldSet.js.map