(null);
12 |
13 | React.useEffect(() => {
14 | const container = refContainer.current;
15 | const modal = refModal.current;
16 |
17 | if (container && modal) {
18 | animate((value) => (container.style.opacity = value), { from: parseFloat(container.style.opacity), to: 1 });
19 | animate((value) => (modal.style.transform = `scale(${value})`), {
20 | from: sliceFloat(modal.style.transform),
21 | to: 1,
22 | onRest: () => setIsAnimationDone(true)
23 | });
24 | }
25 | }, []);
26 |
27 | const closeModal = () => {
28 | if (isAnimationDone) {
29 | setIsClosing(true);
30 |
31 | const container = refContainer.current;
32 | const modal = refModal.current;
33 |
34 | if (container && modal) {
35 | animate((value) => (container.style.opacity = value), { from: parseFloat(container.style.opacity), to: 0 });
36 | animate((value) => (modal.style.transform = `scale(${value})`), {
37 | from: sliceFloat(modal.style.transform),
38 | to: 0,
39 | onRest: () => dispatch({ type: ActionType.REMOVE_MODAL, payload: id })
40 | });
41 | }
42 | }
43 | };
44 |
45 | const closeIfContainer = (e: React.MouseEvent) => {
46 | if ((e.target as HTMLElement).dataset.autoclose === "true") {
47 | closeModal();
48 | }
49 | };
50 |
51 | return (
52 | closeIfContainer(e) : undefined}
57 | data-autoclose={config?.autoclose}
58 | >
59 |
60 | {React.useMemo(
61 | () => (
62 |
63 | ),
64 | [closeModal, isAnimationDone, isClosing]
65 | )}
66 |
67 |
= ModalComponent
;
7 | export type FusionModalConfig = IModalConfig;
8 | export type FusionDialogAction = IDialogAction;
9 | export type FusionDialogConfig = IDialogConfig;
10 |
--------------------------------------------------------------------------------
/src/mappers/DialogMapper.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useFusionContext } from "../utils";
3 | import { Dialog } from "../elements";
4 |
5 | export const DialogMapper: React.FC = () => {
6 | const { state } = useFusionContext();
7 |
8 | return (
9 | <>
10 | {state.dialogs.map((dialog) => (
11 |
12 | ))}
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/mappers/ModalMapper.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { useFusionContext } from "../utils";
3 | import { Modal } from "../elements";
4 |
5 | export const ModalMapper: React.FC = () => {
6 | const { state } = useFusionContext();
7 |
8 | return (
9 | <>
10 | {state.modals.map((modal) => (
11 |
12 | ))}
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/mappers/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./ModalMapper";
2 | export * from "./DialogMapper";
3 |
--------------------------------------------------------------------------------
/src/types/container.ts:
--------------------------------------------------------------------------------
1 | import { IModalClassNames } from "./modal";
2 | import { IDialogClassNames } from "./dialog";
3 |
4 | export interface IFusionContainerProps {
5 | modalClassNames?: IModalClassNames;
6 | dialogClassNames?: IDialogClassNames;
7 | }
8 |
--------------------------------------------------------------------------------
/src/types/dialog.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export interface IDialogClassNames {
4 | container?: string;
5 | dialog?: string;
6 | content?: string;
7 | actionContainer?: string;
8 | action?: string;
9 | actionLabel?: string;
10 | highlight?: string;
11 | }
12 |
13 | export interface IDialogAction {
14 | label: string;
15 | callback?: Function;
16 | highlight?: boolean;
17 | }
18 |
19 | export interface IDialogConfig {
20 | autoclose?: boolean;
21 | }
22 |
23 | export interface IDialogObject {
24 | id: string;
25 | content: React.ReactNode;
26 | actions: IDialogAction[];
27 | config?: IDialogConfig;
28 | }
29 |
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./provider";
2 | export * from "./container";
3 | export * from "./modal";
4 | export * from "./dialog";
5 |
--------------------------------------------------------------------------------
/src/types/modal.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | export interface IModalClassNames {
4 | container?: string;
5 | modal?: string;
6 | }
7 |
8 | export interface IModalComponentProps {
9 | closeModal: Function;
10 | isAnimationDone: boolean;
11 | isClosing: boolean;
12 | }
13 |
14 | export type ModalComponent
= React.FunctionComponent;
15 |
16 | export interface IModalConfig {
17 | props?: Object;
18 | autoclose?: boolean;
19 | }
20 |
21 | export interface IModalObject {
22 | id: string;
23 | Component: ModalComponent;
24 | config?: IModalConfig;
25 | }
26 |
--------------------------------------------------------------------------------
/src/types/provider.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { IModalObject } from "./modal";
3 | import { IFusionContainerProps } from "./container";
4 | import { IDialogObject } from "./dialog";
5 |
6 | export interface IState extends IFusionContainerProps {
7 | modals: IModalObject[];
8 | dialogs: IDialogObject[];
9 | }
10 |
11 | export enum ActionType {
12 | ADD_MODAL,
13 | REMOVE_MODAL,
14 | ADD_DIALOG,
15 | REMOVE_DIALOG
16 | }
17 |
18 | export interface IAction {
19 | type: ActionType;
20 | payload: any;
21 | }
22 |
23 | export interface IFusionContext {
24 | state: IState;
25 | dispatch: React.Dispatch;
26 | }
27 |
--------------------------------------------------------------------------------
/src/utils/animate.ts:
--------------------------------------------------------------------------------
1 | const duration = 400;
2 |
3 | const easeInOutSine = (x: number) => {
4 | return -(Math.cos(Math.PI * x) - 1) / 2;
5 | };
6 |
7 | export const animate = (callback: (value: string) => any, config: { from: number; to: number; onRest?: Function }) => {
8 | const { from, to, onRest } = config;
9 | let start: number;
10 |
11 | const step: FrameRequestCallback = () => {
12 | const now = performance.now();
13 | if (!start) start = now;
14 | const progress = (now - start) / duration;
15 |
16 | if (progress < 1) {
17 | const value = ((to - from) * easeInOutSine(progress) + from).toString();
18 | callback(value);
19 | window.requestAnimationFrame(step);
20 | } else {
21 | callback(to.toString());
22 | if (onRest) onRest();
23 | }
24 | };
25 |
26 | window.requestAnimationFrame(step);
27 | };
28 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./useFusionContext";
2 | export * from "./animate";
3 | export * from "./sliceFloat";
4 |
--------------------------------------------------------------------------------
/src/utils/sliceFloat.ts:
--------------------------------------------------------------------------------
1 | export const sliceFloat = (string: string) => {
2 | const match = string.match(/[+-]?\d+(\.\d+)?/g);
3 |
4 | if (match) {
5 | return parseFloat(match[0]);
6 | } else {
7 | return 0;
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/src/utils/useFusionContext.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { FusionContext } from "../FusionProvider";
3 |
4 | export const useFusionContext = () => {
5 | const context = React.useContext(FusionContext);
6 |
7 | return context;
8 | };
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "module": "commonjs",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "react",
16 | "outDir": "lib",
17 | "declaration": true,
18 | "removeComments": true
19 | },
20 | "include": ["src"],
21 | "exclude": ["node_modules"]
22 | }
23 |
--------------------------------------------------------------------------------