PromucFlow_constructor/app/client/src/components/propertyControls/InputTextControl.tsx
2020-06-11 11:03:16 +00:00

108 lines
2.4 KiB
TypeScript

import React from "react";
import BaseControl, { ControlProps } from "./BaseControl";
import { StyledDynamicInput } from "./StyledControls";
import { InputType } from "widgets/InputWidget";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
export function InputText(props: {
label: string;
value: string;
onChange: (event: React.ChangeEvent<HTMLTextAreaElement> | string) => void;
isValid: boolean;
errorMessage?: string;
evaluatedValue?: any;
expected?: string;
placeholder?: string;
dataTreePath?: string;
}) {
const {
errorMessage,
expected,
value,
isValid,
onChange,
placeholder,
dataTreePath,
evaluatedValue,
} = props;
return (
<StyledDynamicInput>
<DynamicAutocompleteInput
input={{
value: value,
onChange: onChange,
}}
evaluatedValue={evaluatedValue}
expected={expected}
dataTreePath={dataTreePath}
meta={{
error: isValid ? "" : errorMessage,
touched: true,
}}
theme={"DARK"}
singleLine={false}
placeholder={placeholder}
/>
</StyledDynamicInput>
);
}
class InputTextControl extends BaseControl<InputControlProps> {
render() {
const {
errorMessage,
expected,
propertyValue,
isValid,
label,
placeholderText,
dataTreePath,
} = this.props;
return (
<InputText
label={label}
value={propertyValue}
onChange={this.onTextChange}
isValid={isValid}
errorMessage={errorMessage}
expected={expected}
placeholder={placeholderText}
dataTreePath={dataTreePath}
/>
);
}
isNumberType(): boolean {
const { inputType } = this.props;
switch (inputType) {
case "CURRENCY":
case "INTEGER":
case "NUMBER":
case "PHONE_NUMBER":
return true;
default:
return false;
}
}
onTextChange = (event: React.ChangeEvent<HTMLTextAreaElement> | string) => {
let value = event;
if (typeof event !== "string") {
value = event.target.value;
}
this.updateProperty(this.props.propertyName, value);
};
static getControlType() {
return "INPUT_TEXT";
}
}
export interface InputControlProps extends ControlProps {
placeholderText: string;
inputType: InputType;
isDisabled?: boolean;
}
export default InputTextControl;