Diff
checker
Texto
Texto
Imagens
Documentos
Excel
Pastas
Legal
Enterprise
Aplicativo para desktop
Preços
Fazer login
Baixar o Diffchecker Desktop
Comparar texto
Encontre a diferença entre dois arquivos de texto
Ferramentas
Histórico
Editor live
Ocultar espaços em branco
Recolher inalteradas
Sem quebra de linha
Layout
Dividido
Unificado
Nível de detalhe
Inteligente
Palavra
Caractere
Estilos de texto
Alterar aparência
Realce de sintaxe
Escolher sintaxe
Ignorar
Transformar texto
Ir à primeira mudança
Editar entrada
Diffchecker Desktop
A maneira mais segura de usar o Diffchecker. Obtenha o aplicativo Diffchecker Desktop: seus diffs nunca saem do seu computador!
Obter Desktop
Untitled diff
Criado
há 10 anos
O diff nunca expira
Limpar
Exportar
Compartilhar
Explicar
1 remoção
Linhas
Total
Removido
Caracteres
Total
Removido
Para continuar usando este recurso, atualize para
Diff
checker
Pro
Ver preços
319 linhas
Copiar tudo
29 adições
Linhas
Total
Adicionado
Caracteres
Total
Adicionado
Para continuar usando este recurso, atualize para
Diff
checker
Pro
Ver preços
342 linhas
Copiar tudo
(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'));
Diferenças salvas
Texto original
Abrir arquivo
(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 alterado
Abrir arquivo
(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 Diferença