aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-19 03:09:31 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-19 03:09:31 +0800
commitda46eefe2eea9507ae12ed678b15047f1c74366f (patch)
treef0734b0cce7381221fb4d6a0c8d03c9d97bca6ba
parent2ad411ea290697fc33786f9a0daa32116d51bd09 (diff)
downloaddexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.tar
dexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.tar.gz
dexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.tar.bz2
dexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.tar.lz
dexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.tar.xz
dexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.tar.zst
dexon-sol-tools-da46eefe2eea9507ae12ed678b15047f1c74366f.zip
Create a shared Image component
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx46
-rw-r--r--packages/website/ts/components/ui/image.tsx37
2 files changed, 48 insertions, 35 deletions
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 0b0e75312..98d6dc0b3 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
import { Island } from 'ts/components/ui/island';
import { colors } from 'ts/style/colors';
import { WebsiteBackendRelayerInfo } from 'ts/types';
@@ -74,8 +75,16 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
<Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv}>
<a href={link} target="_blank" style={{ textDecoration: 'none' }}>
- <div style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
- <ImgWithFallback src={props.relayerInfo.logoImgUrl} fallbackSrc={FALLBACK_IMG_SRC} />
+ <div
+ className="flex items-center"
+ style={{ ...styles.header, backgroundColor: headerBackgroundColor }}
+ >
+ <Image
+ className="mx-auto"
+ src={props.relayerInfo.logoImgUrl}
+ fallbackSrc={FALLBACK_IMG_SRC}
+ height={RELAYER_ICON_HEIGHT}
+ />
</div>
</a>
<div style={styles.body}>
@@ -112,36 +121,3 @@ const Section = (props: SectionProps) => {
};
const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
-
-interface ImgWithFallbackProps {
- src?: string;
- fallbackSrc: string;
-}
-interface ImgWithFallbackState {
- imageLoadFailed: boolean;
-}
-class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
- constructor(props: ImgWithFallbackProps) {
- super(props);
- this.state = {
- imageLoadFailed: false,
- };
- }
- public render(): React.ReactNode {
- return (
- <div className="flex items-center" style={{ height: '100%' }}>
- {this._renderImg()}
- </div>
- );
- }
- private _renderImg(): React.ReactNode {
- const src =
- this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
- return <img className="mx-auto" onError={this._onError.bind(this)} src={src} height={RELAYER_ICON_HEIGHT} />;
- }
- private _onError(): void {
- this.setState({
- imageLoadFailed: true,
- });
- }
-}
diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx
new file mode 100644
index 000000000..0958d2e5e
--- /dev/null
+++ b/packages/website/ts/components/ui/image.tsx
@@ -0,0 +1,37 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+export interface ImageProps {
+ className?: string;
+ src?: string;
+ fallbackSrc?: string;
+ height?: string;
+}
+interface ImageState {
+ imageLoadFailed: boolean;
+}
+export class Image extends React.Component<ImageProps, ImageState> {
+ constructor(props: ImageProps) {
+ super(props);
+ this.state = {
+ imageLoadFailed: false,
+ };
+ }
+ public render(): React.ReactNode {
+ const src =
+ this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
+ return (
+ <img
+ className={this.props.className}
+ onError={this._onError.bind(this)}
+ src={src}
+ height={this.props.height}
+ />
+ );
+ }
+ private _onError(): void {
+ this.setState({
+ imageLoadFailed: true,
+ });
+ }
+}