@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
188 lines (172 loc) • 8.46 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _extends from "@babel/runtime/helpers/extends";import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n flex: 1 0 0;\n\n .question__text {\n margin: 10px 0 0 0;\n color: #222b45;\n\n &_note {\n color: ", ";\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { useState } from "react";
import { Input, Text } from "../../atoms";
import constants from "../../config/constants";
import styled from "styled-components";
import * as Matrices from "../Matrices";
import CheckboxMatrix from "../Matrices/Checkbox";
import DropdownMatrix from "../Matrices/Dropdown";
import SurveyCheckbox from "../Survey/Checkbox";
import SurveyRadioGroup from "../Survey/Radio";var
RadioMatrix = Matrices.Radio;var
answerType = constants.answerType;
var QuestionCardPreviewWrapper = styled.div(_templateObject(),
function (_ref) {var theme = _ref.theme,_ref$palette = _ref.palette,palette = _ref$palette === void 0 ? "primary" : _ref$palette;return theme.palette[palette].main;});
var usePrevious = function usePrevious(value) {
var ref = React.useRef();
React.useEffect(function () {
ref.current = value;
});
return ref.current;
};
export default (function (_ref2) {var _config$selectMatrix;var _ref2$questionInfo = _ref2.questionInfo,questionInfo = _ref2$questionInfo === void 0 ? {} : _ref2$questionInfo,_ref2$showText = _ref2.showText,showText = _ref2$showText === void 0 ? false : _ref2$showText,_ref2$required = _ref2.required,required = _ref2$required === void 0 ? false : _ref2$required,onChange = _ref2.onChange,palette = _ref2.palette;var
type = questionInfo.type,config = questionInfo.config,text = questionInfo.text;
var rows = [];
var columns = [];
var defaultSelectionSet = [];
var defaultOptionList = [];
var defaultRadioVal = "";
var defaultTextField = "";
var configType = "";
switch (type) {
case answerType.radio:
configType = "radio";
var selectedRadio = config.radio.answers.find(function (x) {return x.checked;});
defaultRadioVal = selectedRadio ? selectedRadio.text : "";
break;
case answerType.checkbox:
configType = "checkbox";
defaultOptionList = config.checkbox.answers.
filter(function (x) {return x.checked;}).
map(function (x) {
return x.text;
});
break;
case answerType.checkboxMatrix:
configType = "checkboxMatrix";
defaultSelectionSet = config.checkboxMatrix.selectionSet ? _toConsumableArray(
config.checkboxMatrix.selectionSet) :
[];
break;
case answerType.radioMatrix:
configType = "radioMatrix";
defaultSelectionSet = config.radioMatrix.selectionSet ? _toConsumableArray(
config.radioMatrix.selectionSet) :
[];
break;
case answerType.selectMatrix:
configType = "selectMatrix";
defaultSelectionSet = config.selectMatrix.selectionSet ? _toConsumableArray(
config === null || config === void 0 ? void 0 : (_config$selectMatrix = config.selectMatrix) === null || _config$selectMatrix === void 0 ? void 0 : _config$selectMatrix.selectionSet) :
[];
break;
case answerType.text:
configType = "text";
defaultTextField = config && config.text ? config.text.text : "";
break;
default:}
if (config && config[configType]) {
rows = config[configType].rows ? config[configType].rows : [];
columns = config[configType].answers ?
config[configType].answers :
config[configType].columns ?
config[configType].columns :
[];
} else
{
rows = config && config.rows ? config.rows : [];
columns =
config && config.answers ?
config.answers :
config && config.columns ?
config.columns :
[];
}
columns = columns.map(function (column) {
if (column.answers) {
return _extends({},
column, {
options: column.answers });
}
return column;
});
var surveyRadioOptions = columns.length ?
columns.map(function (x) {
return { value: x.text, label: x.text };
}) :
[];
var surveyCheckboxOptions = columns.length ?
columns.map(function (x) {
return {
checked: defaultOptionList.includes(x.text),
label: x.text,
name: x.id
};
}) :
[];var _useState =
useState(defaultSelectionSet),_useState2 = _slicedToArray(_useState, 2),selectionSet = _useState2[0],setSelectionSet = _useState2[1];var _useState3 =
useState(defaultRadioVal),_useState4 = _slicedToArray(_useState3, 2),radioVal = _useState4[0],setRadioVal = _useState4[1];var _useState5 =
useState(defaultTextField),_useState6 = _slicedToArray(_useState5, 2),textField = _useState6[0],setTextField = _useState6[1];var _useState7 =
useState(surveyCheckboxOptions),_useState8 = _slicedToArray(_useState7, 2),options = _useState8[0],setOptions = _useState8[1];
var radioValRef = usePrevious(radioVal);
var textFieldRef = usePrevious(textField);
var selectionSetRef = usePrevious(selectionSet);
var optionsRef = usePrevious(options);
var onChangeHandler = React.useCallback(function () {return onChange.apply(void 0, arguments);}, [
onChange]);
React.useEffect(function () {
var isUpdated = false;
if (optionsRef !== undefined && optionsRef !== options ||
radioValRef !== undefined && radioValRef !== radioVal ||
textFieldRef !== undefined && textFieldRef !== textField ||
selectionSetRef !== undefined && selectionSetRef !== selectionSet) {
isUpdated = true;
}
if (isUpdated) {
onChangeHandler({
options: options,
radioVal: radioVal,
selectionSet: selectionSet,
textField: textField
});
}
}, [
radioVal,
selectionSet,
options,
textField,
onChange,
onChangeHandler,
optionsRef,
radioValRef,
textFieldRef,
selectionSetRef]);
return /*#__PURE__*/React.createElement(QuestionCardPreviewWrapper, { palette: palette },
(showText || !showText && type === answerType.text) && /*#__PURE__*/React.createElement(Text, { className: "question__text", variant: "subtitle1" },
text,
" ",
required && /*#__PURE__*/React.createElement("span", { className: "question__text_note" }, "*")),
type === answerType.radio && /*#__PURE__*/React.createElement(SurveyRadioGroup, { value: radioVal, options: surveyRadioOptions, name: "test-survey", onChange: function onChange(event) {
setRadioVal(event.target.value);
}, mode: "preview" }),
type === answerType.checkbox && /*#__PURE__*/React.createElement(SurveyCheckbox, { options: options, onChange: function onChange(checkedStatus, index) {
setOptions(function (opts) {
var currentOptions = _toConsumableArray(opts);
var updatedOption = currentOptions[index];
updatedOption.checked = checkedStatus;
return currentOptions;
});
}, mode: "preview" }),
type === answerType.radioMatrix && /*#__PURE__*/React.createElement(RadioMatrix, { matrix: [rows, columns], disabled: false, selections: selectionSet, onSelectionUpdate: function onSelectionUpdate(_ref3) {var added = _ref3.added,removed = _ref3.removed,modified = _ref3.modified,selections = _ref3.selections;
setSelectionSet(selections);
} }),
type === answerType.checkboxMatrix && /*#__PURE__*/React.createElement(CheckboxMatrix, { matrix: [rows, columns], disabled: false, selections: selectionSet, onSelectionUpdate: function onSelectionUpdate(_ref4) {var added = _ref4.added,removed = _ref4.removed,modified = _ref4.modified,selections = _ref4.selections;
setSelectionSet(selections);
} }),
type === answerType.selectMatrix && /*#__PURE__*/React.createElement(DropdownMatrix, { matrix: [rows, columns], disabled: false, selections: selectionSet, onSelectionUpdate: function onSelectionUpdate(_ref5) {var added = _ref5.added,removed = _ref5.removed,modified = _ref5.modified,selections = _ref5.selections;
setSelectionSet(selections);
} }),
type === answerType.text && /*#__PURE__*/React.createElement(Input, { multiline: true, rows: 4, value: textField, onChange: function onChange(e) {
setTextField(e.target.value);
} }));
});
//# sourceMappingURL=index.js.map