Merge pull request #616 from smartxworks/fix/component-form-size

fix(editor): enlarge form popover size
This commit is contained in:
yz-yu 2022-09-22 15:35:32 +08:00 committed by GitHub
commit 46414136af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 6 deletions

View File

@ -1,5 +1,13 @@
import { CloseIcon } from '@chakra-ui/icons'; import { CloseIcon } from '@chakra-ui/icons';
import { Box, Button, Text, HStack, IconButton, Input, VStack } from '@chakra-ui/react'; import {
Box,
Button,
Text,
HStack,
IconButton,
VStack,
Textarea,
} from '@chakra-ui/react';
import produce from 'immer'; import produce from 'immer';
import { fromPairs, toPairs } from 'lodash'; import { fromPairs, toPairs } from 'lodash';
import React, { useState, useMemo, useEffect, useCallback } from 'react'; import React, { useState, useMemo, useEffect, useCallback } from 'react';
@ -57,7 +65,7 @@ const RowItem = (props: RowItemProps) => {
}>( }>(
() => ({ () => ({
compactOptions: { compactOptions: {
height: '32px', maxHeight: '125px',
}, },
}), }),
[] []
@ -117,9 +125,15 @@ const RowItem = (props: RowItemProps) => {
const onRemove = useCallback(() => onRemoveRow(i), [i, onRemoveRow]); const onRemove = useCallback(() => onRemoveRow(i), [i, onRemoveRow]);
return ( return (
<HStack spacing="1" display="flex"> <HStack spacing="1" display="flex" alignItems="stretch">
<Input <Textarea
resize="none"
rows={1}
paddingTop="6px"
paddingBottom="6px"
minWidth={0} minWidth={0}
border="none"
height="auto"
flex="1 1 33.33%" flex="1 1 33.33%"
name="key" name="key"
value={rowKey} value={rowKey}
@ -164,7 +178,7 @@ const RowItem = (props: RowItemProps) => {
<Box flex="2 2 66.66%" minWidth={0}> <Box flex="2 2 66.66%" minWidth={0}>
<ExpressionEditor <ExpressionEditor
compactOptions={{ compactOptions={{
height: '32px', maxHeight: '125px',
}} }}
defaultCode={value} defaultCode={value}
evaledValue={evaledResult} evaledValue={evaledResult}

View File

@ -167,11 +167,12 @@ export const PopoverWidget = React.forwardRef<
</PopoverTrigger> </PopoverTrigger>
<Portal> <Portal>
<PopoverContent <PopoverContent
width="sm"
className={PREVENT_POPOVER_WIDGET_CLOSE_CLASS} className={PREVENT_POPOVER_WIDGET_CLOSE_CLASS}
onClick={handleClickContent} onClick={handleClickContent}
> >
<PopoverArrow /> <PopoverArrow />
<PopoverBody maxHeight="400px" overflow="auto"> <PopoverBody maxHeight="75vh" overflow="auto">
{isInit ? ( {isInit ? (
isObjectChildren && 'body' in children ? ( isObjectChildren && 'body' in children ? (
(children as Children).body (children as Children).body