Rename Menu -> MainMenu + précision theme Menu et Header

klee-contrib · Oct 31, 2017 · b0c2f2e · b0c2f2e
1 parent 43d44e6
commit b0c2f2e
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "focus4",
-  "version": "8.2.1",
+  "version": "8.2.2",
   "description": "Focus v4 (Typescript + MobX)",
   "main": "index.js",
   "repository": {

diff --git a/src/entity/store.ts b/src/entity/store.ts
@@ -71,7 +71,7 @@ type EntityStore = EntityStoreConfig & StoreNode<EntityStoreConfig>;
 export function makeEntityStore<T1 extends {[key: string]: StoreNode}, T2 extends {[key: string]: StoreNode}>(simpleNodes: T1, listNodes: T2, entityList: Entity[], entityMapping: EntityMapping<T1 & T2> = {} as any): T1 & AsStoreListNode<T2> & StoreNode {
 
     // On construit une config unique pour les noeuds simples ({}) et les noeuds de listes ([].)
-    const config = {...mapValues(simpleNodes, _ => ({})), ...mapValues(listNodes, _ => [] as any[])} as EntityStoreConfig;
+    const config = {...mapValues(simpleNodes, _ => ({})) as any, ...mapValues(listNodes, _ => [] as any[]) as any} as EntityStoreConfig;
 
     // On construit une map avec les entités à partir de la liste fournie.
     const entityMap = entityList.reduce((entities, entity) => {

diff --git a/src/layout/header/actions.tsx b/src/layout/header/actions.tsx
@@ -7,7 +7,7 @@ import Tooltip, {TooltipProps} from "react-toolbox/lib/tooltip";
 
 import {ButtonMenu, getIcon, MenuItem} from "../../components";
 
-import {HeaderStyle, styles} from "./types";
+import styles from "./__style__/header.css";
 
 const TooltipButton = Tooltip(Button);
 
@@ -32,7 +32,9 @@ export interface HeaderActionsProps {
     /** Actions secondaires. */
     secondary?: SecondaryAction[];
     /** CSS. */
-    theme?: HeaderStyle;
+    theme?: {
+        actions?: string;
+    };
 }
 
 /** Barre d'actions du header. */

diff --git a/src/layout/header/content.tsx b/src/layout/header/content.tsx
@@ -3,11 +3,19 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import {themr} from "react-css-themr";
 
-import {HeaderProps, styles} from "./types";
+import styles from "./__style__/header.css";
+
+/** Props du HeaderContent. */
+export interface HeaderContentProps {
+    children?: React.ReactNode;
+    theme?: {
+        content?: string;
+    };
+}
 
 /** Contenu du header. n'est affiché que si le header est déplié. */
 @observer
-export class HeaderContent extends React.Component<HeaderProps, void> {
+export class HeaderContent extends React.Component<HeaderContentProps, void> {
 
     static contextTypes = {layout: PropTypes.object};
     context: {layout: {menuWidth: number}};

diff --git a/src/layout/header/index.ts b/src/layout/header/index.ts
@@ -1,5 +1,4 @@
 export {default as HeaderActions , PrimaryAction, SecondaryAction} from "./actions";
 export {default as HeaderContent} from "./content";
-export {default as HeaderScrolling} from "./scrolling";
+export {default as HeaderScrolling, HeaderStyle} from "./scrolling";
 export {default as HeaderTopRow, HeaderBarLeft, HeaderBarRight, HeaderSummary} from "./top-row";
-export {HeaderStyle} from "./types";
diff --git a/src/layout/header/scrolling.tsx b/src/layout/header/scrolling.tsx
@@ -4,7 +4,8 @@ import {observer} from "mobx-react";
 import * as React from "react";
 import {themr} from "react-css-themr";
 
-import {HeaderStyle, styles} from "./types";
+import styles from "./__style__/header.css";
+export type HeaderStyle = Partial<typeof styles>;
 
 /** Props du conteneur de header. */
 export interface HeaderScrollingProps {
@@ -15,7 +16,11 @@ export interface HeaderScrollingProps {
     /** Sélecteur de l'élément de DOM sur lequel on écoute le scroll (par défaut : window) */
     scrollTargetSelector?: string;
     /** Classes CSS. */
-    theme?: HeaderStyle;
+    theme?: {
+        deployed?: string;
+        scrolling?: string;
+        undeployed?: string;
+    };
 }
 
 /** Conteneur du header, gérant en particulier le dépliement et le repliement. */

diff --git a/src/layout/header/top-row/bar-left.tsx b/src/layout/header/top-row/bar-left.tsx
@@ -1,10 +1,19 @@
 import * as React from "react";
 import {themr} from "react-css-themr";
 
-import {HeaderProps, styles} from "../types";
+import styles from "../__style__/header.css";
+
+/** Props du HeaderBarLeft. */
+export interface HeaderBarLeftProps {
+    children?: React.ReactNode;
+    theme?: {
+        item?: string;
+        left?: string;
+    };
+}
 
 /** Barre du haut à gauche, doit être affiché dans `HeaderTopRow`. */
-export function HeaderBarLeft({children, theme}: HeaderProps) {
+export function HeaderBarLeft({children, theme}: HeaderBarLeftProps) {
     return (
         <div className={`${theme!.item} ${theme!.left}`}>
             {children}

diff --git a/src/layout/header/top-row/bar-right.tsx b/src/layout/header/top-row/bar-right.tsx
@@ -1,10 +1,19 @@
 import * as React from "react";
 import {themr} from "react-css-themr";
 
-import {HeaderProps, styles} from "../types";
+import styles from "../__style__/header.css";
+
+/** Props du HeaderBarRight. */
+export interface HeaderBarRightProps {
+    children?: React.ReactNode;
+    theme?: {
+        item?: string;
+        right?: string;
+    };
+}
 
 /** Barre du haut à droite, doit être affiché dans `HeaderTopRow`. */
-export function HeaderBarRight({children, theme}: HeaderProps) {
+export function HeaderBarRight({children, theme}: HeaderBarRightProps) {
     return (
         <div className={`${theme!.item} ${theme!.right}`}>
             {children}

diff --git a/src/layout/header/top-row/index.tsx b/src/layout/header/top-row/index.tsx
@@ -3,15 +3,23 @@ import * as PropTypes from "prop-types";
 import * as React from "react";
 import {themr} from "react-css-themr";
 
-import {HeaderProps, styles} from "../types";
+import styles from "../__style__/header.css";
 
 export {default as HeaderBarLeft} from "./bar-left";
 export {default as HeaderBarRight} from "./bar-right";
 export {default as HeaderSummary} from "./summary";
 
+/** Props du HeaderBarRight. */
+export interface HeaderTopRowProps {
+    children?: React.ReactNode;
+    theme?: {
+        topRow?: string;
+    };
+}
+
 /** Barre du haut dans le header. */
 @observer
-export class HeaderTopRow extends React.Component<HeaderProps, void> {
+export class HeaderTopRow extends React.Component<HeaderTopRowProps, void> {
 
     static contextTypes = {layout: PropTypes.object};
     context: {layout: {menuWidth: number}};

diff --git a/src/layout/header/top-row/summary.tsx b/src/layout/header/top-row/summary.tsx
@@ -1,10 +1,19 @@
 import * as React from "react";
 import {themr} from "react-css-themr";
 
-import {HeaderProps, styles} from "../types";
+import styles from "../__style__/header.css";
+
+/** Props du HeaderSummary. */
+export interface HeaderSummaryProps {
+    children?: React.ReactNode;
+    theme?: {
+        item?: string;
+        middle?: string;
+    };
+}
 
 /** Summary, doit être affiché dans `HeaderTopRow` et est masqué si le header est replié. */
-export function HeaderSummary({children, theme}: HeaderProps) {
+export function HeaderSummary({children, theme}: HeaderSummaryProps) {
     return (
         <div className={`${theme!.item} ${theme!.middle}`}>
             {children}

diff --git a/src/layout/header/types.ts b/src/layout/header/types.ts
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
@@ -25,13 +25,13 @@ import {ActionBarStyle, AdvancedSearchStyle, FacetBoxStyle, FacetStyle, GroupSty
 
 import ErrorCenter, {ErrorCenterStyle} from "./error-center";
 import {HeaderStyle} from "./header";
-import {MenuStyle} from "./menu";
+import {MainMenuStyle} from "./menu";
 import {LayoutProps, LayoutStyle, styles} from "./types";
 
 export {default as LayoutContent} from "./content";
 export {default as LayoutFooter} from "./footer";
 export {HeaderActions, HeaderBarLeft, HeaderBarRight, HeaderContent, HeaderScrolling, HeaderSummary, HeaderTopRow, PrimaryAction, SecondaryAction} from "./header";
-export {default as Menu, MenuItem} from "./menu";
+export {default as MainMenu, MainMenuItem} from "./menu";
 
 /** Composant de Layout sans le provider de style. */
 @themr("layout", styles)
@@ -95,7 +95,7 @@ export interface LayoutStyleProviderProps {
     line?: LineStyle;
     list?: ListStyle;
     listWrapper?: ListWrapperStyle;
-    menu?: MenuStyle;
+    mainMenu?: MainMenuStyle;
     panel?: PanelStyle;
     popin?: PopinStyle;
     scrollspy?: ScrollspyStyle;

diff --git a/src/layout/menu/index.tsx b/src/layout/menu/index.tsx
@@ -3,17 +3,28 @@ import {action, computed, observable} from "mobx";
 import {observer} from "mobx-react";
 import * as React from "react";
 import {themr} from "react-css-themr";
+import {IconButtonTheme} from "react-toolbox/lib/button";
 
-import MenuItem, {MenuItemProps} from "./item";
-import MenuList, {MenuProps, MenuStyle, styles} from "./list";
-import MenuPanel from "./panel";
+import MainMenuItem, {MainMenuItemProps} from "./item";
+import MainMenuList, {MainMenuListStyle} from "./list";
+import MainMenuPanel, {MainMenuPanelStyle} from "./panel";
 
-export {MenuItem, MenuStyle};
+export {MainMenuItem};
+
+import * as styles from "./__style__/menu.css";
+
+export type MainMenuStyle = Partial<typeof styles> & IconButtonTheme;
+
+/** Props du Menu. */
+export interface MainMenuProps {
+    activeRoute?: string;
+    theme?: MainMenuListStyle & MainMenuPanelStyle & {menu?: string};
+}
 
 /** Composant de menu, à instancier soi-même avec les items que l'on veut dedans. */
 @observer
 @autobind
-export class Menu extends React.Component<MenuProps, void> {
+export class MainMenu extends React.Component<MainMenuProps, void> {
 
     /** Index du sous-menu actif. */
     @observable activeMenuIndex?: number;
@@ -27,7 +38,7 @@ export class Menu extends React.Component<MenuProps, void> {
     /** Récupère le sous-menu actif. */
     @computed
     get subMenu() {
-        const activeMenuItem = this.activeMenuIndex && React.Children.toArray(this.props.children)[this.activeMenuIndex] as React.ReactElement<MenuItemProps> || undefined;
+        const activeMenuItem = this.activeMenuIndex && React.Children.toArray(this.props.children)[this.activeMenuIndex] as React.ReactElement<MainMenuItemProps> || undefined;
         return activeMenuItem && activeMenuItem.props && activeMenuItem.props.children || undefined;
     }
 
@@ -55,29 +66,30 @@ export class Menu extends React.Component<MenuProps, void> {
         const {activeRoute, theme} = this.props;
         return (
             <nav className={theme!.menu}>
-                <MenuList
-                    onSelectMenu={this.onSelectMenu}
+                <MainMenuList
                     activeRoute={activeRoute}
+                    onSelectMenu={this.onSelectMenu}
+                    theme={theme}
                 >
                     {this.props.children}
-                </MenuList>
-                <MenuPanel
+                </MainMenuList>
+                <MainMenuPanel
                     close={() => this.showPanel = false}
                     opened={!!(this.showPanel && this.activeMenuIndex !== undefined && this.subMenu)}
                     xOffset={this.menuWidth}
                     yOffset={this.yPosition}
                     theme={theme}
                 >
-                    <MenuList
+                    <MainMenuList
                         activeRoute={activeRoute}
                         theme={theme}
                     >
                         {this.subMenu}
-                    </MenuList>
-                </MenuPanel>
+                    </MainMenuList>
+                </MainMenuPanel>
             </nav>
         );
     }
 }
 
-export default themr("menu", styles)(Menu);
+export default themr("mainMenu", styles)(MainMenu);
diff --git a/src/layout/menu/item.tsx b/src/layout/menu/item.tsx
@@ -5,22 +5,19 @@ import {themr} from "react-css-themr";
 import {Button, ButtonProps, IconButton, IconButtonTheme} from "react-toolbox/lib/button";
 
 import * as styles from "./__style__/menu.css";
-export {styles};
-
-export type MenuStyle = Partial<typeof styles> & IconButtonTheme;
 
 /** Props du MenuItem. */
-export interface MenuItemProps extends ButtonProps {
+export interface MainMenuItemProps extends ButtonProps {
     /** Sous-menu. */
     children?: React.ReactChildren;
     /** La route associée, pour comparaison avec la route active. */
     route?: string;
     /** CSS. */
-    theme?: MenuStyle;
+    theme?: IconButtonTheme;
 }
 
 /** Elément de menu. */
-export const MenuItem = observer<MenuItemProps>(props => {
+export const MainMenuItem = observer<MainMenuItemProps>(props => {
     const {label, icon, onClick, route, theme, children, ...otherProps} = props;
     if (label) {
         return (
@@ -29,11 +26,7 @@ export const MenuItem = observer<MenuItemProps>(props => {
                 icon={icon}
                 label={label}
                 onClick={onClick}
-                theme={{
-                    button: theme!.button,
-                    icon: theme!.icon,
-                    neutral: theme!.neutral
-                }}
+                theme={theme}
             />
         );
     } else {
@@ -42,15 +35,10 @@ export const MenuItem = observer<MenuItemProps>(props => {
                 {...otherProps}
                 icon={icon}
                 onClick={onClick}
-                theme={{
-                    toggle: theme!.toggle,
-                    icon: theme!.icon,
-                    neutral: theme!.neutral,
-                    rippleWrapper: theme!.rippleWrapper
-                }}
+                theme={theme}
             />
         );
     }
 });
 
-export default themr("menu", styles)(MenuItem);
+export default themr("mainMenu", styles)(MainMenuItem);