-
+
+
; +} diff --git a/src/components/letterBox/letterBox.module.css b/src/components/letterBox/letterBox.module.css new file mode 100644 index 0000000..b1cbcf7 --- /dev/null +++ b/src/components/letterBox/letterBox.module.css @@ -0,0 +1,58 @@ +.box { + position: absolute; + top: 7px; + right: 10px; + bottom: 4px; + left: 177px; + + overflow: hidden; + min-width: 700px; + min-height: 350px; + margin: 0 10px 10px; + border-radius: 3px; + font-family: 'Helvetica Neue', sans-serif; +} + +.box_theme_light { + background-color: #fff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34); + color: #000; +} + +.box_theme_dark { + background-color: #1d1d1d; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34); + color: #fff; +} + +.hr { + margin: 0; + opacity: 0.4; +} + +.supportLine { + position: absolute; + right: 0; + bottom: 0; + left: 0; +} + +.letterList { + position: absolute; + top: 40px; + bottom: 25px; + + overflow: auto; + width: 100%; + padding: 0; + margin: 0; +} + +.bb { + position: relative; +} + +.letter { + z-index: 1; + list-style-type: none; +} diff --git a/src/components/letterBox/letterBox.tsx b/src/components/letterBox/letterBox.tsx new file mode 100644 index 0000000..1fcdc8a --- /dev/null +++ b/src/components/letterBox/letterBox.tsx @@ -0,0 +1,294 @@ +import React, { Component } from 'react'; +import cx from 'classnames'; +import Toolbar from '../toolbar/toolbar'; +import LetterDialog from '../letterDialog/letterDialog'; +import SupportLine from '../supportLine/supportLine'; +import LetterGenerator from '../../utils/letterGenerator'; +import Letter from '../letter/letter'; +import LetterList from './letterList'; +import Hr from './hr'; + +import { getInt } from '../../utils/randomFunctions'; + +import ILetter from './ILetter'; +import IToolbarItem from '../toolbar/toolBarItem'; + +import letterStyles from '../letter/letter.module.css'; +import styles from './letterBox.module.css'; + +interface IProps { + className?: string; + theme: string; + filterText: string; + changeFilterProgress: (value: number) => void; +} + +interface IState { + curPage: number; + letters: ILetter[]; + isMailVisible: boolean; + mailContent: any; + isCheckAll: boolean; + selectLetterCount: number; +} + +export default class LetterBox extends Component
+
+ );
+ return { isMailVisible: true, mailContent };
+ });
+ this.unmarkLetter(index);
+ };
+
+ handleMailExitClick = () => {
+ this.setState({ isMailVisible: false });
+ };
+
+ getToolBarItems = (isCheckAll: boolean, selectLetterCount: number) => [
+ { type: 'checkbox', value: isCheckAll, onClick: this.handleCheckAllClick },
+ { type: 'button', value: 'Получить сообщение', onClick: this.newMail, isActive: true },
+ { type: 'button', value: 'Переслать', isActive: selectLetterCount > 0 },
+ {
+ type: 'button',
+ value: 'Удалить',
+ onClick: this.handleRemoveButtonClick,
+ isActive: selectLetterCount > 0
+ },
+ { type: 'button', value: 'Это спам!', isActive: selectLetterCount > 0 },
+ {
+ type: 'button',
+ value: 'Прочитано',
+ onClick: this.handleUnmarkButtonClick,
+ isActive: selectLetterCount > 0
+ }
+ ];
+
+ toolbarItems: IToolbarItem[] = [];
+
+ oldSelectLetterCount: number | undefined = undefined;
+
+ oldIsCheckAll: boolean | undefined = undefined;
+
+ render() {
+ const {
+ curPage,
+ letters,
+ isMailVisible,
+ mailContent,
+ selectLetterCount,
+ isCheckAll
+ } = this.state;
+ const { className, theme, filterText, changeFilterProgress } = this.props;
+
+ const letterMapper = (letter: ILetter, index: number) => (
+ {state.letters[index].topic}
+ {state.letters[index].body}
+
+ {this.toolbarItems}
+
+
+ {mailContent}
+
+
+ );
+ }
+}
diff --git a/src/components/letterBox/letterList.tsx b/src/components/letterBox/letterList.tsx
new file mode 100644
index 0000000..60d231a
--- /dev/null
+++ b/src/components/letterBox/letterList.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import shouldUpdate from 'recompose/shouldUpdate';
+
+import ILetter from './ILetter';
+
+import styles from './letterBox.module.css';
+
+interface IProps {
+ filterText: string;
+ letters: ILetter[];
+ mapper: (letter: ILetter, index: number) => JSX.Element;
+ theme: string;
+ listMaxSize: number;
+ changeFilterProgress: (value: number) => void;
+}
+
+const filterPredicate = (filterText: string, letter: ILetter) => {
+ return (
+ letter.authorName.toLowerCase().includes(filterText) ||
+ letter.topic.toLowerCase().includes(filterText) ||
+ letter.body.toLowerCase().includes(filterText)
+ );
+};
+
+function filterAndMapLetters(
+ arr: ILetter[],
+ predicate: (val: ILetter) => boolean,
+ mapper: (val: ILetter, index: number) => JSX.Element,
+ maxSize: number
+) {
+ const result = [];
+ for (let i = 0; i < arr.length; i++) {
+ if (predicate(arr[i])) {
+ result.push(mapper(arr[i], i));
+ }
+ if (result.length === maxSize) {
+ return result;
+ }
+ }
+ return result;
+}
+
+const LetterList = (props: IProps) => {
+ const { filterText, letters, mapper, listMaxSize } = props;
+ const listLetters = filterAndMapLetters(
+ letters,
+ letter => filterPredicate(filterText, letter),
+ mapper,
+ listMaxSize
+ );
+
+ return +
+
+
+ +
- {listLetters}
+ ×
+
+ {children}
+
+
+ );
+ }
+}
diff --git a/src/components/mailHeader/mailHeader.module.css b/src/components/mailHeader/mailHeader.module.css
new file mode 100644
index 0000000..ebe89b2
--- /dev/null
+++ b/src/components/mailHeader/mailHeader.module.css
@@ -0,0 +1,44 @@
+.box {
+ position: relative;
+
+ height: 32px;
+ letter-spacing: -1em;
+}
+
+.menu,
+.logo,
+.rightBox {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.menu {
+ margin-top: -6px;
+}
+
+.logo {
+ margin-left: 11px;
+}
+
+.search {
+ position: absolute;
+ right: 179px;
+ left: 0;
+}
+
+.linkBlock {
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ width: 50px;
+}
+
+.rightBox {
+ position: absolute;
+ right: 20px;
+ left: 184px;
+
+ min-width: 420px;
+ margin-left: 114px;
+}
diff --git a/src/components/mailHeader/mailHeader.tsx b/src/components/mailHeader/mailHeader.tsx
new file mode 100644
index 0000000..f65cf6d
--- /dev/null
+++ b/src/components/mailHeader/mailHeader.tsx
@@ -0,0 +1,56 @@
+import React, { Props } from 'react';
+import shouldUpdate from 'recompose/shouldUpdate';
+import Menu from '../menu/menu';
+import Logo from '../logo/logo';
+import Search from '../search/search';
+import LinkBlock from '../linkBlock/linkBlock';
+
+import styles from './mailHeader.module.css';
+
+interface IProps {
+ theme: string;
+ filterText: string;
+ filterProgress: number;
+ changeFilterText: (value: string) => void;
+ clearFilterText: () => void;
+ onThemeBtnClick: () => void;
+}
+
+const MailHeader = (props: IProps) => {
+ console.log('MailHeader');
+ const {
+ theme,
+ filterText,
+ filterProgress,
+ changeFilterText,
+ clearFilterText,
+ onThemeBtnClick
+ } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const checkPropsChange = (props: IProps, nextProps: IProps) => nextProps.theme !== props.theme;
+
+export default shouldUpdate(checkPropsChange)(Menu);
diff --git a/src/components/nav/nav.module.css b/src/components/nav/nav.module.css
new file mode 100644
index 0000000..3a4924e
--- /dev/null
+++ b/src/components/nav/nav.module.css
@@ -0,0 +1,61 @@
+.box {
+ width: 147px;
+ font-family: 'Helvetica Neue', sans-serif;
+}
+
+.list {
+ padding: 0;
+ margin: 8px 0 0 0;
+ word-wrap: break-word;
+}
+
+.item {
+ min-height: 14px;
+ font-size: 11px;
+ list-style-type: none;
+}
+
+.item_theme_light {
+ color: #707070;
+}
+
+.item_theme_dark {
+ color: #f9f9f9;
+}
+
+.item_type_link {
+ display: block;
+ width: 87%;
+ padding: 5px 10px;
+ color: inherit;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.item:hover {
+ border-radius: 3px;
+}
+
+.item_theme_light:hover {
+ background-color: #d8e1ef;
+}
+
+.item_theme_dark:hover {
+ background-color: #1f1f1f;
+}
+
+.item_select {
+ border-radius: 3px;
+}
+
+.item_select.item_theme_light {
+ background-color: #cdd6e4;
+ color: #555;
+ font-weight: 700;
+}
+
+.item_select.item_theme_dark {
+ background-color: #111111;
+ color: #f9f9f9;
+ font-weight: 600;
+}
diff --git a/src/components/nav/nav.tsx b/src/components/nav/nav.tsx
new file mode 100644
index 0000000..71893fd
--- /dev/null
+++ b/src/components/nav/nav.tsx
@@ -0,0 +1,51 @@
+import React, { Props } from 'react';
+import shouldUpdate from 'recompose/shouldUpdate';
+import cx from 'classnames';
+import LinkBlock from '../linkBlock/linkBlock';
+
+import styles from './nav.module.css';
+
+interface IProps {
+ className?: string;
+ theme: string;
+}
+
+const items = [
+ { key: 1, link: '/public/index.html', title: 'Входящиe', isSelect: true },
+ { key: 2, link: '/public/index.html', title: 'Отправленные' },
+ { key: 3, link: '/public/index.html', title: 'Удалённые' },
+ { key: 4, link: '/public/index.html', title: 'Спам' },
+ { key: 5, link: '/public/index.html', title: 'Черновики' },
+ { key: 6, link: '/public/index.html', title: 'Создать папку' }
+];
+
+const Nav = (props: IProps) => {
+ console.log('Nav');
+ const { className, theme } = props;
+
+ const listItems = items.map(item => {
+ const itemClassName = cx(styles.item, styles[`item_theme_${theme}`], {
+ [styles.item_select]: item.isSelect
+ });
+
+ return (
+
+ onChange(e.target.value)}
+ />
+
+ );
+};
+
+const checkPropsChange = (props: IProps, nextProps: IProps) =>
+ nextProps.theme !== props.theme ||
+ nextProps.filterText !== props.filterText ||
+ nextProps.filterProgress !== props.filterProgress;
+
+export default shouldUpdate(checkPropsChange)(Search);
diff --git a/src/components/supportLine/supportLine.module.css b/src/components/supportLine/supportLine.module.css
new file mode 100644
index 0000000..aed4857
--- /dev/null
+++ b/src/components/supportLine/supportLine.module.css
@@ -0,0 +1,38 @@
+.itemLine {
+ padding: 5px 20px;
+ font: 11px 'Helvetica Neue Light', sans-serif;
+ text-align: right;
+}
+
+.item {
+ display: inline-block;
+ margin-left: 25px;
+ font-weight: 700;
+ vertical-align: center;
+}
+
+.item_theme_light {
+ color: #9e9e9e;
+}
+
+.item_theme_dark {
+ color: #5f5f5f;
+}
+
+.item_type_link {
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.item_type_link.item_theme_light:hover {
+ color: #000;
+}
+
+.item_type_link.item_theme_dark:hover {
+ color: #fff;
+}
+
+
+.item_type_text {
+ margin-right: -20px;
+}
diff --git a/src/components/supportLine/supportLine.tsx b/src/components/supportLine/supportLine.tsx
new file mode 100644
index 0000000..3e8dc72
--- /dev/null
+++ b/src/components/supportLine/supportLine.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import shouldUpdate from 'recompose/shouldUpdate';
+import cx from 'classnames';
+
+import styles from './supportLine.module.css';
+
+interface IProps {
+ theme: string;
+}
+
+const items = [
+ { key: 1, title: 'Помощь и обратная связь', href: 'https://yandex.ru/support/mail/' },
+ { key: 2, title: 'Реклама', href: 'https://yandex.ru/adv/' },
+ { key: 3, title: '© 2001—2019,' },
+ { key: 4, title: 'Яндекс', href: 'https://yandex.ru' }
+];
+
+const SupportLine = (props: IProps) => {
+ console.log('SupportLine');
+ const { theme } = props;
+
+ const listItems = items.map(item => {
+ const itemClassName = cx(
+ styles.item,
+ styles[`item_theme_${theme}`],
+ item.href === undefined ? styles.item_type_text : styles.item_type_link
+ );
+
+ return item.href === undefined ? (
+
+
+
+
+ ×
+
+
+ {item.title}
+
+ ) : (
+
+ {item.title}
+
+ );
+ });
+
+ return {listItems}
;
+};
+
+const checkPropsChange = (props: IProps, nextProps: IProps) => nextProps.theme !== props.theme;
+
+export default shouldUpdate(checkPropsChange)(SupportLine);
diff --git a/src/components/toolbar/toolBarItem.ts b/src/components/toolbar/toolBarItem.ts
new file mode 100644
index 0000000..05f96aa
--- /dev/null
+++ b/src/components/toolbar/toolBarItem.ts
@@ -0,0 +1,6 @@
+export default interface IToolbarItem {
+ type: string,
+ value: any,
+ isActive?: boolean
+ onClick?: () => void
+}
diff --git a/src/components/toolbar/toolbar.module.css b/src/components/toolbar/toolbar.module.css
new file mode 100644
index 0000000..0a09ac0
--- /dev/null
+++ b/src/components/toolbar/toolbar.module.css
@@ -0,0 +1,51 @@
+.box {
+ padding: 0 20px;
+ margin: 0;
+ font-size: 13px;
+}
+
+.item {
+ display: inline-block;
+ line-height: 39px;
+ list-style-type: none;
+}
+
+.item:first-child {
+ margin-right: -5px;
+}
+
+.item:not(:first-child) {
+ margin-left: 25px;
+ font-weight: 500;
+}
+
+.button {
+ padding: 0;
+ margin: 0;
+
+ border: none;
+ background-color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ outline: none;
+}
+
+.button_isActive {
+ cursor: pointer;
+}
+
+.button_theme_light {
+ color: #ccc;
+}
+
+.button_theme_dark {
+ color: #5f5f5f;
+}
+
+.button_isActive.button_theme_light {
+ color: #000;
+}
+
+.button_isActive.button_theme_dark {
+ color: #fff;
+}
diff --git a/src/components/toolbar/toolbar.tsx b/src/components/toolbar/toolbar.tsx
new file mode 100644
index 0000000..5014bc5
--- /dev/null
+++ b/src/components/toolbar/toolbar.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import cx from 'classnames';
+import Check from '../check/check';
+
+import IToolbarItem from './toolBarItem';
+
+import styles from './toolbar.module.css';
+
+interface IProps {
+ children: IToolbarItem[];
+ theme: string;
+}
+
+function renderSwitch(item: IToolbarItem, theme: string) {
+ switch (item.type) {
+ case 'button': {
+ const btnClassName = cx(styles.button, styles[`button_theme_${theme}`], {
+ [styles.button_isActive]: item.isActive
+ });
+ return (
+
+ );
+ }
+ case 'checkbox':
+ return - {listItems}
{authorName[0].toUpperCase()}
+ ) : (
+