react-lightning-design-system/module/scripts/FieldSet.js

Salesforce Lightning Design System components built with React

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "label", "children"];
import React, { createContext, useMemo } from 'react';
import classnames from 'classnames';
import { FormElement } from './FormElement';
import { createFC } from './common';

/**
 *
 */
export var FieldSetColumnContext = /*#__PURE__*/createContext({});

/**
 *
 */

/**
 *
 */
export var FieldSetRow = createFC(function (props) {
  var className = props.className,
    cols = props.cols,
    children = props.children;
  var totalCols = cols || React.Children.count(children);
  var ctx = useMemo(function () {
    return {
      isFieldSetColumn: true,
      totalCols: totalCols
    };
  }, [totalCols]);
  var rowClassNames = classnames(className, 'slds-form-element__row');
  return /*#__PURE__*/React.createElement(FieldSetColumnContext.Provider, {
    value: ctx
  }, /*#__PURE__*/React.createElement("div", {
    className: rowClassNames
  }, React.Children.map(children, function (child) {
    if ( /*#__PURE__*/React.isValidElement(child) && !child.type.isFormElement) {
      return /*#__PURE__*/React.createElement(FormElement, null, child);
    }
    return child;
  })));
}, {
  isFormElement: true
});

/**
 *
 */

/**
 *
 */
export var FieldSet = createFC(function (_ref) {
  var className = _ref.className,
    label = _ref.label,
    children = _ref.children,
    props = _objectWithoutProperties(_ref, _excluded);
  var fsClassNames = classnames(className, 'slds-form-element', 'slds-form-element_compound');
  var legendClassNames = classnames('slds-form-element__legend', 'slds-form-element__label');
  return /*#__PURE__*/React.createElement("fieldset", _extends({
    className: fsClassNames
  }, props), label ? /*#__PURE__*/React.createElement("legend", {
    className: legendClassNames
  }, label) : null, /*#__PURE__*/React.createElement("div", {
    className: "slds-form-element__control"
  }, children));
}, {
  isFormElement: true,
  Row: FieldSetRow
});
//# sourceMappingURL=FieldSet.js.map