@symply.io/basic-components 1.4.11-alpha.8 → 1.5.0-beta.1

package/ClickableFabButton/index.d.ts

@@ -0,0 +1,3 @@
+import type { ClickableFabButtonProps } from "./types";
+declare function ClickableFabButton(props: ClickableFabButtonProps): JSX.Element;
+export default ClickableFabButton;

package/ClickableFabButton/index.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import useCustomTheme from "../useCustomTheme";
+function ClickableFabButton(props) {
+    var text = props.text, fabIcon = props.fabIcon, _a = props.color, color = _a === void 0 ? "primary" : _a, disabled = props.disabled, onClick = props.onClick, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsxs(Button, __assign({ color: color, onClick: onClick, disabled: disabled, sx: {
+            outline: "none",
+            color: "rgba(0, 0, 0, 0)",
+            "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0)",
+                "& div": {
+                    boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.2), 0px 1px 18px 0px rgba(0,0,0,0.2)"
+                },
+                "& span": {
+                    textShadow: "1px 1px 3px rgba(0,0,0,0.4)"
+                }
+            }
+        } }, { children: [_jsx(Grid, __assign({ sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "40px",
+                    width: "40px",
+                    borderRadius: "50%",
+                    color: "#ffffff",
+                    background: disabled ? "#9e9e9e" : theme.palette[color].main,
+                    boxShadow: "0px 3px 5px -1px rgba(0,0,0,0.05), 0px 6px 10px 0px rgba(0,0,0,0.1), 0px 1px 18px 0px rgba(0,0,0,0.1)"
+                } }, { children: cloneElement(fabIcon) })), "\u00A0\u00A0", _jsx(Typography, __assign({ variant: "body2", component: "span", color: disabled ? "#9e9e9e" : color, sx: {
+                    textShadow: "1px 1px 3px rgba(0,0,0,0.2)",
+                    fontSize: "16px !important"
+                } }, { children: text }))] })));
+}
+export default ClickableFabButton;

package/ClickableFabButton/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement, CSSProperties } from "react";
+import type { ButtonProps } from "@mui/material/Button";
+export interface ClickableFabButtonProps {
+    text: string;
+    fabIcon: ReactElement;
+    disabled?: boolean;
+    size?: ButtonProps["size"];
+    color?: "error" | "primary" | "secondary" | "success" | "info" | "warning";
+    onClick: ButtonProps["onClick"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/NumberInput/index.d.ts

@@ -1,4 +1,14 @@
-import type { NumberInputProps } from "./types";
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface NumberInputProps extends Omit<TextFieldProps, "onChange"> {
+    onChange: (value: string) => void;
+    value: string;
+    integerOnly?: boolean;
+    tooltip?: string;
+    maxValue?: number;
+    minValue?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}
 declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;
-export type { NumberInputProps };

package/NumberInput/index.js

@@ -27,19 +27,12 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function NumberInput(props) {
-    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.decimals, decimals = _b === void 0 ? 0 : _b, _c = props.integerOnly, integerOnly = _c === void 0 ? false : _c, _d = props.minValue, minValue = _d === void 0 ? Number.MIN_SAFE_INTEGER : _d, _e = props.maxValue, maxValue = _e === void 0 ? Number.MAX_SAFE_INTEGER : _e, error = props.error, helperText = props.helperText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "decimals", "integerOnly", "minValue", "maxValue", "error", "helperText", "primaryColor", "secondaryColor"]);
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var EXCEED_ERROR = "Your value exceeds the exceptable input range";
     if (maxValue < minValue)
         throw new Error("Max should be bigger than the `miniValue`!");
-    var _f = useInteractions({
-        value: value,
-        maxValue: maxValue,
-        minValue: minValue,
-        decimals: decimals,
-        integerOnly: integerOnly,
-        onChange: onChange
-    }), exceedError = _f.exceedError, tooltipOpen = _f.tooltipOpen, handleBlur = _f.handleBlur, handleChange = _f.handleChange, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip, handleKeyboardEvent = _f.handleKeyboardEvent;
+    var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, integerOnly: integerOnly, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip, handleKeyboardEvent = _e.handleKeyboardEvent;
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ arrow: true, placement: "top", title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onMouseEnter: onOpenTooltip, onMouseLeave: onCloseTooltip, onBlur: handleBlur, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : ""), inputProps: { onKeyDown: handleKeyboardEvent } }, rest)) })) })));
 }
 export default NumberInput;

package/NumberInput/useInteractions.d.ts

@@ -1,5 +1,11 @@
 import { ChangeEvent, KeyboardEventHandler } from "react";
-import type { InteractionProps } from "./types";
+interface InteractionProps {
+    value: string;
+    integerOnly?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    onChange: (value: string) => void;
+}
 declare function useInteractions(props: InteractionProps): {
     exceedError: boolean;
     tooltipOpen: boolean;

package/NumberInput/useInteractions.js

@@ -1,7 +1,7 @@
 import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
-    var value = props.value, _a = props.decimals, decimals = _a === void 0 ? 0 : _a, integerOnly = props.integerOnly, _b = props.minValue, minValue = _b === void 0 ? Number.MIN_SAFE_INTEGER : _b, _c = props.maxValue, maxValue = _c === void 0 ? Number.MAX_SAFE_INTEGER : _c, onChange = props.onChange;
-    var _d = useState(false), tooltipOpen = _d[0], setTooltipOpen = _d[1];
+    var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
+    var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
     var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
     var handleKeyboardEvent = useCallback(function (event) {
         var key = event.key;
@@ -20,19 +20,19 @@ function useInteractions(props) {
             if (key === "-") {
                 event.preventDefault();
             }
-            else if (decimals > 0) {
-                var decimalStr = value.split(".")[1];
-                var decimalLen = decimalStr ? decimalStr.length + 1 : 0;
-                console.log({ value: value, decimals: decimals, decimalLen: decimalLen });
-                if (decimalLen > decimals) {
-                    event.preventDefault();
-                }
-            }
         }
-    }, [value, decimals, minValue, integerOnly]);
+    }, [value, minValue, integerOnly]);
     var handleChange = useCallback(function (event) {
         event.preventDefault();
         var val = event.currentTarget.value;
+        if (val !== "" && minValue >= 0 && val.includes("-"))
+            return;
+        if (integerOnly) {
+            if (val !== "" && val !== "-" && !/^\d+$/g.test(val))
+                return;
+        }
+        else if (val !== "" && val !== "-" && !/^(-?\d*)(\.\d*)?$/g.test(val))
+            return;
         onChange(val);
     }, [onChange, minValue, integerOnly]);
     var handleBlur = useCallback(function () {
@@ -54,6 +54,9 @@ function useInteractions(props) {
         else if (excludedValue.includes(strVal)) {
             onChange("");
         }
+        else {
+            onChange(Number(strVal).toString());
+        }
     }, [value, onChange]);
     var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.4.11-alpha.8",
+  "version": "1.5.0-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/NumberInput/types.d.ts

@@ -1,15 +0,0 @@
-import type { CSSProperties } from "react";
-import type { TextFieldProps } from "@mui/material/TextField";
-export interface InteractionProps {
-    value: string;
-    decimals?: number;
-    integerOnly?: boolean;
-    maxValue?: number;
-    minValue?: number;
-    onChange: (value: string) => void;
-}
-export interface NumberInputProps extends InteractionProps, Omit<TextFieldProps, "value" | "onChange"> {
-    tooltip?: string;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-}