add vertical align buttons

src/components/toolbar/toolbar-types.ts

@@ -2,5 +2,6 @@ export type ToolbarStateType = {
   fontWeight?: 'normal' | 'bold';
   fontStyle?: 'normal' | 'italic';
   textDecoration?: 'none' | 'underline';
-  textAlign?: 'left' | 'center' | 'right';
+  justifyContent?: 'start' | 'center' | 'end';
+  alignItems?: 'start' | 'center' | 'end';
 };

src/components/toolbar/toolbar.template.ts

@@ -8,52 +8,90 @@ type ButtonConfigType = {
 };
 
 export function createToolbar(state: ToolbarStateType): string {
-  const btns: ButtonConfigType[] = [
-    {
-      icon: 'format_bold',
-      isActive: state.fontWeight === 'bold',
-      value: {
-        fontWeight: state.fontWeight === 'bold' ? initialStyleState.fontWeight : 'bold',
+  const btns: (ButtonConfigType | ButtonConfigType[])[] = [
+    [
+      {
+        icon: 'format_bold',
+        isActive: state.fontWeight === 'bold',
+        value: {
+          fontWeight: state.fontWeight === 'bold' ? initialStyleState.fontWeight : 'bold',
+        },
       },
-    },
-    {
-      icon: 'format_italic',
-      isActive: state.fontStyle === 'italic',
-      value: {
-        fontStyle: state.fontStyle === 'italic' ? initialStyleState.fontStyle : 'italic',
+      {
+        icon: 'format_italic',
+        isActive: state.fontStyle === 'italic',
+        value: {
+          fontStyle: state.fontStyle === 'italic' ? initialStyleState.fontStyle : 'italic',
+        },
       },
-    },
-    {
-      icon: 'format_underline',
-      isActive: state.textDecoration === 'underline',
-      value: {
-        textDecoration: state.textDecoration === 'underline' ? initialStyleState.textDecoration : 'underline',
+      {
+        icon: 'format_underline',
+        isActive: state.textDecoration === 'underline',
+        value: {
+          textDecoration: state.textDecoration === 'underline' ? initialStyleState.textDecoration : 'underline',
+        },
       },
-    },
-    {
-      icon: 'format_align_left',
-      isActive: state.textAlign === 'left',
-      value: {
-        textAlign: 'left',
+    ],
+    [
+      {
+        icon: 'format_align_left',
+        isActive: state.justifyContent === 'start',
+        value: {
+          justifyContent: 'start',
+        },
       },
-    },
-    {
-      icon: 'format_align_center',
-      isActive: state.textAlign === 'center',
-      value: {
-        textAlign: state.textAlign === 'center' ? initialStyleState.textAlign : 'center',
+      {
+        icon: 'format_align_center',
+        isActive: state.justifyContent === 'center',
+        value: {
+          justifyContent: state.justifyContent === 'center' ? initialStyleState.justifyContent : 'center',
+        },
       },
-    },
-    {
-      icon: 'format_align_right',
-      isActive: state.textAlign === 'right',
-      value: {
-        textAlign: state.textAlign === 'right' ? initialStyleState.textAlign : 'right',
+      {
+        icon: 'format_align_right',
+        isActive: state.justifyContent === 'end',
+        value: {
+          justifyContent: state.justifyContent === 'end' ? initialStyleState.justifyContent : 'end',
+        },
       },
-    },
+    ],
+    [
+      {
+        icon: 'vertical_align_bottom',
+        isActive: state.alignItems === 'end',
+        value: {
+          alignItems: state.alignItems === 'end' ? initialStyleState.alignItems : 'end',
+        },
+      },
+      {
+        icon: 'vertical_align_center',
+        isActive: state.alignItems === 'center',
+        value: {
+          alignItems: state.alignItems === 'center' ? initialStyleState.alignItems : 'center',
+        },
+      },
+      {
+        icon: 'vertical_align_top',
+        isActive: state.alignItems === 'start',
+        value: {
+          alignItems: state.alignItems === 'start' ? initialStyleState.alignItems : 'start',
+        },
+      },
+    ],
   ];
 
-  return btns.map(btn => toButton(btn)).join(' ');
+  return btns.map(btn => (Array.isArray(btn) ? toButtonGroup(btn) : toButton(btn))).join(' ');
+}
+
+function toButtonGroup(buttons: ButtonConfigType[]) {
+  if (buttons.length === 1) return toButton(buttons[0]);
+  const btns = buttons.map(btn => toButton(btn));
+
+  return `
+    <div class="button__group"> 
+      ${btns.join('')}
+    </div>
+  `;
 }
 
 function toButton(button: ButtonConfigType) {
@@ -63,10 +101,7 @@ function toButton(button: ButtonConfigType) {
   `;
 
   return `
-    <div 
-    class="button ${button.isActive && 'active'}"
-    ${meta}
-    > 
+    <div class="button ${button.isActive ? 'active' : ''}"${meta}> 
       <i class="material-icons" ${meta}>${button.icon}</i>
     </div>
   `;

src/constants.ts

@@ -4,7 +4,7 @@ import { StateType } from 'redux/types';
 import { storage } from 'core/utils';
 
 export const initialStyleState: ToolbarStateType = {
-  textAlign: 'left',
+  justifyContent: 'start',
   fontWeight: 'normal',
   textDecoration: 'none',
   fontStyle: 'normal',

src/core/routes/router.ts

@@ -12,7 +12,7 @@ type RoutesType = {
 export class Router {
   private $placeholder: Dom;
   private routes: RoutesType;
-  private page: DashboardPage | ExcelPage | null;
+  private page: DashboardPage | ExcelPage;
   private loader: Dom;
 
   constructor(selector: SelectorType, routes: RoutesType) {
@@ -20,7 +20,6 @@ export class Router {
 
     this.$placeholder = $(selector);
     this.routes = routes;
-    this.page = null;
     this.loader = Loader();
 
     this.changePageHandler = this.changePageHandler.bind(this);
@@ -50,14 +49,13 @@ export class Router {
         Page = this.routes.dashboard;
         break;
     }
-    // @ts-ignore
     this.page = new Page(ActiveRoute.param);
 
-    const root = await this.page?.getRoot();
+    const root = await this.page.getRoot();
 
     this.$placeholder.clear().append(root);
 
-    this.page?.afterRender();
+    this.page.afterRender();
   }
 
   destroy() {

src/pages/ExcelPage.ts

@@ -29,8 +29,8 @@ export class ExcelPage extends AbstractPage {
   }
 
   async getRoot() {
-    const normalizeState = await this.processor.get();
-    const store = new Store(rootReducer, normalizeState);
+    const state = await this.processor.get();
+    const store = new Store(rootReducer, state);
 
     this.storeSub = store.subscribe(this.processor.listen);
 

src/styles/components/table.scss

@@ -48,6 +48,7 @@
     border-left: 0;
     white-space: nowrap;
     outline: none;
+    display: flex;
     &:hover:not(.selected) {
       cursor: cell;
     }

src/styles/components/toolbar.scss

@@ -15,4 +15,11 @@
   .button {
     @include button(green)
   }
-}
+
+  .button__group {
+    border-right: 1px solid #c0c0c0;
+    &:last-child {
+      border: none;
+    }
+  }
+}