Diff
checker
Texto
Texto
Imágenes
Documentos
Excel
Carpetas
Legal
Enterprise
Aplicación de escritorio
Precios
Iniciar sesión
Descargar Diffchecker Desktop
Comparar texto
Encuentra la diferencia entre dos archivos de texto
Herramientas
Historial
Editor live
Ocultar espacios en blanco
Ocultar sin cambios
Sin ajuste de línea
Vista
Dividido
Unificado
Nivel de detalle
Inteligente
Palabra
Letra
Estilos de texto
Cambiar apariencia
Resaltado de sintaxis
Elegir sintaxis
Ignorar
Transformar texto
Ir al primer cambio
Editar entrada
Diffchecker Desktop
La forma más segura de usar Diffchecker. ¡Obtén la app de Diffchecker Desktop: tus diffs nunca salen de tu computadora!
Obtener Desktop
Untitled diff
Creado
hace 10 años
El diff nunca expira
Borrar
Exportar
Compartir
Explicar
1 eliminación
Líneas
Total
Eliminado
Caracteres
Total
Eliminado
Para continuar usando esta función, actualice a
Diff
checker
Pro
Ver precios
319 líneas
Copiar todo
29 adiciones
Líneas
Total
Añadido
Caracteres
Total
Añadido
Para continuar usando esta función, actualice a
Diff
checker
Pro
Ver precios
342 líneas
Copiar todo
(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;
Copiar
Copiado
Copiar
Copiado
/* 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;
Copiar
Copiado
Copiar
Copiado
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"];
Copiar
Copiado
Copiar
Copiado
/* 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'
Copiar
Copiado
Copiar
Copiado
}
},
/* Using the goTo method */
onClick: goTo(iconArrayOne[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
text: tooltipArrayOne[i]
}),
}),
Copiar
Copiado
Copiar
Copiado
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'
Copiar
Copiado
Copiar
Copiado
}
}
,
onClick: goTo(iconArrayTwo[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
text: tooltipArrayTwo[i]
}),
}),
Copiar
Copiado
Copiar
Copiado
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'));
Diferencias guardadas
Texto original
Abrir archivo
(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'));
Texto modificado
Abrir archivo
(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'));
Encontrar la diferencia