@symply.io/basic-components 1.5.0 → 1.5.2-alpha.1

package/ClickableFabButton/types.d.ts

@@ -4,7 +4,6 @@ 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"];

package/NumberInput/index.d.ts

@@ -1,14 +1,3 @@
-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"];
-}
+import type { NumberInputProps } from "./types";
 declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;

package/NumberInput/index.js

@@ -27,12 +27,19 @@ 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.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 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.decimals, decimals = _c === void 0 ? 0 : _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", "integerOnly", "decimals", "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 _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;
+    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;
     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/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface InteractionProps {
+    value: string;
+    integerOnly?: boolean;
+    decimals?: number;
+    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"];
+}

package/NumberInput/types.js

@@ -0,0 +1 @@
+export {};

package/NumberInput/useInteractions.d.ts

@@ -1,11 +1,5 @@
 import { ChangeEvent, KeyboardEventHandler } from "react";
-interface InteractionProps {
-    value: string;
-    integerOnly?: boolean;
-    maxValue?: number;
-    minValue?: number;
-    onChange: (value: string) => void;
-}
+import type { InteractionProps } from "./types";
 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, 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 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 exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
     var handleKeyboardEvent = useCallback(function (event) {
         var key = event.key;
@@ -16,6 +16,12 @@ function useInteractions(props) {
                 event.preventDefault();
             }
         }
+        else if (value.includes(".") && decimals > 0) {
+            var decimalStrLen = value.split(".")[1].length;
+            if (key !== "Backspace" && decimalStrLen >= decimals) {
+                event.preventDefault();
+            }
+        }
         else {
             if (key === "-") {
                 event.preventDefault();

package/README.md

@@ -18,6 +18,7 @@
   - [BreadCrumbs](#breadcrumbs)
   - [CheckBox](#checkbox)
   - [CheckBoxGroup](#checkboxgroup)
+  - [CliickableFabButton](#clickablefabbutton)
   - [Copyright](#copyright)
   - [DataTable](#datatable)
   - [DateInput](#dateinput)
@@ -275,6 +276,30 @@ import CheckBoxGroup from '@symply.io/basic-components/CheckBoxGroup';
 
 
 
+<h3>ClickableFabButton</h3>
+
+A fab button with icon and text
+
+<h5>Import</h5>
+
+```typescript
+import { ClickableFabButton } from '@symply.io/basic-components/';
+// or 
+import ClickableFabButton from '@symply.io/basic-components/ClickableFabButton'; 
+```
+
+<h5>Props</h5>
+
+| Name     | Type                                                         | Default   | Required | Description                                                  |
+| -------- | ------------------------------------------------------------ | --------- | -------- | ------------------------------------------------------------ |
+| color    | "primary" \|"secondary" \|"success" \|"error" \|"info" \|"warning" | "primary" | false    | The button color.                                            |
+| disabled | bool                                                         | false     | false    | If `true`, the button would be disabled.                     |
+| fabIcon  | ReactElement                                                 |           | true     | The icon element..                                           |
+| onClick  | func                                                         |           | true     | The function for button clicking.<br />**Signature:**<br/>`function() => unknown` |
+| text     | string                                                       |           | true     | The button text.                                             |
+
+
+
 <h3>Copyright</h3>
 
 A common component for rendering the copyright

package/index.d.ts

@@ -5,6 +5,7 @@ export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./CheckBoxGroup";
+export * from "./ClickableFabButton";
 export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
@@ -35,6 +36,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as CheckBox } from "./CheckBox";
 export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ClickableFabButton } from "./ClickableFabButton";
 export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";

package/index.js

@@ -5,6 +5,7 @@ export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./CheckBoxGroup";
+export * from "./ClickableFabButton";
 export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
@@ -35,6 +36,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as CheckBox } from "./CheckBox";
 export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ClickableFabButton } from "./ClickableFabButton";
 export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";

package/package.json

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