mirror of
https://github.com/balzack/databag.git
synced 2025-04-21 00:55:16 +00:00
merging spike with virtualized list
This commit is contained in:
Roland Osborne
parent
5da72353cd
commit
959b8fcb72
@ -13,6 +13,7 @@
|
||||
"react-easy-crop": "^4.1.4",
|
||||
"react-router-dom": "^6.2.2",
|
||||
"react-scripts": "5.0.0",
|
||||
"react-virtualized": "^9.22.3",
|
||||
"styled-components": "^5.3.3",
|
||||
"web-vitals": "^2.1.0"
|
||||
},
|
||||
|
||||
@ -2,19 +2,67 @@ import React, { useState, useEffect, useRef } from 'react'
|
||||
import { CloseOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { useConversation } from './useConversation.hook';
|
||||
import { Button, Checkbox, Modal } from 'antd'
|
||||
import { ConversationWrapper, CloseButton } from './Conversation.styled';
|
||||
import { ConversationWrapper, CloseButton, ListItem } from './Conversation.styled';
|
||||
import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
|
||||
|
||||
export function Conversation() {
|
||||
|
||||
const [ scrollIndex, setScrollIndex ] = useState(null);
|
||||
const { state, actions } = useConversation();
|
||||
|
||||
const cache = new CellMeasurerCache({
|
||||
defaultHeight: 50,
|
||||
fixedWidth: true
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
})
|
||||
|
||||
const renderRow = ({ index, isScrolling, key, parent, style }) => {
|
||||
|
||||
return (
|
||||
<CellMeasurer
|
||||
cache={cache}
|
||||
columnIndex={0}
|
||||
key={key}
|
||||
parent={parent}
|
||||
rowIndex={index}
|
||||
>
|
||||
{({ measure, registerChild }) => (
|
||||
// 'style' attribute required to position cell (within parent List)
|
||||
<div ref={registerChild} style={style}>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/XX4VTIOtkPQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</CellMeasurer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ConversationWrapper>
|
||||
<div class="header">
|
||||
<div class="title">{ state.handle }</div>
|
||||
<CloseButton type="text" class="close" size={'large'} onClick={() => actions.close()} icon={<CloseOutlined />} />
|
||||
</div>
|
||||
<div class="container"></div>
|
||||
<div class="container">
|
||||
<div style={{ flex: '1 1 auto' }}>
|
||||
<AutoSizer>
|
||||
{({height, width}) => (
|
||||
<List
|
||||
width={width}
|
||||
height={height}
|
||||
deferredMeasurementCache={cache}
|
||||
rowHeight={cache.rowHeight}
|
||||
rowRenderer={renderRow}
|
||||
rowCount={999}
|
||||
overscanRowCount={16}
|
||||
scrollToIndex={scrollIndex}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</div>
|
||||
</div>
|
||||
</ConversationWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
@ -38,6 +38,14 @@ export const ConversationWrapper = styled.div`
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
export const CloseButton = styled(Button)`
|
||||
@ -45,3 +53,9 @@ export const CloseButton = styled(Button)`
|
||||
color: white;
|
||||
`;
|
||||
|
||||
export const ListItem = styled.div`
|
||||
dispaly: flex;
|
||||
flex-direction: row;
|
||||
width: 64px;
|
||||
`;
|
||||
|
||||
|
||||
@ -1065,6 +1065,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7":
|
||||
version "7.17.9"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
|
||||
integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.7.6":
|
||||
version "7.17.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
|
||||
@ -3039,6 +3046,11 @@ cliui@^7.0.2:
|
||||
strip-ansi "^6.0.0"
|
||||
wrap-ansi "^7.0.0"
|
||||
|
||||
clsx@^1.0.4:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
|
||||
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
|
||||
|
||||
co@^4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
|
||||
@ -3719,6 +3731,14 @@ dom-converter@^0.2.0:
|
||||
dependencies:
|
||||
utila "~0.4"
|
||||
|
||||
dom-helpers@^5.1.3:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
|
||||
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.8.7"
|
||||
csstype "^3.0.2"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz"
|
||||
@ -7139,7 +7159,7 @@ prompts@^2.0.1, prompts@^2.4.2:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@^15.8.1:
|
||||
prop-types@^15.7.2, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
@ -7658,6 +7678,11 @@ react-is@^17.0.1:
|
||||
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
|
||||
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
|
||||
|
||||
react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
|
||||
|
||||
react-refresh@^0.11.0:
|
||||
version "0.11.0"
|
||||
resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
|
||||
@ -7733,6 +7758,18 @@ react-scripts@5.0.0:
|
||||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-virtualized@^9.22.3:
|
||||
version "9.22.3"
|
||||
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"
|
||||
integrity sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.2"
|
||||
clsx "^1.0.4"
|
||||
dom-helpers "^5.1.3"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.7.2"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
|
||||
react@^17.0.2:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user