mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 22:12:19 +03:00
code cleanup
This commit is contained in:
Martina
parent
3621703d44
commit
0cba9195f0
@ -40,7 +40,8 @@ export default class Profile extends React.Component {
|
||||
css={STYLES_PROFILE_IMAGE}
|
||||
style={{ backgroundImage: `url('${data.data.photo}')` }}
|
||||
/>
|
||||
<div css={STYLES_NAME}>{data.username}</div>/{this.props.buttons}
|
||||
<div css={STYLES_NAME}>{data.username}</div>
|
||||
{this.props.buttons}
|
||||
<br />
|
||||
{data.slates && data.slates.length ? (
|
||||
<div style={{ width: "100%" }}>
|
||||
|
||||
@ -76,6 +76,10 @@ export class SearchDropdown extends React.Component {
|
||||
_input;
|
||||
_optionRoot;
|
||||
|
||||
static defaultProps = {
|
||||
defaultResults: [],
|
||||
};
|
||||
|
||||
state = {
|
||||
selectedIndex: -1,
|
||||
};
|
||||
@ -97,7 +101,7 @@ export class SearchDropdown extends React.Component {
|
||||
};
|
||||
|
||||
_handleSelect = (index) => {
|
||||
this.props.onSelect(this.props.options[index].value);
|
||||
this.props.onSelect(this.props.results[index].value);
|
||||
};
|
||||
|
||||
_handleDocumentKeydown = (e) => {
|
||||
@ -107,7 +111,7 @@ export class SearchDropdown extends React.Component {
|
||||
} else if (e.keyCode === 9) {
|
||||
this._handleDelete();
|
||||
} else if (e.keyCode === 40) {
|
||||
if (this.state.selectedIndex < this.props.options.length - 1) {
|
||||
if (this.state.selectedIndex < this.props.results.length - 1) {
|
||||
let listElem = this._optionRoot.children[this.state.selectedIndex + 1];
|
||||
let elemRect = listElem.getBoundingClientRect();
|
||||
let rootRect = this._optionRoot.getBoundingClientRect();
|
||||
@ -133,7 +137,7 @@ export class SearchDropdown extends React.Component {
|
||||
e.preventDefault();
|
||||
} else if (e.keyCode === 13) {
|
||||
if (
|
||||
this.props.options.length > this.state.selectedIndex &&
|
||||
this.props.results.length > this.state.selectedIndex &&
|
||||
this.state.selectedIndex !== -1
|
||||
) {
|
||||
this._handleSelect(this.state.selectedIndex);
|
||||
@ -170,9 +174,9 @@ export class SearchDropdown extends React.Component {
|
||||
css={STYLES_DROPDOWN}
|
||||
style={this.props.style}
|
||||
>
|
||||
{(this.props.options && this.props.options.length
|
||||
? this.props.options
|
||||
: this.props.defaultOptions
|
||||
{(this.props.results && this.props.results.length
|
||||
? this.props.results
|
||||
: this.props.defaultResults
|
||||
).map((each, i) => (
|
||||
<div
|
||||
key={each.value.data.id}
|
||||
|
||||
@ -11,6 +11,7 @@ import { css } from "@emotion/react";
|
||||
import { SearchDropdown } from "~/components/core/SearchDropdown";
|
||||
import { dispatchCustomEvent } from "~/common/custom-events";
|
||||
import { SlatePreviewRow } from "~/components/core/SlatePreviewBlock";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
|
||||
const STYLES_ICON_CIRCLE = css`
|
||||
height: 24px;
|
||||
@ -99,8 +100,7 @@ const STYLES_LINK_HOVER = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const SlateEntry = ({ item, onAction }) => {
|
||||
console.log(item);
|
||||
const SlateEntry = ({ item }) => {
|
||||
return (
|
||||
<div css={STYLES_ENTRY}>
|
||||
<div css={STYLES_SLATE_ENTRY_CONTAINER}>
|
||||
@ -119,6 +119,7 @@ const SlateEntry = ({ item, onAction }) => {
|
||||
maxHeight: "72px",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
previewStyle={{ fontSize: "12px", padding: "4px" }}
|
||||
slate={item}
|
||||
/>
|
||||
</div>
|
||||
@ -138,62 +139,36 @@ const FileEntry = ({ item }) => {
|
||||
<div css={STYLES_LINK_HOVER}>@{item.data.slate.owner.username}</div>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_IMAGE}>
|
||||
<SlateMediaObjectPreview url={item.data.file.url} type={item.type} />
|
||||
<SlateMediaObjectPreview
|
||||
style={{ fontSize: "12px", padding: "4px" }}
|
||||
url={item.data.file.url}
|
||||
type={item.type}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const STYLES_DROPDOWN_ITEM = css`
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
const STYLES_LOADER = css`
|
||||
position: absolute;
|
||||
top: calc(50% - 22px);
|
||||
left: calc(50% - 22px);
|
||||
`;
|
||||
|
||||
const options = [
|
||||
{
|
||||
name: "Send money",
|
||||
link: null,
|
||||
icon: <SVG.Wallet2 height="16px" />,
|
||||
action: { type: "NAVIGATE", value: 2 },
|
||||
},
|
||||
{
|
||||
name: "New slate",
|
||||
link: null,
|
||||
icon: <SVG.Slate2 height="16px" />,
|
||||
action: { type: "NAVIGATE", value: 3 },
|
||||
},
|
||||
{
|
||||
name: "Upload file",
|
||||
link: null,
|
||||
icon: <SVG.Folder2 height="16px" />,
|
||||
action: { type: "NAVIGATE", value: "data" },
|
||||
},
|
||||
{
|
||||
name: "Account settings",
|
||||
link: null,
|
||||
icon: <SVG.Tool2 height="16px" />,
|
||||
action: { type: "NAVIGATE", value: 13 },
|
||||
},
|
||||
{
|
||||
name: "Filecoin settings",
|
||||
link: null,
|
||||
icon: <SVG.Tool2 height="16px" />,
|
||||
action: { type: "NAVIGATE", value: 14 },
|
||||
},
|
||||
];
|
||||
|
||||
export class SearchModal extends React.Component {
|
||||
state = {
|
||||
options: [],
|
||||
value: null,
|
||||
loading: true,
|
||||
results: [],
|
||||
inputValue: "",
|
||||
};
|
||||
|
||||
componentDidMount = async () => {
|
||||
await this.fillDirectory();
|
||||
this.setState({ loading: false });
|
||||
};
|
||||
|
||||
fillDirectory = async () => {
|
||||
const response = await Actions.getNetworkDirectory();
|
||||
console.log(response);
|
||||
this.miniSearch = new MiniSearch({
|
||||
fields: ["slatename", "data.name", "username", "filename"],
|
||||
storeFields: [
|
||||
@ -239,13 +214,13 @@ export class SearchModal extends React.Component {
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
if (this.miniSearch) {
|
||||
if (!this.state.loading) {
|
||||
this.setState({ inputValue: e.target.value }, () => {
|
||||
let results = this.miniSearch.search(this.state.inputValue);
|
||||
let options = [];
|
||||
for (let item of results) {
|
||||
let searchResults = this.miniSearch.search(this.state.inputValue);
|
||||
let results = [];
|
||||
for (let item of searchResults) {
|
||||
if (item.type === "USER") {
|
||||
options.push({
|
||||
results.push({
|
||||
value: {
|
||||
type: "USER",
|
||||
data: item,
|
||||
@ -253,7 +228,7 @@ export class SearchModal extends React.Component {
|
||||
component: <UserEntry item={item} />,
|
||||
});
|
||||
} else if (item.type === "SLATE") {
|
||||
options.push({
|
||||
results.push({
|
||||
value: {
|
||||
type: "SLATE",
|
||||
data: item,
|
||||
@ -263,7 +238,7 @@ export class SearchModal extends React.Component {
|
||||
),
|
||||
});
|
||||
} else if (item.type === "FILE") {
|
||||
options.push({
|
||||
results.push({
|
||||
value: {
|
||||
type: "FILE",
|
||||
data: item,
|
||||
@ -271,7 +246,7 @@ export class SearchModal extends React.Component {
|
||||
component: <FileEntry item={item} />,
|
||||
});
|
||||
}
|
||||
this.setState({ options });
|
||||
this.setState({ results });
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -320,37 +295,14 @@ export class SearchModal extends React.Component {
|
||||
return (
|
||||
<div css={STYLES_MODAL}>
|
||||
<SearchDropdown
|
||||
show
|
||||
search
|
||||
name="exampleThree"
|
||||
placeholder="Search..."
|
||||
options={this.state.options}
|
||||
results={this.state.results}
|
||||
onSelect={this._handleSelect}
|
||||
value={this.state.value}
|
||||
onChange={this._handleChange}
|
||||
inputValue={this.state.inputValue}
|
||||
style={STYLES_SEARCH_DROPDOWN}
|
||||
defaultOptions={[]}
|
||||
// defaultOptions={options.map((option) => {
|
||||
// return {
|
||||
// name: (
|
||||
// <div
|
||||
// css={STYLES_DROPDOWN_ITEM}
|
||||
// onClick={() => this._handleAction(option.action)}
|
||||
// >
|
||||
// <div
|
||||
// css={STYLES_ICON_CIRCLE}
|
||||
// style={{ height: "40px", width: "40px" }}
|
||||
// >
|
||||
// {option.icon}
|
||||
// </div>
|
||||
// <div>{option.name}</div>
|
||||
// </div>
|
||||
// ),
|
||||
// value: option.name,
|
||||
// };
|
||||
// })}
|
||||
/>
|
||||
{this.state.loading ? <LoaderSpinner css={STYLES_LOADER} /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -30,26 +30,48 @@ export default class SlateMediaObjectPreview extends React.Component {
|
||||
// This is a hack to catch this undefined case I don't want to track down yet.
|
||||
const url = this.props.url.replace("https://undefined", "https://");
|
||||
|
||||
let element = <article css={STYLES_ENTITY}>No Preview</article>;
|
||||
let element = (
|
||||
<article css={STYLES_ENTITY} style={this.props.style}>
|
||||
No Preview
|
||||
</article>
|
||||
);
|
||||
|
||||
if (this.props.type && this.props.type.startsWith("video/")) {
|
||||
element = <article css={STYLES_ENTITY}>Video</article>;
|
||||
element = (
|
||||
<article css={STYLES_ENTITY} style={this.props.style}>
|
||||
Video
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.type && this.props.type.startsWith("audio/")) {
|
||||
element = <article css={STYLES_ENTITY}>Audio</article>;
|
||||
element = (
|
||||
<article css={STYLES_ENTITY} style={this.props.style}>
|
||||
Audio
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.type && this.props.type.startsWith("application/epub")) {
|
||||
element = <article css={STYLES_ENTITY}>EPub</article>;
|
||||
element = (
|
||||
<article css={STYLES_ENTITY} style={this.props.style}>
|
||||
EPub
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.type && this.props.type.startsWith("application/pdf")) {
|
||||
element = <article css={STYLES_ENTITY}>PDF</article>;
|
||||
element = (
|
||||
<article css={STYLES_ENTITY} style={this.props.style}>
|
||||
PDF
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.type && this.props.type.startsWith("image/")) {
|
||||
element = <img css={STYLES_IMAGE} src={url} />;
|
||||
element = (
|
||||
<img css={STYLES_IMAGE} style={this.props.imageStyle} src={url} />
|
||||
);
|
||||
}
|
||||
|
||||
return element;
|
||||
|
||||
@ -38,7 +38,11 @@ export function SlatePreviewRow(props) {
|
||||
<div css={STYLES_IMAGE_ROW} style={props.containerStyle}>
|
||||
{objects.map((each) => (
|
||||
<div key={each.url} css={STYLES_ITEM_BOX} style={props.style}>
|
||||
<SlateMediaObjectPreview type={each.type} url={each.url} />
|
||||
<SlateMediaObjectPreview
|
||||
type={each.type}
|
||||
url={each.url}
|
||||
style={props.previewStyle}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -65,7 +69,7 @@ export default function SlatePreviewBlock(props) {
|
||||
return (
|
||||
<div css={STYLES_BLOCK}>
|
||||
<div css={STYLES_SLATE_NAME}>{props.slate.data.name}</div>
|
||||
<SlatePreviewRow {...props} />
|
||||
<SlatePreviewRow {...props} previewStyle={props.previewStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user