Skip to content

Commit 93dda40

Browse files
KyosukeKyosuke
Kyosuke
authored and
Kyosuke
committed
allow undefined for search param
1 parent 65b249b commit 93dda40

File tree

9 files changed

+257
-216
lines changed

9 files changed

+257
-216
lines changed

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"devDependencies": {
1010
"@types/react": "^18.0.28",
1111
"@types/react-dom": "^18.0.11",
12-
"@accelhack-org/react-components": "0.2.5",
12+
"@accelhack-org/react-components": "0.2.6",
1313
"parcel": "^2.8.3",
1414
"process": "^0.11.10",
1515
"react": "^18.2.0",

‎example/src/App.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { useState } from 'react'
2+
import { SampleFilter } from './component/SampleFilter'
3+
import { SampleTable } from './component/SampleTable'
4+
import { SampleFilterTable } from './component/SampleFilterTable'
5+
6+
export const App = () => {
7+
console.log('App.rendered')
8+
const [message, setMessage] = useState('')
9+
return (
10+
<>
11+
<span>{message}</span>
12+
<button onClick={() => setMessage('Hello')}>Hello</button>
13+
<button onClick={() => setMessage('こんにちは')}>こんにちは</button>
14+
<hr></hr>
15+
<SampleFilter />
16+
<hr></hr>
17+
<SampleTable />
18+
<hr></hr>
19+
<SampleFilterTable />
20+
</>
21+
)
22+
}

‎example/src/component/SampleFilter.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react'
2+
import { FilterType } from '@accelhack-org/react-components'
3+
import { ARFilter } from '@accelhack-org/react-components'
4+
5+
export const SampleFilter = () => {
6+
const filter = new ARFilter.Class({
7+
filters: [
8+
{ type: FilterType.TEXT, name: '検索ワード', field: 'word' },
9+
{
10+
type: FilterType.TOGGLE,
11+
name: '大文字・小文字',
12+
field: 'font',
13+
options: [
14+
{ caption: 'ABC', value: 'upper' },
15+
{ caption: 'abc', value: 'lower' },
16+
],
17+
},
18+
{
19+
type: FilterType.SELECTABLE,
20+
name: '言語',
21+
field: 'language',
22+
maxCount: 2,
23+
options: [
24+
{ caption: 'English', value: 'en' },
25+
{ caption: 'Japanese', value: 'ja' },
26+
{ caption: 'French', value: 'fr' },
27+
],
28+
},
29+
{
30+
type: FilterType.SELECTABLE,
31+
name: '非同期',
32+
field: 'async',
33+
options: async () => {
34+
return [
35+
{ caption: 'try', value: 'ty' },
36+
{ caption: 'catch', value: 'ct' },
37+
{ caption: 'finally', value: 'fn' },
38+
]
39+
},
40+
},
41+
{
42+
type: FilterType.SUGGESTION,
43+
name: '科目',
44+
field: 'subject',
45+
options: async (param?: string) => {
46+
const list = [
47+
{ caption: 'try', value: 'ty' },
48+
{ caption: 'catch', value: 'ct' },
49+
{ caption: 'finally', value: 'fn' },
50+
]
51+
return list.filter((f) => f.caption.includes(param ?? ''))
52+
},
53+
},
54+
],
55+
onFiltered: (options: any) => console.log('filtered param', options),
56+
})
57+
return (
58+
<div>
59+
<h2>Filters</h2>
60+
<div>
61+
<ARFilter.Component filterBox={filter} />
62+
</div>
63+
</div>
64+
)
65+
}

‎example/src/component/SampleFilterTable.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React, { useState } from 'react'
2+
import { ARFilterTable, FilterType } from '@accelhack-org/react-components'
3+
4+
export const SampleFilterTable = () => {
5+
const _filterTable = new ARFilterTable.Class({
6+
filters: [
7+
{ type: FilterType.TEXT, name: '検索ワード', field: 'word' },
8+
{
9+
type: FilterType.TOGGLE,
10+
name: '大文字・小文字',
11+
field: 'font',
12+
options: [
13+
{ caption: 'ABC', value: 'upper' },
14+
{ caption: 'abc', value: 'lower' },
15+
],
16+
},
17+
{
18+
type: FilterType.SELECTABLE,
19+
name: '言語',
20+
field: 'language',
21+
maxCount: 2,
22+
options: [
23+
{ caption: 'English', value: 'en' },
24+
{ caption: 'Japanese', value: 'ja' },
25+
{ caption: 'French', value: 'fr' },
26+
],
27+
},
28+
],
29+
options: { selectable: { enabled: true, identifier: 'id' } },
30+
columns: [
31+
{ field: 'id', children: 'ID', sortable: true },
32+
{ field: 'name', children: '名前', sortable: true },
33+
{ field: 'desc', children: '説明' },
34+
],
35+
delegate: {
36+
getRows: async (limit, offset, sort, options) => {
37+
console.log(`getRows(${limit}, ${offset}, ${JSON.stringify(sort)}, ${JSON.stringify(options)})`)
38+
const rand = Math.floor(10 * Math.random() + 1)
39+
const rows = [
40+
{ id: 1, name: 'aa', desc: 'desc1' },
41+
{ id: 2, name: 'aa', desc: 'desc1' },
42+
{ id: 3, name: 'aa', desc: 'desc1' },
43+
{ id: 4, name: 'aa', desc: 'desc1' },
44+
{ id: 5, name: 'aa', desc: 'desc1' },
45+
{ id: 6, name: 'aa', desc: 'desc1' },
46+
{ id: 7, name: 'aa', desc: 'desc1' },
47+
{ id: 8, name: 'aa', desc: 'desc1' },
48+
{ id: 9, name: 'aa', desc: 'desc1' },
49+
{ id: 10, name: 'aa', desc: 'desc1' },
50+
{ id: 11, name: 'aa', desc: 'desc1' },
51+
{ id: 12, name: 'aa', desc: 'desc1' },
52+
{ id: 13, name: 'aa', desc: 'desc1' },
53+
{ id: 14, name: 'aa', desc: 'desc1' },
54+
{ id: 15, name: 'aa', desc: 'desc1' },
55+
{ id: 16, name: 'aa', desc: 'desc1' },
56+
{ id: 17, name: 'aa', desc: 'desc1' },
57+
{ id: 18, name: 'aa', desc: 'desc1' },
58+
{ id: 19, name: 'aa', desc: 'desc1' },
59+
{ id: 20, name: 'aa', desc: 'desc1' },
60+
].filter((r) => r.id % rand == 0)
61+
return {
62+
total: 10,
63+
rows: rows,
64+
}
65+
},
66+
onRowClick: (row: any) => {
67+
console.log('onRowClick', row)
68+
},
69+
onDataLoaded: () => {
70+
console.log('onDataLoaded')
71+
},
72+
},
73+
})
74+
const [filterTable] = useState(_filterTable)
75+
return (
76+
<div>
77+
<h2>Sample Table with Filter</h2>
78+
<div>
79+
<ARFilterTable.Component table={filterTable} />
80+
<button
81+
onClick={() => {
82+
console.log('get Rows', filterTable.getRows())
83+
}}
84+
>
85+
get Rows
86+
</button>
87+
<button
88+
onClick={() => {
89+
console.log('get selected rows', filterTable.getSelectedRows?.())
90+
}}
91+
>
92+
get selected rows
93+
</button>
94+
</div>
95+
</div>
96+
)
97+
}

‎example/src/component/SampleTable.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react'
2+
import { ARTable } from '@accelhack-org/react-components'
3+
4+
export const SampleTable = () => {
5+
const table = new ARTable.Class({
6+
options: { selectable: { enabled: true, identifier: 'id' } },
7+
columns: [
8+
{ field: 'id', children: 'ID', sortable: true },
9+
{ field: 'name', children: '名前', sortable: true },
10+
{ field: 'desc', children: '説明' },
11+
],
12+
delegate: {
13+
getRows: async (limit, offset, sort, options) => {
14+
console.log(`getRows(${limit}, ${offset}, ${JSON.stringify(sort)}, ${JSON.stringify(options)})`)
15+
const rand = Math.floor(3 * Math.random() + 1)
16+
const rows = [
17+
{ id: 1, name: 'aa', desc: 'desc1' },
18+
{ id: 2, name: 'aa', desc: 'desc1' },
19+
{ id: 3, name: 'aa', desc: 'desc1' },
20+
{ id: 4, name: 'aa', desc: 'desc1' },
21+
{ id: 5, name: 'aa', desc: 'desc1' },
22+
{ id: 6, name: 'aa', desc: 'desc1' },
23+
{ id: 7, name: 'aa', desc: 'desc1' },
24+
{ id: 8, name: 'aa', desc: 'desc1' },
25+
{ id: 9, name: 'aa', desc: 'desc1' },
26+
{ id: 10, name: 'aa', desc: 'desc1' },
27+
].filter((r) => r.id % rand == 0)
28+
return {
29+
total: 10,
30+
rows: rows,
31+
}
32+
},
33+
onRowClick: (row: any) => {
34+
console.log('onRowClick', row)
35+
},
36+
onDataLoaded: () => {
37+
console.log('onDataLoaded')
38+
},
39+
},
40+
})
41+
return (
42+
<div>
43+
<h2>Sample Table</h2>
44+
<div>
45+
<ARTable.Component table={table} />
46+
<button
47+
onClick={() => {
48+
console.log('get Rows', table.getRows())
49+
}}
50+
>
51+
get Rows
52+
</button>
53+
<button
54+
onClick={() => {
55+
console.log('get selected rows', table.getSelectedRows())
56+
}}
57+
>
58+
get selected rows
59+
</button>
60+
</div>
61+
</div>
62+
)
63+
}

0 commit comments

Comments
 (0)