diff --git a/src/components/SignupQuestionsWidget/Question.tsx b/src/components/SignupQuestionsWidget/Question.tsx new file mode 100644 index 0000000..0a37bbb --- /dev/null +++ b/src/components/SignupQuestionsWidget/Question.tsx @@ -0,0 +1,22 @@ +import { Component } from "react"; +import * as React from "react"; + +export interface QuestionProps { + children: any; + onRemove: () => any; +} + +class Question extends Component { + render() { + const { children, onRemove } = this.props; + + return ( +
+ + {children} +
+ ); + } +} + +export default Question; diff --git a/src/components/SignupQuestionsWidget/QuestionList.tsx b/src/components/SignupQuestionsWidget/QuestionList.tsx index 367398d..657b55b 100644 --- a/src/components/SignupQuestionsWidget/QuestionList.tsx +++ b/src/components/SignupQuestionsWidget/QuestionList.tsx @@ -5,6 +5,7 @@ import { Draggable } from "react-beautiful-dnd"; import { Question, InputProps, optionTypes, SignupQuestionError } from "./index"; import OptionsWidget from "./OptionsWidget"; import TypeWidget from "./TypeWidget"; +import QuestionElement from "./Question"; export interface QuestionListProps { questions: Question[]; @@ -26,6 +27,13 @@ class QuestionList extends React.Component onChange(questions); } + handleElementRemove = (questions: Question[], index: number) => () => { + const { onChange } = this.props; + const newQuestions = [...questions]; + newQuestions.splice(index, 1); + onChange(newQuestions); + } + renderQuestions() { const { questions, onChange, placeholder } = this.props; return questions.map((q, index) => { @@ -44,9 +52,13 @@ class QuestionList extends React.Component {...provided.dragHandleProps} ref={provided.innerRef} > - {nameWidget} - {typeSelectWidget} - {optionsWidget} + + {nameWidget} + {typeSelectWidget} + {optionsWidget} + )} diff --git a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss b/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss index 784a288..9fa5833 100644 --- a/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss +++ b/src/components/SignupQuestionsWidget/SignupQuestionsWidget.scss @@ -7,6 +7,14 @@ margin: 1rem 0; } + button.remove { + background-color: $orange1; + margin-left: auto; + margin-bottom: 0.5rem; + padding: 0.3rem 0.5rem; + float: right; + } + .signup-questions-widget-row { margin-bottom: 1rem; display: flex;