Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd3dd046

Browse files
authored
Merge pull request#18 from rjz/feature/decorator-example
Adds example higher-order component
2 parents872e991 +b38c647 commitd3dd046

File tree

6 files changed

+58
-4
lines changed

6 files changed

+58
-4
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"scripts": {
1111
"setup":"typings install",
12-
"start":"http-server",
12+
"start":"http-server -c-1",
1313
"build":"npm run setup && npm run test && webpack",
1414
"watch":"webpack --watch",
1515
"lint":"tslint -c tslint.json 'src/**/*.{ts,tsx}'",

‎src/components/__tests__/__snapshots__/counter_spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`components/Counter renders 1`]=`
4-
<CounterComponent
4+
<Loadable(PureCounter)
55
counter={
66
Object {
77
"value":0,

‎src/components/counter.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import {
1010

1111
import{Store}from'../reducers'
1212

13+
importloadablefrom'../decorators/loadable'
14+
1315
typeOwnProps={
1416
}
1517

@@ -42,7 +44,7 @@ const mapDispatchToProps = (dispatch: redux.Dispatch<Store.All>): ConnectedDispa
4244
dispatch(saveCount({ value})),
4345
})
4446

45-
classCounterComponentextendsReact.Component<ConnectedState&ConnectedDispatch&OwnProps,{}>{
47+
classPureCounterextendsReact.Component<ConnectedState&ConnectedDispatch&OwnProps,{}>{
4648

4749
_onClickIncrement=(e:React.SyntheticEvent<HTMLButtonElement>)=>{
4850
e.preventDefault()
@@ -86,5 +88,12 @@ class CounterComponent extends React.Component<ConnectedState & ConnectedDispatc
8688
}
8789
}
8890

91+
constisLoading=(p:ConnectedState&ConnectedDispatch&OwnProps)=>
92+
p.isLoading||p.isSaving
93+
94+
// Invoke `loadable` manually pending decorator support
95+
// See: https://github.com/Microsoft/TypeScript/issues/4881
96+
constLoadableCounter=loadable(isLoading)(PureCounter)
97+
8998
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/8787
90-
exportconstCounter:React.ComponentClass<OwnProps>=connect(mapStateToProps,mapDispatchToProps)(CounterComponent)
99+
exportconstCounter=connect(mapStateToProps,mapDispatchToProps)(LoadableCounter)
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`decorators/loadable maps props to loading 1`]=`<TestComponent />`;
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// tslint:disable-next-line no-unused-variable
2+
import*asReactfrom'react'
3+
import*asTestUtilsfrom'react-dom/test-utils'
4+
import*asReactShallowRendererfrom'react-test-renderer/shallow'
5+
6+
importloadablefrom'../loadable'
7+
8+
constTestComponent=()=><div>OK</div>
9+
constLoadableTestComponent=loadable(props=>props.isLoading)(TestComponent)
10+
11+
describe('decorators/loadable',()=>{
12+
13+
it('sets friendly .displayName',()=>{
14+
expect(LoadableTestComponent.displayName)
15+
.toEqual('Loadable(TestComponent)')
16+
})
17+
18+
it('maps props to loading',()=>{
19+
constrenderer=newReactShallowRenderer()
20+
expect(renderer.render(<LoadableTestComponentisLoading/>).props.children)
21+
.toEqual('Just a moment, please...')
22+
23+
expect(renderer.render(<LoadableTestComponent/>))
24+
.toMatchSnapshot()
25+
})
26+
})

‎src/decorators/loadable.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import*asReactfrom'react'
2+
3+
exportdefaultfunctionloadable<P>(isLoading:(p:P)=>boolean){
4+
return(C:React.ComponentClass<P>|React.SFC<P>):React.SFC<P>=>{
5+
constLoadableComponent:React.SFC<P>=(props)=>{
6+
if(isLoading(props)){
7+
return<div>Just a moment, please...</div>
8+
}
9+
return<C{...props}/>
10+
}
11+
12+
// Set pretty `displayName` for dev tooling
13+
LoadableComponent.displayName=`Loadable(${C.name})`
14+
returnLoadableComponent
15+
}
16+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp