muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

sort category tags before others

Browse source
This commit is contained in:
Fedor Katurov 2020-03-16 17:44:01 +07:00
parent 1472d647f8
commit c989d50277
2 changed files with 96 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

124
src/components/node/NodePanelInner/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react';
import React, { FC, memo } from 'react';
import * as styles from './styles.scss';
import { Group } from '~/components/containers/Group';
import { Filler } from '~/components/containers/Filler';
@ -24,77 +24,79 @@ interface IProps {
onLock: () => void;
}
const NodePanelInner: FC<IProps> = ({
node: { title, user, is_liked, is_heroic, deleted_at, created_at },
stack,
const NodePanelInner: FC<IProps> = memo(
({
node: { title, user, is_liked, is_heroic, deleted_at, created_at },
stack,
can_star,
can_edit,
can_like,
can_star,
can_edit,
can_like,
is_loading,
is_loading,
onStar,
onEdit,
onLike,
onLock,
}) => {
return (
<div className={classNames(styles.wrap, { stack })}>
<div className={styles.content}>
<Group horizontal className={styles.panel}>
<Filler>
<div className={styles.title}>
{is_loading ? <Placeholder width="40%" /> : title || '...'}
</div>
{user && user.username && (
<div className={styles.name}>
{is_loading ? (
<Placeholder width="100px" />
onStar,
onEdit,
onLike,
onLock,
}) => {
return (
<div className={classNames(styles.wrap, { stack })}>
<div className={styles.content}>
<Group horizontal className={styles.panel}>
<Filler>
<div className={styles.title}>
{is_loading ? <Placeholder width="40%" /> : title || '...'}
</div>
{user && user.username && (
<div className={styles.name}>
{is_loading ? (
<Placeholder width="100px" />
) : (
`~${user.username}, ${getPrettyDate(created_at)}`
)}
</div>
)}
</Filler>
</Group>
<div className={styles.buttons}>
{can_star && (
<div className={classNames(styles.star, { is_heroic })}>
{is_heroic ? (
<Icon icon="star_full" size={24} onClick={onStar} />
) : (
`~${user.username}, ${getPrettyDate(created_at)}`
<Icon icon="star" size={24} onClick={onStar} />
)}
</div>
)}
</Filler>
</Group>
<div className={styles.buttons}>
{can_star && (
<div className={classNames(styles.star, { is_heroic })}>
{is_heroic ? (
<Icon icon="star_full" size={24} onClick={onStar} />
) : (
<Icon icon="star" size={24} onClick={onStar} />
)}
</div>
)}
{can_edit && (
<>
<div>
<Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
</div>
{can_edit && (
<>
<div>
<Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
<div>
<Icon icon="edit" size={24} onClick={onEdit} />
</div>
</>
)}
{can_like && (
<div className={classNames(styles.like, { is_liked })}>
{is_liked ? (
<Icon icon="heart_full" size={24} onClick={onLike} />
) : (
<Icon icon="heart" size={24} onClick={onLike} />
)}
</div>
<div>
<Icon icon="edit" size={24} onClick={onEdit} />
</div>
</>
)}
{can_like && (
<div className={classNames(styles.like, { is_liked })}>
{is_liked ? (
<Icon icon="heart_full" size={24} onClick={onLike} />
) : (
<Icon icon="heart" size={24} onClick={onLike} />
)}
</div>
)}
)}
</div>
</div>
</div>
</div>
);
};
);
}
);
export { NodePanelInner };

65
src/components/node/Tags/index.tsx
View file

@ -6,12 +6,13 @@ import React, {
useEffect,
KeyboardEvent,
ChangeEvent,
useRef
} from "react";
import { TagField } from "~/components/containers/TagField";
import { ITag } from "~/redux/types";
import { Tag } from "~/components/node/Tag";
import uniq from "ramda/es/uniq";
useRef,
useMemo,
} from 'react';
import { TagField } from '~/components/containers/TagField';
import { ITag } from '~/redux/types';
import { Tag } from '~/components/node/Tag';
import uniq from 'ramda/es/uniq';
type IProps = HTMLAttributes<HTMLDivElement> & {
tags: Partial<ITag>[];
@ -19,16 +20,21 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
onTagsChange?: (tags: string[]) => void;
};
export const Tags: FC<IProps> = ({
tags,
is_editable,
onTagsChange,
...props
}) => {
const [input, setInput] = useState("");
export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props }) => {
const [input, setInput] = useState('');
const [data, setData] = useState([]);
const timer = useRef(null);
const [catTags, ordinaryTags] = useMemo(
() =>
tags.reduce(
(obj, tag) =>
tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
[[], []]
),
[]
);
const onInput = useCallback(
({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
clearTimeout(timer.current);
@ -39,17 +45,17 @@ export const Tags: FC<IProps> = ({
const onKeyUp = useCallback(
({ key }: KeyboardEvent) => {
if (key === "Backspace" && input === "" && data.length) {
if (key === 'Backspace' && input === '' && data.length) {
setData(data.slice(0, data.length - 1));
setInput(data[data.length - 1].title);
}
if (key === "Enter" || key === "," || key === "Comma") {
if (key === 'Enter' || key === ',' || key === 'Comma') {
setData(
uniq([
...data,
...input
.split(",")
.split(',')
.map((title: string) =>
title
.trim()
@ -59,11 +65,11 @@ export const Tags: FC<IProps> = ({
.filter(el => el.length > 0)
.filter(el => !tags.some(tag => tag.title.trim() === el.trim()))
.map(title => ({
title
}))
title,
})),
])
);
setInput("");
setInput('');
}
},
[input, setInput, data, setData]
@ -75,21 +81,21 @@ export const Tags: FC<IProps> = ({
if (!items.length) return;
setData(items);
setInput("");
setInput('');
onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
}, [tags, data, onTagsChange, input, setInput]);
useEffect(() => {
setData(
data.filter(
({ title }) => !tags.some(tag => tag.title.trim() === title.trim())
)
);
setData(data.filter(({ title }) => !tags.some(tag => tag.title.trim() === title.trim())));
}, [tags]);
return (
<TagField {...props}>
{tags.map(tag => (
{catTags.map(tag => (
<Tag key={tag.title} tag={tag} />
))}
{ordinaryTags.map(tag => (
<Tag key={tag.title} tag={tag} />
))}
@ -98,12 +104,7 @@ export const Tags: FC<IProps> = ({
))}
{is_editable && (
<Tag
tag={{ title: input }}
onInput={onInput}
onKeyUp={onKeyUp}
onBlur={onSubmit}
/>
<Tag tag={{ title: input }} onInput={onInput} onKeyUp={onKeyUp} onBlur={onSubmit} />
)}
</TagField>
);