@carbon/ibm-products/lib/components/EditTearsheet/EditTearsheet.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var react = require('@carbon/react');
var settings = require('../../settings.js');
var devtools = require('../../global/js/utils/devtools.js');
var TearsheetShell = require('../Tearsheet/TearsheetShell.js');
var propsHelper = require('../../global/js/utils/props-helper.js');

const componentName = 'EditTearsheet';
const blockClass = `${settings.pkg.prefix}--tearsheet-edit`;
// This is a general context for the forms container
// containing information about the state of the container
// and providing some callback methods for forms to use
const FormContext = /*#__PURE__*/React.createContext(null);

// This is a context supplied separately to each form in the container
// to let it know what number it is in the sequence of forms
const FormNumberContext = /*#__PURE__*/React.createContext(0);

// Default values for props
const defaults = {
  verticalPosition: 'normal',
  influencerWidth: 'narrow',
  sideNavAriaLabel: 'Side navigation'
};

// Note that the descriptions here should be kept in sync with those for the
// corresponding props for TearsheetNarrow and TearsheetShell components.

/**
 * **This component is deprecated.** <br>
 * Use Tearsheet with medium to complex edits. See usage guidance for further information.
 * @deprecated
 */
exports.EditTearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    // The component props, in alphabetical order (for consistency).
    cancelButtonText,
    children,
    className,
    description,
    influencerWidth = defaults.influencerWidth,
    label,
    onClose,
    open,
    submitButtonText,
    title,
    verticalPosition = defaults.verticalPosition,
    onRequestSubmit,
    onFormChange,
    sideNavAriaLabel = defaults.sideNavAriaLabel,
    // Collect any other property values passed in.
    ...rest
  } = _ref;
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const handleOnRequestSubmit = async () => {
    setIsSubmitting(true);
    try {
      await onRequestSubmit();
    } catch (error) {
      console.warn(`${componentName} submit error: ${error}`);
    }
    setIsSubmitting(false);
  };
  const actions = [{
    key: 'edit-action-button-submit',
    label: submitButtonText,
    onClick: () => handleOnRequestSubmit(),
    loading: isSubmitting,
    kind: 'primary'
  }, {
    key: 'edit-action-button-cancel',
    label: cancelButtonText,
    onClick: onClose,
    kind: 'ghost'
  }];
  const [currentForm, setCurrentForm] = React.useState(0);
  const [formTitles, setFormTitles] = React.useState([]);
  const contentRef = React.useRef(null);
  const handleCurrentForm = formIndex => {
    setCurrentForm(formIndex);
    if (onFormChange) {
      onFormChange(formIndex);
    }
  };
  function defaultInfluencer() {
    return /*#__PURE__*/React.createElement("div", {
      className: `${blockClass}__side-nav-wrapper`
    }, /*#__PURE__*/React.createElement(react.SideNav, {
      "aria-label": sideNavAriaLabel,
      className: `${blockClass}__side-nav`,
      expanded: true,
      isFixedNav: false
    }, /*#__PURE__*/React.createElement(react.SideNavItems, null, formTitles.map((title, index) => {
      return /*#__PURE__*/React.createElement(react.SideNavMenuItem, {
        key: index,
        onClick: () => handleCurrentForm(index),
        isActive: currentForm === index
      }, title);
    }))));
  }
  return /*#__PURE__*/React.createElement(TearsheetShell.TearsheetShell, _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), propsHelper.prepareProps(rest), {
    actions,
    children,
    className: cx(blockClass, className),
    description,
    influencerPosition: 'left',
    influencerWidth,
    label,
    onClose,
    open,
    size: 'wide',
    title,
    verticalPosition
  }, rest, {
    hasCloseIcon: false,
    influencer: defaultInfluencer(),
    ref
  }), /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}__content`,
    ref: contentRef,
    role: "main"
  }, /*#__PURE__*/React.createElement(react.Form, null, /*#__PURE__*/React.createElement(FormContext.Provider, {
    value: {
      currentForm,
      setFormTitles
    }
  }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(FormNumberContext.Provider, {
    value: index
  }, child))))));
});

/**@ts-ignore*/
exports.EditTearsheet.deprecated = {
  level: 'warn',
  details: `This component is deprecated and will be removed in the next major version.`
};

// Return a placeholder if not released and not enabled by feature flag
exports.EditTearsheet = settings.pkg.checkComponentEnabled(exports.EditTearsheet, componentName);

// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
exports.EditTearsheet.displayName = componentName;

// Note that the descriptions here should be kept in sync with those for the
// corresponding props for TearsheetNarrow and TearsheetShell components.
exports.EditTearsheet.propTypes = {
  /**
   * The cancel button text
   */
  cancelButtonText: index.default.string,
  /**
   * The main content of the tearsheet
   */
  children: index.default.node,
  /**
   * An optional class or classes to be added to the outermost element.
   */
  className: index.default.string,
  /**
   * A description of the flow, displayed in the header area of the tearsheet.
   */
  description: index.default.node,
  /**
   * Used to set the size of the influencer
   */
  influencerWidth: index.default.oneOf(['narrow', 'wide']),
  /**
   * A label for the tearsheet, displayed in the header area of the tearsheet
   * to maintain context for the tearsheet (e.g. as the title changes from page
   * to page of a multi-page task).
   */
  label: index.default.node,
  /**
   * An optional handler that is called when the user closes the tearsheet (by
   * clicking the close button, if enabled, or clicking outside, if enabled).
   * Returning `false` here prevents the modal from closing.
   */
  onClose: index.default.func,
  /**
   * An optional handler that is called when a user changes forms via clicking
   * an influencer nav item.
   * Returns the index of the selected form.
   */
  onFormChange: index.default.func,
  /**
   * Specify a handler for submitting the tearsheet.
   */
  onRequestSubmit: index.default.func.isRequired,
  /**
   * Specifies whether the tearsheet is currently open.
   */
  open: index.default.bool,
  /**
   * Specifies the aria label for the SideNav from Carbon UIShell
   */
  sideNavAriaLabel: index.default.string,
  /**
   * The submit button text
   */
  submitButtonText: index.default.string,
  /**
   * The main title of the tearsheet, displayed in the header area.
   */
  title: index.default.node,
  /**
   * The position of the top of tearsheet in the viewport. The 'normal'
   * position (the default) is a short distance down from the top of the
   * viewport, leaving room at the top for a global header bar to show through
   * from below. The 'lower' position provides a little extra room at the top
   * to allow an action bar navigation or breadcrumbs to also show through.
   */
  verticalPosition: index.default.oneOf(['normal', 'lower'])
};

exports.FormContext = FormContext;
exports.FormNumberContext = FormNumberContext;