Skip to content

#RI-3447 - add space for formatter editor buttons, change calculating height behavior #1138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 9, 2022
Merged

#RI-3447 - add space for formatter editor buttons, change calculating height behavior #1138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6ecf1a
#RI-3447 - add space for formatter editor buttons, change calculating…
rsergeenko Sep 8, 2022
6e4e81d
#RI-3447 - remove console.log
rsergeenko Sep 9, 2022
3d25d8b
Merge branch 'main' into bugfix/RI-3447_formatter-editor
Sep 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions redisinsight/ui/src/pages/browser/components/hash-details/HashDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ import HelpTexts from 'uiSrc/constants/help-texts'
import { KeyTypes, OVER_RENDER_BUFFER_COUNT, TableCellAlignment, TEXT_UNPRINTABLE_CHARACTERS } from 'uiSrc/constants'
import { getColumnWidth } from 'uiSrc/components/virtual-grid'
import { StopPropagation } from 'uiSrc/components/virtual-table'
import { calculateTextareaLines } from 'uiSrc/utils/calculateTextareaLines'
import { stringToBuffer } from 'uiSrc/utils/formatters/bufferFormatters'
import {
GetHashFieldsResponse,
Expand Down Expand Up @@ -256,6 +255,13 @@ const HashDetails = (props: Props) => {
}
}

const updateTextAreaHeight = () => {
if (textAreaRef.current) {
textAreaRef.current.style.height = '0px'
textAreaRef.current.style.height = `${textAreaRef.current?.scrollHeight || 0}px`
}
}

const columns: ITableColumn[] = [
{
id: 'field',
Expand Down Expand Up @@ -315,9 +321,10 @@ const HashDetails = (props: Props) => {
&& !isEqualBuffers(valueItem, stringToBuffer(value))

setTimeout(() => cellCache.clear(rowIndex, 1), 0)
updateTextAreaHeight()

return (
<AutoSizer disableHeight>
<AutoSizer disableHeight onResize={() => setTimeout(updateTextAreaHeight, 0)}>
{({ width }) => (
<div style={{ width }}>
<StopPropagation>
Expand All @@ -342,19 +349,20 @@ const HashDetails = (props: Props) => {
fullWidth
name="value"
id="value"
rows={calculateTextareaLines(areaValue, width + 80)}
resize="none"
placeholder="Enter Value"
value={areaValue}
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
cellCache.clearAll()
setAreaValue(e.target.value)
updateTextAreaHeight()
}}
disabled={updateLoading}
inputRef={textAreaRef}
className={cx(styles.textArea, { [styles.areaWarning]: disabled })}
spellCheck={false}
data-testid="hash-value-editor"
style={{ height: textAreaRef.current?.scrollHeight || 0 }}
/>
</InlineItemEditor>
</StopPropagation>
Expand Down
7 changes: 5 additions & 2 deletions redisinsight/ui/src/pages/browser/components/hash-details/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

.textAreaControls {
right: -80px !important;
bottom: -2px !important;
bottom: -4px !important;
top: auto !important;
background-color: var(--euiPageBackgroundColor) !important;
}
Expand All @@ -17,11 +17,14 @@
border-color: var(--euiColorPrimary) !important;
z-index: 3;
padding-left: 20px;
padding-bottom: 36px !important;
margin: -8px -6px -8px -20px !important;
height: calc(100% + 16px) !important;
min-width: calc(100% + 120px) !important;
font: normal normal normal 13px/18px Graphik, sans-serif;
min-height: 43px;
overflow: hidden;
overflow-wrap: break-word;
resize: none;

&:focus {
background-image: none !important;
Expand Down
13 changes: 10 additions & 3 deletions redisinsight/ui/src/pages/browser/components/list-details/ListDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ import {
SetListElementDto,
SetListElementResponse,
} from 'apiSrc/modules/browser/dto'
import { calculateTextareaLines } from 'uiSrc/utils/calculateTextareaLines'

import styles from './styles.module.scss'

Expand Down Expand Up @@ -206,6 +205,13 @@ const ListDetails = (props: Props) => {
cellCache.clearAll()
}

const updateTextAreaHeight = () => {
if (textAreaRef.current) {
textAreaRef.current.style.height = '0px'
textAreaRef.current.style.height = `${textAreaRef.current?.scrollHeight || 0}px`
}
}

const columns: ITableColumn[] = [
{
id: 'index',
Expand Down Expand Up @@ -263,7 +269,7 @@ const ListDetails = (props: Props) => {
setTimeout(() => cellCache.clear(rowIndex, 1), 0)

return (
<AutoSizer disableHeight>
<AutoSizer disableHeight onResize={() => setTimeout(updateTextAreaHeight, 0)}>
{({ width }) => (
<div style={{ width }}>
<StopPropagation>
Expand All @@ -289,19 +295,20 @@ const ListDetails = (props: Props) => {
fullWidth
name="value"
id="value"
rows={calculateTextareaLines(areaValue, width + 80)}
resize="none"
placeholder="Enter Element"
value={areaValue}
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
cellCache.clearAll()
setAreaValue(e.target.value)
updateTextAreaHeight()
}}
disabled={updateLoading}
inputRef={textAreaRef}
className={cx(styles.textArea, { [styles.areaWarning]: disabled })}
spellCheck={false}
data-testid="element-value-editor"
style={{ height: textAreaRef.current?.scrollHeight || 0 }}
/>
</InlineItemEditor>
</div>
Expand Down
7 changes: 5 additions & 2 deletions redisinsight/ui/src/pages/browser/components/list-details/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

.textAreaControls {
right: -56px !important;
bottom: -2px !important;
bottom: -4px !important;
top: auto !important;
background-color: var(--euiPageBackgroundColor) !important;
}
Expand All @@ -17,11 +17,14 @@
border-color: var(--euiColorPrimary) !important;
z-index: 3;
padding-left: 20px;
padding-bottom: 36px !important;
margin: -8px -6px -8px -20px !important;
height: calc(100% + 16px) !important;
min-width: calc(100% + 106px) !important;
font: normal normal normal 13px/18px Graphik, sans-serif;
min-height: 43px;
overflow: hidden;
overflow-wrap: break-word;
resize: none;

&:focus {
background-image: none !important;
Expand Down
2 changes: 1 addition & 1 deletion redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const WBView = (props: Props) => {
scrollDivRef,
} = props
const [isMinimized, setIsMinimized] = useState<boolean>(
(localStorageService?.get(BrowserStorageItem.isEnablementAreaMinimized) ?? 'false') === 'true'
localStorageService?.get(BrowserStorageItem.isEnablementAreaMinimized) ?? false
)
const [isCodeBtnDisabled, setIsCodeBtnDisabled] = useState<boolean>(false)

Expand Down
10 changes: 3 additions & 7 deletions redisinsight/ui/src/services/storage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,13 @@ class StorageService {
} catch (error) {
console.error(`getItem from storage error: ${error}`)
}
const numPatt = new RegExp(/^\d+$/)
const jsonPatt = new RegExp(/[[{].*[}\]]/)

if (item) {
if (jsonPatt.test(item)) {
try {
return JSON.parse(item)
} catch (e) {
return item
}
if (numPatt.test(item)) {
return parseFloat(item)
}
return item
}
return null
}
Expand Down