wix-style-react/dist/src/FieldSet/FieldSet.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var _FieldSetSt = require("./FieldSet.st.css");
var _constants = require("./constants");
var _Label = _interopRequireDefault(require("./components/Label"));
var _Asterisk = _interopRequireDefault(require("./components/Asterisk"));
var _Suffix = _interopRequireDefault(require("./components/Suffix"));
var _InfoContentIcon = _interopRequireDefault(require("./components/InfoContentIcon"));
var _StatusMessage = _interopRequireDefault(require("./components/StatusMessage"));
var _InlineLabelWrapper = _interopRequireDefault(require("./components/InlineLabelWrapper"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/FieldSet/FieldSet.tsx";
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
  } = _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 InfoIconWithProps = /*#__PURE__*/_react.default.createElement(_InfoContentIcon.default, {
    required: required,
    labelSize: labelSize,
    infoContent: infoContent,
    infoTooltipProps: infoTooltipProps,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 5
    }
  });
  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: 62,
      columnNumber: 5
    }
  }) : null;
  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: 72,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("legend", {
    className: _FieldSetSt.classes.visuallyHidden,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 7
    }
  }, label), labelPlacement === _constants.LEGEND_PLACEMENT.TOP && /*#__PURE__*/_react.default.createElement("div", {
    className: _FieldSetSt.classes.labelRow,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _FieldSetSt.classes.labelRowMain,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
    dataHook: _constants.dataHooks.label,
    label: label,
    labelSize: labelSize,
    ellipsis: true,
    "aria-hidden": true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 94,
      columnNumber: 13
    }
  }), required && /*#__PURE__*/_react.default.createElement(_Asterisk.default, {
    labelSize: labelSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 26
    }
  }), InfoIconWithProps), 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("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: 112,
      columnNumber: 9
    }
  }, children), hasInlineElements && /*#__PURE__*/_react.default.createElement(_InlineLabelWrapper.default, {
    suffix: suffix,
    charCount: charCount,
    labelPlacement: labelPlacement,
    labelSize: labelSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 130,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
    dataHook: _constants.dataHooks.label,
    label: label,
    labelSize: labelSize,
    "aria-hidden": true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 11
    }
  }), required && /*#__PURE__*/_react.default.createElement(_Asterisk.default, {
    labelSize: labelSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 142,
      columnNumber: 24
    }
  }), InfoIconWithProps, SuffixWithProps), statusMessage && /*#__PURE__*/_react.default.createElement(_StatusMessage.default, {
    statusId: statusId,
    status: status,
    statusMessage: statusMessage,
    labelSize: labelSize,
    labelPlacement: labelPlacement,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 149,
      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