filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 22:12:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

code cleanup & nits UI

Browse Source
This commit is contained in:
tarafanlin 2020-12-20 12:50:29 -08:00
parent be1aeabe7e
commit c4c9cd25f3
2 changed files with 30 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/core/CarouselSidebarData.js
View File

@ -191,26 +191,24 @@ const STYLES_AUTOSAVE = css`
opacity: 0;
margin: 26px 24px;
@keyframes autosave {
@keyframes slate-animations-autosave {
0% {
height: 0;
opacity: 0;
margin-left: 0;
transform: translateX(0);
}
10% {
opacity: 1;
margin-left: 24px;
transform: translateX(12px);
}
90% {
opacity: 1;
margin-left: 24px;
transform: translateX(12px);
}
100% {
opacity: 0;
height: 0;
}
}
animation: autosave 4000ms ease;
animation: slate-animations-autosave 4000ms ease;
`;
export const FileTypeDefaultPreview = () => {
@ -237,7 +235,7 @@ export default class CarouselSidebarData extends React.Component {
_ref = null;
state = {
name: this.props.data.name ? this.props.data.name : "",
name: Strings.isEmpty(this.props.data.name) ? "" : this.props.data.name,
selected: {},
isPublic: false,
copyValue: "",
@ -252,7 +250,7 @@ export default class CarouselSidebarData extends React.Component {
window.addEventListener("data-global-carousel-loading", this._handleSetLoading);
this.setState({ unsavedChanges: true });
if (this.props.isOwner && !this.props.external) {
this.debounceInstance = this.debounce(() => this._handleSave(), 3000);
this.debounceInstance = Window.debounce(() => this._handleSave(), 3000);
let isPublic = false;
let selected = {};
const id = this.props.data.id;
@ -272,15 +270,6 @@ export default class CarouselSidebarData extends React.Component {
window.removeEventListener("data-global-carousel-loading", this._handleSetLoading);
};
debounce = (func, ms) => {
let timer;
return () => {
window.clearTimeout(timer);
timer = window.setTimeout(func, ms);
};
};
_handleChange = (e) => {
this.debounceInstance();
this.setState({ [e.target.name]: e.target.value, unsavedChanges: true });
@ -430,12 +419,7 @@ export default class CarouselSidebarData extends React.Component {
/>
</Boundary>
) : (
<span
css={STYLES_META_TITLE}
target="_blank"
// href={Strings.getCIDGatewayURL(cid)}
onClick={this._handleEditFilename}
>
<span css={STYLES_META_TITLE} target="_blank" onClick={this._handleEditFilename}>
{this.state.name}
</span>
)}
@ -446,7 +430,7 @@ export default class CarouselSidebarData extends React.Component {
{this.state.unsavedChanges == false ? (
<div css={STYLES_AUTOSAVE}>
<SVG.Check height="14px" style={{ marginRight: 4 }} />
AutoSaved
Filename saved
</div>
) : null}
</div>

42
components/core/CarouselSidebarSlate.js
View File

@ -92,24 +92,24 @@ const STYLES_AUTOSAVE = css`
position: absolute;
opacity: 0;
@keyframes autosave {
@keyframes slate-animations-autosave {
0% {
opacity: 0;
margin-left: 12px;
transform: translateX(12px);
}
10% {
opacity: 1;
margin-left: 0;
transform: translateX(0px);
}
90% {
opacity: 1;
margin-left: 0;
transform: translateX(0px);
}
100% {
opacity: 0;
}
}
animation: autosave 4000ms ease;
animation: slate-animations-autosave 4000ms ease;
`;
const STYLES_SIDEBAR_INPUT_LABEL = css`
@ -182,10 +182,10 @@ export default class CarouselSidebarSlate extends React.Component {
_ref = null;
state = {
title: this.props.data.title ? this.props.data.title : "",
body: this.props.data.body ? this.props.data.body : "",
source: this.props.data.source ? this.props.data.source : "",
author: this.props.data.author ? this.props.data.author : "",
title: Strings.isEmpty(this.props.data.title) ? "" : this.props.data.title,
body: Strings.isEmpty(this.props.data.body) ? "" : this.props.data.body,
source: Strings.isEmpty(this.props.data.source) ? "" : this.props.data.source,
author: Strings.isEmpty(this.props.data.author) ? "" : this.props.data.author,
selected: {},
isPublic: false,
copyValue: "",
@ -194,13 +194,14 @@ export default class CarouselSidebarSlate extends React.Component {
unsavedChanges: false,
pickerLoading: false,
loading: false,
subject: "",
};
componentDidMount = () => {
window.addEventListener("slate-global-carousel-loading", this._handleSetLoading);
this.setState({ unsavedChanges: true });
if (this.props.isOwner && !this.props.external) {
this.debounceInstance = this.debounce(() => this._handleSave(), 3000);
this.debounceInstance = Window.debounce(() => this._handleSave(), 3000);
let isPublic = false;
let selected = {};
const id = this.props.data.id;
@ -224,15 +225,6 @@ export default class CarouselSidebarSlate extends React.Component {
this.setState({ loading: e.detail.loading });
};
debounce = (func, ms) => {
let timer;
return () => {
window.clearTimeout(timer);
timer = window.setTimeout(func, ms);
};
};
_handleClose = () => {
if (this.state.unsavedChanges) {
this._handleSave();
@ -263,9 +255,17 @@ export default class CarouselSidebarSlate extends React.Component {
_handleChange = (e) => {
this.debounceInstance();
this.setState({ [e.target.name]: e.target.value, unsavedChanges: true });
this.setState({
[e.target.name]: e.target.value,
unsavedChanges: true,
subject: e.target.name == "body" ? "Description" : this._handleCapitalization(e.target.name),
});
};
_handleCapitalization(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
_handleDownload = () => {
UserBehaviors.download(this.props.data);
};
@ -385,7 +385,7 @@ export default class CarouselSidebarSlate extends React.Component {
{this.state.unsavedChanges == false && (
<div css={STYLES_AUTOSAVE}>
<SVG.Check height="14px" style={{ marginRight: 4 }} />
AutoSaved
{this.state.subject} saved
</div>
)}
</React.Fragment>