Diff
checker
文本
文本
图像
文档
Excel
文件夹
Legal
Enterprise
桌面版
定价
登录
下载 Diffchecker 桌面版
比较文本
查找两个文本文件之间的差异
工具
历史
实时编辑器
隐藏空白更改
折叠未更改行
关闭换行
视图
拆分
统一
比对精度
智能
单词
字符
文本样式
更改外观
语法高亮
选择语法
忽略
文本转换
转到第一个差异
编辑输入
Diffchecker Desktop
运行Diffchecker最安全的方式。获取Diffchecker桌面应用:您的差异永远不会离开您的电脑!
获取桌面版
Untitled diff
创建于
10年前
差异永不过期
清除
导出
分享
解释
1 删除
行
总计
删除
字符
总计
删除
要继续使用此功能,请升级到
Diff
checker
Pro
查看价格
319 行
全部复制
29 添加
行
总计
添加
字符
总计
添加
要继续使用此功能,请升级到
Diff
checker
Pro
查看价格
342 行
全部复制
(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;
复制
已复制
复制
已复制
/* 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;
复制
已复制
复制
已复制
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"];
复制
已复制
复制
已复制
/* 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'
复制
已复制
复制
已复制
}
},
/* Using the goTo method */
onClick: goTo(iconArrayOne[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
text: tooltipArrayOne[i]
}),
}),
复制
已复制
复制
已复制
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'
复制
已复制
复制
已复制
}
}
,
onClick: goTo(iconArrayTwo[i].link)
},
},
React.createElement(Tooltip, {
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
text: tooltipArrayTwo[i]
}),
}),
复制
已复制
复制
已复制
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'));
已保存差异
原始文本
打开文件
(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'));
更改后文本
打开文件
(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'));
查找差异