Cull unused files (#11029)
This commit is contained in:
Samuel Newman
@@ -1,33 +0,0 @@
|
||||
import {View} from 'react-native'
|
||||
import {KeyboardStickyView} from 'react-native-keyboard-controller'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {IS_WEB} from '#/env'
|
||||
|
||||
export function KeyboardAccessory({children}: {children: React.ReactNode}) {
|
||||
const t = useTheme()
|
||||
const {bottom} = useSafeAreaInsets()
|
||||
|
||||
const style = [
|
||||
a.flex_row,
|
||||
a.py_xs,
|
||||
a.pl_sm,
|
||||
a.pr_xl,
|
||||
a.align_center,
|
||||
a.border_t,
|
||||
t.atoms.border_contrast_medium,
|
||||
t.atoms.bg,
|
||||
]
|
||||
|
||||
// todo: when iPad support is added, it should also not use the KeyboardStickyView
|
||||
if (IS_WEB) {
|
||||
return <View style={style}>{children}</View>
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyboardStickyView offset={{closed: -bottom}} style={style}>
|
||||
{children}
|
||||
</KeyboardStickyView>
|
||||
)
|
||||
}
|
||||
@@ -1,238 +0,0 @@
|
||||
import {
|
||||
forwardRef,
|
||||
type JSX,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
type NativeScrollEvent,
|
||||
type NativeSyntheticEvent,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
View,
|
||||
} from 'react-native'
|
||||
|
||||
import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {clamp} from '#/lib/numbers'
|
||||
import {colors, s} from '#/lib/styles'
|
||||
import {IS_ANDROID} from '#/env'
|
||||
import {Text} from './text/Text'
|
||||
import {FlatList_INTERNAL} from './Views'
|
||||
|
||||
const HEADER_ITEM = {_reactKey: '__header__'}
|
||||
const SELECTOR_ITEM = {_reactKey: '__selector__'}
|
||||
const STICKY_HEADER_INDICES = [1]
|
||||
|
||||
export type ViewSelectorHandle = {
|
||||
scrollToTop: () => void
|
||||
}
|
||||
|
||||
export const ViewSelector = forwardRef<
|
||||
ViewSelectorHandle,
|
||||
{
|
||||
sections: string[]
|
||||
items: any[]
|
||||
refreshing?: boolean
|
||||
swipeEnabled?: boolean
|
||||
renderHeader?: () => JSX.Element
|
||||
renderItem: (item: any) => JSX.Element
|
||||
ListFooterComponent?:
|
||||
| React.ComponentType<any>
|
||||
| React.ReactElement<any>
|
||||
| null
|
||||
| undefined
|
||||
onSelectView?: (viewIndex: number) => void
|
||||
onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
|
||||
onRefresh?: () => void
|
||||
onEndReached?: (info: {distanceFromEnd: number}) => void
|
||||
}
|
||||
>(function ViewSelectorImpl(
|
||||
{
|
||||
sections,
|
||||
items,
|
||||
refreshing,
|
||||
renderHeader,
|
||||
renderItem,
|
||||
ListFooterComponent,
|
||||
onSelectView,
|
||||
onScroll,
|
||||
onRefresh,
|
||||
onEndReached,
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const pal = usePalette('default')
|
||||
const [selectedIndex, setSelectedIndex] = useState<number>(0)
|
||||
const flatListRef = useRef<FlatList_INTERNAL>(null)
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
const keyExtractor = useCallback((item: any) => item._reactKey, [])
|
||||
|
||||
const onPressSelection = useCallback(
|
||||
(index: number) => setSelectedIndex(clamp(index, 0, sections.length)),
|
||||
[setSelectedIndex, sections],
|
||||
)
|
||||
useEffect(() => {
|
||||
onSelectView?.(selectedIndex)
|
||||
}, [selectedIndex, onSelectView])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
scrollToTop: () => {
|
||||
flatListRef.current?.scrollToOffset({offset: 0})
|
||||
},
|
||||
}))
|
||||
|
||||
// rendering
|
||||
// =
|
||||
|
||||
const renderItemInternal = useCallback(
|
||||
({item}: {item: any}) => {
|
||||
if (item === HEADER_ITEM) {
|
||||
if (renderHeader) {
|
||||
return renderHeader()
|
||||
}
|
||||
return <View />
|
||||
} else if (item === SELECTOR_ITEM) {
|
||||
return (
|
||||
<Selector
|
||||
items={sections}
|
||||
selectedIndex={selectedIndex}
|
||||
onSelect={onPressSelection}
|
||||
/>
|
||||
)
|
||||
} else {
|
||||
return renderItem(item)
|
||||
}
|
||||
},
|
||||
[sections, selectedIndex, onPressSelection, renderHeader, renderItem],
|
||||
)
|
||||
|
||||
const data = useMemo(() => [HEADER_ITEM, SELECTOR_ITEM, ...items], [items])
|
||||
return (
|
||||
<FlatList_INTERNAL
|
||||
// @ts-expect-error FlatList_INTERNAL ref type is wrong -sfn
|
||||
ref={flatListRef}
|
||||
data={data}
|
||||
keyExtractor={keyExtractor}
|
||||
renderItem={renderItemInternal}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
// NOTE sticky header disabled on android due to major performance issues -prf
|
||||
stickyHeaderIndices={IS_ANDROID ? undefined : STICKY_HEADER_INDICES}
|
||||
onScroll={onScroll}
|
||||
onEndReached={onEndReached}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing!}
|
||||
onRefresh={onRefresh}
|
||||
tintColor={pal.colors.text}
|
||||
/>
|
||||
}
|
||||
onEndReachedThreshold={0.6}
|
||||
contentContainerStyle={s.contentContainer}
|
||||
removeClippedSubviews={true}
|
||||
scrollIndicatorInsets={{right: 1}} // fixes a bug where the scroll indicator is on the middle of the screen https://github.com/bluesky-social/social-app/pull/464
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
export function Selector({
|
||||
selectedIndex,
|
||||
items,
|
||||
onSelect,
|
||||
}: {
|
||||
selectedIndex: number
|
||||
items: string[]
|
||||
onSelect?: (index: number) => void
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const borderColor = useColorSchemeStyle(
|
||||
{borderColor: colors.black},
|
||||
{borderColor: colors.white},
|
||||
)
|
||||
|
||||
const onPressItem = (index: number) => {
|
||||
onSelect?.(index)
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
backgroundColor: pal.colors.background,
|
||||
}}>
|
||||
<ScrollView
|
||||
testID="selector"
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}>
|
||||
<View style={[pal.view, styles.outer]}>
|
||||
{items.map((item, i) => {
|
||||
const selected = i === selectedIndex
|
||||
return (
|
||||
<Pressable
|
||||
testID={`selector-${i}`}
|
||||
key={item}
|
||||
onPress={() => onPressItem(i)}
|
||||
accessibilityLabel={item}
|
||||
accessibilityHint={`Selects ${item}`}
|
||||
// TODO: Modify the component API such that lint fails
|
||||
// at the invocation site as well
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.item,
|
||||
selected && styles.itemSelected,
|
||||
borderColor,
|
||||
]}>
|
||||
<Text
|
||||
style={
|
||||
selected
|
||||
? [styles.labelSelected, pal.text]
|
||||
: [styles.label, pal.textLight]
|
||||
}>
|
||||
{item}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
item: {
|
||||
marginRight: 14,
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
itemSelected: {
|
||||
borderBottomWidth: 3,
|
||||
},
|
||||
label: {
|
||||
fontWeight: '600',
|
||||
},
|
||||
labelSelected: {
|
||||
fontWeight: '600',
|
||||
},
|
||||
underline: {
|
||||
position: 'absolute',
|
||||
height: 4,
|
||||
bottom: 0,
|
||||
},
|
||||
})
|
||||
@@ -1,387 +0,0 @@
|
||||
import {useState} from 'react'
|
||||
import {ScrollView, View} from 'react-native'
|
||||
import {msg} from '@lingui/core/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {
|
||||
type CommonNavigatorParams,
|
||||
type NativeStackScreenProps,
|
||||
} from '#/lib/routes/types'
|
||||
import {s} from '#/lib/styles'
|
||||
import {type PaletteColorName, ThemeProvider} from '#/lib/ThemeContext'
|
||||
import {EmptyState} from '#/view/com/util/EmptyState'
|
||||
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
|
||||
import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
|
||||
import {Button} from '#/view/com/util/forms/Button'
|
||||
import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder'
|
||||
import {Text} from '#/view/com/util/text/Text'
|
||||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {ViewSelector} from '#/view/com/util/ViewSelector'
|
||||
import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
|
||||
import * as Layout from '#/components/Layout'
|
||||
import * as Toast from '#/components/Toast'
|
||||
|
||||
const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
|
||||
|
||||
export const DebugScreen = ({}: NativeStackScreenProps<
|
||||
CommonNavigatorParams,
|
||||
'Debug'
|
||||
>) => {
|
||||
const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light')
|
||||
const onToggleColorScheme = () => {
|
||||
setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
|
||||
}
|
||||
return (
|
||||
<ThemeProvider theme={colorScheme}>
|
||||
<Layout.Screen>
|
||||
<DebugInner
|
||||
colorScheme={colorScheme}
|
||||
onToggleColorScheme={onToggleColorScheme}
|
||||
/>
|
||||
</Layout.Screen>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function DebugInner({}: {
|
||||
colorScheme: 'light' | 'dark'
|
||||
onToggleColorScheme: () => void
|
||||
}) {
|
||||
const [currentView, setCurrentView] = useState<number>(0)
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
|
||||
const renderItem = (item: any) => {
|
||||
return (
|
||||
<View key={`view-${item.currentView}`}>
|
||||
{item.currentView === 3 ? (
|
||||
<NotifsView />
|
||||
) : item.currentView === 2 ? (
|
||||
<ErrorView />
|
||||
) : item.currentView === 1 ? (
|
||||
<ControlsView />
|
||||
) : (
|
||||
<BaseView />
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const items = [{currentView}]
|
||||
|
||||
return (
|
||||
<View style={[s.hContentRegion, pal.view]}>
|
||||
<ViewHeader title={_(msg`Debug panel`)} />
|
||||
<ViewSelector
|
||||
swipeEnabled
|
||||
sections={MAIN_VIEWS}
|
||||
items={items}
|
||||
renderItem={renderItem}
|
||||
onSelectView={setCurrentView}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function Heading({label}: {label: string}) {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<View style={[s.pt10, s.pb5]}>
|
||||
<Text type="title-lg" style={pal.text}>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function BaseView() {
|
||||
return (
|
||||
<View style={[s.pl10, s.pr10]}>
|
||||
<Heading label="Typography" />
|
||||
<TypographyView />
|
||||
<Heading label="Palettes" />
|
||||
<PaletteView palette="default" />
|
||||
<PaletteView palette="primary" />
|
||||
<PaletteView palette="secondary" />
|
||||
<PaletteView palette="inverted" />
|
||||
<PaletteView palette="error" />
|
||||
<Heading label="Empty state" />
|
||||
<EmptyStateView />
|
||||
<Heading label="Loading placeholders" />
|
||||
<LoadingPlaceholderView />
|
||||
<View style={s.footerSpacer} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function ControlsView() {
|
||||
return (
|
||||
<ScrollView style={[s.pl10, s.pr10]}>
|
||||
<Heading label="Buttons" />
|
||||
<ButtonsView />
|
||||
<View style={s.footerSpacer} />
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
function ErrorView() {
|
||||
return (
|
||||
<View style={s.p10}>
|
||||
<View style={s.mb5}>
|
||||
<ErrorScreen
|
||||
title="Error screen"
|
||||
message="A major error occurred that led the entire screen to fail"
|
||||
details="Here are some details"
|
||||
onPressTryAgain={() => {}}
|
||||
/>
|
||||
</View>
|
||||
<View style={s.mb5}>
|
||||
<ErrorMessage message="This is an error that occurred while things were being done" />
|
||||
</View>
|
||||
<View style={s.mb5}>
|
||||
<ErrorMessage
|
||||
message="This is an error that occurred while things were being done"
|
||||
numberOfLines={1}
|
||||
/>
|
||||
</View>
|
||||
<View style={s.mb5}>
|
||||
<ErrorMessage
|
||||
message="This is an error that occurred while things were being done"
|
||||
onPressTryAgain={() => {}}
|
||||
/>
|
||||
</View>
|
||||
<View style={s.mb5}>
|
||||
<ErrorMessage
|
||||
message="This is an error that occurred while things were being done"
|
||||
onPressTryAgain={() => {}}
|
||||
numberOfLines={1}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function NotifsView() {
|
||||
const triggerPush = () => {
|
||||
// TODO: implement local notification for testing
|
||||
}
|
||||
const triggerToast = () => {
|
||||
Toast.show('The task has been completed')
|
||||
}
|
||||
const triggerToast2 = () => {
|
||||
Toast.show('The task has been completed successfully and with no problems')
|
||||
}
|
||||
return (
|
||||
<View style={s.p10}>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button onPress={triggerPush} label="Trigger Push" />
|
||||
<Button onPress={triggerToast} label="Trigger Toast" />
|
||||
<Button onPress={triggerToast2} label="Trigger Toast 2" />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function PaletteView({palette}: {palette: PaletteColorName}) {
|
||||
const defaultPal = usePalette('default')
|
||||
const pal = usePalette(palette)
|
||||
return (
|
||||
<View style={[pal.view, pal.border, s.p10, s.mb5, {borderWidth: 1}]}>
|
||||
<Text style={[pal.text]}>{palette} colors</Text>
|
||||
<Text style={[pal.textLight]}>Light text</Text>
|
||||
<Text style={[pal.link]}>Link text</Text>
|
||||
{palette !== 'default' && (
|
||||
<View style={[defaultPal.view]}>
|
||||
<Text style={[pal.textInverted]}>Inverted text</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function TypographyView() {
|
||||
const pal = usePalette('default')
|
||||
return (
|
||||
<View style={[pal.view]}>
|
||||
<Text type="2xl-thin" style={[pal.text]}>
|
||||
'2xl-thin' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="2xl" style={[pal.text]}>
|
||||
'2xl' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="2xl-medium" style={[pal.text]}>
|
||||
'2xl-medium' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="2xl-bold" style={[pal.text]}>
|
||||
'2xl-bold' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="2xl-heavy" style={[pal.text]}>
|
||||
'2xl-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xl-thin" style={[pal.text]}>
|
||||
'xl-thin' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xl" style={[pal.text]}>
|
||||
'xl' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xl-medium" style={[pal.text]}>
|
||||
'xl-medium' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xl-bold" style={[pal.text]}>
|
||||
'xl-bold' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xl-heavy" style={[pal.text]}>
|
||||
'xl-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="lg-thin" style={[pal.text]}>
|
||||
'lg-thin' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="lg" style={[pal.text]}>
|
||||
'lg' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="lg-medium" style={[pal.text]}>
|
||||
'lg-medium' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="lg-bold" style={[pal.text]}>
|
||||
'lg-bold' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="lg-heavy" style={[pal.text]}>
|
||||
'lg-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="md-thin" style={[pal.text]}>
|
||||
'md-thin' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="md" style={[pal.text]}>
|
||||
'md' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="md-medium" style={[pal.text]}>
|
||||
'md-medium' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="md-bold" style={[pal.text]}>
|
||||
'md-bold' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="md-heavy" style={[pal.text]}>
|
||||
'md-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="sm-thin" style={[pal.text]}>
|
||||
'sm-thin' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="sm" style={[pal.text]}>
|
||||
'sm' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="sm-medium" style={[pal.text]}>
|
||||
'sm-medium' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="sm-bold" style={[pal.text]}>
|
||||
'sm-bold' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="sm-heavy" style={[pal.text]}>
|
||||
'sm-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xs-thin" style={[pal.text]}>
|
||||
'xs-thin' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xs" style={[pal.text]}>
|
||||
'xs' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xs-medium" style={[pal.text]}>
|
||||
'xs-medium' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xs-bold" style={[pal.text]}>
|
||||
'xs-bold' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="xs-heavy" style={[pal.text]}>
|
||||
'xs-heavy' lorem ipsum dolor
|
||||
</Text>
|
||||
|
||||
<Text type="title-2xl" style={[pal.text]}>
|
||||
'title-2xl' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="title-xl" style={[pal.text]}>
|
||||
'title-xl' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="title-lg" style={[pal.text]}>
|
||||
'title-lg' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="title" style={[pal.text]}>
|
||||
'title' lorem ipsum dolor
|
||||
</Text>
|
||||
<Text type="button" style={[pal.text]}>
|
||||
Button
|
||||
</Text>
|
||||
<Text type="button-lg" style={[pal.text]}>
|
||||
Button-lg
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyStateView() {
|
||||
const {_} = useLingui()
|
||||
|
||||
return (
|
||||
<EmptyState
|
||||
icon={HashtagWideIcon}
|
||||
iconSize="2xl"
|
||||
message={_(msg`This is an empty state`)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function LoadingPlaceholderView() {
|
||||
return (
|
||||
<>
|
||||
<LoadingPlaceholder.PostLoadingPlaceholder />
|
||||
<LoadingPlaceholder.NotificationLoadingPlaceholder />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function ButtonsView() {
|
||||
const defaultPal = usePalette('default')
|
||||
const buttonStyles = {marginRight: 5}
|
||||
return (
|
||||
<View style={[defaultPal.view]}>
|
||||
<View style={[{flexDirection: 'row'}, s.mb5]}>
|
||||
<Button type="primary" label="Primary solid" style={buttonStyles} />
|
||||
<Button type="secondary" label="Secondary solid" style={buttonStyles} />
|
||||
</View>
|
||||
<View style={[{flexDirection: 'row'}, s.mb5]}>
|
||||
<Button type="default" label="Default solid" style={buttonStyles} />
|
||||
<Button type="inverted" label="Inverted solid" style={buttonStyles} />
|
||||
</View>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button
|
||||
type="primary-outline"
|
||||
label="Primary outline"
|
||||
style={buttonStyles}
|
||||
/>
|
||||
<Button
|
||||
type="secondary-outline"
|
||||
label="Secondary outline"
|
||||
style={buttonStyles}
|
||||
/>
|
||||
</View>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button
|
||||
type="primary-light"
|
||||
label="Primary light"
|
||||
style={buttonStyles}
|
||||
/>
|
||||
<Button
|
||||
type="secondary-light"
|
||||
label="Secondary light"
|
||||
style={buttonStyles}
|
||||
/>
|
||||
</View>
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<Button
|
||||
type="default-light"
|
||||
label="Default light"
|
||||
style={buttonStyles}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user