kylefang/devhub
1
0
Fork 0
mirror of https://github.com/zhigang1992/devhub.git synced 2026-04-28 12:45:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix empty columns state

Browse Source 
New empty columns screen

Show add colum sidebar button on small screens

Allow exiting the preferences screen
This commit is contained in:
Bruno Lemos
2019-04-27 22:17:04 -03:00
parent 7a2315f8d7
commit 40e8ab9c71
8 changed files with 96 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/components/src/components/cards/GenericMessageWithButtonView.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import { Image, Text, View } from 'react-native'
import { Image, Text, View, ViewProps } from 'react-native'
import { contentPadding } from '../../styles/variables'
import {
@@ -13,20 +13,24 @@ export interface GenericMessageWithButtonViewProps {
emoji: GitHubEmoji | null
subtitle: string | undefined | null
title: string | undefined | null
style?: ViewProps['style']
}
export const GenericMessageWithButtonView = React.memo(
(props: GenericMessageWithButtonViewProps) => {
const { buttonView, emoji, subtitle, title } = props
const { buttonView, emoji, style, subtitle, title } = props
const emojiImageURL = emoji ? getEmojiImageURL(emoji) : null
return (
<View
style={{
width: '100%',
padding: contentPadding,
}}
style={[
{
width: '100%',
padding: contentPadding,
},
style,
]}
>
{!!emojiImageURL && (
<Image

2
packages/components/src/components/columns/ColumnSwitcher.tsx
View File

@@ -68,6 +68,8 @@ export function ColumnSwitcher() {
const columnIds = useReduxState(selectors.columnIdsSelector)
const currentOpenedModal = useReduxState(selectors.currentOpenedModal)
if (columnIds.length < 2) return null
if (
!(
(appViewMode === 'single-column' && shouldRenderFAB({ sizename })) ||

14
packages/components/src/components/columns/ColumnsRenderer.tsx
View File

@@ -4,16 +4,21 @@ import { Dimensions } from 'react-native'
import { constants } from '@devhub/core'
import { ColumnContainer } from '../../containers/ColumnContainer'
import { useAppViewMode } from '../../hooks/use-app-view-mode'
import { useReduxState } from '../../hooks/use-redux-state'
import { emitter } from '../../libs/emitter'
import { SafeAreaView } from '../../libs/safe-area-view'
import * as selectors from '../../redux/selectors'
import { sharedStyles } from '../../styles/shared'
import { columnHeaderHeight, sidebarSize } from '../../styles/variables'
import { EmptyCards } from '../cards/EmptyCards'
import { useColumnFilters } from '../context/ColumnFiltersContext'
import { useFocusedColumn } from '../context/ColumnFocusContext'
import { useAppLayout } from '../context/LayoutContext'
import { ViewMeasurer } from '../render-props/ViewMeasure'
import { ColumnOptionsRenderer } from './ColumnOptionsRenderer'
import { Columns } from './Columns'
import { NoColumns } from './NoColumns'
import { NoFocusedColumn } from './NoFocusedColumn'
export interface ColumnsRendererProps {}
@@ -27,14 +32,21 @@ export function ColumnsRenderer() {
inlineMode,
isSharedFiltersOpened,
} = useColumnFilters()
const columnIds = useReduxState(selectors.columnIdsSelector)
const closeSharedFiltersView = useCallback(
() => emitter.emit('TOGGLE_COLUMN_FILTERS', { columnId: focusedColumnId! }),
[focusedColumnId],
)
if (!columnIds.length) {
return <NoColumns fullWidth />
}
if (appViewMode === 'single-column' || sizename === '1-small') {
if (!focusedColumnId) return null
if (!focusedColumnId) {
return <NoFocusedColumn />
}
const defaultContainerHeight =
appOrientation === 'portrait'

28
packages/components/src/components/columns/NoColumns.tsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react'
import { Omit } from '@devhub/core'
import { useAppViewMode } from '../../hooks/use-app-view-mode'
import { GenericMessageWithButtonView } from '../cards/GenericMessageWithButtonView'
import { Column, ColumnProps } from './Column'
export interface NoColumnsProps extends Omit<ColumnProps, 'columnId'> {}
export function NoColumns(props: NoColumnsProps) {
const { appViewMode } = useAppViewMode()
return (
<Column
columnId=""
fullWidth={appViewMode === 'single-column'}
{...props}
style={[{ alignItems: 'center', justifyContent: 'center' }, props.style]}
>
<GenericMessageWithButtonView
buttonView={undefined}
emoji="wave"
title="Welcome to DevHub :)"
subtitle={'Add a column by tapping the "+" button'}
/>
</Column>
)
}

24
packages/components/src/components/columns/NoFocusedColumn.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react'
import { useAppViewMode } from '../../hooks/use-app-view-mode'
import { GenericMessageWithButtonView } from '../cards/GenericMessageWithButtonView'
import { Column } from './Column'
export function NoFocusedColumn() {
const { appViewMode } = useAppViewMode()
return (
<Column
columnId=""
fullWidth={appViewMode === 'single-column'}
style={{ alignItems: 'center', justifyContent: 'center' }}
>
<GenericMessageWithButtonView
buttonView={undefined}
emoji="vulcan_salute"
title="Nothing selected"
subtitle="Please select a column to show here"
/>
</Column>
)
}

3
packages/components/src/components/layout/FABRenderer.tsx
View File

@@ -48,6 +48,7 @@ export function FABRenderer() {
const { isSharedFiltersOpened } = useColumnFilters()
const { sizename } = useAppLayout()
const keyboardVisibility = useKeyboardVisibility()
const columnIds = useReduxState(selectors.columnIdsSelector)
const currentOpenedModal = useReduxState(selectors.currentOpenedModal)
const closeAllModals = useReduxAction(actions.closeAllModals)
const replaceModal = useReduxAction(actions.replaceModal)
@@ -62,6 +63,8 @@ export function FABRenderer() {
return null
if (!currentOpenedModal) {
if (!columnIds.length) return null
/*
Animated.timing(addOrCloseAnimatedRef.current, {
toValue: 0,

20
packages/components/src/components/layout/Sidebar.tsx
View File

@@ -182,9 +182,7 @@ export const Sidebar = React.memo((props: SidebarProps) => {
<FlatList
ref={flatListRef}
ListHeaderComponent={
!(columnIds && columnIds.length) &&
!large &&
!shouldRenderFAB({ sizename }) ? (
!(columnIds && columnIds.length) && !large ? (
<>
<ColumnHeaderItem
analyticsLabel="sidebar_add"
@@ -237,8 +235,12 @@ export const Sidebar = React.memo((props: SidebarProps) => {
label="preferences"
noPadding
onPress={() =>
small && isModalOpen('SETTINGS')
? undefined
small &&
currentOpenedModal &&
currentOpenedModal.name === 'SETTINGS'
? columnIds.length === 0
? closeAllModals()
: undefined
: replaceModal({ name: 'SETTINGS' })
}
showLabel={showLabel}
@@ -355,8 +357,12 @@ export const Sidebar = React.memo((props: SidebarProps) => {
label="preferences"
noPadding
onPress={() =>
small && isModalOpen('SETTINGS')
? undefined
small &&
currentOpenedModal &&
currentOpenedModal.name === 'SETTINGS'
? columnIds.length === 0
? closeAllModals()
: undefined
: replaceModal({ name: 'SETTINGS' })
}
showLabel={showLabel}

4
packages/components/src/components/modals/ModalRenderer.tsx
View File

@@ -76,6 +76,7 @@ export function ModalRenderer(props: ModalRendererProps) {
const { appViewMode } = useAppViewMode()
const columnWidth = useColumnWidth()
const columnIds = useReduxState(selectors.columnIdsSelector)
const modalStack = useReduxState(selectors.modalStack)
const currentOpenedModal = useReduxState(selectors.currentOpenedModal)
const previouslyOpenedModal = usePrevious(currentOpenedModal)
@@ -108,7 +109,8 @@ export function ModalRenderer(props: ModalRendererProps) {
constants.DISABLE_ANIMATIONS ||
(sizename === '1-small' &&
((isSettings && !previouslyOpenedModal) ||
(!currentOpenedModal && wasSettings))
(!currentOpenedModal && wasSettings)) &&
columnIds.length > 0
? true
: false)