@carbon/ibm-products
Version:
Carbon for IBM Products
191 lines (189 loc) • 6.96 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_index = require("../../node_modules/classnames/index.js");
const require_settings = require("../../settings.js");
const require_devtools = require("../../global/js/utils/devtools.js");
const require_props_helper = require("../../global/js/utils/props-helper.js");
const require_TearsheetShell = require("../Tearsheet/TearsheetShell.js");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let _carbon_react = require("@carbon/react");
//#region src/components/EditTearsheet/EditTearsheet.tsx
/**
* Copyright IBM Corp. 2022, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
var import_classnames = /* @__PURE__ */ require_runtime.__toESM(require_index.default);
const componentName = "EditTearsheet";
const blockClass = `${require_settings.pkg.prefix}--tearsheet-edit`;
const FormContext = (0, react.createContext)(null);
const FormNumberContext = (0, react.createContext)(0);
const defaults = {
verticalPosition: "normal",
influencerWidth: "narrow",
sideNavAriaLabel: "Side navigation"
};
/**
* **This component is deprecated.** <br>
* Use Tearsheet with medium to complex edits. See usage guidance for further information.
* @deprecated
*/
const EditTearsheet = (0, react.forwardRef)(({ cancelButtonText, children, className, description, influencerWidth = defaults.influencerWidth, label, onClose, open, submitButtonText, title, verticalPosition = defaults.verticalPosition, onRequestSubmit, onFormChange, sideNavAriaLabel = defaults.sideNavAriaLabel, ...rest }, ref) => {
const [isSubmitting, setIsSubmitting] = (0, 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] = (0, react.useState)(0);
const [formTitles, setFormTitles] = (0, react.useState)([]);
const contentRef = (0, react.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(_carbon_react.SideNav, {
"aria-label": sideNavAriaLabel,
className: `${blockClass}__side-nav`,
expanded: true,
isFixedNav: false
}, /* @__PURE__ */ react.default.createElement(_carbon_react.SideNavItems, null, formTitles.map((title, index) => {
return /* @__PURE__ */ react.default.createElement(_carbon_react.SideNavMenuItem, {
key: index,
onClick: () => handleCurrentForm(index),
isActive: currentForm === index
}, title);
}))));
}
return /* @__PURE__ */ react.default.createElement(require_TearsheetShell.TearsheetShell, {
...require_devtools.getDevtoolsProps(componentName),
...require_props_helper.prepareProps(rest),
actions,
children,
className: (0, import_classnames.default)(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(_carbon_react.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.`
};
EditTearsheet.displayName = componentName;
EditTearsheet.propTypes = {
/**
* The cancel button text
*/
cancelButtonText: prop_types.default.string,
/**
* The main content of the tearsheet
*/
children: prop_types.default.node,
/**
* An optional class or classes to be added to the outermost element.
*/
className: prop_types.default.string,
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
description: prop_types.default.node,
/**
* Used to set the size of the influencer
*/
influencerWidth: prop_types.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: prop_types.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: prop_types.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: prop_types.default.func,
/**
* Specify a handler for submitting the tearsheet.
*/
onRequestSubmit: prop_types.default.func.isRequired,
/**
* Specifies whether the tearsheet is currently open.
*/
open: prop_types.default.bool,
/**
* Specifies the aria label for the SideNav from Carbon UIShell
*/
sideNavAriaLabel: prop_types.default.string,
/**
* The submit button text
*/
submitButtonText: prop_types.default.string,
/**
* The main title of the tearsheet, displayed in the header area.
*/
title: prop_types.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: prop_types.default.oneOf(["normal", "lower"])
};
//#endregion
exports.EditTearsheet = EditTearsheet;
exports.FormContext = FormContext;
exports.FormNumberContext = FormNumberContext;