103 lines
5.2 KiB
JavaScript
103 lines
5.2 KiB
JavaScript
import BDV2 from "../../modules/v2";
|
|
|
|
export default class V2C_ServerCard extends BDV2.reactComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
if (!this.props.server.iconUrl) this.props.server.iconUrl = this.props.fallback;
|
|
this.state = {
|
|
imageError: false,
|
|
joined: this.props.guildList.includes(this.props.server.identifier)
|
|
};
|
|
}
|
|
|
|
render() {
|
|
const {server} = this.props;
|
|
return BDV2.react.createElement(
|
|
"div", // cardPrimary-1Hv-to
|
|
{className: `card-3Qj_Yx cardPrimary-1Hv-to marginBottom8-AtZOdT bd-server-card${server.pinned ? " bd-server-card-pinned" : ""}`},
|
|
// BDV2.react.createElement(
|
|
// "div",
|
|
// { className: "flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY flex-1O1GKY directionRow-3v3tfG justifyStart-2yIZo0 alignStretch-1hwxMa noWrap-3jynv6" },
|
|
BDV2.react.createElement("img", {ref: "img", className: "bd-server-image", src: server.iconUrl, onError: this.handleError.bind(this)}),
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "flexChild-faoVW3 bd-server-content"},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY directionRow-3v3tfG noWrap-3jynv6 bd-server-header"},
|
|
BDV2.react.createElement(
|
|
"h5",
|
|
{className: "h5-18_1nd defaultColor-1_ajX0 margin-reset bd-server-name"},
|
|
server.name
|
|
),
|
|
BDV2.react.createElement(
|
|
"h5",
|
|
{className: "h5-18_1nd defaultColor-1_ajX0 margin-reset bd-server-member-count"},
|
|
server.members,
|
|
" Members"
|
|
)
|
|
),
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY directionRow-3v3tfG noWrap-3jynv6"},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "scrollerWrap-2lJEkd scrollerThemed-2oenus themeGhostHairline-DBD-2d scrollerFade-1Ijw5y bd-server-description-container"},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "scroller-2FKFPG scroller bd-server-description"},
|
|
server.description
|
|
)
|
|
)
|
|
),
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "flex-1xMQg5 flex-1O1GKY horizontal-1ae9ci horizontal-2EEEnY directionRow-3v3tfG noWrap-3jynv6 bd-server-footer"},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "flexChild-faoVW3 bd-server-tags", style: {flex: "1 1 auto"}},
|
|
server.categories.join(", ")
|
|
),
|
|
this.state.joined && BDV2.react.createElement(
|
|
"button",
|
|
{type: "button", className: "button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN colorGreen-29iAKY", style: {minHeight: "12px", marginTop: "4px", backgroundColor: "#3ac15c"}},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "ui-button-contents"},
|
|
"Joined"
|
|
)
|
|
),
|
|
server.error && BDV2.react.createElement(
|
|
"button",
|
|
{type: "button", className: "button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN disabled-9aF2ug", style: {minHeight: "12px", marginTop: "4px", backgroundColor: "#c13a3a"}},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "ui-button-contents"},
|
|
"Error"
|
|
)
|
|
),
|
|
!server.error && !this.state.joined && BDV2.react.createElement(
|
|
"button",
|
|
{type: "button", className: "button-38aScr lookFilled-1Gx00P colorBrand-3pXr91 sizeMin-1mJd1x grow-q77ONN", style: {minHeight: "12px", marginTop: "4px"}, onClick: () => {this.join();}},
|
|
BDV2.react.createElement(
|
|
"div",
|
|
{className: "ui-button-contents"},
|
|
"Join"
|
|
)
|
|
)
|
|
)
|
|
)
|
|
// )
|
|
);
|
|
}
|
|
|
|
handleError() {
|
|
this.props.server.iconUrl = this.props.fallback;
|
|
this.setState({imageError: true});
|
|
}
|
|
|
|
join() {
|
|
this.props.join(this);
|
|
//this.setState({joined: true});
|
|
}
|
|
} |