components#Text TypeScript Examples
The following examples show how to use
components#Text.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ItemView.tsx From mobile with Apache License 2.0 | 6 votes |
ItemView = ({item, image, isActive, altText, header, children}: ItemViewProps) => {
const i18n = useI18n();
const autoFocusRef = useAccessibilityAutoFocus(isActive);
return (
<>
<Text focusRef={autoFocusRef} marginBottom="s" marginTop="s" color="darkText">
<Text fontSize={24} fontWeight="bold" color="infoBlockNeutralText">
{[i18n.translate('Onboarding.Step'), onboardingData.indexOf(item) + 1].join(' ')}
</Text>
{[i18n.translate('Onboarding.Of'), onboardingData.length].join('')}
</Text>
{image ? (
<Box marginTop="xxxs" marginBottom="l">
<Image accessible style={styles.image} source={image} accessibilityLabel={altText} />
</Box>
) : null}
<Text variant="bodyTitle" color="headerText" marginBottom="l" accessibilityRole="header">
{header}
</Text>
{children}
</>
);
}
Example #2
Source File: powered-by.tsx From geist-ui with MIT License | 6 votes |
PoweredBy: React.FC<unknown> = () => {
return (
<div className="powered-by">
<Text mb={0} font="14px" type="secondary">
Geist is an open source project from the community.
</Text>
<Text mt={0} font="14px" type="secondary">
And is powered by{' '}
<Link color target="_blank" rel="noreferrer nofollow" href="/powered-by-netlify">
Netlify
</Link>
.
</Text>
<style jsx>{`
.powered-by {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 30px;
}
`}</style>
</div>
)
}
Example #3
Source File: RegionPicker.tsx From mobile with Apache License 2.0 | 6 votes |
RegionItem_ = ({code, onPress, name, flagIcon, selected}: RegionItemProps) => (
<>
<TouchableOpacity onPress={() => onPress(code)} accessibilityRole="radio" accessibilityState={{selected}}>
<Box paddingVertical="s" flexDirection="row" alignContent="center" justifyContent="space-between">
<Box flexDirection="row" alignItems="center" paddingVertical="s">
<Image source={flagIcon} style={styles.flag} />
<Text variant="bodyText" color="overlayBodyText" marginHorizontal="m">
{name}
</Text>
</Box>
<Box alignSelf="center">{selected && <Icon size={32} name="icon-check" />}</Box>
</Box>
</TouchableOpacity>
<Box height={1} marginHorizontal="-m" backgroundColor="overlayBackground" />
</>
)
Example #4
Source File: attributes.tsx From geist-ui with MIT License | 6 votes |
Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(
({ edit, children }) => {
const { isChinese } = useConfigs()
const path = edit.replace('/pages', 'pages')
const apiTitles = useMemo(() => {
if (React.Children.count(children) === 0) return null
return (
<>
<Spacer h={1} />
<h3>
<VirtualAnchor>APIs</VirtualAnchor>
{isChinese && ' / 接口文档'}
</h3>
<AttributesTable>{children}</AttributesTable>
</>
)
}, [children, isChinese])
return (
<>
{apiTitles}
<Divider font="12px" mt="80px">
<Text p b type="secondary" style={{ userSelect: 'none' }}>
{isChinese ? '文档贡献者' : 'Contributors'}
</Text>
</Divider>
<Contributors path={path} />
</>
)
},
)
Example #5
Source File: ItemView.tsx From mobile with Apache License 2.0 | 6 votes |
ItemView = ({item, image, isActive}: ItemViewProps) => {
const i18n = useI18n();
const autoFocusRef = useAccessibilityAutoFocus(isActive);
return (
<>
<Box marginHorizontal="-m" marginTop="s" marginBottom="l">
<Image
accessible
ref={autoFocusRef}
style={styles.image}
source={image}
accessibilityLabel={i18n.translate(`Tutorial.${item}AltText`)}
/>
</Box>
<Text variant="bodyTitle" color="headerText" marginBottom="l" accessible accessibilityRole="header">
{i18n.translate(`Tutorial.${item}Title`)}
</Text>
<TextMultiline text={i18n.translate(`Tutorial.${item}`)} variant="bodyText" color="darkText" marginBottom="l" />
</>
);
}
Example #6
Source File: index.test.tsx From geist-ui with MIT License | 5 votes |
describe('Text', () => {
it('should render P element in the default', () => {
const wrapper = mount(<Text>test-value</Text>)
expect(wrapper.find('p')).not.toBe(0)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work with different styles', () => {
const wrapper = mount(
<div>
<Text type="secondary">test-value</Text>
<Text type="success">test-value</Text>
<Text type="warning">test-value</Text>
<Text type="error">test-value</Text>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('the specified element should be rendered', () => {
const elements = [
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'p',
'small',
'span',
'del',
'i',
'em',
'b',
]
const wrapper = mount(
<div>
{elements.map((el, index) => {
const prop = { [el]: true }
return (
<Text {...prop} key={`${el}-${index}`}>
test-value
</Text>
)
})}
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('the combined style should be rendered', () => {
const wrapper = mount(
<Text p b del>
test-value
</Text>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should render default color when type missing', () => {
const Mock = Text as any
const wrapper = mount(<Mock type="unknow">test-value</Mock>)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should be able to specify the size of text', () => {
let wrapper = mount(<Text font={14}>test-value</Text>)
expect(wrapper.html()).toMatchSnapshot()
wrapper = mount(<Text font="12rem">test-value</Text>)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
})
Example #7
Source File: Language.tsx From mobile with Apache License 2.0 | 5 votes |
LanguageScreen = () => {
const i18n = useI18n();
const navigation = useNavigation();
const close = useCallback(() => navigation.goBack(), [navigation]);
const {setLocale} = useStorage();
const toggle = useCallback(
(newLocale: 'en' | 'mn') => () => {
setLocale(newLocale);
},
[setLocale],
);
return (
<Box backgroundColor="overlayBackground" flex={1}>
<SafeAreaView style={styles.flex}>
<Toolbar
title=""
navIcon="icon-back-arrow"
navText={i18n.translate('LanguageSelect.Close')}
navLabel={i18n.translate('LanguageSelect.Close')}
onIconClicked={close}
/>
<ScrollView>
<Text
paddingHorizontal="m"
variant="bodyTitle"
color="bodyText"
accessibilityRole="header"
accessibilityAutoFocus
>
{i18n.translate('LanguageSelect.Title')}
</Text>
<Box
marginHorizontal="m"
paddingHorizontal="m"
borderRadius={10}
overflow="hidden"
marginTop="m"
accessibilityRole="radiogroup"
>
<LanguageSelectItem
onPress={toggle('en')}
text={i18n.translate('LanguageSelect.En')}
isActive={i18n.locale === 'en'}
/>
<LanguageSelectItem
onPress={toggle('mn')}
text={i18n.translate('LanguageSelect.Mn')}
isActive={i18n.locale === 'mn'}
lastItem
/>
</Box>
</ScrollView>
</SafeAreaView>
</Box>
);
}
Example #8
Source File: icons-cell.tsx From geist-ui with MIT License | 5 votes |
IconsCell: React.FC<Props> = ({ component: Component, name, onClick }) => {
const theme = useTheme()
return (
<div className="icon-item" key={name} onClick={() => onClick(name)}>
<Component />
<Text type="secondary" small>
{name}
</Text>
<style jsx>{`
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
flex-grow: 0;
flex-basis: 125px;
min-width: 0px;
height: 95px;
margin: 12px 5px;
border-radius: ${theme.layout.radius};
box-sizing: border-box;
cursor: pointer;
user-select: none;
transition: all 150ms ease-in-out;
}
.icon-item > :global(small) {
display: inline-block;
width: 90%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-item:hover {
box-shadow: ${theme.expressiveness.shadowMedium};
}
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
.icon-item {
flex-basis: 30%;
}
}
`}</style>
</div>
)
}
Example #9
Source File: LocationOffView.tsx From mobile with Apache License 2.0 | 5 votes |
LocationOffView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
const i18n = useI18n();
const startExposureNotificationService = useStartExposureNotificationService();
const toSettings = useCallback(() => {
Linking.openSettings();
}, []);
const startEn = useCallback(() => {
startExposureNotificationService();
}, [startExposureNotificationService]);
const onPress = () => {
if (Platform.OS === 'android') {
return startEn();
}
return toSettings();
};
const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
return (
<BaseHomeView iconName="error-icon">
<Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
{i18n.translate('Home.EnDisabled.Title')}
</Text>
<Text variant="bodyDescription" color="lightText">
{i18n.translate('Home.EnDisabled.Body1')}
</Text>
<Box alignSelf="stretch" marginBottom="l" marginTop="l">
<ButtonSingleLine
text={i18n.translate('Home.EnDisabled.CTA')}
variant="danger50Flat"
internalLink
onPress={onPress}
/>
</Box>
<Box marginBottom="m">
<Text marginBottom="m" variant="bodyTitle" color="darkText">
{i18n.translate('Home.EnDisabled.AndroidTitle2')}
</Text>
<Text marginBottom="m" variant="bodyDescription" color="lightText">
{i18n.translate('Home.EnDisabled.AndroidBody1')}
</Text>
<Text>
<Text variant="bodyDescription" color="lightText">
{i18n.translate('Home.EnDisabled.AndroidBody2a')}
</Text>
<Text variant="bodyDescription" color="darkText" fontWeight="bold">
{i18n.translate('Home.EnDisabled.AndroidBody2b')}
</Text>
<Text variant="bodyDescription" color="lightText">
{i18n.translate('Home.EnDisabled.AndroidBody2c')}
</Text>
</Text>
</Box>
</BaseHomeView>
);
}
Example #10
Source File: codes.tsx From geist-ui with MIT License | 4 votes |
CustomizationCodes: React.FC<unknown> = () => {
const DefaultTheme = Themes.getPresetStaticTheme()
const theme = useTheme()
const { isChinese } = useConfigs()
const codeTheme = makeCodeTheme(theme)
const { copy } = useClipboard()
const { setToast } = useToasts()
const deepDifferents = useMemo(
() => ({
...getDeepDifferents(DefaultTheme, theme),
type: CUSTOM_THEME_TYPE,
}),
[DefaultTheme, theme],
)
const userCodes = useMemo(() => {
return `const myTheme = ${JSON.stringify(deepDifferents, null, 2)}
/***
* Usage::
*
* export const App = () => {
* return (
* <GeistProvider themes={[myTheme]} themeType="${CUSTOM_THEME_TYPE}">
* <CssBaseline />
* <YourComponent />
* </GeistProvider>
* )
* }
**/`
}, [deepDifferents])
const copyCode = () => {
copy(userCodes)
setToast({ text: 'Theme code copied.' })
}
return (
<div className="custom-codes">
<h3 className="title">{isChinese ? '主题代码' : 'Theme Codes'}</h3>
<Spacer h={1} />
{isChinese ? (
<Text>
这里是你所有的变更,点击 <Code>copy</Code> 按钮即可使用在你自己的项目中。
</Text>
) : (
<Text>
This is all your changes, click <Code>copy</Code> to use it in your own project.
</Text>
)}
<Spacer h={2} />
<div className="codes">
<div className="copy" onClick={copyCode}>
<CopyIcon />
</div>
<LiveProvider code={userCodes} disabled theme={codeTheme}>
<LiveEditor />
</LiveProvider>
</div>
<Spacer h={5} />
<style jsx>{`
.custom-codes {
display: flex;
flex-direction: column;
flex: 1;
margin: 3rem auto 2.5rem;
text-align: center;
}
.title {
text-align: center;
width: 80%;
margin: 0 auto;
display: inline-block;
background: ${theme.palette.foreground};
color: ${theme.palette.background};
font-size: 1rem;
line-height: 1rem;
padding: ${theme.layout.gap} 0;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.codes {
width: 80%;
margin: 0 auto;
border: 1px solid ${theme.palette.border};
border-radius: ${theme.layout.radius};
overflow: hidden;
padding: calc(0.6 * ${theme.layout.gap}) ${theme.layout.gap};
position: relative;
}
.copy {
position: absolute;
right: 1rem;
top: 1rem;
z-index: 2000;
color: ${theme.palette.accents_3};
cursor: pointer;
user-select: none;
transition: color 200ms ease;
--snippet-font-size: 16px;
}
.copy:hover {
color: ${theme.palette.accents_6};
}
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
.title,
.codes {
width: 90vw;
}
}
`}</style>
</div>
)
}