chore(rtk-query): improve responsiveness

This commit is contained in:
FaberVitale 2021-06-28 10:56:48 +02:00
parent 0319b810c9
commit 692d63eee6
4 changed files with 42 additions and 15 deletions

View File

@ -54,8 +54,11 @@ const AddPost = () => {
return (
<Flex p={'5px 0'} flexDirection="row" flexWrap="wrap" maxWidth={'85%'}>
<Box flex={'5 0 auto'} padding="0 5px 0 0">
<FormControl flexDirection="column" isInvalid={Boolean(post.name.length < 3 && post.name)}>
<FormLabel htmlFor="name">Post name</FormLabel>
<FormControl
flexDirection="column"
isInvalid={Boolean(post.name.length < 3 && post.name)}
>
<FormLabel htmlFor="name">Post name</FormLabel>
<Input
id="name"
name="name"

View File

@ -40,7 +40,7 @@ export class QueryList extends PureComponent<QueryListProps> {
isSelected
)}
>
<p>{queryInfo.queryKey}</p>
<p {...styling('queryListItemKey')}>{queryInfo.queryKey}</p>
<p {...styling('queryStatus')}>{queryInfo.query.status}</p>
</li>
);

View File

@ -37,7 +37,9 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
tab.value === selectedTab
)}
>
{renderTabLabel ? renderTabLabel(tab) : tab.label}
<span>
{renderTabLabel ? renderTabLabel(tab) : tab.label}
</span>
</div>
))}
</div>

View File

@ -118,20 +118,24 @@ const getSheetFromColorMap = (map: ColorMap) => {
padding: '5px 10px',
cursor: 'pointer',
'user-select': 'none',
'& > :first-child': {
whiteSpace: 'nowrap',
overflowX: 'hidden',
maxWidth: 'calc(100% - 70px)',
textOverflow: 'ellipsis',
},
'&:last-child': {
'border-bottom-width': 0,
},
overflow: 'hidden',
maxHeight: 47,
'border-bottom-color': map.BORDER_COLOR,
},
queryListItemKey: {
display: '-webkit-box',
boxOrient: 'vertical',
'-webkit-line-clamp': 2,
whiteSpace: 'normal',
overflow: 'hidden',
maxWidth: 'calc(100% - 70px)',
wordBreak: 'break-all',
},
queryListHeader: {
display: 'flex',
padding: 4,
@ -162,8 +166,13 @@ const getSheetFromColorMap = (map: ColorMap) => {
},
tabSelector: {
display: 'inline-flex',
float: 'right',
display: 'flex',
width: '100%',
justifyContent: 'flex-end',
overflow: 'hidden',
'& > *': {
flex: '0 1 auto',
},
},
srOnly: {
@ -180,7 +189,10 @@ const getSheetFromColorMap = (map: ColorMap) => {
selectorButton: {
cursor: 'pointer',
position: 'relative',
padding: '6.5px 8px',
height: '33px',
padding: '0 8px',
display: 'inline-flex',
alignItems: 'center',
color: map.TEXT_COLOR,
'border-style': 'solid',
'border-width': '1px',
@ -204,6 +216,16 @@ const getSheetFromColorMap = (map: ColorMap) => {
},
'border-color': map.TAB_BORDER_COLOR,
'& > *': {
display: '-webkit-box',
boxOrient: 'vertical',
'-webkit-line-clamp': 1,
overflow: 'hidden',
wordBreak: 'break-all',
'-webkit-box-pack': 'end',
paddingBottom: 0,
},
},
selectorButtonSmall: {