Home

Welcome to the GithubHub wiki! Skip to content Search or jump to… Pulls Issues Codespaces Marketplace Explore

@AnT1nG82 30 days left on trial Return to organization Upgrade to Enterprise Talk to us https://github.com/AnT1nG-Advertising-Global / devhub Public forked from https://github.com/devhubapp/devhub Code Pull requests Actions Projects Security Insights Settings devhub/packages/components/src/components/common/GitHubLoginButton.tsx / @brunolemos brunolemos Move login with Personal Access Token from the login screen to inside… … Latest commit c383180 on Dec 7, 2020 History 1 contributor 132 lines (118 sloc) 3.19 KB

import React from 'react' import { StyleSheet, TextProps, View } from 'react-native'

import { IconProp } from '../../libs/vector-icons' import { sharedStyles } from '../../styles/shared' import { contentPadding, normalTextSize, scaleFactor, smallerTextSize, } from '../../styles/variables' import { Button, ButtonProps } from '../common/Button' import { useAppLayout } from '../context/LayoutContext' import { ThemedIcon } from '../themed/ThemedIcon' import { ThemedText } from '../themed/ThemedText' import { Spacer } from './Spacer'

export interface GitHubLoginButtonProps extends Omit<ButtonProps, 'children' | 'colors' | 'onPress' | 'textStyle'> { horizontal?: boolean leftIcon?: IconProp loading?: boolean onPress: () => void rightIcon?: IconProp subtitle?: string textProps?: TextProps title?: string }

const styles = StyleSheet.create({ button: { overflow: 'hidden', },

contentContainer: { flex: 1, flexDirection: 'row', justifyContent: 'flex-start', minWidth: 250, paddingHorizontal: contentPadding * 2, overflow: 'hidden', },

titleText: { width: '100%', fontWeight: '600', fontSize: normalTextSize + 1 * scaleFactor, lineHeight: normalTextSize + 6 * scaleFactor, },

subtitleText: { width: '100%', fontWeight: '400', fontSize: smallerTextSize, lineHeight: smallerTextSize + 4 * scaleFactor, }, })

export function GitHubLoginButton(props: GitHubLoginButtonProps) { const { leftIcon, rightIcon, subtitle = '', textProps = {}, title = '', ...otherProps } = props

const { sizename } = useAppLayout()

return ( <Button {...({ type: 'primary' } as any)} {...otherProps} contentContainerStyle={styles.contentContainer} size={50 * scaleFactor} style={[styles.button, sizename === '1-small' && { width: '100%' }]} > {({ foregroundThemeColor }) => ( <> {!!(leftIcon && leftIcon.name) && ( <> <ThemedIcon {...leftIcon} color={foregroundThemeColor} size={20 * scaleFactor} />

          <Spacer width={contentPadding / 2} />
        </>
      )}

      <View
        style={[sharedStyles.flexGrow, sharedStyles.alignItemsFlexStart]}
      >
        {!!title && (
          <ThemedText
            color={foregroundThemeColor}
            {...textProps}
            style={[styles.titleText, textProps.style]}
          >
            {title}
          </ThemedText>
        )}

        {!!subtitle && (
          <ThemedText
            color={foregroundThemeColor}
            {...textProps}
            style={[styles.subtitleText, textProps.style]}
          >
            {subtitle}
          </ThemedText>
        )}
      </View>

      {!!(rightIcon && rightIcon.name) && (
        <>
          <Spacer width={contentPadding / 2} />

          <ThemedIcon
            {...rightIcon}
            color={foregroundThemeColor}
            size={20 * scaleFactor}
          />
        </>
      )}
    </>
  )}
</Button>

) } Footer © 2022 GitHub, Inc. Footer navigation Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About devhub/GitHubLoginButton.tsx at master · AnT1nG-Advertising-Global/devhub