robossembler/webstudio
7
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

CoreInput form error adding

Browse source
This commit is contained in:
IDONTSUDO 2024-04-12 20:43:36 +03:00
parent 27763fc8d2
commit c10cdb8158
6 changed files with 45 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

1
p.ts Normal file
View file

@ -0,0 +1 @@

1
ui/src/core/extensions/extensions.ts
View file

@ -25,6 +25,7 @@ declare global {
fromArray(): number[];
toPx(): string;
unixFromDate(): string;
isValid(str: string): boolean;
}
interface String {

6
ui/src/core/extensions/number.ts
View file

@ -18,4 +18,10 @@ export const NumberExtensions = () => {
return `${date.getUTCFullYear()}.${date.getMonth()}.${date.getDay()} ${date.getHours()}:${date.getMinutes()}`;
};
}
if (Number().isValid === undefined) {
// eslint-disable-next-line no-extend-native
Number.prototype.isValid = function (str: string) {
return !isNaN(Number(str));
};
}
};

22
ui/src/core/ui/form_builder/form_builder.tsx
View file

@ -39,20 +39,20 @@ export const FormBuilder = observer((props: IFormBuilder) => {
value={element.totalValue ?? element.defaultValue}
onChange={(value) => store.changeTotalValue(element.id, value)}
label={element.name}
style={{ margin: 10 }}
style={{ margin: 20 }}
/>
);
}
if (element.type.isEqual(InputType.ARRAY)) {
return (
<div style={{ border: "1px black solid", margin: 10 }}>
<div style={{ border: "1px black solid", margin: 20 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
margin: 10,
margin: 20,
alignItems: "center",
paddingRight: 10,
paddingRight: 20,
}}
onClick={() => {
store.open(element.id);
@ -63,15 +63,15 @@ export const FormBuilder = observer((props: IFormBuilder) => {
</div>
{element.isOpen ? (
<div style={{ margin: 10 }}>
<div style={{ margin: 20 }}>
{element.totalValue instanceof Array
? element.totalValue?.map((subArray, index) => {
return (
<div style={{ margin: 10 }}>
<div style={{ margin: 20 }}>
<div style={{ display: "flex" }}>
<CoreText text={(element.subType ?? "") + ` ${index}`} type={CoreTextType.medium} />
<Icon
style={{ paddingLeft: 10 }}
style={{ paddingLeft: 20 }}
type="DeleteCircle"
onClick={() => store.deleteTotalValueSubItem(element.id, index)}
/>
@ -101,9 +101,10 @@ export const FormBuilder = observer((props: IFormBuilder) => {
}}
validation={
subSubArrayItem.type.isEqual(InputType.NUMBER)
? store.numberValidation
? (el) => Number().isValid(el)
: undefined
}
error="только числа"
value={subSubArrayItem.defaultValue}
label={subSubArrayItem.name}
/>
@ -126,13 +127,14 @@ export const FormBuilder = observer((props: IFormBuilder) => {
return (
<div>
<CoreInput
validation={element.type.isEqual(InputType.NUMBER) ? store.numberValidation : undefined}
validation={element.type.isEqual(InputType.NUMBER) ? (el) => Number().isValid(el) : undefined}
onChange={(e) => {
store.changeTotalValue(element.id, e);
}}
value={element.defaultValue}
error="только числа"
label={element.name}
style={{ margin: 10 }}
style={{ margin: 20 }}
/>
</div>
);

36
ui/src/core/ui/input/input.tsx
View file

@ -6,11 +6,20 @@ interface IInputProps {
value?: string;
onChange?: (value: string) => void;
style?: React.CSSProperties;
validation?: RegExp;
validation?: (value: string) => boolean;
error?: string;
}
export const CoreInput = (props: IInputProps) => {
const [value, setValue] = React.useState<string | undefined>(() => props.value);
const [value, setValue] = React.useState<string>(() => props.value ?? "");
const ref = React.useRef<HTMLDivElement>(null);
const [isAppendInnerText, setAppendInnerText] = React.useState(true);
React.useEffect(() => {
if (ref.current && isAppendInnerText) {
ref.current.innerText = value;
setAppendInnerText(false);
}
}, [ref, value, isAppendInnerText, setAppendInnerText]);
return (
<div
@ -28,20 +37,17 @@ export const CoreInput = (props: IInputProps) => {
<CoreText type={CoreTextType.small} text={props.label} />
<div
ref={ref}
onInput={(e) => {
// setValue(e.)
if (e.currentTarget.textContent) {
setValue(e.currentTarget.textContent);
if (
props.validation !== undefined &&
props.validation?.test(e.currentTarget.textContent) &&
props.onChange
) {
props.onChange(e.currentTarget.textContent);
if (props.validation !== undefined && props.validation(value) && props.onChange) {
props.onChange(value);
return;
}
if (props.onChange) {
props.onChange(e.currentTarget.textContent);
if (props.onChange && props.validation === undefined) {
props.onChange(value);
return;
}
}
@ -49,7 +55,13 @@ export const CoreInput = (props: IInputProps) => {
style={{ fontSize: 16, fontFamily: "Roboto", color: "#1D1B20", height: 24 }}
contentEditable="true"
/>
{props.validation?.test(value ?? "") ?? false ? <div>Error</div> : null}
{value ? (
props.validation ? (
props.validation(value) ? null : (
<div style={{ color: "#ff1d0c" }}>{props.error ? props.error : "error"}</div>
)
) : null
) : null}
</div>
);
};

2
ui/src/features/dataset/dataset_model.ts
View file

@ -108,7 +108,7 @@ export const datasetFormMockResult = `{
},
"camera_position":{
"center_shell": [\${CENTER_SHELL_1:number:0}, \${CENTER_SHELL_2:number:0}, \${CENTER_SHELL_3:number:0}],
"radius_range": [\${RADIUS_RANGE_1:number:0.4}, \${RADIUS_RANGE_2:number:1.4}],
"radius_range": [\${RADIUS_RANGE_1:number:1}, \${RADIUS_RANGE_2:number:1.4}],
"elevation_range": [\${ELEVATION_RANGE_1:number:10}, \${ELEVATION_RANGE_2:number:90}]
},
"generation":{