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 };