Skip to content

Commit bcd63b9

Browse files
KKyosukeKyosuke
KKyosuke
and
Kyosuke
authored
複数選択できるコンポーネントを追加 (#10)
* selectable toggle * update components * add test codes for funtion * make base test files --------- Co-authored-by: Kyosuke <kyosuke@Kyosukes-MacBook-Pro-lacicu.local>
1 parent 8406281 commit bcd63b9

19 files changed

+449
-267
lines changed

‎README.md‎

Lines changed: 2 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
![npm-typescript]
55
[![License][github-license]][github-license-url]
66

7-
[**Live Demo**](https://accel-hack.github.io/react-components/)
87

98
## Installation:
109

@@ -18,139 +17,9 @@ or
1817
yarn add -D ah-react-components
1918
```
2019

21-
## Usage
22-
23-
### Simple Table
24-
25-
```tsx
26-
import React from 'react'
27-
import ReactDOM from 'react-dom/client'
28-
import {ARTable} from 'ah-react-components'
29-
30-
const table = new ARTable.Class({
31-
options: {selectable: {enabled: true, identifier: 'id'}},
32-
columns: [
33-
{field: 'id', children: 'ID', sortable: true},
34-
{field: 'name', children: '名前', sortable: true},
35-
{field: 'desc', children: '説明'},
36-
],
37-
delegate: {
38-
getRows: async (limit, offset, sort, options?) => {
39-
console.log(`getRows(${limit}, ${offset}, ${JSON.stringify(sort)}, ${JSON.stringify(options)})`)
40-
return {
41-
total: 10,
42-
rows: [
43-
{id: 1, name: 'aa', desc: 'desc1'},
44-
{id: 2, name: 'aa', desc: 'desc1'},
45-
{id: 3, name: 'aa', desc: 'desc1'},
46-
],
47-
}
48-
},
49-
onRowClick: (row: any) => {
50-
console.log('onRowClick', row)
51-
},
52-
onDataLoaded: () => {
53-
console.log('onDataLoaded')
54-
},
55-
},
56-
})
57-
58-
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
59-
root.render(
60-
<React.StrictMode>
61-
<h2>Sample Table</h2>
62-
<div>
63-
<ARTable.Component table={table}/>
64-
<button
65-
onClick={() => {
66-
console.log('get Rows', table.getRows())
67-
}}
68-
>
69-
get Rows
70-
</button>
71-
<button
72-
onClick={() => {
73-
console.log('get selected rows', table.getSelectedRows())
74-
}}
75-
>
76-
get selected rows
77-
</button>
78-
</div>
79-
</React.StrictMode>,
80-
)
81-
```
82-
### Table with filters
83-
84-
```tsx
85-
import React from 'react'
86-
import ReactDOM from 'react-dom/client'
87-
import { ARFilterTable, FilterType } from 'ah-react-components'
88-
89-
// "filters" field is new from simple table
90-
const filterTable = new ARFilterTable.Class({
91-
filters: [
92-
{ type: FilterType.TEXT, name: '検索ワード', field: 'word' },
93-
{
94-
type: FilterType.TOGGLE,
95-
name: '大文字・小文字',
96-
field: 'font',
97-
options: [
98-
{ caption: 'ABC', value: 'upper' },
99-
{ caption: 'abc', value: 'lower' },
100-
],
101-
},
102-
],
103-
options: { selectable: { enabled: true, identifier: 'id' } },
104-
columns: [
105-
{ field: 'id', children: 'ID', sortable: true },
106-
{ field: 'name', children: '名前', sortable: true },
107-
{ field: 'desc', children: '説明' },
108-
],
109-
delegate: {
110-
getRows: async (limit, offset, sort, options?) => {
111-
console.log(`getRows(${limit}, ${offset}, ${JSON.stringify(sort)}, ${JSON.stringify(options)})`)
112-
return {
113-
total: 10,
114-
rows: [
115-
{ id: 1, name: 'aa', desc: 'desc1' },
116-
{ id: 2, name: 'aa', desc: 'desc1' },
117-
{ id: 3, name: 'aa', desc: 'desc1' },
118-
],
119-
}
120-
},
121-
onRowClick: (row: any) => {
122-
console.log('onRowClick', row)
123-
},
124-
onDataLoaded: () => {
125-
console.log('onDataLoaded')
126-
},
127-
},
128-
})
20+
### Usage
12921

130-
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
131-
root.render(
132-
<React.StrictMode>
133-
<h2>Sample Table with Filter</h2>
134-
<div>
135-
<ARFilterTable.Component table={filterTable} />
136-
<button
137-
onClick={() => {
138-
console.log('get Rows', table.getRows())
139-
}}
140-
>
141-
get Rows
142-
</button>
143-
<button
144-
onClick={() => {
145-
console.log('get selected rows', table.getSelectedRows())
146-
}}
147-
>
148-
get selected rows
149-
</button>
150-
</div>
151-
</React.StrictMode>,
152-
)
153-
```
22+
[**Live Demo**](https://accel-hack.github.io/react-components/)
15423

15524
#### Reference
15625

‎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-tables": "0.2.0",
12+
"@accelhack-org/react-components": "0.2.0",
1313
"parcel": "^2.8.3",
1414
"process": "^0.11.10",
1515
"react": "^18.2.0",

‎example/src/index.tsx‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,34 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom/client'
3-
import { ARFilterTable, ARTable, FilterType } from 'ah-react-components'
3+
import { ARFilter, ARFilterTable, ARTable, FilterType } from 'ah-react-components'
4+
// import { ARFilter, ARFilterTable, ARTable, FilterType } from '../../src/index'
5+
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+
onFiltered: (options) => console.log('filtered param', options),
31+
})
432

533
const table = new ARTable.Class({
634
options: { selectable: { enabled: true, identifier: 'id' } },
@@ -42,6 +70,17 @@ const filterTable = new ARFilterTable.Class({
4270
{ caption: 'abc', value: 'lower' },
4371
],
4472
},
73+
{
74+
type: FilterType.SELECTABLE,
75+
name: '言語',
76+
field: 'language',
77+
maxCount: 2,
78+
options: [
79+
{ caption: 'English', value: 'en' },
80+
{ caption: 'Japanese', value: 'ja' },
81+
{ caption: 'French', value: 'fr' },
82+
],
83+
},
4584
],
4685
options: { selectable: { enabled: true, identifier: 'id' } },
4786
columns: [
@@ -73,6 +112,13 @@ const filterTable = new ARFilterTable.Class({
73112
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
74113
root.render(
75114
<React.StrictMode>
115+
<div>
116+
<h2>Filters</h2>
117+
<div>
118+
<ARFilter.Component filterBox={filter} />
119+
</div>
120+
</div>
121+
<hr></hr>
76122
<div>
77123
<h2>Sample Table</h2>
78124
<div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@accelhack-org/react-components",
3-
"version": "0.2.1",
3+
"version": "0.2.2",
44
"description": "",
55
"main": "./dist/cjs/index.js",
66
"module": "./dist/esm/index.js",

‎src/components/filter/CFilter.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { FilterType } from './Enums'
2-
import { TextFilter } from './CTextFilter'
3-
import { ToggleFilter } from './CToggleFilter'
2+
import { TextFilter } from './TextFilter'
3+
import { SelectableFilter } from './SelectableFilter'
4+
import { ToggleFilter } from './ToggleFilter'
45

5-
type TFilters = TextFilter | ToggleFilter
6+
type TFilters = TextFilter.Props | ToggleFilter.Props | SelectableFilter.Props
67

78
interface ICFilterDelegate {
89
clear: () => void
@@ -12,7 +13,7 @@ interface ICFilter<T> {
1213
readonly type: FilterType
1314
readonly name: string
1415
readonly field: string
15-
value?: T
16+
value: T | undefined
1617
delegate?: ICFilterDelegate
1718
}
1819

‎src/components/filter/CTextFilter.tsx‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/components/filter/CToggleFilter.tsx‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/components/filter/Enums.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
enum FilterType {
22
TEXT = 'text',
33
TOGGLE = 'toggle',
4+
SELECTABLE = 'selectable',
45
}
56

67
export { FilterType }

0 commit comments

Comments
 (0)