[ Spec UX Layout ]

[slashbinslashnoname]

Préalable

In progress

Layout

UX spec

In progress

• box Title
• box tool component ( HOC, @todo spec)
• handleDrag
• handleResize
• box Content (see Coding spec, HOC)

Coding spec

• [x] Resizable Layout (component Layout)
• [x] Draggable component (blank)
• [ ] CSS draggable component
• [ ] Lister les composants core dans dossier components/core
• [ ] spécifier des paramètres de base pour chaque composant core
  • UX Layout Parameter : ``
  • UX Box parameter : {x: 0, y: 0, w: 2, h: 8, minW: 2, maxW: 3} (tickers)
  • Intégrer les paramètres de base par composant, Wrapper (HOC, point suivant) lit les paramètres du composant, et en fait une Box.
• [ ] Piste inclusion programmatique : Implémenter un HOC (High Order Component) pour la Layout> Box dont chaque composant doit faire appel. Permet de wrapper le ending composant dans une box qui choppe les paramètres dans ce même composant.
• [ ] Refacto css (webpack ?!)

Inclusion programmatique de composants

• Appel au maximum à lib externe
• Store par composant à utiliser au maximum
• HOC

quote from facebook about inheritance (use HOC instead)

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.

[johnthillaye]

Merci pour la spec.

Comment fonctionne le HOC ? Quel héritage reçoit le composant enfant ?

[johnthillaye]

Quick feedback

Feature:

• Pouvoir passer le titre du composant de façon programmatique (utile pour le tickerInfo pour afficher le symbole directement dans le titre)

Affichage:

• Sur la la liste des tickers quand on fait une recherche

  

• Quand on dépasse de la hauteur affichée à l'écran, il y a une séparation avec le fond

  

[johnthillaye]

A garder en tête pour plus tard:

• Pouvoir redimensionner le composant en tirant directement sur chacune de ses bordures