Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add show more text component #3736

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add show more text component #3736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1203c6b
Add show more text component
jmpas Sep 25, 2023
cc5c731
Remove unused imports
jmpas Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"dependencies": {
"@daily-co/react-native-daily-js": "0.48.0",
"@daily-co/react-native-webrtc": "111.0.0-daily.2",
"@fawazahmed/react-native-read-more": "^3.0.3",
"@gorhom/bottom-sheet": "https://github.com/29ki/react-native-bottom-sheet.git#patch-input-scroll",
"@kingstinct/react-native-healthkit": "^7.2.0",
"@notifee/react-native": "^7.8.0",
Expand Down
33 changes: 33 additions & 0 deletions client/src/lib/components/ShowMoreText/ShowMoreText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';

import ReadMore from '@fawazahmed/react-native-read-more';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you explain the benefits of this lib? Couldn't we just do this with a character count and simple state in this component? The lib is a bit sloppy built (e.g. hard to find the source code) so I'm a bit hesitant at adding it.

Copy link
Member Author

@jmpas jmpas Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aha, I approached it similarly (mindset wise) using

onTextLayout={({ nativeEvent: { lines } }) =>
    setShowMoreButton(lines.length > numberOfLines)
    ...

But it didn't work well at all, would be interesting trying with character count as you mentioned
(also couldn't add the show more button by the end of the last line, but that's not a required thing)

Copy link
Member Author

@jmpas jmpas Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like counting characters wouldn't work without a custom parser, because we would need to count \n\n` differently, since it fills more space, as the following:

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

on the example above I'm using numberOfLines={5} on the text to limit

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expo seems to have a lib for this as well https://github.com/expo/react-native-read-more-text

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They seem to use an api to find out the height of the text component
https://github.com/expo/react-native-read-more-text/blob/3e63ca30bd0b7925893cf76bc015ab7e9b7a75a3/index.js#L103-L105

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall I copy their approach and do a component in our codebase? wdyt? @gewfy

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing some research here! I believe we did something similar, height based, in the old. Let me check :)

Copy link
Member

@gewfy gewfy Sep 26, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah exactly, in the old ap we did what you proposed ⬆️

                onTextLayout={({ nativeEvent: { lines } }) => {
                  if (lines.length > NUMBER_OF_LINES && isNil(truncated)) {
                    setTruncated(true);
                  }
                }}

And then just absolute position a Show more at the right bottom of that component, or bellow.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this seems more complex than it looks on the surface I leave it up to you. Fine to go with the lib you chose too :)


import {COLORS} from '../../../../../shared/src/constants/colors';

import {useTranslation} from 'react-i18next';

import {Body16} from '../Typography/Body/Body';

const readMoreTextStyles = {color: COLORS.PRIMARY};

const ShowMoreText: React.FC<{
numberOfLines?: number;
children: React.ReactNode;
}> = ({numberOfLines = 5, children}) => {
const {t} = useTranslation('Component.ShowMoreText');

return (
<ReadMore
customTextComponent={Body16}
numberOfLines={numberOfLines}
seeLessText={t('shrinkLabel')}
seeMoreText={t('expandLabel')}
seeMoreStyle={readMoreTextStyles}
seeLessStyle={readMoreTextStyles}
animate={false}>
{children}
</ReadMore>
);
};

export default ShowMoreText;
4 changes: 2 additions & 2 deletions client/src/routes/modals/CompletedSessionModal/CompletedSessionModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {ModalStackProps} from '../../../lib/navigation/constants/routes';
import useExerciseById from '../../../lib/content/hooks/useExerciseById';
import {formatContentName} from '../../../lib/utils/string';
import {COLORS} from '../../../../../shared/src/constants/colors';
import Markdown from '../../../lib/components/Typography/Markdown/Markdown';
import Byline from '../../../lib/components/Bylines/Byline';
import {Body14} from '../../../lib/components/Typography/Body/Body';
import Badge from '../../../lib/components/Badge/Badge';
Expand Down Expand Up @@ -59,6 +58,7 @@ import FeedbackCard from '../../../lib/components/FeedbackCard/FeedbackCard';
import ExerciseCardContainer from '../../../lib/components/Cards/SessionCard/ExerciseCardContainer';
import useExercisesByTags from '../../../lib/content/hooks/useExercisesByTags';
import {Tag as TagType} from '../../../../../shared/src/types/generated/Tag';
import ShowMoreText from '../../../lib/components/ShowMoreText/ShowMoreText';

