vhx / quartz-react

Quartz components using React
2 stars 1 forks source link

Improve single instance components #45

Closed sebastiansandqvist closed 7 years ago

sebastiansandqvist commented 7 years ago

Overview

Components like the <Sidebar /> and <Modal /> are used different from most other components. Instead of nesting an instance of them wherever they are used, a single instance of these components is added to the root of the application. To interact with them, we use methods instead.

Prior to this PR, those methods were defined on a model, which had to be required separately. This is mainly a matter of taste, but I think this does make it a bit less complex. Following @davegonzalez's feedback, those methods are defined on the component class itself.

What changed

All the methods and state held within the model of a connected component are set as static properties on the component itself.

// before:
import { Sidebar, sidebarModel } from '@vhx/quartz-react';

<Sidebar /> // instantiation
<Button onClick={() => sidebarModel.close()}>Close the sidebar</Button> // usage elsewhere

// after:
import { Sidebar } from '@vhx/quartz-react';

<Sidebar /> // instantiation
<Button onClick={() => Sidebar.close()}>Close the sidebar</Button> // usage elsewhere