Skip to content

Commit

Permalink
inputNumber
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximilianweidenauer
maximilianweidenauer committed Feb 12, 2021
1 parent 5f89e41 commit b6690b8
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 41 deletions.
10 changes: 8 additions & 2 deletions src/JVX/ContentStore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@ export default class ContentStore{

LOGO_BIG:string = "/assets/logo_big.png";
LOGO_SMALL:string = "/assets/logo_small.png";
LOGO_LOGIN:string = "/assets/logo_login.png"
LOGO_LOGIN:string = "/assets/logo_login.png";
locale:string = "de-DE";
menuCollapsed:boolean = window.innerWidth <= 1030 ? true : false;
menuModeAuto:boolean = false;
menuOverlaying:boolean = true;
Expand Down Expand Up @@ -300,7 +301,12 @@ export default class ContentStore{
const children = new Map<string, BaseComponent>();
let entry = componentEntries.next();
while (!entry.done){
if(entry.value[1].parent === parentId && entry.value[1].visible !== false){
if (parentId.includes("TP")) {
if(entry.value[1].parent === parentId) {
children.set(entry.value[1].id, entry.value[1]);
}
}
else if(entry.value[1].parent === parentId && entry.value[1].visible !== false){
children.set(entry.value[1].id, entry.value[1]);
}
entry = componentEntries.next();
Expand Down
2 changes: 1 addition & 1 deletion src/JVX/components/buttons/button/UIButton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@

.p-button-icon-only {
.rc-button-icon {
margin: 0 !important;
margin: calc(var(--btnPTB) * -1) calc(var(--btnPLR) * -1) !important;
}
}
2 changes: 1 addition & 1 deletion src/JVX/components/editors/linked/UIEditorLinked.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const UIEditorLinked: FC<IEditorLinked> = (baseProps) => {
}
},[onLoadCallback, id, props.preferredSize, props.maximumSize, props.minimumSize]);

useLayoutEffect(() => {
useEffect(() => {
const autoRef:any = inputRef.current
if (autoRef) {
autoRef.inputEl.style.setProperty('background', props.cellEditor_background_);
Expand Down
93 changes: 64 additions & 29 deletions src/JVX/components/editors/number/UIEditorNumber.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {FC, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
import React, {FC, useContext, useLayoutEffect, useMemo, useRef, useState} from "react";
import {InputNumber} from "primereact/inputnumber";
import {ICellEditor, IEditor} from "../IEditor";
import {LayoutContext} from "../../../LayoutContext";
Expand All @@ -14,14 +14,21 @@ import { parseJVxSize } from "../../util/parseJVxSize";
import { getEditorCompId } from "../../util/GetEditorCompId";

interface ICellEditorNumber extends ICellEditor{
scale?: number,
length?: number,
precision?: number,
preferredEditorMode?: number
numberFormat: string,
preferredEditorMode?: number,
}

export interface IEditorNumber extends IEditor{
cellEditor: ICellEditorNumber
label: string
length: number,
precision: number,
scale: number,
}

interface ScaleType {
minScale:number,
maxScale:number,
}

const UIEditorNumber: FC<IEditorNumber> = (baseProps) => {
Expand All @@ -32,17 +39,49 @@ const UIEditorNumber: FC<IEditorNumber> = (baseProps) => {
const [props] = useProperties<IEditorNumber>(baseProps.id, baseProps);
const compId = getEditorCompId(props.id, context.contentStore, props.dataRow);
const [selectedRow] = useRowSelect(compId, props.dataRow, props.columnName);
const [value, setValue] = useState<number>(selectedRow)
const lastValue = useRef<any>();
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 = useMemo(() => cellEditorMetaData.cellEditor.scale !== undefined ? (cellEditorMetaData.cellEditor.scale < 0 ? 2 : cellEditorMetaData.cellEditor.scale) : undefined, [cellEditorMetaData.cellEditor.scale]);
const length = useMemo(() => cellEditorMetaData.cellEditor.precision ? (scaleDigits === 0 ? cellEditorMetaData.cellEditor.precision : cellEditorMetaData.cellEditor.precision+1) : null, [cellEditorMetaData.cellEditor.precision, scaleDigits]);

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 decimalLength = useMemo(() => {
if (cellEditorMetaData.precision > 0)
return cellEditorMetaData.precision - cellEditorMetaData.scale
else
return undefined
},[cellEditorMetaData.precision, cellEditorMetaData.scale]);

useLayoutEffect(() => {
//@ts-ignore
let currElem = inputRef.current.inputEl;
if(currElem){
currElem.setAttribute('maxlength', length);
currElem.style.setProperty('background', props.cellEditor_background_);
currElem.style.setProperty('text-align', checkCellEditorAlignments(props).ha);
}
Expand All @@ -56,43 +95,39 @@ const UIEditorNumber: FC<IEditorNumber> = (baseProps) => {
},[onLoadCallback, id, props.preferredSize, props.maximumSize, props.minimumSize]);

useLayoutEffect(() => {
setValue(selectedRow)
lastValue.current = selectedRow;
},[selectedRow]);

useEffect(() => {
const handleKeyDown = (e:any) => {
const curRef = inputRef.current
//@ts-ignore
curRef.inputEl.setAttribute('maxlength', length);
console.log(curRef.inputEl.value.length, length)
handleEnterKey(e, () => sendSetValues(props.dataRow, props.name, props.columnName, selectedRow, lastValue.current, context.server));
//@ts-ignore
inputRef.current.inputEl.onkeydown = (event) => {
handleEnterKey(event, () => sendSetValues(props.dataRow, props.name, props.columnName, selectedRow, lastValue.current, context.server));
//@ts-ignore
if (curRef.inputEl.value.length === curRef.inputEl.maxLength) {
return false;
}
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))) {
e.preventDefault();
return false;
}
});
}

useEffect(() => {
if(baseProps.autoFocus) {
//@ts-ignore
inputRef.current?.inputEl?.focus?.()
}
}, [baseProps.autoFocus])
console.log(selectedRow, prefixLength)

return (
<InputNumber
ref={inputRef}
className="rc-editor-number"
mode="decimal"
useGrouping={false}
minFractionDigits={scaleDigits}
maxFractionDigits={scaleDigits}
value={selectedRow}
useGrouping={useGrouping}
locale={context.contentStore.locale}
prefix={prefixLength}
minFractionDigits={scaleDigits.minScale}
maxFractionDigits={scaleDigits.maxScale}
value={value}
style={layoutValue.get(props.id) || baseProps.editorStyle}
onChange={event => onBlurCallback(baseProps, selectedRow, lastValue.current, () => sendSetValues(props.dataRow, props.name, props.columnName, event.value, lastValue.current, context.server))}
onBlur={() => onBlurCallback(baseProps, selectedRow, lastValue.current, () => sendSetValues(props.dataRow, props.name, props.columnName, selectedRow, lastValue.current, context.server))}
onChange={event => setValue(event.value)}
onBlur={() => onBlurCallback(baseProps, value, lastValue.current, () => sendSetValues(props.dataRow, props.name, props.columnName, value, lastValue.current, context.server))}
disabled={!props.cellEditor_editable_}
onKeyDown={handleKeyDown}
/>
)
}
Expand Down
13 changes: 5 additions & 8 deletions src/JVX/components/editors/text/UIEditorText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,17 @@ const UIEditorText: FC<IEditorText> = (baseProps) => {

useLayoutEffect(() => {
//@ts-ignore
let currElem = inputRef.current.element;
const currElem = inputRef.current.element
if(currElem){
if (props.borderVisible === false && !currElem.classList.contains("invisible-border"))
currElem.classList.add("invisible-border");
currElem.style.setProperty('background', props.cellEditor_background_);
currElem.style.setProperty('text-align', checkCellEditorAlignments(props).ha);
}
});

useLayoutEffect(() => {
if(onLoadCallback && inputRef.current){
//@ts-ignore
const currElem = inputRef.current.element
if (props.borderVisible === false && !currElem.classList.contains("invisible-border")) {
currElem.classList.add("invisible-border");
}
if(onLoadCallback && inputRef.current) {
if (props.cellEditor.contentType?.includes("password")) {
//@ts-ignore
sendOnLoadCallback(id, parseJVxSize(props.preferredSize), parseJVxSize(props.maximumSize), parseJVxSize(props.minimumSize), inputRef.current.inputEl, onLoadCallback)
Expand All @@ -64,7 +61,7 @@ const UIEditorText: FC<IEditorText> = (baseProps) => {
sendOnLoadCallback(id, parseJVxSize(props.preferredSize), parseJVxSize(props.maximumSize), parseJVxSize(props.minimumSize), inputRef.current.element, onLoadCallback)
}
}
},[onLoadCallback, id, props.borderVisible, props.cellEditor.contentType, props.preferredSize, props.maximumSize, props.minimumSize]);
},[onLoadCallback, id, props.cellEditor.contentType, props.preferredSize, props.maximumSize, props.minimumSize]);

useLayoutEffect(() => {
setText(selectedRow);
Expand Down

0 comments on commit b6690b8

Please sign in to comment.