@carbon/ibm-products
Version:
Carbon for IBM Products
146 lines (144 loc) • 4.91 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.
*/
import { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { pkg } from "../../settings.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import React, { forwardRef } from "react";
import PropTypes from "prop-types";
import { Button, InlineLoading } from "@carbon/react";
import { CheckmarkOutline, ErrorFilled, ErrorOutline, Save } from "@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__ */ __toESM(require_classnames());
const componentName = "Saving";
const Saving = 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.createElement(Save, {
size: 16,
...props
})
},
["in-progress"]: {
text: inProgressText,
iconDescription: inProgressIconDescription,
icon: (props) => /* @__PURE__ */ React.createElement(InlineLoading, {
size: 16,
...props
})
},
success: {
text: successText,
iconDescription: successIconDescription,
icon: (props) => /* @__PURE__ */ React.createElement(CheckmarkOutline, {
size: 16,
...props
})
},
fail: {
text: failText,
iconDescription: failIconDescription,
icon: (props) => /* @__PURE__ */ React.createElement(ErrorOutline, {
size: 16,
...props
})
}
};
const blockClass = `${pkg.prefix}--saving`;
return /* @__PURE__ */ React.createElement("div", {
...rest,
ref,
className: (0, import_classnames.default)(blockClass, className),
...getDevtoolsProps(componentName)
}, type === "auto" ? /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__message` }, status === "fail" && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__error-icon` }, /* @__PURE__ */ React.createElement(ErrorFilled, { size: 16 })), /* @__PURE__ */ React.createElement("p", { className: `${blockClass}__text` }, statusObj[status]?.text)) : /* @__PURE__ */ React.createElement("div", { className: `${blockClass}__buttons` }, /* @__PURE__ */ React.createElement(Button, {
onClick: onRequestCancel,
kind: "secondary",
disabled: status !== "in-progress",
type: "button"
}, secondaryButtonText), /* @__PURE__ */ React.createElement(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: PropTypes.string,
/**
* Description for default state icon (manual).
*/
defaultIconDescription: PropTypes.string,
/**
* Default text for the save button (manual). Per design guidelines you probably don't want to display this in the auto mode.
*/
defaultText: PropTypes.string,
/**
* Description for fail state icon (manual).
*/
failIconDescription: PropTypes.string,
/**
* Text for failure state.
*/
failText: PropTypes.string,
/**
* Description for in progress state icon (manual).
*/
inProgressIconDescription: PropTypes.string,
/**
* Text for in progress state.
*/
inProgressText: PropTypes.string,
/**
* Function handler for cancel button (manual).
*/
onRequestCancel: PropTypes.func,
/**
* Function handler for save button (manual).
*/
onRequestSave: PropTypes.func,
/**
* Text for the secondary or cancel button (manual).
*/
secondaryButtonText: PropTypes.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: PropTypes.oneOf([
"default",
"in-progress",
"success",
"fail"
]).isRequired,
/**
* Description for success state icon (manual).
*/
successIconDescription: PropTypes.string,
/**
* Text for success state
*/
successText: PropTypes.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: PropTypes.oneOf(["manual", "auto"]).isRequired
};
Saving.displayName = componentName;
//#endregion
export { Saving };