2019-01-25 10:02:31 +00:00
|
|
|
import React from 'react';
|
2018-06-03 04:18:03 +00:00
|
|
|
import classnames from 'classnames';
|
2015-12-28 23:34:32 +00:00
|
|
|
|
2018-11-04 06:22:46 +00:00
|
|
|
const TabListItem = ({
|
|
|
|
target,
|
|
|
|
content,
|
2020-06-15 08:58:51 +00:00
|
|
|
network,
|
2018-11-04 06:22:46 +00:00
|
|
|
selected,
|
|
|
|
connected,
|
2019-01-25 10:02:31 +00:00
|
|
|
joined,
|
|
|
|
error,
|
2018-11-04 06:22:46 +00:00
|
|
|
onClick
|
|
|
|
}) => {
|
|
|
|
const className = classnames({
|
2020-06-15 08:58:51 +00:00
|
|
|
'tab-network': !target,
|
2018-11-04 06:22:46 +00:00
|
|
|
success: !target && connected,
|
2019-01-25 10:02:31 +00:00
|
|
|
error: (!target && !connected) || (!joined && error),
|
|
|
|
disabled: !!target && !error && joined === false,
|
2018-11-04 06:22:46 +00:00
|
|
|
selected
|
|
|
|
});
|
2016-01-05 18:29:22 +00:00
|
|
|
|
2018-11-04 06:22:46 +00:00
|
|
|
return (
|
2020-06-15 08:58:51 +00:00
|
|
|
<p className={className} onClick={() => onClick(network, target)}>
|
2018-11-04 06:22:46 +00:00
|
|
|
<span className="tab-content">{content}</span>
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
};
|
2015-12-28 23:34:32 +00:00
|
|
|
|
2019-01-25 10:02:31 +00:00
|
|
|
export default TabListItem;
|