Diff
checker
Texte
Texte
Images
Documents
Excel
Dossiers
Legal
Enterprise
Application de bureau
Prix
Se connecter
Télécharger Diffchecker Desktop
Comparer le texte
Trouver la différence entre deux fichiers texte
Outils
Historique
Éditeur live
Masquer les espaces
Cacher identiques
Sans retour à la ligne
Vue
Divisé
Unifié
Niveau de précision
Intelligent
Mot
Caractère
Styles de texte
Modifier l’apparence
Coloration syntaxique
Choisir la syntaxe
Ignorer
Transformer le texte
Aller au premier écart
Modifier l'entrée
Diffchecker Desktop
La façon la plus sécurisée d'utiliser Diffchecker. Obtenez l'application Diffchecker Desktop : vos diffs ne quittent jamais votre ordinateur !
Obtenir Desktop
Untitled diff
Créé
il y a 10 ans
Le diff n'expire jamais
Effacer
Exporter
Partager
Expliquer
1 suppression
Lignes
Total
Supprimé
Caractères
Total
Supprimé
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
319 lignes
Copier tout
29 ajouts
Lignes
Total
Ajouté
Caractères
Total
Ajouté
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
342 lignes
Copier tout
(function() {
(function() {
'use strict';
'use strict';
var hasOwn = {}.hasOwnProperty;
var hasOwn = {}.hasOwnProperty;
function classNames() {
function classNames() {
var classes = [];
var classes = [];
for (var i = 0; i < arguments.length; i++) {
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
var arg = arguments[i];
if (!arg) continue;
if (!arg) continue;
var argType = typeof arg;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
if (argType === 'string' || argType === 'number') {
classes.push(arg);
classes.push(arg);
} else if (Array.isArray(arg)) {
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
} else if (argType === 'object') {
for (var key in arg) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
classes.push(key);
}
}
}
}
}
}
}
}
return classes.join(' ');
return classes.join(' ');
}
}
if (typeof module !== 'undefined' && module.exports) {
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
// register as 'classnames', consistent with npm package name
define('classnames', [], function() {
define('classnames', [], function() {
return classNames;
return classNames;
});
});
} else {
} else {
window.classNames = classNames;
window.classNames = classNames;
}
}
}());
}());
var _createClass = function() {
var _createClass = function() {
function defineProperties(target, props) {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
Object.defineProperty(target, descriptor.key, descriptor);
}
}
}
}
return function(Constructor, protoProps, staticProps) {
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
return Constructor;
};
};
}();
}();
function _classCallCheck(instance, Constructor) {
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
throw new TypeError("Cannot call a class as a function");
}
}
}
}
function _possibleConstructorReturn(self, call) {
function _possibleConstructorReturn(self, call) {
if (!self) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
}
function _inherits(subClass, superClass) {
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
constructor: {
value: subClass,
value: subClass,
enumerable: false,
enumerable: false,
writable: true,
writable: true,
configurable: true
configurable: true
}
}
});
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
}
var _React = React;
var _React = React;
var Component = _React.Component;
var Component = _React.Component;
var _ReactDOM = ReactDOM;
var _ReactDOM = ReactDOM;
var render = _ReactDOM.render;
var render = _ReactDOM.render;
var _ReactMotion = ReactMotion;
var _ReactMotion = ReactMotion;
var Motion = _ReactMotion.Motion;
var Motion = _ReactMotion.Motion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var spring = _ReactMotion.spring;
var spring = _ReactMotion.spring;
var _ref = "";
var _ref = "";
var noop = _ref.noop;
var noop = _ref.noop;
Copier
Copié
Copier
Copié
/* Method to create the function that creates the link-like behaviour */
function goTo(link) {
return function() {
window.location = link;
}
}
var App = function(_Component) {
var App = function(_Component) {
_inherits(App, _Component);
_inherits(App, _Component);
function App() {
function App() {
_classCallCheck(this, App);
_classCallCheck(this, App);
var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));
var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));
_this.state = {
_this.state = {
active: false
active: false
};
};
_this._onClick = _this._onClick.bind(_this);
_this._onClick = _this._onClick.bind(_this);
return _this;
return _this;
}
}
_createClass(App, [{
_createClass(App, [{
key: "_onClick",
key: "_onClick",
value: function _onClick() {
value: function _onClick() {
this.setState({
this.setState({
active: !this.state.active
active: !this.state.active
});
});
}
}
}, {
}, {
key: "render",
key: "render",
value: function render() {
value: function render() {
var _this2 = this;
var _this2 = this;
Copier
Copié
Copier
Copié
var iconArrayOne = ["Web", "Operations"];
//
var iconArrayOne = ["Web", "Operations"];
var iconArrayTwo = ["M & A", "Finance"];
//
var iconArrayTwo = ["M & A", "Finance"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayTwo = ["M & A", "Finance"];
var tooltipArrayTwo = ["M & A", "Finance"];
Copier
Copié
Copier
Copié
/* Defining the new Arrays */
var iconArrayOne = [
{name: "Web", link: "http://darrellewillis.com"},
{name: "Operations", link: "http://darrellewillis.com"}
];
var iconArrayTwo = [
{name: "M & A", link: "http://darrellewillis.com"},
{name: "Finance", link: "http://darrellewillis.com"}
];
return React.createElement(
return React.createElement(
"div", {
"div", {
className: "container"
className: "container"
},
},
React.createElement(
React.createElement(
ButtonGroup,
ButtonGroup,
null,
null,
React.createElement(
React.createElement(
StaggeredMotion, {
StaggeredMotion, {
defaultStyles: [{
defaultStyles: [{
x: -45,
x: -45,
o: 0
o: 0
}, {
}, {
x: -45,
x: -45,
o: 0
o: 0
}],
}],
styles: function styles(prevInterpolatedStyles) {
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return prevInterpolatedStyles.map(function(_, i) {
return i === prevInterpolatedStyles.length - 1 ? {
return i === prevInterpolatedStyles.length - 1 ? {
x: spring(_this2.state.active ? 0 : -45, {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(_this2.state.active ? 1 : 0, {
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
} : {
} : {
x: spring(prevInterpolatedStyles[i + 1].x, {
x: spring(prevInterpolatedStyles[i + 1].x, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(prevInterpolatedStyles[i + 1].o, {
o: spring(prevInterpolatedStyles[i + 1].o, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
};
};
});
});
}
}
},
},
function(interpolatingStyles) {
function(interpolatingStyles) {
return React.createElement(
return React.createElement(
ButtonGroup,
ButtonGroup,
null,
null,
interpolatingStyles.map(function(style, i) {
interpolatingStyles.map(function(style, i) {
return React.createElement(
return React.createElement(
Button, {
Button, {
key: i,
key: i,
style: {
style: {
position: 'relative',
position: 'relative',
right: style.x,
right: style.x,
opacity: style.o,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
pointerEvents: _this2.state.active ? 'auto' : 'none'
Copier
Copié
Copier
Copié
}
},
/* Using the goTo method */
onClick: goTo(iconArrayOne[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
text: tooltipArrayOne[i]
}),
}),
Copier
Copié
Copier
Copié
iconArrayOne[i]
iconArrayOne[i]
.name
);
);
})
})
);
);
}
}
),
),
React.createElement(
React.createElement(
Motion, {
Motion, {
defaultStyle: {
defaultStyle: {
s: 0.675
s: 0.675
},
},
style: {
style: {
s: spring(this.state.active ? 1 : 0.675, {
s: spring(this.state.active ? 1 : 0.675, {
stiffness: 330,
stiffness: 330,
damping: 14
damping: 14
})
})
}
}
},
},
function(interpolatingStyles) {
function(interpolatingStyles) {
return React.createElement(
return React.createElement(
Button, {
Button, {
className: "button--large",
className: "button--large",
onClick: _this2._onClick,
onClick: _this2._onClick,
style: {
style: {
transform: 'scale(' + interpolatingStyles.s + ')'
transform: 'scale(' + interpolatingStyles.s + ')'
}
}
},
},
React.createElement("span", {
React.createElement("span", {
className: _this2.state.active ? 'icon active' : 'icon'
className: _this2.state.active ? 'icon active' : 'icon'
})
})
);
);
}
}
),
),
React.createElement(
React.createElement(
StaggeredMotion, {
StaggeredMotion, {
defaultStyles: [{
defaultStyles: [{
x: -45,
x: -45,
o: 0
o: 0
}, {
}, {
x: -45,
x: -45,
o: 0
o: 0
}],
}],
styles: function styles(prevInterpolatedStyles) {
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return prevInterpolatedStyles.map(function(_, i) {
return i === 0 ? {
return i === 0 ? {
x: spring(_this2.state.active ? 0 : -45, {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(_this2.state.active ? 1 : 0, {
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
} : {
} : {
x: spring(prevInterpolatedStyles[i - 1].x, {
x: spring(prevInterpolatedStyles[i - 1].x, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
}),
}),
o: spring(prevInterpolatedStyles[i - 1].o, {
o: spring(prevInterpolatedStyles[i - 1].o, {
stiffness: 330,
stiffness: 330,
damping: 20
damping: 20
})
})
};
};
});
});
}
}
},
},
function(interpolatingStyles) {
function(interpolatingStyles) {
return React.createElement(
return React.createElement(
ButtonGroup,
ButtonGroup,
null,
null,
interpolatingStyles.map(function(style, i) {
interpolatingStyles.map(function(style, i) {
return React.createElement(
return React.createElement(
Button, {
Button, {
key: i,
key: i,
style: {
style: {
position: 'relative',
position: 'relative',
left: style.x,
left: style.x,
opacity: style.o,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
pointerEvents: _this2.state.active ? 'auto' : 'none'
Copier
Copié
Copier
Copié
}
}
,
onClick: goTo(iconArrayTwo[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
text: tooltipArrayTwo[i]
}),
}),
Copier
Copié
Copier
Copié
iconArrayTwo[i]
iconArrayTwo[i]
.name
);
);
})
})
);
);
}
}
)
)
)
)
);
);
}
}
}]);
}]);
return App;
return App;
}(Component);
}(Component);
var Tooltip = function Tooltip(props) {
var Tooltip = function Tooltip(props) {
return React.createElement(
return React.createElement(
"span", {
"span", {
className: "tooltip"
className: "tooltip"
},
},
props.text
props.text
);
);
};
};
var ButtonGroup = function ButtonGroup(props) {
var ButtonGroup = function ButtonGroup(props) {
return React.createElement(
return React.createElement(
"div", {
"div", {
className: "button-group",
className: "button-group",
style: props.style
style: props.style
},
},
props.children
props.children
);
);
};
};
var Button = function Button(props) {
var Button = function Button(props) {
return React.createElement(
return React.createElement(
"button", {
"button", {
className: classNames('button', props.className),
className: classNames('button', props.className),
style: props.style,
style: props.style,
onClick: props.onClick || noop
onClick: props.onClick || noop
},
},
props.children
props.children
);
);
};
};
render(React.createElement(App, null), document.getElementById('root'));
render(React.createElement(App, null), document.getElementById('root'));
Différences enregistrées
Texte d'origine
Ouvrir un fichier
(function() { 'use strict'; var hasOwn = {}.hasOwnProperty; function classNames() { var classes = []; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; if (!arg) continue; var argType = typeof arg; if (argType === 'string' || argType === 'number') { classes.push(arg); } else if (Array.isArray(arg)) { classes.push(classNames.apply(null, arg)); } else if (argType === 'object') { for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { classes.push(key); } } } } return classes.join(' '); } if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) { // register as 'classnames', consistent with npm package name define('classnames', [], function() { return classNames; }); } else { window.classNames = classNames; } }()); var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _React = React; var Component = _React.Component; var _ReactDOM = ReactDOM; var render = _ReactDOM.render; var _ReactMotion = ReactMotion; var Motion = _ReactMotion.Motion; var StaggeredMotion = _ReactMotion.StaggeredMotion; var spring = _ReactMotion.spring; var _ref = ""; var noop = _ref.noop; var App = function(_Component) { _inherits(App, _Component); function App() { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this)); _this.state = { active: false }; _this._onClick = _this._onClick.bind(_this); return _this; } _createClass(App, [{ key: "_onClick", value: function _onClick() { this.setState({ active: !this.state.active }); } }, { key: "render", value: function render() { var _this2 = this; var iconArrayOne = ["Web", "Operations"]; var iconArrayTwo = ["M & A", "Finance"]; var tooltipArrayOne = ["Web", "Operations"]; var tooltipArrayTwo = ["M & A", "Finance"]; return React.createElement( "div", { className: "container" }, React.createElement( ButtonGroup, null, React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === prevInterpolatedStyles.length - 1 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i + 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i + 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', right: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' } }, React.createElement(Tooltip, { text: tooltipArrayOne[i] }), iconArrayOne[i] ); }) ); } ), React.createElement( Motion, { defaultStyle: { s: 0.675 }, style: { s: spring(this.state.active ? 1 : 0.675, { stiffness: 330, damping: 14 }) } }, function(interpolatingStyles) { return React.createElement( Button, { className: "button--large", onClick: _this2._onClick, style: { transform: 'scale(' + interpolatingStyles.s + ')' } }, React.createElement("span", { className: _this2.state.active ? 'icon active' : 'icon' }) ); } ), React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === 0 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i - 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i - 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', left: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' } }, React.createElement(Tooltip, { text: tooltipArrayTwo[i] }), iconArrayTwo[i] ); }) ); } ) ) ); } }]); return App; }(Component); var Tooltip = function Tooltip(props) { return React.createElement( "span", { className: "tooltip" }, props.text ); }; var ButtonGroup = function ButtonGroup(props) { return React.createElement( "div", { className: "button-group", style: props.style }, props.children ); }; var Button = function Button(props) { return React.createElement( "button", { className: classNames('button', props.className), style: props.style, onClick: props.onClick || noop }, props.children ); }; render(React.createElement(App, null), document.getElementById('root'));
Texte modifié
Ouvrir un fichier
(function() { 'use strict'; var hasOwn = {}.hasOwnProperty; function classNames() { var classes = []; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; if (!arg) continue; var argType = typeof arg; if (argType === 'string' || argType === 'number') { classes.push(arg); } else if (Array.isArray(arg)) { classes.push(classNames.apply(null, arg)); } else if (argType === 'object') { for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { classes.push(key); } } } } return classes.join(' '); } if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) { // register as 'classnames', consistent with npm package name define('classnames', [], function() { return classNames; }); } else { window.classNames = classNames; } }()); var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var _React = React; var Component = _React.Component; var _ReactDOM = ReactDOM; var render = _ReactDOM.render; var _ReactMotion = ReactMotion; var Motion = _ReactMotion.Motion; var StaggeredMotion = _ReactMotion.StaggeredMotion; var spring = _ReactMotion.spring; var _ref = ""; var noop = _ref.noop; /* Method to create the function that creates the link-like behaviour */ function goTo(link) { return function() { window.location = link; } } var App = function(_Component) { _inherits(App, _Component); function App() { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this)); _this.state = { active: false }; _this._onClick = _this._onClick.bind(_this); return _this; } _createClass(App, [{ key: "_onClick", value: function _onClick() { this.setState({ active: !this.state.active }); } }, { key: "render", value: function render() { var _this2 = this; //var iconArrayOne = ["Web", "Operations"]; //var iconArrayTwo = ["M & A", "Finance"]; var tooltipArrayOne = ["Web", "Operations"]; var tooltipArrayTwo = ["M & A", "Finance"]; /* Defining the new Arrays */ var iconArrayOne = [ {name: "Web", link: "http://darrellewillis.com"}, {name: "Operations", link: "http://darrellewillis.com"} ]; var iconArrayTwo = [ {name: "M & A", link: "http://darrellewillis.com"}, {name: "Finance", link: "http://darrellewillis.com"} ]; return React.createElement( "div", { className: "container" }, React.createElement( ButtonGroup, null, React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === prevInterpolatedStyles.length - 1 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i + 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i + 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', right: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' }, /* Using the goTo method */ onClick: goTo(iconArrayOne[i].link) }, React.createElement(Tooltip, { text: tooltipArrayOne[i] }), iconArrayOne[i].name ); }) ); } ), React.createElement( Motion, { defaultStyle: { s: 0.675 }, style: { s: spring(this.state.active ? 1 : 0.675, { stiffness: 330, damping: 14 }) } }, function(interpolatingStyles) { return React.createElement( Button, { className: "button--large", onClick: _this2._onClick, style: { transform: 'scale(' + interpolatingStyles.s + ')' } }, React.createElement("span", { className: _this2.state.active ? 'icon active' : 'icon' }) ); } ), React.createElement( StaggeredMotion, { defaultStyles: [{ x: -45, o: 0 }, { x: -45, o: 0 }], styles: function styles(prevInterpolatedStyles) { return prevInterpolatedStyles.map(function(_, i) { return i === 0 ? { x: spring(_this2.state.active ? 0 : -45, { stiffness: 330, damping: 20 }), o: spring(_this2.state.active ? 1 : 0, { stiffness: 330, damping: 20 }) } : { x: spring(prevInterpolatedStyles[i - 1].x, { stiffness: 330, damping: 20 }), o: spring(prevInterpolatedStyles[i - 1].o, { stiffness: 330, damping: 20 }) }; }); } }, function(interpolatingStyles) { return React.createElement( ButtonGroup, null, interpolatingStyles.map(function(style, i) { return React.createElement( Button, { key: i, style: { position: 'relative', left: style.x, opacity: style.o, pointerEvents: _this2.state.active ? 'auto' : 'none' }, onClick: goTo(iconArrayTwo[i].link) }, React.createElement(Tooltip, { text: tooltipArrayTwo[i] }), iconArrayTwo[i].name ); }) ); } ) ) ); } }]); return App; }(Component); var Tooltip = function Tooltip(props) { return React.createElement( "span", { className: "tooltip" }, props.text ); }; var ButtonGroup = function ButtonGroup(props) { return React.createElement( "div", { className: "button-group", style: props.style }, props.children ); }; var Button = function Button(props) { return React.createElement( "button", { className: classNames('button', props.className), style: props.style, onClick: props.onClick || noop }, props.children ); }; render(React.createElement(App, null), document.getElementById('root'));
Trouver la différence