2
2
render ,
3
3
} from 'compostate-jsx' ;
4
4
import {
5
- atom ,
5
+ signal ,
6
6
map ,
7
7
selector ,
8
8
} from 'compostate' ;
@@ -19,7 +19,7 @@ function buildData(count) {
19
19
for ( let i = 0 ; i < count ; i ++ ) {
20
20
data [ i ] = {
21
21
id : idCounter ++ ,
22
- label : atom ( `${ adjectives [ _random ( adjectives . length ) ] } ${ colours [ _random ( colours . length ) ] } ${ nouns [ _random ( nouns . length ) ] } ` )
22
+ label : signal ( `${ adjectives [ _random ( adjectives . length ) ] } ${ colours [ _random ( colours . length ) ] } ${ nouns [ _random ( nouns . length ) ] } ` )
23
23
} ;
24
24
}
25
25
return data ;
@@ -34,22 +34,22 @@ const Button = ({ id, text, fn }) => (
34
34
) ;
35
35
36
36
const Main = ( ) => {
37
- const data = atom ( [ ] ) ;
38
- const selected = atom ( null ) ;
37
+ const [ data , setData ] = signal ( [ ] ) ;
38
+ const [ selected , setSelected ] = signal ( null ) ;
39
39
function run ( ) {
40
- data ( buildData ( 1000 ) ) ;
40
+ setData ( buildData ( 1000 ) ) ;
41
41
}
42
42
function runLots ( ) {
43
- data ( buildData ( 10000 ) ) ;
43
+ setData ( buildData ( 10000 ) ) ;
44
44
}
45
45
function add ( ) {
46
- data ( [ ...data ( ) , ...buildData ( 1000 ) ] ) ;
46
+ setData ( [ ...data ( ) , ...buildData ( 1000 ) ] ) ;
47
47
}
48
48
function update ( ) {
49
49
const state = data ( ) ;
50
50
for ( let i = 0 , len = state . length ; i < len ; i += 10 ) {
51
- const { label } = state [ i ] ;
52
- label ( label ( ) + ' !!!' ) ;
51
+ const { label : [ read , write ] } = state [ i ] ;
52
+ write ( read ( ) + ' !!!' ) ;
53
53
}
54
54
}
55
55
function swapRows ( ) {
@@ -58,19 +58,19 @@ const Main = () => {
58
58
let tmp = newData [ 1 ] ;
59
59
newData [ 1 ] = newData [ 998 ] ;
60
60
newData [ 998 ] = tmp ;
61
- data ( newData ) ;
61
+ setData ( newData ) ;
62
62
}
63
63
}
64
64
function clear ( ) {
65
- data ( [ ] ) ;
65
+ setData ( [ ] ) ;
66
66
}
67
67
function remove ( id ) {
68
68
const state = data ( ) ;
69
69
const idx = state . findIndex ( d => d . id === id ) ;
70
- data ( [ ...state . slice ( 0 , idx ) , ...state . slice ( idx + 1 ) ] ) ;
70
+ setData ( [ ...state . slice ( 0 , idx ) , ...state . slice ( idx + 1 ) ] ) ;
71
71
}
72
72
function select ( id ) {
73
- selected ( id ) ;
73
+ setSelected ( id ) ;
74
74
}
75
75
const isSelected = selector ( ( ) => selected ( ) ) ;
76
76
@@ -95,23 +95,20 @@ const Main = () => {
95
95
</ div >
96
96
< table class = 'table table-hover table-striped test-data' >
97
97
< tbody >
98
- { map ( ( ) => data ( ) , ( ) => ( row ) => {
99
- const rowId = row . id ;
100
- return (
101
- < tr class = { isSelected ( rowId ) ? 'danger' : '' } >
102
- < td class = 'col-md-1' textContent = { rowId } />
103
- < td class = 'col-md-4' >
104
- < a onClick = { [ select , rowId ] } textContent = { row . label ( ) } />
105
- </ td >
106
- < td class = 'col-md-1' >
107
- < a onClick = { [ remove , rowId ] } >
108
- < span class = 'glyphicon glyphicon-remove' aria-hidden = "true" />
109
- </ a >
110
- </ td >
111
- < td class = 'col-md-6' />
112
- </ tr >
113
- ) ;
114
- } ) }
98
+ { map ( ( ) => data ( ) , ( { id, label : [ label ] } ) => (
99
+ < tr class = { isSelected ( id ) ? 'danger' : '' } >
100
+ < td class = 'col-md-1' textContent = { id } />
101
+ < td class = 'col-md-4' >
102
+ < a onClick = { [ select , id ] } textContent = { label ( ) } />
103
+ </ td >
104
+ < td class = 'col-md-1' >
105
+ < a onClick = { [ remove , id ] } >
106
+ < span class = 'glyphicon glyphicon-remove' aria-hidden = "true" />
107
+ </ a >
108
+ </ td >
109
+ < td class = 'col-md-6' />
110
+ </ tr >
111
+ ) ) }
115
112
</ tbody >
116
113
</ table >
117
114
< span class = 'preloadicon glyphicon glyphicon-remove' aria-hidden = "true" />
0 commit comments