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

feat: add show more/less

Browse Source
This commit is contained in:
Akuoko Daniel Jnr 2021-03-15 16:41:51 +00:00
parent a392ad9707
commit 743fa736e9
No known key found for this signature in database
GPG Key ID: 1C95803CACD3E9DC
1 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/system/components/Tag.js
View File

@ -192,6 +192,20 @@ const STYLES_TAG = css`
}
`;
const STYLES_SHOW_MORE = css`
font-family: ${Constants.font.text};
color: ${Constants.system.textGray};
font-size: 14px;
display: flex;
align-items: center;
margin: 10px 0 0;
cursor: pointer;
span {
margin: 0 0 0 8px;
}
`;
const DeleteConfirmation = ({ tag, handleDelete }) => {
const [deleteConfirmed, setDeleteConfirmation] = React.useState(false);
@ -350,6 +364,9 @@ export const Tag = ({
}) => {
const [value, setValue] = React.useState("");
const [open, setOpen] = React.useState(false);
const [showMore, setShowMore] = React.useState(false);
const numToDisplay = showMore ? tags.length : 15;
const _handleRemove = (tag) => {
const newTags = [...tags];
@ -404,12 +421,23 @@ export const Tag = ({
<ul css={STYLES_LIST}>
{tags &&
tags.map((tag) => (
tags.slice(0, numToDisplay).map((tag) => (
<li key={tag} css={STYLES_TAG}>
<span>{tag}</span>
</li>
))}
</ul>
{tags.length > 15 && (
<p css={STYLES_SHOW_MORE} onClick={() => setShowMore(!showMore)}>
<SVG.ChevronDown
height="16px"
style={{ transform: `rotate(${showMore ? 180 : 0}deg)`, transition: "200ms ease all" }}
/>
<span>{!showMore ? "show all" : "show less"}</span>
</p>
)}
</div>
);
};