@carbon/ibm-products/lib/components/Saving/Saving.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('@carbon/react');
var icons = require('@carbon/react/icons');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');

var _ErrorFilled;
const componentName = 'Saving';
exports.Saving = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    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(icons.Save, _rollupPluginBabelHelpers.extends({
        size: 16
      }, props))
    },
    ['in-progress']: {
      text: inProgressText,
      iconDescription: inProgressIconDescription,
      icon: props => /*#__PURE__*/React.createElement(react.InlineLoading, _rollupPluginBabelHelpers.extends({
        size: 16
      }, props))
    },
    success: {
      text: successText,
      iconDescription: successIconDescription,
      icon: props => /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
        size: 16
      }, props))
    },
    fail: {
      text: failText,
      iconDescription: failIconDescription,
      icon: props => /*#__PURE__*/React.createElement(icons.ErrorOutline, _rollupPluginBabelHelpers.extends({
        size: 16
      }, props))
    }
  };
  const blockClass = `${settings.pkg.prefix}--saving`;
  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
    ref: ref,
    className: cx(blockClass, className)
  }, devtools.getDevtoolsProps(componentName)), type === 'auto' ? /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}__message`
  }, status === 'fail' && /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}__error-icon`
  }, _ErrorFilled || (_ErrorFilled = /*#__PURE__*/React.createElement(icons.ErrorFilled, {
    size: 16
  }))), /*#__PURE__*/React.createElement("p", {
    className: `${blockClass}__text`
  }, statusObj[status]?.text)) : /*#__PURE__*/React.createElement("div", {
    className: `${blockClass}__buttons`
  }, /*#__PURE__*/React.createElement(react.Button, {
    onClick: onRequestCancel,
    kind: "secondary",
    disabled: status !== 'in-progress',
    type: "button"
  }, secondaryButtonText), /*#__PURE__*/React.createElement(react.Button, {
    onClick: onRequestSave,
    kind: "primary",
    renderIcon: statusObj[status]?.icon,
    iconDescription: statusObj[status]?.iconDescription,
    disabled: status === 'in-progress',
    type: "button"
  }, statusObj[status]?.text)));
});
exports.Saving = settings.pkg.checkComponentEnabled(exports.Saving, componentName);
exports.Saving.propTypes = {
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * Description for default state icon (manual).
   */
  defaultIconDescription: index.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: index.default.string,
  /**
   * Description for fail state icon (manual).
   */
  failIconDescription: index.default.string,
  /**
   * Text for failure state.
   */
  failText: index.default.string,
  /**
   * Description for in progress state icon (manual).
   */
  inProgressIconDescription: index.default.string,
  /**
   * Text for in progress state.
   */
  inProgressText: index.default.string,
  /**
   * Function handler for cancel button (manual).
   */
  onRequestCancel: index.default.func,
  /**
   * Function handler for save button (manual).
   */
  onRequestSave: index.default.func,
  /**
   * Text for the secondary or cancel button (manual).
   */
  secondaryButtonText: index.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: index.default.oneOf(['default', 'in-progress', 'success', 'fail']).isRequired,
  /**
   * Description for success state icon (manual).
   */
  successIconDescription: index.default.string,
  /**
   * Text for success state
   */
  successText: index.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: index.default.oneOf(['manual', 'auto']).isRequired
};
exports.Saving.displayName = componentName;