Parent Must Control | Parent Can Control | Child Controls | |
---|---|---|---|
Logic | ? | State Reducer | ? |
View | Controlled Component | Controllable Component | Uncontrolled Component |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const stepMachine = Machine({ | |
id: 'step', | |
initial: 'step1', | |
states: { | |
step1: {}, | |
step2: {} | |
} | |
}); | |
const parentMachine = Machine( |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const selectionMachine = Machine( | |
{ | |
id: 'selection', | |
context: { | |
selectedIndex: undefined, | |
}, | |
initial: 'unselected', | |
states: { | |
unselected: { | |
on: { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const selectionMachine = Machine( | |
{ | |
id: 'selection', | |
context: { | |
selectedIndex: undefined, | |
}, | |
initial: 'unselected', | |
states: { | |
unselected: { | |
on: { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const fetchDataMachine = Machine({ | |
id: 'fetchData', | |
context: { data: undefined }, | |
initial: 'idle', | |
states: { | |
idle: { | |
on: { FETCH: 'pending'} | |
}, | |
pending: { | |
on: { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const fetchMachine = Machine({ | |
id: 'fetch', | |
initial: 'idle', | |
states: { | |
idle: { | |
on: { FETCH: 'pending'} | |
}, | |
pending: { | |
on: { | |
RESOLVE: 'fulfilled', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const matchingMachine = Machine( | |
{ | |
id: 'matching', | |
context: { choiceOneIndex: undefined, choiceTwoIndex: undefined }, | |
initial: 'answering', | |
states: { | |
answering: { | |
type: 'parallel', | |
states: { | |
choiceOne: { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'theme-provider', | |
template: ` | |
<ngx-data-provider key="theme" [data]="{ theme: theme, setTheme: setTheme }"> | |
<ng-content></ng-content> | |
</ngx-data-provider>`, | |
}) | |
export class ThemeProvider { | |
setTheme = theme => this.theme = theme; | |
theme = 'dark'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const {Provider, Consumer: ThemeConsumer} = React.createContext() | |
class ThemeProvider extends React.Component { | |
setTheme = theme => this.setState({theme}) | |
state = {theme: 'dark', setTheme: this.setTheme} | |
render() { | |
return <Provider value={this.state} {...this.props} /> | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "upgrade-to6", | |
"version": "0.0.0", | |
"license": "MIT", | |
"scripts": { | |
"ng": "ng", | |
"start": "ng serve", | |
"build": "ng build --prod", | |
"test": "ng test", | |
"lint": "ng lint", |