Skip to content

Commit

Permalink
Rename editors to the correct namespace
Browse files Browse the repository at this point in the history
  • Loading branch information
underfisk committed Oct 5, 2020
1 parent 8fce194 commit 009e9cc
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 177 deletions.
149 changes: 57 additions & 92 deletions src/core/GridWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import CellMeasurer from '../cellMeasurer/CellMeasureWrapper'
import { GridCell, GridData, GridRow } from '../types/row.interface'
import { GridApi } from '../types/grid-api.type'
import { NavigationCoords } from '../navigation/types/navigation-coords.type'
import TextEditor from '../editors/TextEditor'
import { createPortal } from 'react-dom'
import { ClickAwayListener } from '@material-ui/core'
import clsx from 'clsx'
import { GridCellProps } from 'react-virtualized/dist/es/Grid'
import { useEditorManager } from '../editors/useEditorManager'
import { useEditorManager } from '../editorManager/useEditorManager'
import { MeasurerRendererProps } from '../cellMeasurer/cellMeasureWrapperProps'
import { GridWrapperProps } from './gridWrapperProps'
import { TextEditor } from '../editorManager/components/TextEditor'

const GridWrapper = forwardRef((props: GridWrapperProps, componentRef: React.Ref<GridApi>) => {
const cache = useRef(
Expand Down Expand Up @@ -225,101 +225,66 @@ const GridWrapper = forwardRef((props: GridWrapperProps, componentRef: React.Ref

const renderCell = useCallback(
({ style, cell, ref, rowIndex, columnIndex }) => {
const { children } = cell
const isSelected =
rowIndex === props.coords.rowIndex &&
columnIndex === props.coords.colIndex
/**
* @todo Not considering well merged cells, i need to look up by merged too
*/
const isRowSelected =
rowIndex === props.coords.rowIndex
if (isSelected) {
style.border = '1px solid blue'
} else {
//Bind default border
if (
!props.theme ||
(!props.theme.cellClass && !cell.dummy)
) {
style.border =
'1px solid rgb(204, 204, 204)'
}
}
const { children } = cell
const isSelected = rowIndex === props.coords.rowIndex && columnIndex === props.coords.colIndex
/**
* @todo Not considering well merged cells, i need to look up by merged too
*/
const isRowSelected = rowIndex === props.coords.rowIndex
if (isSelected) {
style.border = '1px solid blue'
} else {
//Bind default border
if (!props.theme || (!props.theme.cellClass && !cell.dummy)) {
style.border = '1px solid rgb(204, 204, 204)'
}
}

//Non navigable columns get now a custom disable style
if (
props.headers[0][columnIndex]
?.disableNavigation &&
!cell.dummy
) {
/** @todo We can apply the custom class if theme has it by using a class builder such as clsx **/
style.opacity = 0.6
}
//Non navigable columns get now a custom disable style
if (props.headers[0][columnIndex]?.disableNavigation && !cell.dummy) {
/** @todo We can apply the custom class if theme has it by using a class builder such as clsx **/
style.opacity = 0.6
}

/**
* @todo We need to check if the row is a dummy but its parent dummy is not anymore visible
* e.:g
* dummy 1 has a rowspawn of total 3 but none of its parent are visible, so dummy 3 assume the children value and highlight
* of the parent because there is none visible
* @todo Check if creating a lifecycle cell mount/unmount helps
* @todo The children renderer has to be controlled via header accessor and cell renderer if its present
* */
/**
* @todo We need to check if the row is a dummy but its parent dummy is not anymore visible
* e.:g
* dummy 1 has a rowspawn of total 3 but none of its parent are visible, so dummy 3 assume the children value and highlight
* of the parent because there is none visible
* @todo Check if creating a lifecycle cell mount/unmount helps
* @todo The children renderer has to be controlled via header accessor and cell renderer if its present
* */

const cellClassName =
!cell.dummy &&
isRowSelected &&
props.theme?.currentRowClass
? clsx(
props.theme?.cellClass,
props.theme?.currentRowClass,
)
: !cell.dummy
? props.theme?.cellClass
: undefined
const cellClassName =
!cell.dummy && isRowSelected && props.theme?.currentRowClass
? clsx(props.theme?.cellClass, props.theme?.currentRowClass)
: !cell.dummy
? props.theme?.cellClass
: undefined

//Ensure dummies does not have border
if (cell.dummy) {
style.border = '0px'
}
//Ensure dummies does not have border
if (cell.dummy) {
style.border = '0px'
}

return (
<div
className={cellClassName}
style={{
display: 'flex',
justifyContent: cell?.dummy
? 'top'
: 'center',
padding: '5px',
boxSizing: 'border-box',
...style,
}}
onClick={event =>
onCellClick(
event,
cell,
rowIndex,
columnIndex,
)
}
onDoubleClick={e =>
onCellDoubleClick(
e,
cell,
rowIndex,
columnIndex,
children,
)
}
ref={ref}
>
{typeof children === 'function'
? children()
: children}
</div>
)
},
return (
<div
className={cellClassName}
style={{
display: 'flex',
justifyContent: cell?.dummy ? 'top' : 'center',
padding: '5px',
boxSizing: 'border-box',
...style,
}}
onClick={event => onCellClick(event, cell, rowIndex, columnIndex)}
onDoubleClick={e => onCellDoubleClick(e, cell, rowIndex, columnIndex, children)}
ref={ref}
>
{typeof children === 'function' ? children() : children}
</div>
)
},
[props.coords, props.theme, props.onCellClick, props.headers, props.width],
)

Expand Down
90 changes: 90 additions & 0 deletions src/editorManager/components/BaseEditor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import React, { CSSProperties, useState } from 'react'
import { Popover, TextField, TextareaAutosize } from '@material-ui/core'
import { NavigationKey } from '../enums/navigation-key.enum'
import { isCaretAtEndPosition } from '../utils/utils'

interface Props {
value: string
onCommit: (value: string, navigationKey?: NavigationKey) => void
onCommitCancel: (navigationKey?: NavigationKey) => void
anchorRef: Element
cellStyle: CSSProperties
maxHeight: number
maxLength: number
editor: any
}

/**
* @todo Needs to be created
* @param value
* @param maxHeight
* @param cellStyle
* @param onCommit
* @param onCommitCancel
* @param anchorRef
* @param maxLength
* @param editor
* @constructor
*/
export function BaseEditor({
value,
maxHeight,
cellStyle,
onCommit,
onCommitCancel,
anchorRef,
maxLength,
editor,
}: Props) {
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' || NavigationKey[e.key]) {
const cursorStart = e.target['selectionStart']
const cursorEnd = e.target['selectionEnd']
console.log({
cursorStart,
cursorEnd,
})
if (
e.key === NavigationKey.ArrowRight &&
!isCaretAtEndPosition(
0,
e.target['value'].length,
)
) {
return console.log('Not in the end so')
}
e.preventDefault()
const newValue = e.target['value']
if (newValue !== value) {
return onCommit(
newValue,
NavigationKey[e.key],
)
}
return onCommitCancel(NavigationKey[e.key])
}
}

return (
<Popover
anchorEl={anchorRef}
open
//Review because this is enforced just to prevent tsc error
onClose={() => onCommitCancel(NavigationKey.ArrowUp)}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'center',
horizontal: 'center',
}}
>
<div style={{ width: cellStyle.width, height: maxHeight }}>
{editor(value, onKeyDown, maxLength)}
</div>
</Popover>
)
}

export default BaseEditor
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { CSSProperties } from 'react'
import { Popover } from '@material-ui/core'
import { NavigationKey } from './navigation-key.enum'
import { NavigationKey } from '../enums/navigation-key.enum'
import ReactNumberFormat from 'react-number-format'

interface Props {
Expand All @@ -19,7 +19,15 @@ const textAreaStyle: CSSProperties = {
overflow: 'auto',
}

export function NumericEditor({ value, maxHeight, cellStyle, onCommit, onCommitCancel, anchorRef, maxLength }: Props) {
export function NumericEditor({
value,
maxHeight,
cellStyle,
onCommit,
onCommitCancel,
anchorRef,
maxLength,
}: Props) {
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' || NavigationKey[e.key]) {
e.preventDefault()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { CSSProperties, useRef, useState } from 'react'
import { Popover, TextField, TextareaAutosize, Fade, Grow } from '@material-ui/core'
import { NavigationKey } from './/navigation-key.enum'
import { isCaretAtEndPosition } from './utils'
import { NavigationKey } from '../enums/navigation-key.enum'
import { isCaretAtEndPosition } from '../utils/isCaretAtEndPosition'

interface Props {
value: string
Expand All @@ -19,7 +19,15 @@ const textAreaStyle: CSSProperties = {
overflow: 'auto',
}

export function TextEditor({ value, onCommit, onCommitCancel, anchorRef, cellWidth, cellHeight, maxLength }: Props) {
export function TextEditor({
value,
onCommit,
onCommitCancel,
anchorRef,
cellWidth,
cellHeight,
maxLength,
}: Props) {
const changedValue = useRef<string>(value)
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
/**
Expand All @@ -40,7 +48,10 @@ export function TextEditor({ value, onCommit, onCommitCancel, anchorRef, cellWid
return
}
//Only navigate if we are in the left
if ((e.key === NavigationKey.ArrowLeft || e.key === NavigationKey.ArrowUp) && cursorStart > 0) {
if (
(e.key === NavigationKey.ArrowLeft || e.key === NavigationKey.ArrowUp) &&
cursorStart > 0
) {
return console.warn('YAY')
}

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Loading

0 comments on commit 009e9cc

Please sign in to comment.