94 lines
1.8 KiB
Plaintext
94 lines
1.8 KiB
Plaintext
---
|
|
name: InputGroup
|
|
menu: Form
|
|
route: components/InputGroup
|
|
---
|
|
|
|
import { useState } from 'react';
|
|
|
|
import { InputGroup } from '@ohif/ui';
|
|
|
|
# Input Group
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { InputGroup } from '@ohif/ui';
|
|
```
|
|
|
|
## Basic usage
|
|
|
|
```jsx live
|
|
{
|
|
() => {
|
|
const [filterValues, setFilterValues] = useState({
|
|
patient: '',
|
|
studyDate: {
|
|
startDate: null,
|
|
endDate: null,
|
|
},
|
|
modality: [],
|
|
});
|
|
const [filterSorting, setFilterSorting] = useState({
|
|
sortBy: '',
|
|
sortDirection: 'none',
|
|
});
|
|
const filtersMeta = [
|
|
{
|
|
name: 'patient',
|
|
displayName: 'Patient Name',
|
|
inputType: 'Text',
|
|
isSortable: true,
|
|
gridCol: 6,
|
|
},
|
|
{
|
|
name: 'studyDate',
|
|
displayName: 'Study date',
|
|
inputType: 'DateRange',
|
|
isSortable: true,
|
|
gridCol: 6,
|
|
},
|
|
{
|
|
name: 'modality',
|
|
displayName: 'Modality',
|
|
inputType: 'MultiSelect',
|
|
inputProps: {
|
|
options: [
|
|
{ value: 'SEG', label: 'SEG' },
|
|
{ value: 'CT', label: 'CT' },
|
|
{ value: 'MR', label: 'MR' },
|
|
{ value: 'SR', label: 'SR' },
|
|
],
|
|
},
|
|
isSortable: true,
|
|
gridCol: 6,
|
|
},
|
|
{
|
|
name: 'numberOfInstance',
|
|
displayName: 'Number of Instances',
|
|
inputType: 'None',
|
|
isSortable: true,
|
|
gridCol: 6,
|
|
},
|
|
];
|
|
return (
|
|
<div className="py-4">
|
|
<InputGroup
|
|
inputMeta={filtersMeta}
|
|
values={filterValues}
|
|
onValuesChange={setFilterValues}
|
|
sorting={filterSorting}
|
|
onSortingChange={setFilterSorting}
|
|
isSortingEnable={true}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
```
|
|
|
|
## Properties
|
|
|
|
<Props of={InputGroup} />
|
|
```
|