@carbon/ibm-products
Version:
Carbon for IBM Products
148 lines (146 loc) • 5.38 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");
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");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/Saving/Saving.tsx
/**
* Copyright IBM Corp. 2021, 2024
*
* 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 = "Saving";
const Saving = (0, react.forwardRef)(({ secondaryButtonText, className, defaultIconDescription, defaultText, failIconDescription, failText, inProgressIconDescription, inProgressText, onRequestCancel, onRequestSave, status, successIconDescription, successText, type, ...rest }, ref) => {
const statusObj = {
default: {
text: defaultText,
iconDescription: defaultIconDescription,
icon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react_icons.Save, {
size: 16,
...props
})
},
["in-progress"]: {
text: inProgressText,
iconDescription: inProgressIconDescription,
icon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react.InlineLoading, {
size: 16,
...props
})
},
success: {
text: successText,
iconDescription: successIconDescription,
icon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react_icons.CheckmarkOutline, {
size: 16,
...props
})
},
fail: {
text: failText,
iconDescription: failIconDescription,
icon: (props) => /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ErrorOutline, {
size: 16,
...props
})
}
};
const blockClass = `${require_settings.pkg.prefix}--saving`;
return /* @__PURE__ */ react.default.createElement("div", {
...rest,
ref,
className: (0, import_classnames.default)(blockClass, className),
...require_devtools.getDevtoolsProps(componentName)
}, type === "auto" ? /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__message` }, status === "fail" && /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__error-icon` }, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ErrorFilled, { size: 16 })), /* @__PURE__ */ react.default.createElement("p", { className: `${blockClass}__text` }, statusObj[status]?.text)) : /* @__PURE__ */ react.default.createElement("div", { className: `${blockClass}__buttons` }, /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
onClick: onRequestCancel,
kind: "secondary",
disabled: status !== "in-progress",
type: "button"
}, secondaryButtonText), /* @__PURE__ */ react.default.createElement(_carbon_react.Button, {
onClick: onRequestSave,
kind: "primary",
renderIcon: statusObj[status]?.icon,
iconDescription: statusObj[status]?.iconDescription,
disabled: status === "in-progress",
type: "button"
}, statusObj[status]?.text)));
});
Saving.propTypes = {
/**
* Provide an optional class to be applied to the containing node.
*/
className: prop_types.default.string,
/**
* Description for default state icon (manual).
*/
defaultIconDescription: prop_types.default.string,
/**
* Default text for the save button (manual). Per design guidelines you probably don't want to display this in the auto mode.
*/
defaultText: prop_types.default.string,
/**
* Description for fail state icon (manual).
*/
failIconDescription: prop_types.default.string,
/**
* Text for failure state.
*/
failText: prop_types.default.string,
/**
* Description for in progress state icon (manual).
*/
inProgressIconDescription: prop_types.default.string,
/**
* Text for in progress state.
*/
inProgressText: prop_types.default.string,
/**
* Function handler for cancel button (manual).
*/
onRequestCancel: prop_types.default.func,
/**
* Function handler for save button (manual).
*/
onRequestSave: prop_types.default.func,
/**
* Text for the secondary or cancel button (manual).
*/
secondaryButtonText: prop_types.default.string,
/**
* The status of the save. default being the untouched default state -> in-progress being a save has been initiated -> fail or success being the outcome.
*/
status: prop_types.default.oneOf([
"default",
"in-progress",
"success",
"fail"
]).isRequired,
/**
* Description for success state icon (manual).
*/
successIconDescription: prop_types.default.string,
/**
* Text for success state
*/
successText: prop_types.default.string,
/**
* Designates the style of the save component. Manual uses a set of buttons and auto just displays a string. See usage guidelines for additional information.
*/
type: prop_types.default.oneOf(["manual", "auto"]).isRequired
};
Saving.displayName = componentName;
//#endregion
exports.Saving = Saving;