const Content = styled(Gutters)({
justifyContent: 'space-between',
Expand Down Expand Up @@ -259,7 +259,7 @@ const CompletedSessionModal = () => {
<>
<Spacer16 />
<Gutters>
<Markdown>{exercise?.description}</Markdown>
<ShowMoreText>{exercise?.description}</ShowMoreText>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One tiny thing. Aren't we loosing the possibility to use markdown with this? Wrap it in <ShowMoreText>?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Markdown doesn't seem to support numberOfLines or similar functionality, does it? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah you mean using the library, I need to try that out

</Gutters>
</>
)}
Expand Down
27 changes: 15 additions & 12 deletions client/src/routes/modals/CreateSessionModal/components/steps/SelectTypeStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, {Fragment, useCallback, useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import AnimatedLottieView from 'lottie-react-native';

import {take} from 'ramda';
import styled from 'styled-components/native';

import {COLORS} from '../../../../../../../shared/src/constants/colors';
import {
LiveSessionType,
Expand Down Expand Up @@ -43,7 +44,6 @@ import {Heading18} from '../../../../../lib/components/Typography/Heading/Headin
import {BottomSheetFlatList} from '@gorhom/bottom-sheet';
import {ModalStackProps} from '../../../../../lib/navigation/constants/routes';
import useStartAsyncSession from '../../../../../lib/session/hooks/useStartAsyncSession';
import Markdown from '../../../../../lib/components/Typography/Markdown/Markdown';
import useGetTagsById from '../../../../../lib/content/hooks/useGetTagsById';
import Tag from '../../../../../lib/components/Tag/Tag';
import IconButton from '../../../../../lib/components/Buttons/IconButton/IconButton';
Expand All @@ -57,7 +57,7 @@ import useLiveSessionsByExercise from '../../../../../lib/session/hooks/useLiveS
import ExerciseCardContainer from '../../../../../lib/components/Cards/SessionCard/ExerciseCardContainer';
import useExercisesByTags from '../../../../../lib/content/hooks/useExercisesByTags';
import {Tag as TagType} from '../../../../../../../shared/src/types/generated/Tag';
import {take} from 'ramda';
import ShowMoreText from '../../../../../lib/components/ShowMoreText/ShowMoreText';

const TypeItemWrapper = styled.View<{isLast?: boolean}>(({isLast}) => ({
flexDirection: 'row',
Expand Down Expand Up @@ -416,18 +416,21 @@ const SelectTypeStep: React.FC<StepProps> = ({
{exercise.description && (
<>
<Spacer16 />
<Markdown>{exercise.description}</Markdown>
<ShowMoreText>{exercise.description}</ShowMoreText>
</>
)}
{tags && (
<Tags>
{tags.map(({id, tag}) => (
<Fragment key={id}>
<Tag>{tag}</Tag>
<Spacer4 />
</Fragment>
))}
</Tags>
<>
<Spacer8 />
<Tags>
{tags.map(({id, tag}) => (
<Fragment key={id}>
<Tag>{tag}</Tag>
<Spacer4 />
</Fragment>
))}
</Tags>
</>
)}

{exercise.live ? (
Expand Down
4 changes: 2 additions & 2 deletions client/src/routes/modals/HostSessionByInviteModal/HostSessionByInviteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ import SessionTimeBadge from '../../../lib/components/SessionTimeBadge/SessionTi
import {COLORS} from '../../../../../shared/src/constants/colors';

import {SPACINGS} from '../../../lib/constants/spacings';
import Markdown from '../../../lib/components/Typography/Markdown/Markdown';
import Tag from '../../../lib/components/Tag/Tag';
import useGetSessionCardTags from '../../../lib/components/Cards/SessionCard/hooks/useGetSessionCardTags';
import {LiveSessionType} from '../../../../../shared/src/schemas/Session';
Expand All @@ -55,6 +54,7 @@ import HostingInviteFailModal from '../HostingInviteFailModal/HostingInviteFailM
import useUser from '../../../lib/user/hooks/useUser';
import UpdateProfileStep from '../CreateSessionModal/components/steps/ProfileStep';
import useSessions from '../../../lib/sessions/hooks/useSessions';
import ShowMoreText from '../../../lib/components/ShowMoreText/ShowMoreText';

const Content = styled(Gutters)({
justifyContent: 'space-between',
Expand Down Expand Up @@ -153,7 +153,7 @@ const InvitationModal: React.FC<{
<>
<Spacer16 />
<Gutters>
<Markdown>{exercise?.description}</Markdown>
<ShowMoreText>{exercise?.description}</ShowMoreText>
</Gutters>
</>
)}
Expand Down
4 changes: 2 additions & 2 deletions client/src/routes/overlays/SessionOverlay/SessionOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import {Body16} from '../../../lib/components/Typography/Body/Body';
import Byline from '../../../lib/components/Bylines/Byline';
import SessionTimeBadge from '../../../lib/components/SessionTimeBadge/SessionTimeBadge';
import TouchableOpacity from '../../../lib/components/TouchableOpacity/TouchableOpacity';
import Markdown from '../../../lib/components/Typography/Markdown/Markdown';
import Tag from '../../../lib/components/Tag/Tag';
import Interested from '../../../lib/components/Interested/Interested';
import AnimatedButton from '../../../lib/components/Buttons/AnimatedButton';
Expand Down Expand Up @@ -72,6 +71,7 @@ import useExercisesByTags from '../../../lib/content/hooks/useExercisesByTags';
import {Tag as TagType} from '../../../../../shared/src/types/generated/Tag';
import ExerciseCardContainer from '../../../lib/components/Cards/SessionCard/ExerciseCardContainer';
import {take} from 'ramda';
import ShowMoreText from '../../../lib/components/ShowMoreText/ShowMoreText';

const Content = styled(Gutters)({
justifyContent: 'space-between',
Expand Down Expand Up @@ -346,7 +346,7 @@ const SessionOverlay = () => {
<>
<Spacer16 />
<Gutters>
<Markdown>{exercise?.description}</Markdown>
<ShowMoreText>{exercise?.description}</ShowMoreText>
</Gutters>
</>
)}
Expand Down
7 changes: 7 additions & 0 deletions client/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1226,6 +1226,13 @@
resolved "https://registry.yarnpkg.com/@expo/sdk-runtime-versions/-/sdk-runtime-versions-1.0.0.tgz#d7ebd21b19f1c6b0395e50d78da4416941c57f7c"
integrity sha512-Doz2bfiPndXYFPMRwPyGa1k5QaKDVpY806UJj570epIiMzWaYyCtobasyfC++qfIXVb5Ocy7r3tP9d62hAQ7IQ==

"@fawazahmed/react-native-read-more@^3.0.3":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@fawazahmed/react-native-read-more/-/react-native-read-more-3.0.3.tgz#1325c00d7b65ecc17ae4802ae58de979eb98739d"
integrity sha512-dYaPFgHf0XLgrBOSVxXDQSdZ2pBCEGj3yhgw9J3HVII/hyG9mBYz6eh9WwQk1TyE/tX5bxA5rdXNyjgnEJNT+A==
dependencies:
prop-types "^15.7.2"

"@gorhom/bottom-sheet@https://github.com/29ki/react-native-bottom-sheet.git#patch-input-scroll":
version "4.4.6"
resolved "https://github.com/29ki/react-native-bottom-sheet.git#468a61d972dbdb8e91bce2d34aa901eba27a1915"
Expand Down
9 changes: 9 additions & 0 deletions content/src/ui/Component.ShowMoreText.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"en": {
"expandLabel": "show more",
"shrinkLabel": "show less"
},
"pt": {},
"sv": {},
"es": {}
}