From b28b5e5dde157b0daea961df0f82cd139c1338bf Mon Sep 17 00:00:00 2001 From: maximilianweidenauer <66732863+maximilianweidenauer@users.noreply.github.com> Date: Mon, 15 Feb 2021 09:43:49 +0100 Subject: [PATCH] #53 --- .../editors/number/UIEditorNumber.tsx | 51 ++++++------------- src/JVX/components/table/CellDisplaying.tsx | 18 ++++++- src/JVX/components/table/UITable.scss | 2 +- src/JVX/components/table/UITable.tsx | 3 +- src/JVX/components/util/NumberProperties.tsx | 38 ++++++++++++++ 5 files changed, 73 insertions(+), 39 deletions(-) create mode 100644 src/JVX/components/util/NumberProperties.tsx diff --git a/src/JVX/components/editors/number/UIEditorNumber.tsx b/src/JVX/components/editors/number/UIEditorNumber.tsx index c14ddb09..91ea71e8 100644 --- a/src/JVX/components/editors/number/UIEditorNumber.tsx +++ b/src/JVX/components/editors/number/UIEditorNumber.tsx @@ -12,6 +12,7 @@ import { checkCellEditorAlignments } from "../../compprops/CheckAlignments"; import { sendOnLoadCallback } from "../../util/sendOnLoadCallback"; import { parseJVxSize } from "../../util/parseJVxSize"; import { getEditorCompId } from "../../util/GetEditorCompId"; +import { getDecimalLength, getGrouping, getMinimumIntDigits, getNumberLength, getScaleDigits } from "../../util/NumberProperties"; interface ICellEditorNumber extends ICellEditor{ numberFormat: string, @@ -26,7 +27,7 @@ export interface IEditorNumber extends IEditor{ scale: number, } -interface ScaleType { +export interface ScaleType { minScale:number, maxScale:number, } @@ -43,38 +44,22 @@ const UIEditorNumber: FC = (baseProps) => { const lastValue = useRef(); const {onLoadCallback, id} = baseProps; - const cellEditorMetaData:IEditorNumber|undefined = context.contentStore.dataProviderMetaData.get(compId)?.get(props.dataRow)?.columns.find(column => column.name === props.columnName) as IEditorNumber; - - const scaleDigits:ScaleType = useMemo(() => { - let count = props.cellEditor.numberFormat.includes('.') ? (props.cellEditor.numberFormat.split('.')[1].match(/0/g) || []).length : 0; - return cellEditorMetaData.scale === -1 ? {minScale: count, maxScale:20} : {minScale: count, maxScale: cellEditorMetaData.scale} - }, [cellEditorMetaData.scale, props.cellEditor.numberFormat]); - - const useGrouping = props.cellEditor.numberFormat?.includes(','); - - const prefixLength = useMemo(() => { - let count = (props.cellEditor.numberFormat.split('.')[0].match(/0/g) || []).length; - return '0'.repeat(count - (selectedRow ? selectedRow.toString().length : 0)) - },[props.cellEditor.numberFormat, selectedRow]); - - const length = useMemo(() => { - let returnLength:number|undefined = undefined; - if (scaleDigits.maxScale === 0) - returnLength = cellEditorMetaData.precision; - else if (cellEditorMetaData.precision !== 0 && cellEditorMetaData.scale !== -1) - returnLength = cellEditorMetaData.precision+1; - if (useGrouping && returnLength) - returnLength += Math.floor((cellEditorMetaData.precision - cellEditorMetaData.scale)/4) - if (prefixLength && returnLength) - returnLength += prefixLength.length - return returnLength - }, [cellEditorMetaData.precision, cellEditorMetaData.scale, scaleDigits, useGrouping, prefixLength]); + const cellEditorMetaData:IEditorNumber|undefined = context.contentStore.dataProviderMetaData.get(compId)?. + get(props.dataRow)?.columns.find(column => column.name === props.columnName) as IEditorNumber; + + const scaleDigits:ScaleType = useMemo(() => getScaleDigits(props.cellEditor.numberFormat, cellEditorMetaData.scale), + [cellEditorMetaData.scale, props.cellEditor.numberFormat]); + + const useGrouping = getGrouping(props.cellEditor.numberFormat); + + const prefixLength = useMemo(() => getMinimumIntDigits(props.cellEditor.numberFormat, selectedRow), + [props.cellEditor.numberFormat, selectedRow]); + + const length = useMemo(() => getNumberLength(scaleDigits, cellEditorMetaData.precision, cellEditorMetaData.scale, useGrouping, prefixLength), + [cellEditorMetaData.precision, cellEditorMetaData.scale, scaleDigits, useGrouping, prefixLength]); const decimalLength = useMemo(() => { - if (cellEditorMetaData.precision > 0) - return cellEditorMetaData.precision - cellEditorMetaData.scale - else - return undefined + getDecimalLength(cellEditorMetaData.precision, cellEditorMetaData.scale); },[cellEditorMetaData.precision, cellEditorMetaData.scale]); useLayoutEffect(() => { @@ -101,8 +86,6 @@ const UIEditorNumber: FC = (baseProps) => { const handleKeyDown = (e:any) => { const curRef = inputRef.current - //@ts-ignore - console.log(curRef.inputEl.value.length, length) handleEnterKey(e, () => sendSetValues(props.dataRow, props.name, props.columnName, selectedRow, lastValue.current, context.server)); //@ts-ignore if (curRef.inputEl.value.length === curRef.inputEl.maxLength || (decimalLength && parseInt((value ? value.toString().split('.')[0] : "") + e.key).toString().length > decimalLength && curRef.inputEl.selectionStart <= (value ? value.toString().indexOf('.') : 0))) { @@ -111,8 +94,6 @@ const UIEditorNumber: FC = (baseProps) => { } } - console.log(selectedRow, prefixLength) - return ( {props.cellData} @@ -24,7 +26,7 @@ export function displayEditor(metaData:IEditor|undefined, props:any) { return editor } -export function cellRenderer(metaData:IEditor|undefined, cellData:any, resource:string) { +export function cellRenderer(metaData:IEditor|undefined, cellData:any, resource:string, locale:string) { if (cellData !== undefined) { if (metaData && metaData.cellEditor) { if (metaData.cellEditor.className === "ChoiceCellEditor") { @@ -47,10 +49,22 @@ export function cellRenderer(metaData:IEditor|undefined, cellData:any, resource: else return null } - else if (metaData.cellEditor.className === "ImageCellEditor") { + else if (metaData.cellEditor.className === "ImageViewer") { const castedColumn = metaData as IEditorImage return could not be loaded } + else if (metaData.cellEditor.className === "NumberCellEditor") { + const castedColumn = metaData as IEditorNumber; + if (cellData === null) + return null + return Intl.NumberFormat(locale, + { + useGrouping: getGrouping(castedColumn.cellEditor.numberFormat), + minimumIntegerDigits: getMinimumIntDigits(castedColumn.cellEditor.numberFormat, cellData)?.length, + minimumFractionDigits: getScaleDigits(castedColumn.cellEditor.numberFormat, castedColumn.scale).minScale, + maximumFractionDigits: getScaleDigits(castedColumn.cellEditor.numberFormat, castedColumn.scale).maxScale + }).format(cellData); + } else return cellData; } diff --git a/src/JVX/components/table/UITable.scss b/src/JVX/components/table/UITable.scss index d2999df4..f09ffcc4 100644 --- a/src/JVX/components/table/UITable.scss +++ b/src/JVX/components/table/UITable.scss @@ -52,7 +52,7 @@ tr.p-highlight{ &.NumberCellEditor { text-align: right; } - &.ImageCellEditor { + &.ImageViewer { >.cell-data { padding: 0; vertical-align: middle; diff --git a/src/JVX/components/table/UITable.tsx b/src/JVX/components/table/UITable.tsx index 1d70be7a..918b909a 100644 --- a/src/JVX/components/table/UITable.tsx +++ b/src/JVX/components/table/UITable.tsx @@ -40,13 +40,14 @@ const CellEditor: FC = (props) => { const [edit, setEdit] = useState(false); const wrapperRef = useRef(null) + const context = useContext(jvxContext); const columnMetaData = props.metaData?.columns.find(column => column.name === props.colName) useOutsideClick(wrapperRef, setEdit, columnMetaData) return useMemo(() => { if (!edit) { return (
columnMetaData?.cellEditor?.className !== "ImageCellEditor" ? setEdit(true) : undefined}> - {cellRenderer(columnMetaData, props.cellData, props.resource)} + {cellRenderer(columnMetaData, props.cellData, props.resource, context.contentStore.locale)}
) } else { diff --git a/src/JVX/components/util/NumberProperties.tsx b/src/JVX/components/util/NumberProperties.tsx new file mode 100644 index 00000000..019393db --- /dev/null +++ b/src/JVX/components/util/NumberProperties.tsx @@ -0,0 +1,38 @@ +import { ScaleType } from "../editors/number/UIEditorNumber"; + +export function getGrouping(numberFormat:string) { + return numberFormat.includes(','); +} + +export function getMinimumIntDigits(numberFormat:string, value:any) { + let count = (numberFormat.split('.')[0].match(/0/g) || []).length; + if (count - (value ? value.toString().length : 0) > 0) + return '0'.repeat(count - (value ? value.toString().length : 0)) + else + return undefined; +} + +export function getScaleDigits(numberFormat:string, scale:number) { + let count = numberFormat.includes('.') ? (numberFormat.split('.')[1].match(/0/g) || []).length : 0; + return scale === -1 ? {minScale: count, maxScale:20} : {minScale: count, maxScale: scale} +} + +export function getNumberLength(scaleDigits:ScaleType, precision:number, scale:number, grouping:boolean, minInt:string|undefined) { + let returnLength:number|undefined = undefined; + if (scaleDigits.maxScale === 0) + returnLength = precision; + else if (precision !== 0 && scale !== -1) + returnLength = precision+1; + if (grouping && returnLength) + returnLength += Math.floor((precision - scale)/4) + if (minInt && returnLength) + returnLength += minInt.length + return returnLength +} + +export function getDecimalLength(precision:number, scale:number) { + if (precision > 0) + return precision - scale +else + return undefined +} \ No newline at end of file