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 Section from "~/components/core/Section";
import MediaObject from "~/components/core/MediaObject";
import SlateMediaObject from "~/components/core/SlateMediaObject";
const COLUMNS_SCHEMA = [
{ key: "cid", name: "CID", width: "100%" },
@ -77,7 +77,7 @@ export default class DataView extends React.Component {
return {
id: each.id,
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) => {
this.setState({ loading: true });
if (
!window.confirm(
"Are you sure you want to delete this? It will be removed from your Slates too."
)
) {
if (!window.confirm("Are you sure you want to delete this? It will be removed from your Slates too.")) {
this.setState({ loading: false });
return null;
}
@ -157,16 +153,12 @@ export default class DataView extends React.Component {
<System.ButtonPrimary
loading={this.state.loading}
style={{ marginRight: 16 }}
onClick={() => this._handleMakeDeal(each)}
>
onClick={() => this._handleMakeDeal(each)}>
Store on Filecoin
</System.ButtonPrimary>
)}
<System.ButtonSecondary
loading={this.state.loading}
onClick={() => this._handleDelete(cid)}
>
<System.ButtonSecondary loading={this.state.loading} onClick={() => this._handleDelete(cid)}>
Delete
</System.ButtonSecondary>
</div>
@ -194,8 +186,7 @@ export default class DataView extends React.Component {
onAction={this.props.onAction}
title={`${Strings.bytesToSize(this.props.viewer.stats.bytes)} uploaded`}
style={{ minWidth: "880px" }}
buttons={this.props.buttons}
>
buttons={this.props.buttons}>
<System.Table
data={data}
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%;
`;
export default class MediaObject extends React.Component {
export default class SlateMediaObject extends React.Component {
render() {
const name = `${this.props.data.name}`;
const url = this.props.data.url
? this.props.data.url
: `https://hub.textile.io${this.props.data.ipfs}`;
const url = this.props.data.url ? 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";
if (type.startsWith("application/pdf")) {

6
components/core/SlateMediaObjectPreview.js
View File

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

4
pages/_/slate.js
View File

@ -8,7 +8,7 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeaderGeneric from "~/components/core/WebsitePrototypeHeaderGeneric";
import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
import Slate from "~/components/core/Slate";
import MediaObject from "~/components/core/MediaObject";
import SlateMediaObject from "~/components/core/SlateMediaObject";
const STYLES_ROOT = css`
display: flex;
@ -52,7 +52,7 @@ export default class SlatePage extends React.Component {
slides: this.props.slate.data.objects.map((each) => {
return {
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 MediaObject from "~/components/core/MediaObject";
import SlateMediaObject from "~/components/core/SlateMediaObject";
const STYLES_FLEX = css`
display: flex;
@ -83,7 +83,7 @@ export default class SceneFile extends React.Component {
<SVG.Dismiss height="24px" />
</div>
</div>
<MediaObject data={this.props.data} />
<SlateMediaObject data={this.props.data} />
</div>
);
}

8
scenes/SceneSlate.js
View File

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