nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix chooser resize

Browse Source
This commit is contained in:
dank074 2021-11-02 21:38:58 -05:00
parent 5020f1f063
commit 4a8f738bb0
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/room/widgets/choosers/ChooserWidgetView.scss
View File

@ -1,5 +1,9 @@
.nitro-chooser-widget { .nitro-chooser-widget {
.chooser-container {
min-height: 150px;
.list-item { .list-item {
color: black; color: black;
overflow: hidden; overflow: hidden;
@ -8,4 +12,5 @@
background-color: cadetblue; background-color: cadetblue;
} }
} }
}
} }

17
src/views/room/widgets/choosers/ChooserWidgetView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useCallback, useMemo, useState } from 'react'; import { FC, useCallback, useMemo, useState } from 'react';
import { List, ListRowProps, ListRowRenderer } from 'react-virtualized'; import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { RoomObjectItem, RoomWidgetRoomObjectMessage } from '../../../../api'; import { RoomObjectItem, RoomWidgetRoomObjectMessage } from '../../../../api';
import { LocalizeText } from '../../../../api/utils'; import { LocalizeText } from '../../../../api/utils';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
@ -53,12 +53,19 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
<input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} /> <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={searchValue} onChange={event => setSearchValue(event.target.value)} />
</div> </div>
</div> </div>
<List <div className="row w-100 h-100 chooser-container">
width={ 150 } <AutoSizer defaultWidth={150} defaultHeight={150}>
height={ 150 } {({ height, width }) =>
{
return (<List
width={ width }
height={ height }
rowCount={ filteredItems.length } rowCount={ filteredItems.length }
rowHeight={ 20 } rowHeight={ 20 }
rowRenderer={ rowRenderer } /> rowRenderer={ rowRenderer } />)
}}
</AutoSizer>
</div>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );