mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 14:49:07 +00:00
fix basic form
This commit is contained in:
Simon Larsen
parent
6c17d992fc
commit
9872eec31a
@ -96,9 +96,9 @@ const LoginPage: FunctionComponent = () => {
|
||||
<div className="text-gray-500 text-sm">
|
||||
Please sign in with your username
|
||||
and password. Once you have signed
|
||||
in, you'll be able to sign in via
|
||||
SSO that's configured for your
|
||||
project.
|
||||
in, you'll be able to sign in
|
||||
via SSO that's configured for
|
||||
your project.
|
||||
</div>
|
||||
)}
|
||||
</p>
|
||||
|
||||
@ -6,8 +6,8 @@ export default class ArrayUtil {
|
||||
}
|
||||
|
||||
// Sort both arrays by their JSON representation
|
||||
const sortedArr1 = JSON.stringify([...a].sort());
|
||||
const sortedArr2 = JSON.stringify([...b].sort());
|
||||
const sortedArr1: string = JSON.stringify([...a].sort());
|
||||
const sortedArr2: string = JSON.stringify([...b].sort());
|
||||
|
||||
// Compare the sorted arrays
|
||||
return sortedArr1 === sortedArr2;
|
||||
|
||||
@ -15,7 +15,6 @@ export interface ComponentProps {
|
||||
placeholder?: undefined | string;
|
||||
className?: undefined | string;
|
||||
onChange?: undefined | ((value: string) => void);
|
||||
value?: string | undefined;
|
||||
readOnly?: boolean | undefined;
|
||||
type: CodeType;
|
||||
onFocus?: (() => void) | undefined;
|
||||
@ -33,6 +32,9 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
|
||||
const [placeholder, setPlaceholder] = useState<string>('');
|
||||
const [helpText, setHelpText] = useState<string>('');
|
||||
|
||||
const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
|
||||
useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.placeholder) {
|
||||
if (props.type === CodeType.Markdown) {
|
||||
@ -74,26 +76,9 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
|
||||
const [value, setValue] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
props.onChange && props.onChange(value);
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.initialValue) {
|
||||
setValue(props.initialValue);
|
||||
}
|
||||
|
||||
if (props.value) {
|
||||
setValue(props.value);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(props.value ? props.value : '');
|
||||
}, [props.value]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.initialValue) {
|
||||
if (props.initialValue && !isInitialValuesInitialized) {
|
||||
setValue(props.initialValue);
|
||||
setIsInitialValuesInitialized(true);
|
||||
}
|
||||
}, [props.initialValue]);
|
||||
|
||||
@ -123,6 +108,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
|
||||
|
||||
setValue(code);
|
||||
props.onBlur && props.onBlur();
|
||||
props.onChange && props.onChange(value);
|
||||
}}
|
||||
defaultValue={props.initialValue || placeholder || ''}
|
||||
className={className}
|
||||
|
||||
@ -137,7 +137,7 @@ const Detail: Function = (props: ComponentProps): ReactElement => {
|
||||
<CodeEditor
|
||||
type={codeType}
|
||||
readOnly={true}
|
||||
value={data as string}
|
||||
initialValue={data as string}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@ import React, {
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import ArrayUtil from 'Common/Types/ArrayUtil';
|
||||
|
||||
export type DropdownValue = string | number | boolean;
|
||||
|
||||
@ -41,9 +40,8 @@ const Dropdown: FunctionComponent<ComponentProps> = (
|
||||
DropdownOption | Array<DropdownOption> | null
|
||||
>(null);
|
||||
|
||||
const [initialValueSet, setInitialValueSet] = useState<
|
||||
DropdownOption | Array<DropdownOption> | undefined
|
||||
>(undefined);
|
||||
const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
|
||||
useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.initialValue) {
|
||||
@ -62,23 +60,10 @@ const Dropdown: FunctionComponent<ComponentProps> = (
|
||||
}, [props.value]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
Array.isArray(initialValueSet) ||
|
||||
Array.isArray(props.initialValue)
|
||||
) {
|
||||
if (
|
||||
!ArrayUtil.isEqual(
|
||||
Array.isArray(initialValueSet) ? initialValueSet : [],
|
||||
Array.isArray(props.initialValue) ? props.initialValue : []
|
||||
)
|
||||
) {
|
||||
setValue(props.initialValue || null);
|
||||
}
|
||||
} else if (initialValueSet !== props.initialValue) {
|
||||
setValue(props.initialValue || null);
|
||||
if (props.initialValue && !isInitialValuesInitialized) {
|
||||
setValue(props.initialValue);
|
||||
setIsInitialValuesInitialized(true);
|
||||
}
|
||||
|
||||
setInitialValueSet(props.initialValue);
|
||||
}, [props.initialValue]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -88,7 +73,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
|
||||
|
||||
if (typeof value === 'string') {
|
||||
dropdownValue =
|
||||
props.options.find(i => {
|
||||
props.options.find((i: DropdownOption) => {
|
||||
return i.value === value;
|
||||
}) || null;
|
||||
}
|
||||
@ -102,7 +87,7 @@ const Dropdown: FunctionComponent<ComponentProps> = (
|
||||
| DropdownOption
|
||||
| Array<DropdownOption>
|
||||
| null =
|
||||
props.options.find((i) => {
|
||||
props.options.find((i: DropdownOption) => {
|
||||
return i.value === item;
|
||||
}) || null;
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, {
|
||||
forwardRef,
|
||||
ForwardRefExoticComponent,
|
||||
ReactElement,
|
||||
Ref,
|
||||
useEffect,
|
||||
@ -9,7 +10,6 @@ import React, {
|
||||
import Button, { ButtonStyleType } from '../Button/Button';
|
||||
import FormValues from './Types/FormValues';
|
||||
import Fields from './Types/Fields';
|
||||
import DataField from './Types/Field';
|
||||
import ButtonTypes from '../Button/ButtonTypes';
|
||||
import BadDataException from 'Common/Types/Exception/BadDataException';
|
||||
import { JSONObject, JSONValue } from 'Common/Types/JSON';
|
||||
@ -97,7 +97,7 @@ function getFieldType(fieldType: FormFieldSchemaType): string {
|
||||
}
|
||||
}
|
||||
|
||||
const BasicForm: Function = forwardRef(
|
||||
const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
|
||||
<T extends Object>(
|
||||
props: ComponentProps<T>,
|
||||
ref: Ref<any>
|
||||
@ -110,11 +110,19 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const [formFields, setFormFields] = useState<Fields<T>>([]);
|
||||
|
||||
const setFieldTouched = (fieldName: string, value: boolean) => {
|
||||
const setFieldTouched: Function = (
|
||||
fieldName: string,
|
||||
value: boolean
|
||||
): void => {
|
||||
setTouched({ ...touched, [fieldName]: value });
|
||||
};
|
||||
|
||||
const [isInitialValuesInitialized, setIsInitialValuesInitialized] = useState<boolean>(false);
|
||||
const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
|
||||
useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
validate(currentValue);
|
||||
}, [currentValue]);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
@ -129,10 +137,7 @@ const BasicForm: Function = forwardRef(
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
console.log(props.fields);
|
||||
setFormFields([...props.fields]);
|
||||
|
||||
}, [props.fields]);
|
||||
|
||||
const getFieldName: Function = (field: Field<T>): string => {
|
||||
@ -153,12 +158,14 @@ const BasicForm: Function = forwardRef(
|
||||
setTouched(touchedObj);
|
||||
};
|
||||
|
||||
const setFieldValue = (fieldName: string, value: JSONValue) => {
|
||||
const setFieldValue: Function = (
|
||||
fieldName: string,
|
||||
value: JSONValue
|
||||
): void => {
|
||||
setCurrentValue({ ...currentValue, [fieldName]: value as any });
|
||||
if (props.onChange) {
|
||||
props.onChange(currentValue);
|
||||
}
|
||||
validate(currentValue);
|
||||
};
|
||||
|
||||
const submitForm: Function = (): void => {
|
||||
@ -201,7 +208,7 @@ const BasicForm: Function = forwardRef(
|
||||
};
|
||||
|
||||
const getFormField: Function = (
|
||||
field: DataField<T>,
|
||||
field: Field<T>,
|
||||
index: number,
|
||||
isDisabled: boolean,
|
||||
errors: Dictionary<string>,
|
||||
@ -220,7 +227,7 @@ const BasicForm: Function = forwardRef(
|
||||
if (props.showAsColumns && props.showAsColumns > 2) {
|
||||
throw new BadDataException(
|
||||
'showAsCOlumns should be <= 2. It is currently ' +
|
||||
props.showAsColumns
|
||||
props.showAsColumns
|
||||
);
|
||||
}
|
||||
|
||||
@ -278,10 +285,6 @@ const BasicForm: Function = forwardRef(
|
||||
: undefined
|
||||
}
|
||||
onChange={async (value: Color | null) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
setFieldTouched(fieldName, true);
|
||||
@ -290,7 +293,7 @@ const BasicForm: Function = forwardRef(
|
||||
placeholder={field.placeholder || ''}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
@ -299,71 +302,71 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
{(field.fieldType === FormFieldSchemaType.Dropdown ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.MultiSelectDropdown) && (
|
||||
<Dropdown
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
tabIndex={index}
|
||||
onChange={async (
|
||||
value:
|
||||
| DropdownValue
|
||||
| Array<DropdownValue>
|
||||
| null
|
||||
) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
FormFieldSchemaType.MultiSelectDropdown) && (
|
||||
<Dropdown
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
tabIndex={index}
|
||||
onChange={async (
|
||||
value:
|
||||
| DropdownValue
|
||||
| Array<DropdownValue>
|
||||
| null
|
||||
) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
isMultiSelect={
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.MultiSelectDropdown
|
||||
}
|
||||
options={field.dropdownOptions || []}
|
||||
placeholder={field.placeholder || ''}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
isMultiSelect={
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.MultiSelectDropdown
|
||||
}
|
||||
options={field.dropdownOptions || []}
|
||||
placeholder={field.placeholder || ''}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.fieldType ===
|
||||
FormFieldSchemaType.RadioButton && (
|
||||
<RadioButtons
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
options={field.radioButtonOptions || []}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<RadioButtons
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
options={field.radioButtonOptions || []}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.fieldType === FormFieldSchemaType.LongText && (
|
||||
<TextArea
|
||||
@ -375,10 +378,6 @@ const BasicForm: Function = forwardRef(
|
||||
}
|
||||
tabIndex={index}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
@ -387,7 +386,7 @@ const BasicForm: Function = forwardRef(
|
||||
}}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
@ -405,10 +404,6 @@ const BasicForm: Function = forwardRef(
|
||||
type={CodeType.JSON}
|
||||
tabIndex={index}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
@ -417,7 +412,7 @@ const BasicForm: Function = forwardRef(
|
||||
}}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
@ -435,10 +430,6 @@ const BasicForm: Function = forwardRef(
|
||||
tabIndex={index}
|
||||
type={CodeType.Markdown}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
@ -447,7 +438,7 @@ const BasicForm: Function = forwardRef(
|
||||
}}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
@ -458,110 +449,15 @@ const BasicForm: Function = forwardRef(
|
||||
{(field.fieldType === FormFieldSchemaType.HTML ||
|
||||
field.fieldType === FormFieldSchemaType.CSS ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.JavaScript) && (
|
||||
<CodeEditor
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
tabIndex={index}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
type={codeType}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
placeholder={field.placeholder || ''}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(field.fieldType === FormFieldSchemaType.File ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.ImageFile) && (
|
||||
<FilePicker
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
tabIndex={index}
|
||||
onChange={async (files: Array<FileModel>) => {
|
||||
let fileResult:
|
||||
| FileModel
|
||||
| Array<FileModel>
|
||||
| null = files.map((i: FileModel) => {
|
||||
const strippedModel: FileModel =
|
||||
new FileModel();
|
||||
strippedModel._id = i._id!;
|
||||
return strippedModel;
|
||||
});
|
||||
|
||||
if (
|
||||
(field.fieldType ===
|
||||
FormFieldSchemaType.File ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.ImageFile) &&
|
||||
Array.isArray(fileResult)
|
||||
) {
|
||||
if (fileResult.length > 0) {
|
||||
fileResult =
|
||||
fileResult[0] as FileModel;
|
||||
} else {
|
||||
fileResult = null;
|
||||
}
|
||||
}
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
fieldName: fileResult,
|
||||
});
|
||||
field.onChange &&
|
||||
field.onChange(fileResult);
|
||||
setFieldValue(fieldName, fileResult);
|
||||
}}
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
mimeTypes={
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.ImageFile
|
||||
? [
|
||||
MimeType.png,
|
||||
MimeType.jpeg,
|
||||
MimeType.jpg,
|
||||
]
|
||||
: []
|
||||
}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: []
|
||||
}
|
||||
placeholder={field.placeholder || ''}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.fieldType === FormFieldSchemaType.Toggle && (
|
||||
<Toggle
|
||||
FormFieldSchemaType.JavaScript) && (
|
||||
<CodeEditor
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
onChange={async (value: boolean) => {
|
||||
tabIndex={index}
|
||||
onChange={async (value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
@ -572,12 +468,103 @@ const BasicForm: Function = forwardRef(
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
type={codeType}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName] &&
|
||||
((currentValue as any)[fieldName] ===
|
||||
true ||
|
||||
(currentValue as any)[fieldName] ===
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: ''
|
||||
}
|
||||
placeholder={field.placeholder || ''}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(field.fieldType === FormFieldSchemaType.File ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.ImageFile) && (
|
||||
<FilePicker
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
tabIndex={index}
|
||||
onChange={async (files: Array<FileModel>) => {
|
||||
let fileResult:
|
||||
| FileModel
|
||||
| Array<FileModel>
|
||||
| null = files.map((i: FileModel) => {
|
||||
const strippedModel: FileModel =
|
||||
new FileModel();
|
||||
strippedModel._id = i._id!;
|
||||
return strippedModel;
|
||||
});
|
||||
|
||||
if (
|
||||
(field.fieldType ===
|
||||
FormFieldSchemaType.File ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.ImageFile) &&
|
||||
Array.isArray(fileResult)
|
||||
) {
|
||||
if (fileResult.length > 0) {
|
||||
fileResult =
|
||||
fileResult[0] as FileModel;
|
||||
} else {
|
||||
fileResult = null;
|
||||
}
|
||||
}
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
fieldName: fileResult,
|
||||
});
|
||||
field.onChange &&
|
||||
field.onChange(fileResult);
|
||||
setFieldValue(fieldName, fileResult);
|
||||
}}
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
mimeTypes={
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.ImageFile
|
||||
? [
|
||||
MimeType.png,
|
||||
MimeType.jpeg,
|
||||
MimeType.jpg,
|
||||
]
|
||||
: []
|
||||
}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: []
|
||||
}
|
||||
placeholder={field.placeholder || ''}
|
||||
/>
|
||||
)}
|
||||
|
||||
{field.fieldType === FormFieldSchemaType.Toggle && (
|
||||
<Toggle
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
onChange={async (value: boolean) => {
|
||||
field.onChange && field.onChange(value);
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
onBlur={async () => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName] &&
|
||||
((currentValue as any)[fieldName] ===
|
||||
true ||
|
||||
(currentValue as any)[fieldName] ===
|
||||
false)
|
||||
? (currentValue as any)[fieldName]
|
||||
: field.defaultValue || false
|
||||
@ -595,47 +582,47 @@ const BasicForm: Function = forwardRef(
|
||||
field.fieldType === FormFieldSchemaType.Number ||
|
||||
field.fieldType === FormFieldSchemaType.Password ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.EncryptedText ||
|
||||
FormFieldSchemaType.EncryptedText ||
|
||||
field.fieldType === FormFieldSchemaType.Date ||
|
||||
field.fieldType === FormFieldSchemaType.DateTime ||
|
||||
field.fieldType === FormFieldSchemaType.Port ||
|
||||
field.fieldType === FormFieldSchemaType.Phone ||
|
||||
field.fieldType === FormFieldSchemaType.Domain ||
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.PositveNumber) && (
|
||||
<Input
|
||||
autoFocus={index === 1}
|
||||
tabIndex={index}
|
||||
disabled={isDisabled || field.disabled}
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
dataTestId={fieldType}
|
||||
type={fieldType as InputType}
|
||||
onChange={(value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
onEnterPress={() => {
|
||||
submitForm();
|
||||
}}
|
||||
onBlur={() => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: field.defaultValue || ''
|
||||
}
|
||||
placeholder={field.placeholder || ''}
|
||||
/>
|
||||
)}
|
||||
FormFieldSchemaType.PositveNumber) && (
|
||||
<Input
|
||||
autoFocus={index === 1}
|
||||
tabIndex={index}
|
||||
disabled={isDisabled || field.disabled}
|
||||
error={
|
||||
touched[fieldName] && errors[fieldName]
|
||||
? errors[fieldName]
|
||||
: undefined
|
||||
}
|
||||
dataTestId={fieldType}
|
||||
type={fieldType as InputType}
|
||||
onChange={(value: string) => {
|
||||
setCurrentValue({
|
||||
...currentValue,
|
||||
[fieldName]: value,
|
||||
});
|
||||
setFieldValue(fieldName, value);
|
||||
}}
|
||||
onEnterPress={() => {
|
||||
submitForm();
|
||||
}}
|
||||
onBlur={() => {
|
||||
setFieldTouched(fieldName, true);
|
||||
}}
|
||||
initialValue={
|
||||
currentValue &&
|
||||
(currentValue as any)[fieldName]
|
||||
? (currentValue as any)[fieldName]
|
||||
: field.defaultValue || ''
|
||||
}
|
||||
placeholder={field.placeholder || ''}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -643,20 +630,22 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const validateLength: Function = (
|
||||
content: string,
|
||||
field: DataField<T>
|
||||
field: Field<T>
|
||||
): string | null => {
|
||||
if (field.validation) {
|
||||
if (field.validation.minLength) {
|
||||
if (content.trim().length < field.validation?.minLength) {
|
||||
return `${field.title || name} cannot be less than ${field.validation.minLength
|
||||
} characters.`;
|
||||
return `${field.title || name} cannot be less than ${
|
||||
field.validation.minLength
|
||||
} characters.`;
|
||||
}
|
||||
}
|
||||
|
||||
if (field.validation.maxLength) {
|
||||
if (content.trim().length > field.validation?.maxLength) {
|
||||
return `${field.title || name} cannot be more than ${field.validation.maxLength
|
||||
} characters.`;
|
||||
return `${field.title || name} cannot be more than ${
|
||||
field.validation.maxLength
|
||||
} characters.`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -668,15 +657,17 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
if (field.validation.noSpecialCharacters) {
|
||||
if (!content.match(/^[A-Za-z0-9]*$/)) {
|
||||
return `${field.title || name
|
||||
} should not have special characters.`;
|
||||
return `${
|
||||
field.title || name
|
||||
} should not have special characters.`;
|
||||
}
|
||||
}
|
||||
|
||||
if (field.validation.noNumbers) {
|
||||
if (!content.match(/^[A-Za-z]*$/)) {
|
||||
return `${field.title || name
|
||||
} should not have numbers.`;
|
||||
return `${
|
||||
field.title || name
|
||||
} should not have numbers.`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -685,13 +676,14 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const validateDate: Function = (
|
||||
content: string,
|
||||
field: DataField<T>
|
||||
field: Field<T>
|
||||
): string | null => {
|
||||
if (field.validation) {
|
||||
if (field.validation.dateShouldBeInTheFuture) {
|
||||
if (OneUptimeDate.isInThePast(content.trim())) {
|
||||
return `${field.title || name
|
||||
} should be a future date.`;
|
||||
return `${
|
||||
field.title || name
|
||||
} should be a future date.`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -700,7 +692,7 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const validateMaxValueAndMinValue: Function = (
|
||||
content: string | number,
|
||||
field: DataField<T>
|
||||
field: Field<T>
|
||||
): string | null => {
|
||||
if (field.validation) {
|
||||
if (typeof content === 'string') {
|
||||
@ -713,17 +705,21 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
if (field.validation.maxValue) {
|
||||
if (content > field.validation?.maxValue) {
|
||||
return `${field.title || name
|
||||
} should not be more than ${field.validation?.maxValue
|
||||
}.`;
|
||||
return `${
|
||||
field.title || name
|
||||
} should not be more than ${
|
||||
field.validation?.maxValue
|
||||
}.`;
|
||||
}
|
||||
}
|
||||
|
||||
if (field.validation.minValue) {
|
||||
if (content < field.validation?.minValue) {
|
||||
return `${field.title || name
|
||||
} should not be less than ${field.validation?.minValue
|
||||
}.`;
|
||||
return `${
|
||||
field.title || name
|
||||
} should not be less than ${
|
||||
field.validation?.minValue
|
||||
}.`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -732,7 +728,7 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const validateRequired: Function = (
|
||||
content: string,
|
||||
field: DataField<T>
|
||||
field: Field<T>
|
||||
): string | null => {
|
||||
if (field.required && (!content || content.length === 0)) {
|
||||
return `${field.title} is required.`;
|
||||
@ -742,7 +738,7 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const validateMatchField: Function = (
|
||||
content: string,
|
||||
field: DataField<T>,
|
||||
field: Field<T>,
|
||||
entity: JSONObject
|
||||
): string | null => {
|
||||
if (
|
||||
@ -760,7 +756,7 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
const validateData: Function = (
|
||||
content: string,
|
||||
field: DataField<T>
|
||||
field: Field<T>
|
||||
): string | null => {
|
||||
if (field.fieldType === FormFieldSchemaType.Email) {
|
||||
if (!Email.isValid(content!)) {
|
||||
@ -923,8 +919,6 @@ const BasicForm: Function = forwardRef(
|
||||
...customValidateResult,
|
||||
} as Dictionary<string>;
|
||||
|
||||
|
||||
|
||||
if (props.onFormValidationErrorChanged) {
|
||||
props.onFormValidationErrorChanged(
|
||||
Object.keys(totalValidationErrors).length !== 0
|
||||
@ -937,8 +931,7 @@ const BasicForm: Function = forwardRef(
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if(!props.initialValues || isInitialValuesInitialized){
|
||||
if (!props.initialValues || isInitialValuesInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -969,7 +962,7 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
if (
|
||||
field.fieldType ===
|
||||
FormFieldSchemaType.MultiSelectDropdown &&
|
||||
FormFieldSchemaType.MultiSelectDropdown &&
|
||||
(values as any)[fieldName]
|
||||
) {
|
||||
(values as any)[fieldName] = field.dropdownOptions?.filter(
|
||||
@ -1019,12 +1012,13 @@ const BasicForm: Function = forwardRef(
|
||||
|
||||
<div>
|
||||
<div
|
||||
className={`grid md:grid-cols-${props.showAsColumns || 1
|
||||
} grid-cols-1 gap-4`}
|
||||
className={`grid md:grid-cols-${
|
||||
props.showAsColumns || 1
|
||||
} grid-cols-1 gap-4`}
|
||||
>
|
||||
{formFields &&
|
||||
formFields.map(
|
||||
(field: DataField<T>, i: number) => {
|
||||
(field: Field<T>, i: number) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
{getFormField(
|
||||
@ -1095,4 +1089,6 @@ const BasicForm: Function = forwardRef(
|
||||
}
|
||||
);
|
||||
|
||||
BasicForm.displayName = 'BasicForm';
|
||||
|
||||
export default BasicForm;
|
||||
|
||||
@ -33,9 +33,13 @@ const ColorPicker: FunctionComponent<ComponentProps> = (
|
||||
const { ref, isComponentVisible, setIsComponentVisible } =
|
||||
useComponentOutsideClick(false);
|
||||
|
||||
const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
|
||||
useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.initialValue) {
|
||||
if (props.initialValue && !isInitialValuesInitialized) {
|
||||
setColor(props.initialValue.toString());
|
||||
setIsInitialValuesInitialized(true);
|
||||
}
|
||||
}, [props.initialValue]);
|
||||
|
||||
|
||||
@ -85,9 +85,9 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
|
||||
onFormValidationErrorChanged={(
|
||||
hasError: boolean
|
||||
) => {
|
||||
|
||||
if (hasFormValidationErrors['id'] !== hasError) {
|
||||
|
||||
if (
|
||||
hasFormValidationErrors['id'] !== hasError
|
||||
) {
|
||||
setHasFormValidatonErrors({
|
||||
...hasFormValidationErrors,
|
||||
id: hasError,
|
||||
@ -135,10 +135,11 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
description: `${arg.required
|
||||
description: `${
|
||||
arg.required
|
||||
? 'Required'
|
||||
: 'Optional'
|
||||
}. ${arg.description}`,
|
||||
}. ${arg.description}`,
|
||||
field: {
|
||||
[arg.id]: true,
|
||||
},
|
||||
@ -149,8 +150,8 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
|
||||
component.arguments &&
|
||||
component.arguments[arg.id]
|
||||
? component.arguments[
|
||||
arg.id
|
||||
]
|
||||
arg.id
|
||||
]
|
||||
: null
|
||||
),
|
||||
};
|
||||
|
||||
@ -101,7 +101,7 @@ export const componentInputTypeToFormFieldType: Function = (
|
||||
},
|
||||
{
|
||||
label: 'Every Six Months',
|
||||
value: '0 0 1 */3 *',
|
||||
value: '0 0 1 */6 *',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -115,6 +115,22 @@ const Workflows: FunctionComponent<PageComponentProps> = (
|
||||
title: 'Enabled',
|
||||
fieldType: FormFieldSchemaType.Toggle,
|
||||
},
|
||||
{
|
||||
field: {
|
||||
labels: true,
|
||||
},
|
||||
title: 'Labels ',
|
||||
description:
|
||||
'Team members with access to these labels will only be able to access this resource. This is optional and an advanced feature.',
|
||||
fieldType: FormFieldSchemaType.MultiSelectDropdown,
|
||||
dropdownModal: {
|
||||
type: Label,
|
||||
labelField: 'name',
|
||||
valueField: '_id',
|
||||
},
|
||||
required: false,
|
||||
placeholder: 'Labels',
|
||||
},
|
||||
]}
|
||||
showRefreshButton={true}
|
||||
showFilterButton={true}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user