react-asc 22.0.0 → 23.0.0

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -7,6 +7,7 @@ export interface IFloatingActionButtonProps extends React.DetailedHTMLProps<Reac
     fixed?: boolean;
     isActive?: boolean;
     disabled?: boolean;
+    position?: 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     onClick?: (e: React.MouseEvent) => void;
 }
 export declare const FloatingActionButton: (props: IFloatingActionButtonProps) => JSX.Element;

package/hooks/index.d.ts

@@ -1,5 +1,6 @@
-export * from './useWindowSize';
-export * from './useHover';
-export * from './useConstructor';
 export * from './useDebounce';
+export * from './useConstructor';
 export * from './useCssClasses';
+export * from './useHover';
+export * from './useMobileDetect';
+export * from './useWindowSize';

package/hooks/useMobileDetect.d.ts

@@ -0,0 +1,3 @@
+export declare function useMobileDetect(): {
+    isMobile: boolean;
+};

package/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
+import React, { useRef, useEffect, useState, Fragment, Component, createRef, cloneElement, createContext, useContext } from 'react';
 import { createPortal, render, unmountComponentAtNode } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
@@ -224,23 +224,26 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
 const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React.createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = useState({
-        width: 0,
-        height: 0,
-    });
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = useRef();
     useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useCssClasses(cssClasses) {
+    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
+    return [cssClassName];
 }
 
 function useHover() {
@@ -265,26 +268,37 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
-};
-
-function useDebounce(callback, timeout, deps) {
-    const timeoutId = useRef();
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
     useEffect(() => {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(callback, timeout);
-        return () => clearTimeout(timeoutId.current);
-    }, deps);
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
-function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+function useMobileDetect() {
+    const [isMobile, setIsMobile] = useState(false);
+    const windowSize = useWindowSize();
+    const checkIsMobile = (height, width) => {
+        if (height > 0 && width > 0) {
+            setIsMobile(!(width >= 1024));
+        }
+    };
+    useEffect(() => {
+        windowSize && checkIsMobile(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return { isMobile };
 }
 
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
@@ -1674,16 +1688,17 @@ const ExpansionPanel = (props) => {
             React.createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n    top: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n    bottom: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n    top: 64px;\n    right: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n    bottom: 16px;\n    right: 16px; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
 styleInject(css_248z$m);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.fab);
-        fixed && cssClasses.push(styles$m['fixed']);
+        fixed && cssClasses.push(styles$m.fixed);
+        position && fixed && cssClasses.push(styles$m[position]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2716,4 +2731,4 @@ const TreeItem = (props) => {
         children && _isExpanded ? React.createElement("ul", null, children) : null));
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useWindowSize };

package/index.js

@@ -232,23 +232,26 @@ const CircleSolidIcon = () => (React__default["default"].createElement("svg", {
 const ChevronLeftSolidIcon = () => (React__default["default"].createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React__default["default"].createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-function useWindowSize() {
-    const [windowSize, setWindowSize] = React.useState({
-        width: 0,
-        height: 0,
-    });
+function useDebounce(callback, timeout, deps) {
+    const timeoutId = React.useRef();
     React.useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener("resize", handleResize);
-        handleResize();
-        return () => window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowSize;
+        clearTimeout(timeoutId.current);
+        timeoutId.current = setTimeout(callback, timeout);
+        return () => clearTimeout(timeoutId.current);
+    }, deps);
+}
+
+const useConstructor = (callBack) => {
+    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
+    if (hasBeenCalled)
+        return;
+    callBack();
+    setHasBeenCalled(true);
+};
+
+function useCssClasses(cssClasses) {
+    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
+    return [cssClassName];
 }
 
 function useHover() {
@@ -273,26 +276,37 @@ function useHover() {
     return [ref, value];
 }
 
-const useConstructor = (callBack) => {
-    const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
-    if (hasBeenCalled)
-        return;
-    callBack();
-    setHasBeenCalled(true);
-};
-
-function useDebounce(callback, timeout, deps) {
-    const timeoutId = React.useRef();
+function useWindowSize() {
+    const [windowSize, setWindowSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
     React.useEffect(() => {
-        clearTimeout(timeoutId.current);
-        timeoutId.current = setTimeout(callback, timeout);
-        return () => clearTimeout(timeoutId.current);
-    }, deps);
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
 }
 
-function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+function useMobileDetect() {
+    const [isMobile, setIsMobile] = React.useState(false);
+    const windowSize = useWindowSize();
+    const checkIsMobile = (height, width) => {
+        if (height > 0 && width > 0) {
+            setIsMobile(!(width >= 1024));
+        }
+    };
+    React.useEffect(() => {
+        windowSize && checkIsMobile(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return { isMobile };
 }
 
 var css_248z$X = ".Backdrop-module_backdrop__IRMoL {\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  opacity: 0.5;\n  z-index: 1040;\n  top: 0;\n  left: 0;\n  background-color: #000; }\n  .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n    opacity: 0; }\n";
@@ -1682,16 +1696,17 @@ const ExpansionPanel = (props) => {
             React__default["default"].createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
+var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n  box-shadow: var(--shadow); }\n\n.FloatingActionButton-module_fixed__XQOkG {\n  position: fixed;\n  z-index: 1000; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n    top: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n    bottom: 16px;\n    left: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n    top: 64px;\n    right: 16px; }\n  .FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n    bottom: 16px;\n    right: 16px; }\n";
+var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
 styleInject(css_248z$m);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = exports.COLOR.primary, fixed, size = exports.SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = exports.COLOR.primary, fixed, position = 'rightBottom', size = exports.SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$m.fab);
-        fixed && cssClasses.push(styles$m['fixed']);
+        fixed && cssClasses.push(styles$m.fixed);
+        position && fixed && cssClasses.push(styles$m[position]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2838,4 +2853,5 @@ exports.useConstructor = useConstructor;
 exports.useCssClasses = useCssClasses;
 exports.useDebounce = useDebounce;
 exports.useHover = useHover;
+exports.useMobileDetect = useMobileDetect;
 exports.useWindowSize = useWindowSize;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "22.0.0",
+	"version": "23.0.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",