React 16 support

.gitignore

@@ -16,4 +16,5 @@ build/Release
 
 # Dependency directory
 node_modules
+
 .idea

Boron.js

@@ -0,0 +1,8 @@
+module.exports = {
+    DropModal: require('./DropModal'),
+    WaveModal: require('./WaveModal'),
+    FlyModal: require('./FlyModal'),
+    FadeModal: require('./FadeModal'),
+    ScaleModal: require('./ScaleModal'),
+    OutlineModal: require('./OutlineModal'),
+}

DropModal.js

@@ -0,0 +1,133 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
+    },
+
+    hide: {
+        animationDuration: '0.4s',
+        animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
+    },
+
+    showModalAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate(-50%, -300px)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%)'
+        }
+    }),
+
+    hideModalAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate(-50%, -50%)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate(-50%, 100px)'
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        }
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    }),
+
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate(0, -20px)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate(0, 0)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate(0, 0)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate(0, 50px)'
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showModalAnimation = animation.showModalAnimation;
+var hideModalAnimation = animation.hideModalAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'modal';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            width: "500px",
+            transform: "translate(-50%, -50%)",
+            top: "50%",
+            left: "50%",
+            backgroundColor: "white",
+            zIndex: 1050,
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideModalAnimation : showModalAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            opacity: 0,
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationDelay: '0.25s',
+            animationName: showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});

FadeModal.js

@@ -0,0 +1,97 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    hide: {
+        animationDuration: '0.3s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 1
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1
+        },
+        '100%': {
+            opacity: 0
+        }
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});

FlyModal.js

@@ -0,0 +1,112 @@
+var modalFactory = require('./modalFactory');
+var insertKeyframesRule = require('domkit/insertKeyframesRule');
+var appendVendorPrefix = require('domkit/appendVendorPrefix');
+
+var animation = {
+    show: {
+        animationDuration: '0.5s',
+        animationTimingFunction: 'ease-out'
+    },
+    hide: {
+        animationDuration: '0.5s',
+        animationTimingFunction: 'ease-out'
+    },
+    showContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0,
+            transform: 'translate3d(calc(-100vw - 50%), 0, 0)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'translate3d(100px, 0, 0)'
+        },
+        '100%': {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        }
+    }),
+
+    hideContentAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)'
+        },
+        '50%': {
+            opacity: 1,
+            transform: 'translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1)'
+        },
+        '100%': {
+            opacity: 0,
+            transform: 'translate3d(calc(100vw + 50%), 0, 0)'
+        },
+    }),
+
+    showBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0
+        },
+        '100%': {
+            opacity: 0.9
+        },
+    }),
+
+    hideBackdropAnimation: insertKeyframesRule({
+        '0%': {
+            opacity: 0.9
+        },
+        '90%': {
+            opactiy: 0.9
+        },
+        '100%': {
+            opacity: 0
+        }
+    })
+};
+
+var showAnimation = animation.show;
+var hideAnimation = animation.hide;
+var showContentAnimation = animation.showContentAnimation;
+var hideContentAnimation = animation.hideContentAnimation;
+var showBackdropAnimation = animation.showBackdropAnimation;
+var hideBackdropAnimation = animation.hideBackdropAnimation;
+
+module.exports = modalFactory({
+    getRef: function(willHidden) {
+        return 'content';
+    },
+    getModalStyle: function(willHidden) {
+        return appendVendorPrefix({
+            zIndex: 1050,
+            position: "fixed",
+            width: "500px",
+            transform: "translate3d(-50%, -50%, 0)",
+            top: "50%",
+            left: "50%"
+        })
+    },
+    getBackdropStyle: function(willHidden) {
+        return appendVendorPrefix({
+            position: "fixed",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 1040,
+            backgroundColor: "#373A47",
+            animationFillMode: 'forwards',
+            animationDuration: '0.3s',
+            animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        });
+    },
+    getContentStyle: function(willHidden) {
+        return appendVendorPrefix({
+            margin: 0,
+            backgroundColor: "white",
+            animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
+            animationFillMode: 'forwards',
+            animationName: willHidden ? hideContentAnimation : showContentAnimation,
+            animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
+        })
+    }
+});