@carbon/ibm-products
Version:
Carbon for IBM Products
227 lines (215 loc) • 7.56 kB
JavaScript
/**
* 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.
*/
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useState, useRef, createContext } from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { Form, SideNav, SideNavItems, SideNavMenuItem } from '@carbon/react';
import { pkg } from '../../settings.js';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
import { prepareProps } from '../../global/js/utils/props-helper.js';
const componentName = 'EditTearsheet';
const blockClass = `${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__*/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__*/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
*/
let EditTearsheet = /*#__PURE__*/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] = 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] = useState(0);
const [formTitles, setFormTitles] = useState([]);
const contentRef = useRef(null);
const handleCurrentForm = formIndex => {
setCurrentForm(formIndex);
if (onFormChange) {
onFormChange(formIndex);
}
};
function defaultInfluencer() {
return /*#__PURE__*/React__default.createElement("div", {
className: `${blockClass}__side-nav-wrapper`
}, /*#__PURE__*/React__default.createElement(SideNav, {
"aria-label": sideNavAriaLabel,
className: `${blockClass}__side-nav`,
expanded: true,
isFixedNav: false
}, /*#__PURE__*/React__default.createElement(SideNavItems, null, formTitles.map((title, index) => {
return /*#__PURE__*/React__default.createElement(SideNavMenuItem, {
key: index,
onClick: () => handleCurrentForm(index),
isActive: currentForm === index
}, title);
}))));
}
return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), 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__default.createElement("div", {
className: `${blockClass}__content`,
ref: contentRef,
role: "main"
}, /*#__PURE__*/React__default.createElement(Form, null, /*#__PURE__*/React__default.createElement(FormContext.Provider, {
value: {
currentForm,
setFormTitles
}
}, React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.createElement(FormNumberContext.Provider, {
value: index
}, child))))));
});
/**@ts-ignore*/
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
EditTearsheet = pkg.checkComponentEnabled(EditTearsheet, componentName);
// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
EditTearsheet.displayName = componentName;
// Note that the descriptions here should be kept in sync with those for the
// corresponding props for TearsheetNarrow and TearsheetShell components.
EditTearsheet.propTypes = {
/**
* The cancel button text
*/
cancelButtonText: PropTypes.string,
/**
* The main content of the tearsheet
*/
children: PropTypes.node,
/**
* An optional class or classes to be added to the outermost element.
*/
className: PropTypes.string,
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
description: PropTypes.node,
/**
* Used to set the size of the influencer
*/
influencerWidth: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.func,
/**
* Specify a handler for submitting the tearsheet.
*/
onRequestSubmit: PropTypes.func.isRequired,
/**
* Specifies whether the tearsheet is currently open.
*/
open: PropTypes.bool,
/**
* Specifies the aria label for the SideNav from Carbon UIShell
*/
sideNavAriaLabel: PropTypes.string,
/**
* The submit button text
*/
submitButtonText: PropTypes.string,
/**
* The main title of the tearsheet, displayed in the header area.
*/
title: PropTypes.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: PropTypes.oneOf(['normal', 'lower'])
};
export { EditTearsheet, FormContext, FormNumberContext };