react-asc 21.3.1 → 22.0.0

package/components/CssTransition/CssTransition.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ICssTransitionProps {
+    className: string;
+    children: React.ReactNode;
+    show: boolean | undefined;
+}
+export declare const CssTransition: (props: ICssTransitionProps) => JSX.Element;
+export {};

package/components/CssTransition/index.d.ts

@@ -0,0 +1 @@
+export * from './CssTransition';

package/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './Card';
 export * from './ConditionalWrapper';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CssTransition';
 export * from './DateSelect';
 export * from './Drawer';
 export * from './Menu';

package/index.es.js

@@ -776,6 +776,71 @@ const Chip = (props) => {
         isDeletable && (React.createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
+const CssTransition = (props) => {
+    const { className, children, show } = props;
+    const [isShow, setIsShow] = useState(undefined);
+    const [cssState, setCssState] = useState({
+        hidden: true
+    });
+    const transitionConainter = useRef(null);
+    useEffect(() => {
+        if (show !== undefined) {
+            setIsShow(show);
+        }
+    }, [show]);
+    const nextFrame = () => {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    };
+    const afterTransition = (element) => {
+        return new Promise((resolve) => {
+            if (element) {
+                const duration = Number(getComputedStyle(element).transitionDuration.replace("s", "")) * 1000;
+                setTimeout(() => { resolve(); }, duration);
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    const renderAnimation = async (show) => {
+        if (show === true) {
+            setCssState({ enter: true, enterStart: true });
+            await nextFrame();
+            setCssState({ enter: true, enterEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState(undefined);
+        }
+        if (show === false) {
+            setCssState({ leave: true, leaveStart: true });
+            await nextFrame();
+            setCssState({ leave: true, leaveEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState({ hidden: true });
+        }
+    };
+    useEffect(() => {
+        if (isShow !== undefined && (isShow === true || isShow === false)) {
+            renderAnimation(isShow);
+        }
+    }, [isShow]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        return cssClasses.filter((css) => css).join(" ");
+    };
+    return (React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children));
+};
+
 var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1; } }\n";
 var styles$B = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$B);
@@ -2651,4 +2716,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, 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, useWindowSize };

package/index.js

@@ -784,6 +784,71 @@ const Chip = (props) => {
         isDeletable && (React__default["default"].createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
+const CssTransition = (props) => {
+    const { className, children, show } = props;
+    const [isShow, setIsShow] = React.useState(undefined);
+    const [cssState, setCssState] = React.useState({
+        hidden: true
+    });
+    const transitionConainter = React.useRef(null);
+    React.useEffect(() => {
+        if (show !== undefined) {
+            setIsShow(show);
+        }
+    }, [show]);
+    const nextFrame = () => {
+        return new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(resolve);
+            });
+        });
+    };
+    const afterTransition = (element) => {
+        return new Promise((resolve) => {
+            if (element) {
+                const duration = Number(getComputedStyle(element).transitionDuration.replace("s", "")) * 1000;
+                setTimeout(() => { resolve(); }, duration);
+            }
+            else {
+                resolve();
+            }
+        });
+    };
+    const renderAnimation = async (show) => {
+        if (show === true) {
+            setCssState({ enter: true, enterStart: true });
+            await nextFrame();
+            setCssState({ enter: true, enterEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState(undefined);
+        }
+        if (show === false) {
+            setCssState({ leave: true, leaveStart: true });
+            await nextFrame();
+            setCssState({ leave: true, leaveEnd: true });
+            await afterTransition(transitionConainter.current);
+            setCssState({ hidden: true });
+        }
+    };
+    React.useEffect(() => {
+        if (isShow !== undefined && (isShow === true || isShow === false)) {
+            renderAnimation(isShow);
+        }
+    }, [isShow]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
+        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        return cssClasses.filter((css) => css).join(" ");
+    };
+    return (React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children));
+};
+
 var css_248z$B = ".Column-module_column__fcTgl {\n  flex: 1 0 0%; }\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1; } }\n";
 var styles$B = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$B);
@@ -2688,6 +2753,7 @@ exports.Chip = Chip;
 exports.CircleSolidIcon = CircleSolidIcon;
 exports.Column = Column;
 exports.ConditionalWrapper = ConditionalWrapper;
+exports.CssTransition = CssTransition;
 exports.DateSelect = DateSelect;
 exports.DaySelect = DaySelect;
 exports.Drawer = Drawer;

package/package.json

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

package/readme.md

@@ -47,6 +47,7 @@ const MyApp = () => {
 -   Card
 -   Checkbox
 -   Chip
+-	CssTransition
 -   ConditionalWrapper
 -   DateSelect
 -   Drawer