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

React component library

import { jsxs as _, jsx as n } from "react/jsx-runtime";
import { forwardRef as w } from "react";
import { P as e } from "./index-S5Cd7WrG.js";
import { n as C } from "./emotion-styled.browser.esm-CjCaF13H.js";
import A from "./DropdownMenu.js";
import N from "./DropdownItem.js";
import s from "./Button.js";
import { b as m } from "./utils-DtRLzzTZ.js";
import { useTheme as O } from "./ThemeProvider.js";
const I = C.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: ${(r) => m(
  r.theme,
  "Toolbar",
  r.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  border: ${(r) => `1px solid ${m(
  r.theme,
  "Toolbar",
  r.color,
  "enabled",
  "border",
  "borderOpacity"
)}`};
  gap: 6px;
  justify-content: space-between;
  & > div {
    display: flex;
    gap: 0.5rem;
  }
}
`, d = w((r, c) => {
  const {
    __TYPE__: k = "KANBAN_VIEW_ACTIONS_TOOLBAR",
    showCreate: p = !0,
    enableCreate: b = !0,
    createText: i = "Create New item",
    actionsText: g = "Actions",
    actions: t = [],
    //----------------
    onCreate: f = () => {
    },
    //-------------------
    className: u = "",
    style: y = {},
    color: a = "primary",
    size: l = "small",
    ...T
  } = r, { theme: x } = O();
  return /* @__PURE__ */ _(
    I,
    {
      ref: c,
      theme: x,
      color: a,
      className: u,
      style: y,
      ...T,
      children: [
        /* @__PURE__ */ n("div", { children: p && /* @__PURE__ */ n(
          s,
          {
            leadingIcon: "plus",
            btnType: "outline",
            color: a,
            size: l,
            title: i,
            disabled: !b,
            onClick: f,
            text: i
          }
        ) }),
        (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
          A,
          {
            color: a,
            size: l,
            control: /* @__PURE__ */ n(
              s,
              {
                text: g,
                btnType: "outline",
                trailingIcon: "angle-down",
                color: a,
                size: l
              }
            ),
            children: t == null ? void 0 : t.map((o, h) => {
              if ((o == null ? void 0 : o.show) != !1)
                return /* @__PURE__ */ n(
                  N,
                  {
                    icon: o.icon,
                    disabled: !o.enable,
                    onClick: o.onAction,
                    children: o.name
                  },
                  h
                );
            })
          }
        ) })
      ]
    }
  );
});
d.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,
  actionsText: e.string,
  /**
   * Actions that will be shown in toolbar with existing actions
   * actions=[{name: `<string>`, show: `<bool>`, enable: `<bool>`, onAction: `PropTypes.func`}, ...]
   */
  actions: e.array,
  //-------------------------------------------------------------
  onCreate: 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"
  ])
};
d.displayName = "KANBAN_VIEW_ACTIONS_TOOLBAR";
export {
  d as default
};