filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-27 10:52:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

slate-media-object: renames MediaObject to SlateMediaObject, fixes slate switching issues

Browse Source
This commit is contained in:
jimmylee 2020-08-20 13:33:08 -07:00
parent 42afbb8eaa
commit 342785352c
6 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
components/core/DataView.js
View File

@ -7,7 +7,7 @@ import * as Actions from "~/common/actions";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import Section from "~/components/core/Section"; import Section from "~/components/core/Section";
import MediaObject from "~/components/core/MediaObject"; import SlateMediaObject from "~/components/core/SlateMediaObject";
const COLUMNS_SCHEMA = [ const COLUMNS_SCHEMA = [
{ key: "cid", name: "CID", width: "100%" }, { key: "cid", name: "CID", width: "100%" },
@ -77,7 +77,7 @@ export default class DataView extends React.Component {
return { return {
id: each.id, id: each.id,
cid, cid,
component: <MediaObject key={each.id} data={each} />, component: <SlateMediaObject key={each.id} data={each} />,
}; };
}), }),
}, },
@ -101,11 +101,7 @@ export default class DataView extends React.Component {
_handleDelete = async (cid) => { _handleDelete = async (cid) => {
this.setState({ loading: true }); this.setState({ loading: true });
if ( if (!window.confirm("Are you sure you want to delete this? It will be removed from your Slates too.")) {
!window.confirm(
"Are you sure you want to delete this? It will be removed from your Slates too."
)
) {
this.setState({ loading: false }); this.setState({ loading: false });
return null; return null;
} }
@ -157,16 +153,12 @@ export default class DataView extends React.Component {
<System.ButtonPrimary <System.ButtonPrimary
loading={this.state.loading} loading={this.state.loading}
style={{ marginRight: 16 }} style={{ marginRight: 16 }}
onClick={() => this._handleMakeDeal(each)} onClick={() => this._handleMakeDeal(each)}>
>
Store on Filecoin Store on Filecoin
</System.ButtonPrimary> </System.ButtonPrimary>
)} )}
<System.ButtonSecondary <System.ButtonSecondary loading={this.state.loading} onClick={() => this._handleDelete(cid)}>
loading={this.state.loading}
onClick={() => this._handleDelete(cid)}
>
Delete Delete
</System.ButtonSecondary> </System.ButtonSecondary>
</div> </div>
@ -194,8 +186,7 @@ export default class DataView extends React.Component {
onAction={this.props.onAction} onAction={this.props.onAction}
title={`${Strings.bytesToSize(this.props.viewer.stats.bytes)} uploaded`} title={`${Strings.bytesToSize(this.props.viewer.stats.bytes)} uploaded`}
style={{ minWidth: "880px" }} style={{ minWidth: "880px" }}
buttons={this.props.buttons} buttons={this.props.buttons}>
>
<System.Table <System.Table
data={data} data={data}
selectedRowId={this.state.selectedRowId} selectedRowId={this.state.selectedRowId}

6
components/core/MediaObject.js → components/core/SlateMediaObject.js
View File

@ -47,12 +47,10 @@ const STYLES_IMAGE = css`
max-height: 100%; max-height: 100%;
`; `;
export default class MediaObject extends React.Component { export default class SlateMediaObject extends React.Component {
render() { render() {
const name = `${this.props.data.name}`; const name = `${this.props.data.name}`;
const url = this.props.data.url const url = this.props.data.url ? this.props.data.url : `https://hub.textile.io${this.props.data.ipfs}`;
? this.props.data.url
: `https://hub.textile.io${this.props.data.ipfs}`;
const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE"; const type = this.props.data.type ? this.props.data.type : "LEGACY_NO_TYPE";
if (type.startsWith("application/pdf")) { if (type.startsWith("application/pdf")) {

6
components/core/SlateMediaObjectPreview.js
View File

@ -76,11 +76,7 @@ export default class SlateMediaObjectPreview extends React.Component {
return ( return (
<span css={STYLES_ITEM}> <span css={STYLES_ITEM}>
<img <img css={STYLES_IMAGE} src={this.props.url} onClick={this.props.onClick} />
css={STYLES_IMAGE}
src={this.props.url}
onClick={this.props.onClick}
/>
</span> </span>
); );
} }

4
pages/_/slate.js
View File

@ -8,7 +8,7 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeaderGeneric from "~/components/core/WebsitePrototypeHeaderGeneric"; import WebsitePrototypeHeaderGeneric from "~/components/core/WebsitePrototypeHeaderGeneric";
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter"; import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
import Slate from "~/components/core/Slate"; import Slate from "~/components/core/Slate";
import MediaObject from "~/components/core/MediaObject"; import SlateMediaObject from "~/components/core/SlateMediaObject";
const STYLES_ROOT = css` const STYLES_ROOT = css`
display: flex; display: flex;
@ -52,7 +52,7 @@ export default class SlatePage extends React.Component {
slides: this.props.slate.data.objects.map((each) => { slides: this.props.slate.data.objects.map((each) => {
return { return {
id: each.id, id: each.id,
component: <MediaObject key={each.id} useImageFallback data={each} />, component: <SlateMediaObject key={each.id} useImageFallback data={each} />,
}; };
}), }),
}, },

4
scenes/SceneFile.js
View File

@ -4,7 +4,7 @@ import * as SVG from "~/components/system/svg";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import MediaObject from "~/components/core/MediaObject"; import SlateMediaObject from "~/components/core/SlateMediaObject";
const STYLES_FLEX = css` const STYLES_FLEX = css`
display: flex; display: flex;
@ -83,7 +83,7 @@ export default class SceneFile extends React.Component {
<SVG.Dismiss height="24px" /> <SVG.Dismiss height="24px" />
</div> </div>
</div> </div>
<MediaObject data={this.props.data} /> <SlateMediaObject data={this.props.data} />
</div> </div>
); );
} }

8
scenes/SceneSlate.js
View File

@ -8,7 +8,7 @@ import { css } from "@emotion/react";
import ScenePage from "~/components/core/ScenePage"; import ScenePage from "~/components/core/ScenePage";
import Slate from "~/components/core/Slate"; import Slate from "~/components/core/Slate";
import MediaObject from "~/components/core/MediaObject"; import SlateMediaObject from "~/components/core/SlateMediaObject";
import CircleButtonLight from "~/components/core/CircleButtonLight"; import CircleButtonLight from "~/components/core/CircleButtonLight";
export default class SceneSlate extends React.Component { export default class SceneSlate extends React.Component {
@ -34,6 +34,10 @@ export default class SceneSlate extends React.Component {
objects: this.props.current.data.objects, objects: this.props.current.data.objects,
loading: false, loading: false,
}); });
this._handleUpdateCarousel({
objects: this.props.current.data.objects,
});
} }
} }
@ -72,7 +76,7 @@ export default class SceneSlate extends React.Component {
return { return {
onDelete: this._handleDelete, onDelete: this._handleDelete,
id: each.id, id: each.id,
component: <MediaObject key={each.id} useImageFallback data={each} />, component: <SlateMediaObject key={each.id} useImageFallback data={each} />,
}; };
}), }),
}, },