diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx index 7f45ad145e..5bd3b8ff3b 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx @@ -5,6 +5,7 @@ import { Theme } from 'uiSrc/components/base/theme/types' import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons' +import { TextInput } from '../base/inputs' interface ContainerProps { className?: string @@ -48,6 +49,8 @@ export const IIEContainer = React.forwardRef< type ActionsContainerProps = React.ComponentProps & { $position?: Props['controlsPosition'] $design?: Props['controlsDesign'] + $width?: string + $height?: string } export const DeclineButton = styled(IconButton).attrs({ @@ -144,11 +147,28 @@ export const ActionsContainer = styled(Row)` position: absolute; background-color: ${({ theme }: { theme: Theme }) => theme.semantic.color.background.primary200}; - width: 80px; - height: 33px; + width: ${({ $width }) => $width || '80px'}; + height: ${({ $height }) => $height || '33px'}; padding: ${({ theme }: { theme: Theme }) => theme.core.space.space050}; z-index: 3; ${({ $position }) => positions[$position || 'inside']} ${({ $design }) => designs[$design || 'default']} ` + + +export const StyledTextInput = styled(TextInput)<{ + $width?: string + $height?: string +}>` + width: ${({ $width }) => $width || 'auto'}; + height: ${({ $height }) => $height || 'auto'}; + max-height: ${({ $height }) => $height || 'auto'}; + min-height: ${({ $height }) => $height || 'auto'}; + + // Target the actual input element inside + input { + width: 100%; + height: ${({ $height }) => $height || 'auto'}; + } +` \ No newline at end of file diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx index ad580dfa39..91319921f7 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx @@ -1,8 +1,7 @@ -import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react' +import React, { Ref, useEffect, useRef, useState } from 'react' import cx from 'classnames' import { useTheme } from '@redis-ui/styles' -import { EuiFieldText } from '@elastic/eui' import * as keys from 'uiSrc/constants/keys' import { RiPopover, RiTooltip } from 'uiSrc/components/base' @@ -19,10 +18,9 @@ import { ApplyButton, DeclineButton, IIEContainer, + StyledTextInput, } from './InlineItemEditor.styles' -import { TextInput } from 'uiSrc/components/base/inputs' - import styles from './styles.module.scss' @@ -61,6 +59,20 @@ export interface Props { approveByValidation?: (value: string) => boolean approveText?: { title: string; text: string } textFiledClassName?: string + styles?: { + inputContainer?: { + width?: string, + height?: string, + } + input?: { + width?: string, + height?: string, + } + actionsContainer?: { + width?: string + height?: string + } + } } const InlineItemEditor = (props: Props) => { @@ -94,6 +106,7 @@ const InlineItemEditor = (props: Props) => { approveByValidation, approveText, textFiledClassName, + styles: customStyles, } = props const containerEl: Ref = useRef(null) const [value, setValue] = useState(initialValue) @@ -210,11 +223,16 @@ const InlineItemEditor = (props: Props) => { onSubmit={(e: unknown) => handleFormSubmit(e as React.MouseEvent) } + style={{ + ...customStyles?.inputContainer + }} > {children || ( <> - { gap="m" $position={controlsPosition} $design={controlsDesign} + $width={customStyles?.actionsContainer?.width} + $height={customStyles?.actionsContainer?.height} grow={false} className={cx( 'inlineItemEditor__controls', diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx index c7702f69e1..ee0a80b474 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx @@ -96,6 +96,17 @@ const RejsonScalar = (props: JSONScalarProps) => { {editing ? (
{ const { onSelectedTab, path, rdiInstanceId, changes = {} } = props @@ -254,6 +255,11 @@ const JobsTree = (props: IProps) => { textFiledClassName={styles.input} viewChildrenMode={false} disableEmpty + styles={{ + actionsContainer: { + width: '64px' + } + }} /> )