TypeScript Container.Container函数代码示例

import { Container } from '@dojo/widget-core/Container';
import { Store } from '@dojo/stores/Store';
import { Register, RegisterProperties } from './../widgets/Register';
import {
	registerProcess,
	registerEmailInputProcess,
	registerPasswordInputProcess,
	registerUsernameInputProcess
} from './../processes/loginProcesses';
import { State } from '../interfaces';

function getProperties(store: Store<State>): RegisterProperties {
	const { get, path } = store;

	return {
		email: get(path('register', 'email')),
		password: get(path('register', 'password')),
		username: get(path('register', 'username')),
		errors: get(path('errors')),
		inProgress: get(path('register', 'loading')),
		onEmailInput: registerEmailInputProcess(store),
		onPasswordInput: registerPasswordInputProcess(store),
		onUsernameInput: registerUsernameInputProcess(store),
		onRegister: registerProcess(store)
	};
}

export const RegisterContainer = Container(Register, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import { Store } from '@dojo/stores/Store';
import { Feeds, FeedsProperties } from './../widgets/Feeds';
import { fetchFeedProcess, favoriteFeedArticleProcess } from './../processes/feedProcesses';

import { State } from './../interfaces';

function getProperties(store: Store<State>, properties: FeedsProperties): FeedsProperties {
	const { get, path } = store;
	const loading = get(path('feed', 'loading'));
	const isAuthenticated = !!get(path('user', 'token'));
	const username = properties.username || get(path('user', 'username'));
	const defaultType = isAuthenticated ? 'feed' : 'global';
	const type = properties.type ? properties.type : get(path('feed', 'category')) || defaultType;

	return {
		items: get(path('feed', 'items')),
		type,
		loading,
		username,
		isAuthenticated,
		tagName: get(path('feed', 'tagName')),
		total: get(path('feed', 'total')),
		currentPage: get(path('feed', 'pageNumber')),
		fetchFeed: fetchFeedProcess(store),
		favoriteArticle: favoriteFeedArticleProcess(store)
	};
}

export const FeedsContainer = Container(Feeds, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import { Store } from '@dojo/stores/Store';
import { Header, HeaderProperties } from './../widgets/Header';
import { State } from '../interfaces';

function getProperties(store: Store<State>): HeaderProperties {
	const { get, path } = store;

	return {
		route: get(path('routing', 'outlet')),
		isAuthenticated: !!get(path('user', 'token')),
		loggedInUser: get(path('user', 'username'))
	};
}

export const HeaderContainer = Container(Header, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import Store from '@dojo/stores/Store';

import { TodoDetails } from './../widgets/TodoDetails';
import {
	editTodoProcess,
	saveTodoProcess,
	TodoStore
} from './../todoProcesses';

function getProperties(store: Store<TodoStore>, properties: any) {
	const { get, path } = store;
	return {
		todo: get(path('editedTodo')) || get(path('todos', properties.id)),
		editTodo: editTodoProcess(store),
		saveTodo: saveTodoProcess(store)
	};
}

export const TodoDetailsContainer = Container(TodoDetails, 'state', { getProperties });

	setCurrentTodoProcess,
	searchProcess,
	clearCompletedProcess,
	toggleTodoProcess,
	toggleTodosProcess,
	removeTodoProcess,
	TodoStore
} from '../todoProcesses';

function getProperties(store: Store<TodoStore>) {
	const { get, path } = store;
	return {
		todos: Object.keys(get(path('todos'))).map(key => get(path('todos', key))),
		currentTodo: get(path('currentTodo')),
		addTodo: addTodoProcess(store),
		editTodo: editTodoProcess(store),
		setCurrentTodo: setCurrentTodoProcess(store),
		search: searchProcess(store),
		searchValue: get(path('currentSearch')),
		completed: get(path('completed')),
		clearCompleted: clearCompletedProcess(store),
		toggleTodos: toggleTodosProcess(store),
		toggleTodo: toggleTodoProcess(store),
		activeCount: get(path('todoCount')) - get(path('completedCount')),
		todoCount: get(path('todoCount')),
		removeTodo: removeTodoProcess(store)
	};
}

export const TodoAppContainer = Container(TodoApp, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import { Store } from '@dojo/stores/Store';
import { Tags, TagsProperties } from './../widgets/Tags';
import { fetchFeedProcess } from '../processes/feedProcesses';
import { State } from '../interfaces';

function getProperties(store: Store<State>): TagsProperties {
	const { get, path } = store;
	return {
		tags: get(path('tags')) || [],
		fetchFeed: fetchFeedProcess(store)
	};
}

export const TagsContainer = Container(Tags, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import { Store } from '@dojo/stores/Store';
import { Profile, ProfileProperties } from './../widgets/Profile';
import { State } from '../interfaces';
import { followUserProcess } from './../processes/profileProcesses';

function getProperties(store: Store<State>, properties: ProfileProperties): ProfileProperties {
	const { get, path } = store;

	return {
		username: properties.username,
		type: properties.type,
		image: get(path('profile', 'image')),
		bio: get(path('profile', 'bio')),
		following: get(path('profile', 'following')),
		currentUser: get(path('user', 'username')),
		followUser: followUserProcess(store)
	};
}

export const ProfileContainer = Container(Profile, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import { Store } from '@dojo/stores/Store';
import { Login, LoginProperties } from './../widgets/Login';
import { loginProcess, loginEmailInputProcess, loginPasswordInputProcess } from './../processes/loginProcesses';
import { State } from '../interfaces';

function getProperties(store: Store<State>): LoginProperties {
	const { get, path } = store;

	return {
		email: get(path('login', 'email')),
		password: get(path('login', 'password')),
		errors: get(path('errors')),
		inProgress: get(path('login', 'loading')),
		onEmailInput: loginEmailInputProcess(store),
		onPasswordInput: loginPasswordInputProcess(store),
		onLogin: loginProcess(store)
	};
}

export const LoginContainer = Container(Login, 'state', { getProperties });

	bioInputProcess,
	emailInputProcess,
	passwordInputProcess,
	imageUrlInputProcess,
	usernameInputProcess,
	updateUserSettingsProcess
} from './../processes/settingsProcesses';
import { logoutProcess } from '../processes/loginProcesses';
import { State } from '../interfaces';

function getProperties(store: Store<State>): SettingsProperties {
	const { get, path } = store;

	return {
		email: get(path('settings', 'email')),
		password: get(path('settings', 'password')),
		username: get(path('settings', 'username')),
		imageUrl: get(path('settings', 'image')),
		bio: get(path('settings', 'bio')),
		onEmailInput: emailInputProcess(store),
		onPasswordInput: passwordInputProcess(store),
		onUsernameInput: usernameInputProcess(store),
		onBioInput: bioInputProcess(store),
		onImageUrlInput: imageUrlInputProcess(store),
		onUpdateSettings: updateUserSettingsProcess(store),
		logout: logoutProcess(store)
	};
}

export const SettingsContainer = Container(Settings, 'state', { getProperties });

import { Container } from '@dojo/widget-core/Container';
import Injector from '@dojo/widget-core/Injector';
import { switchLocale } from '@dojo/i18n/i18n';

import { ThemeSwitcher } from './../widgets/ThemeSwitcher';
import pirateThemeStyles from './../themes/pirate';

function getProperties(themeContext: Injector) {
	return {
		changeTheme(wantsPirate: boolean) {
			if (wantsPirate) {
				switchLocale('en-PR');
				themeContext.set(pirateThemeStyles);
			}
			else {
				switchLocale('en');
				themeContext.set(undefined);
			}
		}
	};
}

export const ThemeSwitcherContainer = Container(ThemeSwitcher, 'theme-context', { getProperties });