@nestbotics/nct_frontend_common_components/dist/components/common/DeleteButton.esm.js

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

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["onClick", "children", "disabled", "loading", "sx", "size", "showText"];
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) { _defineProperty(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; }
import React from 'react';
import { Button } from '@mui/material';

// Delete icon as a component
import { jsx as _jsx } from "react/jsx-runtime";
var DeleteIcon = function DeleteIcon() {
  return /*#__PURE__*/_jsx("svg", {
    width: "16",
    height: "16",
    viewBox: "0 0 24 24",
    fill: "currentColor",
    children: /*#__PURE__*/_jsx("path", {
      d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
    })
  });
};

/**
 * DeleteButton - Icon-only delete button with red styling
 * Ready-to-use delete button with consistent styling
 * 
 * @param {Object} props - Button props
 * @param {Function} props.onClick - Click handler function
 * @param {string} props.children - Button text (default: icon only)
 * @param {boolean} props.disabled - Whether button is disabled
 * @param {boolean} props.loading - Show loading state
 * @param {Object} props.sx - Additional MUI sx styling
 * @param {string} props.size - Button size: 'small', 'medium', 'large'
 * @param {boolean} props.showText - Show "Delete" text along with icon
 */
var DeleteButton = function DeleteButton(_ref) {
  var onClick = _ref.onClick,
    children = _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$size = _ref.size,
    size = _ref$size === void 0 ? "medium" : _ref$size,
    _ref$showText = _ref.showText,
    showText = _ref$showText === void 0 ? false : _ref$showText,
    props = _objectWithoutProperties(_ref, _excluded);
  var isIconOnly = !showText && !children;
  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
    className: "btn-icon-delete",
    startIcon: !isIconOnly && /*#__PURE__*/_jsx(DeleteIcon, {}),
    onClick: onClick,
    disabled: disabled || loading,
    sx: _objectSpread({
      minWidth: isIconOnly ? size === 'small' ? '32px' : size === 'large' ? '44px' : '38px' : size === 'small' ? '80px' : size === 'large' ? '140px' : '100px',
      width: isIconOnly ? size === 'small' ? '32px' : size === 'large' ? '44px' : '38px' : 'auto',
      height: size === 'small' ? '32px' : size === 'large' ? '44px' : '38px',
      padding: isIconOnly ? '0' : undefined
    }, sx)
  }, props), {}, {
    children: isIconOnly ? /*#__PURE__*/_jsx(DeleteIcon, {}) : loading ? 'Deleting...' : children || (showText ? 'Delete' : '')
  }));
};
export default DeleteButton;