diff options
| author | 2021-01-18 20:17:12 +0200 | |
|---|---|---|
| committer | 2021-01-18 20:17:12 +0200 | |
| commit | c1d3dbd8852c133a2d86ea0219ce19db8d829bd6 (patch) | |
| tree | bee505a0546f2163123280023d71dc1238ebec06 | |
| parent | Implement Select field required check (diff) | |
Merge on blur functions to one
| -rw-r--r-- | src/components/Question.tsx | 80 | 
1 files changed, 37 insertions, 43 deletions
| diff --git a/src/components/Question.tsx b/src/components/Question.tsx index 06dceb1..45a030b 100644 --- a/src/components/Question.tsx +++ b/src/components/Question.tsx @@ -26,15 +26,11 @@ class RenderedQuestion extends React.Component<QuestionProp> {          super(props);          if (props.question.type === QuestionType.TextArea) {              this.handler = this.text_area_handler.bind(this); -            this.blurHandler = this.on_blur_textarea_handler.bind(this);          } else {              this.handler = this.normal_handler.bind(this); -            if (props.question.type === QuestionType.Select) { -                this.blurHandler = this.on_blur_select_handler.bind(this); -            } else { -                this.blurHandler = this.on_blur_handler.bind(this); -            }          } +        this.blurHandler = this.blurHandler.bind(this); +          this.setPublicState("valid", true);          this.setPublicState("error", ""); @@ -50,7 +46,41 @@ class RenderedQuestion extends React.Component<QuestionProp> {      // This is here to allow dynamic selection between the general handler, and the textarea handler.      handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line -    blurHandler(_: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void {} // eslint-disable-line + +    blurHandler(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLDivElement>): void { +        if (this.props.question.required) { +            switch (this.props.question.type) { +                case QuestionType.ShortText: +                    if (event.target.value === "") { +                        this.setPublicState("error", "Field must be filled."); +                        this.setPublicState("valid", false); +                    } else { +                        this.setPublicState("valid", true); +                        this.setPublicState("error", ""); +                    } +                    break; +                 +                case QuestionType.TextArea: +                    if (event.target.value === "") { +                        this.setPublicState("error", "Field must be filled."); +                        this.setPublicState("valid", false); +                    } else { +                        this.setPublicState("valid", true); +                        this.setPublicState("error", ""); +                    } +                    break; +                 +                case QuestionType.Select: +                    if (!this.props.public_state.get("value")) { +                        this.setPublicState("error", "Field must be filled."); +                        this.setPublicState("valid", false); +                    } else { +                        this.setPublicState("error", ""); +                        this.setPublicState("valid", true); +                    } +            } +        } +    }      normal_handler(event: ChangeEvent<HTMLInputElement>): void {          let target: string; @@ -100,42 +130,6 @@ class RenderedQuestion extends React.Component<QuestionProp> {          this.setPublicState("value", event.target.value);      } -    // eslint-disable-next-line @typescript-eslint/no-empty-function -    // eslint-disable-next-line @typescript-eslint/no-unused-vars -    on_blur_handler(event: FocusEvent<HTMLInputElement>): void { -        if (this.props.question.required) { -            switch (event.target.type) { -                case "text": -                    if (event.target.value === "") { -                        this.setPublicState("error", "Field must be filled."); -                        this.setPublicState("valid", false); -                    } -                    break; -            } -        } -    } - -    // eslint-disable-next-line @typescript-eslint/no-unused-vars -    on_blur_select_handler(_: FocusEvent<HTMLDivElement>): void { -        if (this.props.question.required && !this.props.public_state.get("value")) { -            this.setPublicState("error", "Field must be filled."); -            this.setPublicState("valid", false); -        } else { -            this.setPublicState("error", ""); -            this.setPublicState("valid", true); -        } -    } - -    on_blur_textarea_handler(event: FocusEvent<HTMLTextAreaElement>): void { -        if (this.props.question.required && event.target.value === "") { -            this.setPublicState("error", "Field must be filled."); -            this.setPublicState("valid", false); -        } else { -            this.setPublicState("valid", true); -            this.setPublicState("error", ""); -        } -    } -      componentDidMount(): void {          // Initialize defaults for complex and nested fields          const options: string | string[] = this.props.question.data["options"]; | 
