@nestbotics/nct_frontend_common_components/dist/components/common/SaveButton.js

A collection of reusable React components with theme management and styling utilities

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["onClick", "children", "disabled", "loading", "sx", "fullWidth", "size"]; // Save icon as a component
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SaveIcon = function SaveIcon() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
    width: "16",
    height: "16",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
      d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
    })
  });
};

/**
 * SaveButton - Primary style button with save icon
 * Ready-to-use save button with consistent styling
 * 
 * @param {Object} props - Button props
 * @param {Function} props.onClick - Click handler function
 * @param {string} props.children - Button text (default: "Save")
 * @param {boolean} props.disabled - Whether button is disabled
 * @param {boolean} props.loading - Show loading state
 * @param {Object} props.sx - Additional MUI sx styling
 * @param {boolean} props.fullWidth - Make button full width
 * @param {string} props.size - Button size: 'small', 'medium', 'large'
 */
var SaveButton = function SaveButton(_ref) {
  var onClick = _ref.onClick,
    _ref$children = _ref.children,
    children = _ref$children === void 0 ? "Save" : _ref$children,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$loading = _ref.loading,
    loading = _ref$loading === void 0 ? false : _ref$loading,
    _ref$sx = _ref.sx,
    sx = _ref$sx === void 0 ? {} : _ref$sx,
    _ref$fullWidth = _ref.fullWidth,
    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? "medium" : _ref$size,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, _objectSpread(_objectSpread({
    className: "btn-primary",
    startIcon: !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(SaveIcon, {}),
    onClick: onClick,
    disabled: disabled || loading,
    fullWidth: fullWidth,
    sx: _objectSpread({
      minWidth: size === 'small' ? '80px' : size === 'large' ? '140px' : '100px',
      height: size === 'small' ? '32px' : size === 'large' ? '44px' : '38px'
    }, sx)
  }, props), {}, {
    children: loading ? 'Saving...' : children
  }));
};
var _default = exports.default = SaveButton;
/**
 * Usage Examples:
 * 
 * // Basic usage
 * import SaveButton from './SaveButton';
 * <SaveButton onClick={handleSave} />
 * 
 * // Custom text
 * <SaveButton onClick={handleSave}>Save Changes</SaveButton>
 * 
 * // With loading state
 * <SaveButton onClick={handleSave} loading={isLoading} />
 * 
 * // Disabled state
 * <SaveButton onClick={handleSave} disabled={!isValid} />
 * 
 * // Different sizes
 * <SaveButton onClick={handleSave} size="small" />
 * <SaveButton onClick={handleSave} size="large" />
 * 
 * // Full width
 * <SaveButton onClick={handleSave} fullWidth />
 * 
 * // Custom styling
 * <SaveButton onClick={handleSave} sx={{ mt: 2, mr: 1 }} />
 */