feat(HistoryRecord): added the ability to hide/show description

taskany-inc · Jul 16, 2023 · 6b4d13d · 6b4d13d
1 parent 168e1b0
commit 6b4d13d
Showing 1 changed file with 33 additions and 8 deletions.
diff --git a/src/components/HistoryRecord/HistoryRecord.tsx b/src/components/HistoryRecord/HistoryRecord.tsx
@@ -1,8 +1,8 @@
-import { createContext, useContext, useState, SetStateAction, useMemo } from 'react';
+import { createContext, useContext, useState, SetStateAction, useMemo, useCallback } from 'react';
 import { User, Tag as TagData, Estimate, State as StateData, Activity, Project } from '@prisma/client';
 import styled, { css } from 'styled-components';
-import { UserPic, Text, Tag, nullable, DoubleCaretRightCircleIcon } from '@taskany/bricks';
-import { backgroundColor, gray7 } from '@taskany/colors';
+import { UserPic, Text, Tag, nullable, DoubleCaretRightCircleIcon, DividerLineIcon, Button } from '@taskany/bricks';
+import { backgroundColor } from '@taskany/colors';
 
 import { ActivityFeedItem } from '../ActivityFeed';
 import { IssueListItem } from '../IssueListItem';
@@ -97,6 +97,10 @@ const StyledIcon = styled(DoubleCaretRightCircleIcon)`
     transform: translateY(-3px);
 `;
 
+const StyledDescriptionIcon = styled(DividerLineIcon)`
+    margin-top: 5px;
+`;
+
 interface HistoryRecordContext {
     setActionText: (value: SetStateAction<HistoryAction>) => void;
 }
@@ -149,11 +153,16 @@ export const HistoryRecord: React.FC<HistoryRecordProps> = ({ author, subject, a
     }, []);
 
     const [actionText, setActionText] = useState(action);
+    const [viewDestiption, setViewDescription] = useState(false);
+
+    const handlerViewDescription = () => {
+        setViewDescription(!viewDestiption);
+    };
 
     return (
         <StyledActivityFeedItem>
             <RecordCtx.Provider value={{ setActionText }}>
-                <StyledIcon size="m" color={gray7} />
+                <StyledIcon size="m" />
                 <StyledHistoryRecordWrapper>
                     <UserPic size={18} src={author?.image} email={author?.email} />
                     <StyledTextWrapper>
@@ -163,10 +172,26 @@ export const HistoryRecord: React.FC<HistoryRecordProps> = ({ author, subject, a
                         <Text size="xs">
                             {translates[actionText]} {translates[subject]}
                         </Text>
-                        {children}
-                        <Text size="xs">
-                            <RelativeTime date={createdAt} />
-                        </Text>
+                        {action === 'change' ? (
+                            <>
+                                <Text size="xs">
+                                    <RelativeTime date={createdAt} />
+                                </Text>
+                                {viewDestiption && children}
+                                <Button
+                                    outline
+                                    iconRight={<StyledDescriptionIcon size="xs" />}
+                                    onClick={handlerViewDescription}
+                                />
+                            </>
+                        ) : (
+                            <>
+                                {children}
+                                <Text size="xs">
+                                    <RelativeTime date={createdAt} />
+                                </Text>
+                            </>
+                        )}
                     </StyledTextWrapper>
                 </StyledHistoryRecordWrapper>
             </RecordCtx.Provider>