From a7efca699e1456955ae1d3fb1a5bfb82fbc4f81b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Moreira?= <3604053+cusspvz@users.noreply.github.com> Date: Sat, 4 May 2019 16:01:21 +0100 Subject: [PATCH] feat: add support for typescript --- index.d.ts | 301 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 00000000..c1e94891 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,301 @@ +import * as R from 'react' +import * as RN from 'react-native' +import { ReactNode, Component } from 'react' + + +// Helpers +type SimpleObject = { [key: string]: any } +type ViewStyleValue = RN.StyleProp +type ImageStyleValue = RN.StyleProp +type TextStyleValue = RN.StyleProp + + +export = ShoutemUi + +export as namespace ShoutemUi + +declare namespace ShoutemUi { + + // Basic styleName + type CommonStyleName = + | 'sm-gutter' | 'md-gutter' | 'lg-gutter' | 'xl-gutter' + | 'size-gutter-left' | 'size-gutter-right' | 'size-gutter-top' | 'size-gutter-bottom' | 'size-gutter-horizontal' | 'size-gutter-vertical' + | 'rounded-corners' | 'flexible' | 'inflexible' | 'collapsible' | 'stretch' + + // Basic class templates + class SComponent extends R.Component<(Props & { + styleName?: string + })> {} + class SViewComponent extends SComponent {} + class SImageComponent extends SComponent {} + class STextComponent extends SComponent {} + + // Text + type TextStyleName = 'bold' | 'h-center' | 'line-through' | 'multiline' | 'v-center' | 'secondary' + class Heading extends STextComponent {} + class Title extends STextComponent {} + class Subtitle extends STextComponent {} + class Text extends STextComponent {} + class Caption extends STextComponent {} + + // NavigationBar + type NavigationBarStyleName = 'clear' | 'inline' | 'no-border' + class NavigationBar extends SComponent<{ + title?: string + centerComponent?: ReactNode + leftComponent?: ReactNode + rightComponent?: ReactNode + hasHistory?: boolean + navigateBack?: () => void + style?: { + centerComponent?: ViewStyleValue + container?: ViewStyleValue + componentsContainer?: ViewStyleValue + leftComponent?: ViewStyleValue + rightComponent?: ViewStyleValue + } + }> {} + + // DropDownMenu + type DropDownMenuStyleName = 'horizontal' + class DropDownMenu extends SComponent<{ + options: T[] + selectedOption: T + titleProperty: string + valueProperty: string + onOptionSelected?: (option: T) => void + visibleOptions?: number + renderOption?: (option: T) => ReactNode + style?: { + horizontalContainer?: ViewStyleValue + selectedOption?: ViewStyleValue + } + }> {} + + // ListView + class ListView extends SComponent<{ + autoHideHeader?: boolean + data?: T[] + loading?: boolean + onLoadMore?: () => void + onRefresh?: () => void + getSectionId?: (item: T) => number | string + renderRow?: (item: T) => ReactNode + renderHeader?: () => ReactNode + renderFooter?: () => ReactNode + renderSectionHeader?: (sData: any, sId: string | number) => ReactNode + style?: { + list?: ViewStyleValue + listContent?: ViewStyleValue + headerContainer?: ViewStyleValue + loadMoreSpinner?: ViewStyleValue + refreshControl?: ViewStyleValue + } + }> {} + + // GridRow + class GridRow extends SViewComponent<{ + columns: number + }> { + static groupByRows: (data: any[], columns: number, getColumnSpan?: (element: any) => number) => any[] + } + + // Card + type CardNestedStyleName = 'content' + class Card extends SViewComponent {} + + // Divider + type DividerStyleName = 'line small' | 'line center' | 'section-header' + class Divider extends SViewComponent {} + + // Row + type RowStyleName = 'small' + type RowNestedStyleName = 'disclosure' | 'notification-dot' | 'right-icon' | 'top' | 'vertical' + class Row extends SViewComponent {} + + // Tile + type TileStyleName = 'clear' | 'small' | 'text-centric' + type TileNestedStyleName = 'content' + class Tile extends SViewComponent {} + + // Spinner + class Spinner extends SComponent<{ + style?: ViewStyleValue<{ + color?: string + size?: 'small' | 'large' + }> + }> {} + + // Button + type ButtonStyleName = 'action' | 'border' | 'clear' | 'confirmation' | 'secondary' | 'full-width' | 'muted' | 'stacked' | 'tight' + class Button extends SComponent + }> {} + + // Switch + class Switch extends SComponent<{ + value: boolean + onValueChange: (nextValue: boolean) => void + }> {} + + // Image + type ImageStyleName = 'featured' | 'large' | 'large-portrait' | 'large-banner' | 'large-square' | 'large-wide' | 'large-ultra' | 'medium-avatar' | 'medium' | 'medium-wide' | 'medium-square' | 'medium-portrait' | 'rounded-corners' | 'small-avatar' | 'small' + class Image extends SImageComponent {} + + // ImageBackground + type ImageBackgroundStyleName = 'featured' | 'large' | 'large-portrait' | 'large-banner' | 'large-square' | 'large-wide' | 'large-ultra' | 'medium' | 'medium-wide' | 'medium-square' | 'medium-portrait' | 'small' + class ImageBackground extends SComponent {} + + // ImagePreview + class ImagePreview extends SComponent<{ + source: RN.ImageSourcePropType + width: number + height: number + }> {} + + // InlineGallery + type InlineGalleryStyleName = 'large-banner' | 'large-square' | 'large-wide' | 'large-ultra-wide' + class InlineGallery extends SComponent<{ + data: {source: {uri: string}}[] + onPress?: () => void + onIndexSelected?: (index: number) => void + selectedIndex?: number + style?: { + imageContainer?: ViewStyleValue + image?: ImageStyleValue + container?: ViewStyleValue + } + showNextPage?: boolean + renderOverlay?: () => ReactNode + renderPlaceholder?: () => ReactNode + }> {} + + // ImageGallery + type ImageGalleryItem = { + source: { + uri: string + } + description: string + title: string + } + class ImageGallery extends SComponent<{ + data: ImageGalleryItem[] + onIndexSelected?: (index: number) => void + selectedIndex?: number + onModeChanged?: (mode: 'gallery' | 'imagePreview') => void + renderOverlay?: () => ReactNode + renderImageOverlay?: (item: ImageGalleryItem, index: number) => ReactNode + renderPlaceholder?: () => ReactNode + style?: { + page?: ViewStyleValue + container?: ViewStyleValue + pageMargin?: number + } + }> {} + + // ImageGalleryOverlay + class ImageGalleryOverlay extends SComponent<{ + description?: string + title?: string + style?: { + container?: ViewStyleValue + title: { + container?: ViewStyleValue + text?: TextStyleValue + } + description: { + container?: ViewStyleValue + text?: TextStyleValue + scroll?: ViewStyleValue + } + } + }> {} + + // Icon + type IconName = 'sidebar' | 'back' | 'close' | 'left-arrow' | 'right-arrow' | 'up-arrow' | 'down-arrow' | 'drop-down' | 'share' | 'share-android' | 'add-to-favorites-off' | 'add-to-favorites-on' | 'play' | 'pause' | 'edit' | 'refresh' | 'web' | 'email' | 'pin' | 'address' | 'facebook' | 'linkedin' | 'tweet' | 'cart' | 'add-to-cart' | 'add-event' | 'comment' | 'call' | 'activity' | 'friends' | 'add-friend' | 'unfriend' | 'settings' | 'take-a-photo' | 'error' | 'news' | 'like' | 'search' | 'users' | 'user-profile' | 'social-wall' | 'books' | 'folder' | 'events' | 'photo' | 'music-video' | 'radio' | 'podcasts' | 'about' | 'notifications' | 'exit-to-app' | 'restaurant-menu' | 'products' | 'deals' | 'restaurant' | 'more-horizontal' | 'rss-feed' | 'missing' | 'home' | 'checkbox-on' | 'checkbox-off' | 'radiobutton-on' | 'radiobutton-off' | 'minus-button' | 'plus-button' | 'clear-text' | 'receipt' | 'history' | 'gift' | 'loyalty-card' | 'trophy' | 'lock' | 'stamp' | 'turn-off' | 'stop' | 'equalizer' | 'page' | 'rsvp' | 'github' | 'link' | 'my-location' | 'laptop' | 'directions' | 'maps' | 'uber' | 'instagram' + class Icon extends STextComponent<{ + name: IconName + }> {} + + // View + type ViewStyleName = + | 'fill-parent' | 'overlay' | 'space-between' | 'wrap' + | 'horizontal h-center' | 'horizontal h-start' | 'horizontal h-end' | 'horizontal v-center' | 'horizontal v-start' | 'horizontal v-end' + | 'vertical h-center' | 'vertical h-start' | 'vertical h-end' | 'vertical v-center' | 'vertical v-start' | 'vertical v-end' + class View extends SViewComponent {} + + // Screen + type ScreenStyleName = 'full-screen' | 'paper' + class Screen extends SViewComponent {} + + // TouchableOpacity + class TouchableOpacity extends Component {} + + // Touchable + class Touchable extends Component {} + + // Overlay + type OverlayStyleName = 'fill-parent' | 'rounded-small' + class Overlay extends SViewComponent {} + + // TextInput + class TextInput extends SComponent + }> {} + + // Video + class Video extends SComponent<{ + source?: { + uri: string + } + poster?: string + width?: number + height?: number + style?: { + container?: ViewStyleValue + } + }> {} + + // Lightbox + class Lightbox extends SComponent<{ + activeProps?: object + renderHeader?: () => ReactNode + renderContent?: () => ReactNode + underlayColor?: string + backgroundColor?: string + didOpen?: () => void + onOpen?: () => void + willClose?: () => void + onClose?: () => void + springConfig?: { + tension: number + friction: number + } + swipeToDismiss?: boolean + }> {} + + // Html + class Html extends SComponent<{ + body: string + renderElement?: (element: any) => ReactNode + style?: { + container?: ViewStyleValue + [tag: string]: any + } + }> {} + + // FormGroup + class FormGroup extends SViewComponent {} + + + // Theme + const getTheme: (variables: SimpleObject) => SimpleObject + const defaultThemeVariables: SimpleObject + const dimensionRelativeToIphone: (dimension: number, actualRefVal: number) => number + +}