@etsoo/materialui 1.6.0 → 1.6.1

package/lib/cjs/DownUpButton.d.ts

@@ -0,0 +1,38 @@
+import { ButtonGroupProps } from "@mui/material/ButtonGroup";
+/**
+ * Down & Up Button Props
+ */
+export type DownUpButtonProps = Omit<ButtonGroupProps, "orientation"> & {
+    /**
+     * Is down button disabled
+     */
+    downDisabled?: boolean;
+    /**
+     * Down button label
+     */
+    downLabel?: string;
+    /**
+     * Is up button disabled
+     */
+    upDisabled?: boolean;
+    /**
+     * Up button label
+     */
+    upLabel?: string;
+    /**
+     * Down button click handler
+     * @param event Mouse click event
+     */
+    onDownClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Up button click handler
+     * @param event Mouse click event
+     */
+    onUpClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export declare function DownUpButton(props: DownUpButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DownUpButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownUpButton = DownUpButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+function DownUpButton(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
+    // Destruct
+    const { size = "small", downDisabled, downLabel = app?.get("moveDown") ?? "Down", upDisabled, upLabel = app?.get("moveUp") ?? "Up", onDownClick, onUpClick, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { orientation: "vertical", size: size, ...rest, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { disabled: upDisabled, onClick: onUpClick, children: upLabel }), (0, jsx_runtime_1.jsx)(Button_1.default, { disabled: downDisabled, onClick: onDownClick, children: downLabel })] }));
+}

package/lib/cjs/index.d.ts

@@ -55,6 +55,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";

package/lib/cjs/index.js

@@ -71,6 +71,7 @@ __exportStar(require("./DataSteps"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./DialogButton"), exports);
 __exportStar(require("./DnDList"), exports);
+__exportStar(require("./DownUpButton"), exports);
 __exportStar(require("./DraggablePaperComponent"), exports);
 __exportStar(require("./EmailInput"), exports);
 __exportStar(require("./ErrorAlert"), exports);

package/lib/mjs/DownUpButton.d.ts

@@ -0,0 +1,38 @@
+import { ButtonGroupProps } from "@mui/material/ButtonGroup";
+/**
+ * Down & Up Button Props
+ */
+export type DownUpButtonProps = Omit<ButtonGroupProps, "orientation"> & {
+    /**
+     * Is down button disabled
+     */
+    downDisabled?: boolean;
+    /**
+     * Down button label
+     */
+    downLabel?: string;
+    /**
+     * Is up button disabled
+     */
+    upDisabled?: boolean;
+    /**
+     * Up button label
+     */
+    upLabel?: string;
+    /**
+     * Down button click handler
+     * @param event Mouse click event
+     */
+    onDownClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Up button click handler
+     * @param event Mouse click event
+     */
+    onUpClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export declare function DownUpButton(props: DownUpButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DownUpButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export function DownUpButton(props) {
+    // Global app
+    const app = useAppContext();
+    // Destruct
+    const { size = "small", downDisabled, downLabel = app?.get("moveDown") ?? "Down", upDisabled, upLabel = app?.get("moveUp") ?? "Up", onDownClick, onUpClick, ...rest } = props;
+    return (_jsxs(ButtonGroup, { orientation: "vertical", size: size, ...rest, children: [_jsx(Button, { disabled: upDisabled, onClick: onUpClick, children: upLabel }), _jsx(Button, { disabled: downDisabled, onClick: onDownClick, children: downLabel })] }));
+}

package/lib/mjs/index.d.ts

@@ -55,6 +55,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";

package/lib/mjs/index.js

@@ -55,6 +55,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.51",
+    "@etsoo/appscript": "^1.6.52",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.68",
+    "@etsoo/react": "^1.8.69",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",

package/src/DownUpButton.tsx

@@ -0,0 +1,73 @@
+import Button from "@mui/material/Button";
+import ButtonGroup, { ButtonGroupProps } from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
+
+/**
+ * Down & Up Button Props
+ */
+export type DownUpButtonProps = Omit<ButtonGroupProps, "orientation"> & {
+  /**
+   * Is down button disabled
+   */
+  downDisabled?: boolean;
+
+  /**
+   * Down button label
+   */
+  downLabel?: string;
+
+  /**
+   * Is up button disabled
+   */
+  upDisabled?: boolean;
+
+  /**
+   * Up button label
+   */
+  upLabel?: string;
+
+  /**
+   * Down button click handler
+   * @param event Mouse click event
+   */
+  onDownClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Up button click handler
+   * @param event Mouse click event
+   */
+  onUpClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export function DownUpButton(props: DownUpButtonProps) {
+  // Global app
+  const app = useAppContext();
+
+  // Destruct
+  const {
+    size = "small",
+    downDisabled,
+    downLabel = app?.get("moveDown") ?? "Down",
+    upDisabled,
+    upLabel = app?.get("moveUp") ?? "Up",
+    onDownClick,
+    onUpClick,
+    ...rest
+  } = props;
+
+  return (
+    <ButtonGroup orientation="vertical" size={size} {...rest}>
+      <Button disabled={upDisabled} onClick={onUpClick}>
+        {upLabel}
+      </Button>
+      <Button disabled={downDisabled} onClick={onDownClick}>
+        {downLabel}
+      </Button>
+    </ButtonGroup>
+  );
+}

package/src/index.ts

@@ -61,6 +61,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";