@lanaco/lnc-react-ui/dist/ActionsToolbar.js

React component library

import { jsxs as p, jsx as t } from "react/jsx-runtime";
import { forwardRef as M } from "react";
import { P as e } from "./index-S5Cd7WrG.js";
import { n as V } from "./emotion-styled.browser.esm-CjCaF13H.js";
import Z from "./DropdownMenu.js";
import i from "./DropdownItem.js";
import q from "./Separator.js";
import b from "./Button.js";
import { b as m } from "./utils-DtRLzzTZ.js";
import { useTheme as F } from "./ThemeProvider.js";
const G = V.div`
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 0.875rem;
  color: rgba(15, 23, 42, 100%);
  background-color: ${(n) => m(
  n.theme,
  "Toolbar",
  n.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  border: ${(n) => `1px solid ${m(
  n.theme,
  "Toolbar",
  n.color,
  "enabled",
  "border",
  "borderOpacity"
)}`};
  gap: 6px;
  justify-content: space-between;
  & > div {
    display: flex;
    gap: 0.5rem;
  }
}
`, u = M((n, f) => {
  const {
    __TYPE__: H = "ACTIONS_TOOLBAR",
    showCreate: y = !0,
    enableCreate: g = !0,
    createText: c = "Create new item",
    showEdit: w = !0,
    enableEditOnSelection: h = !0,
    editText: T = "Edit",
    showDelete: x = !0,
    enableDeleteOnSelection: C = !0,
    deleteText: O = "Delete",
    showCopy: S = !0,
    enableCopyOnSelection: D = !0,
    copyText: _ = "Copy",
    actionsText: E = "Actions",
    customActions: s,
    selectedRowsLength: r = 0,
    readOnly: l = !1,
    actionDropdownProps: k,
    actionsDropdownZIndex: A,
    actionsDropdownPlacement: I,
    //----------------
    onCreate: N = () => {
    },
    onEdit: R = () => {
    },
    onDelete: v = () => {
    },
    onCopy: P = () => {
    },
    className: j = "",
    style: z = {},
    color: a = "primary",
    size: d = "small",
    selectedRows: L,
    ...$
  } = n, { theme: B } = F();
  return /* @__PURE__ */ p(
    G,
    {
      ref: f,
      theme: B,
      color: a,
      className: `lnc-table-view-actions-toolbar ${j}`,
      style: z,
      ...$,
      children: [
        /* @__PURE__ */ t("div", { children: y && l == !1 && /* @__PURE__ */ t(
          b,
          {
            leadingIcon: "plus",
            btnType: "outline",
            type: "button",
            color: a,
            size: d,
            title: c,
            disabled: !g,
            onClick: N,
            text: c
          }
        ) }),
        /* @__PURE__ */ t("div", { children: /* @__PURE__ */ p(
          Z,
          {
            className: "lnc-table-view-actions-toolbar-dropdown",
            color: a,
            size: d,
            zIndex: A,
            placement: I,
            ...k,
            control: /* @__PURE__ */ t(
              b,
              {
                text: E,
                btnType: "outline",
                trailingIcon: "angle-down",
                color: a,
                size: d,
                type: "button"
              }
            ),
            children: [
              S && l == !1 && /* @__PURE__ */ t(
                i,
                {
                  icon: "copy",
                  disabled: !(D && r > 0),
                  onClick: P,
                  children: _
                }
              ),
              w && l == !1 && /* @__PURE__ */ t(
                i,
                {
                  icon: "pen",
                  disabled: !(h && r > 0),
                  onClick: R,
                  children: T
                }
              ),
              x && l == !1 && /* @__PURE__ */ t(
                i,
                {
                  icon: "trash",
                  disabled: !(C && r > 0),
                  onClick: v,
                  children: O
                }
              ),
              /* @__PURE__ */ t(q, {}),
              s == null ? void 0 : s.map((o, Y) => {
                if ((o == null ? void 0 : o.show) != !1)
                  return /* @__PURE__ */ t(
                    i,
                    {
                      icon: o.icon,
                      disabled: !(o.enableOnSelection == !0 && r > 0 || o.enable == !0 && o.enableOnSelection == !1),
                      onClick: () => {
                        o.onAction(L);
                      },
                      children: o.name
                    },
                    Y
                  );
              })
            ]
          }
        ) })
      ]
    }
  );
});
u.propTypes = {
  /**
   * This property determines where the component is rendered.
   * Should not be overridden!
   */
  __TYPE__: e.string,
  showCreate: e.bool,
  enableCreate: e.bool,
  createText: e.string,
  showEdit: e.bool,
  enableEditOnSelection: e.bool,
  editText: e.string,
  showDelete: e.bool,
  enableDeleteOnSelection: e.bool,
  deleteText: e.string,
  showCopy: e.bool,
  enableCopyOnSelection: e.bool,
  copyText: e.string,
  actionsText: e.string,
  /**
   * Actions that will be shown in toolbar with existing actions
   * customActions=[{name: `<string>`, show: `<bool>`, enable: `<bool>`, enableOnSelection: `<bool>`, onAction: `PropTypes.func`}, ...]
   */
  customActions: e.array,
  selectedRowsLength: e.number,
  /**
   * If `readOnly={true}` actions Delete, Edit and Copy won't be shown.
   */
  readOnly: e.bool,
  //-------------------------------------------------------------
  onCreate: e.func,
  onEdit: e.func,
  onDelete: e.func,
  onCopy: e.func,
  //------------------------------------------------------------
  className: e.string,
  style: e.object,
  size: e.oneOf(["small", "medium", "large"]),
  color: e.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "information",
    "neutral",
    "gray"
  ])
};
u.displayName = "ACTIONS_TOOLBAR";
export {
  u as default
};