@carbon/ibm-products/es/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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import { Button, InlineLoading } from '@carbon/react';
import { ErrorFilled, ErrorOutline, CheckmarkOutline, Save } from '@carbon/react/icons';
import React__default, { forwardRef } from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';

var _ErrorFilled;
const componentName = 'Saving';
let Saving = /*#__PURE__*/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__default.createElement(Save, _extends({
        size: 16
      }, props))
    },
    ['in-progress']: {
      text: inProgressText,
      iconDescription: inProgressIconDescription,
      icon: props => /*#__PURE__*/React__default.createElement(InlineLoading, _extends({
        size: 16
      }, props))
    },
    success: {
      text: successText,
      iconDescription: successIconDescription,
      icon: props => /*#__PURE__*/React__default.createElement(CheckmarkOutline, _extends({
        size: 16
      }, props))
    },
    fail: {
      text: failText,
      iconDescription: failIconDescription,
      icon: props => /*#__PURE__*/React__default.createElement(ErrorOutline, _extends({
        size: 16
      }, props))
    }
  };
  const blockClass = `${pkg.prefix}--saving`;
  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
    ref: ref,
    className: cx(blockClass, className)
  }, getDevtoolsProps(componentName)), type === 'auto' ? /*#__PURE__*/React__default.createElement("div", {
    className: `${blockClass}__message`
  }, status === 'fail' && /*#__PURE__*/React__default.createElement("div", {
    className: `${blockClass}__error-icon`
  }, _ErrorFilled || (_ErrorFilled = /*#__PURE__*/React__default.createElement(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(Button, {
    onClick: onRequestCancel,
    kind: "secondary",
    disabled: status !== 'in-progress',
    type: "button"
  }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
    onClick: onRequestSave,
    kind: "primary",
    renderIcon: statusObj[status]?.icon,
    iconDescription: statusObj[status]?.iconDescription,
    disabled: status === 'in-progress',
    type: "button"
  }, statusObj[status]?.text)));
});
Saving = pkg.checkComponentEnabled(Saving, componentName);
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;

export { Saving };