PromucFlow_constructor/app/client/src/components/formControls/BaseControl.tsx

95 lines
2.4 KiB
TypeScript
Raw Normal View History

import { Component } from "react";
import { ControlType } from "constants/PropertyControlConstants";
import { InputType } from "components/constants";
import { ConditonalObject } from "reducers/evaluationReducers/formEvaluationReducer";
import { DropdownOption } from "components/ads/Dropdown";
feat: Switch to JSON view functionality for form components (#11786) * Update: Added flag check for evals - Only running init form evals if the form is of new UQI config * Create: Separated Form config logic - Created a new file to render the form configs of any form component * Update: Enum and getter for view types - Added enum for view types - Added a function to extract the view type of current component * Update: Handling initial values of form - Added checks and updated the default data tree for the components of UQI forms - This is to allow to switch these components to the new data type * Update: updated type of control data - Added viewTypes to the type of form component's control data * Create: Function to change viewType - Added function that will check the current data and switch to the new view type * Update FormControl.tsx - Split the logic of form config to a new file - Updated the memo component to a function so custom config can be passed in it - Added conditional check for the final component * Create: wrapper component to switch view - Component added to change between GUI and JSON view types * Update: Variable name for alternate view types - Changed variable name for alternate view types from viewTypes to alternateViewTypes * Update: Added checks to init section - Added a check for the required values in where clause component * Update: Usage of useMemo hook - Moved the useMemo hook to the top so it is not called conditionally * Update ToggleComponentToJson.tsx - Moved toggled input text view as a constant variable * Update utils.ts - Moved toggled input text view as a constant variable * Update actionProperties.ts - Added switched view type input text to binding path list Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-03-21 05:51:50 +00:00
import { ViewTypes } from "./utils";
// eslint-disable-next-line @typescript-eslint/ban-types
abstract class BaseControl<P extends ControlProps, S = {}> extends Component<
P,
S
> {
abstract getControlType(): ControlType;
}
export type ComparisonOperations =
| "EQUALS"
| "NOT_EQUALS"
| "LESSER"
| "GREATER"
| "IN"
| "NOT_IN";
2021-04-05 10:11:04 +00:00
export type HiddenType = boolean | Condition | ConditionObject;
2021-04-05 10:11:04 +00:00
export type ConditionObject = { conditionType: string; conditions: Conditions };
export type Condition = {
path: string;
comparison: ComparisonOperations;
value: any;
};
export type Conditions = Array<Condition> | ConditionObject;
export interface ControlBuilder<T extends ControlProps> {
buildPropertyControl(controlProps: T): JSX.Element;
}
export interface ControlProps extends ControlData, ControlFunctions {
key?: string;
extraData?: ControlData[];
formName: string;
nestedFormControl?: boolean;
}
export interface ControlData {
id: string;
label: string;
feat: Switch to JSON view functionality for form components (#11786) * Update: Added flag check for evals - Only running init form evals if the form is of new UQI config * Create: Separated Form config logic - Created a new file to render the form configs of any form component * Update: Enum and getter for view types - Added enum for view types - Added a function to extract the view type of current component * Update: Handling initial values of form - Added checks and updated the default data tree for the components of UQI forms - This is to allow to switch these components to the new data type * Update: updated type of control data - Added viewTypes to the type of form component's control data * Create: Function to change viewType - Added function that will check the current data and switch to the new view type * Update FormControl.tsx - Split the logic of form config to a new file - Updated the memo component to a function so custom config can be passed in it - Added conditional check for the final component * Create: wrapper component to switch view - Component added to change between GUI and JSON view types * Update: Variable name for alternate view types - Changed variable name for alternate view types from viewTypes to alternateViewTypes * Update: Added checks to init section - Added a check for the required values in where clause component * Update: Usage of useMemo hook - Moved the useMemo hook to the top so it is not called conditionally * Update ToggleComponentToJson.tsx - Moved toggled input text view as a constant variable * Update utils.ts - Moved toggled input text view as a constant variable * Update actionProperties.ts - Added switched view type input text to binding path list Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2022-03-21 05:51:50 +00:00
alternateViewTypes?: ViewTypes[];
tooltipText?: string;
configProperty: string;
controlType: ControlType;
propertyValue?: any;
isValid: boolean;
validationMessage?: string;
validationRegex?: string;
dataType?: InputType;
initialValue?:
| string
| boolean
| number
| Record<string, string>
| Array<string>;
info?: string; //helper text
isRequired?: boolean;
conditionals?: ConditonalObject; // Object that contains the conditionals config
hidden?: HiddenType;
placeholderText?: string;
schema?: any;
errorText?: string;
showError?: boolean;
encrypted?: boolean;
subtitle?: string;
url?: string;
urlText?: string;
logicalTypes?: string[];
comparisonTypes?: string[];
nestedLevels?: number;
customStyles?: any;
propertyName?: string;
identifier?: string;
sectionName?: string;
disabled?: boolean;
}
export type FormConfig = Omit<ControlData, "configProperty"> & {
configProperty?: string;
children?: FormConfig[];
options?: DropdownOption[];
};
export interface ControlFunctions {
onPropertyChange?: (propertyName: string, propertyValue: string) => void;
}
export default BaseControl;