react-misc-toolbox
Version:
- [ ] diagramexample | optimize creating from blank slate
278 lines (242 loc) • 9.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require("babel-runtime/helpers/extends");
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _slicedToArray2 = require("babel-runtime/helpers/slicedToArray");
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require("styled-components");
var _CheckboxV = require("./CheckboxV2");
var _CheckboxV2 = _interopRequireDefault(_CheckboxV);
var _RadioButton = require("./RadioButton");
var _RadioButton2 = _interopRequireDefault(_RadioButton);
var _StyledMultipleChoice = require("./StyledMultipleChoice");
var _helperFunctions = require("./helperFunctions");
var _ = require(".");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultRenderCurrentOption = function defaultRenderCurrentOption(_ref) {
var label = _ref.label;
if (typeof label === "string") {
return label;
} else {
var flattened = (0, _helperFunctions.flatten)(label);
return flattened.join(", ");
}
};
var MultipleChoice = function MultipleChoice(props) {
var _props$buttonType = props.buttonType,
buttonType = _props$buttonType === undefined ? "checkbox" : _props$buttonType,
_props$renderIconMedi = props.renderIconMediaMin,
renderIconMediaMin = _props$renderIconMedi === undefined ? 0 : _props$renderIconMedi,
_props$alwaysOn = props.alwaysOn,
alwaysOn = _props$alwaysOn === undefined ? false : _props$alwaysOn,
_props$mutuallyExclus = props.mutuallyExclusive,
mutuallyExclusive = _props$mutuallyExclus === undefined ? false : _props$mutuallyExclus,
_props$iconSize = props.iconSize,
iconSize = _props$iconSize === undefined ? 4 : _props$iconSize,
footnote = props.footnote,
options = props.options,
_props$onChange = props.onChange,
onChange = _props$onChange === undefined ? function (x) {
return null;
} : _props$onChange,
_props$renderCurrentO = props.renderCurrentOption,
renderCurrentOption = _props$renderCurrentO === undefined ? defaultRenderCurrentOption : _props$renderCurrentO,
_props$sortingFunctio = props.sortingFunction,
sortingFunction = _props$sortingFunctio === undefined ? function () {
return 0;
} : _props$sortingFunctio,
_props$initialOptions = props.initialOptions,
initialOptions = _props$initialOptions === undefined ? [] : _props$initialOptions,
error = props.error;
function init(initialOptions) {
return { currentOptions: initialOptions };
}
var reducer = function reducer(_ref2, action) {
var currentOptions = _ref2.currentOptions;
var updatedState = {};
switch (action.type) {
case "add":
if (sortingFunction) {
updatedState = {
currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option]).sort(sortingFunction)
};
} else {
updatedState = {
currentOptions: [].concat((0, _toConsumableArray3.default)(currentOptions), [action.payload.option])
};
}
break;
case "remove":
updatedState = {
currentOptions: currentOptions.filter(function (currentOption) {
return currentOption.value !== action.payload.option.value;
})
};
break;
case "clear":
updatedState = init(action.payload.options);
break;
default:
throw new Error();
}
onChange(updatedState.currentOptions);
return updatedState;
};
var _useReducer = (0, _react.useReducer)(reducer, initialOptions, init),
_useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
currentOptions = _useReducer2[0].currentOptions,
dispatch = _useReducer2[1];
var isActive = function isActive(option) {
return currentOptions.some(function (currentOption) {
return currentOption.value === option.value;
});
};
var getChildProps = function getChildProps() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var className = _ref3.className,
style = _ref3.style,
_onClick = _ref3.onClick,
option = _ref3.option,
props = (0, _objectWithoutProperties3.default)(_ref3, ["className", "style", "onClick", "option"]);
var optionIsActive = isActive(option);
var handleClassName = (0, _helperFunctions.advancedMulti)({
unflattenedBases: [className, "multiplechoice__option"],
flipVars: [[optionIsActive, "active", "inactive"]]
});
return (0, _extends3.default)({
onClick: function onClick(e) {
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
if (isActive(option)) {
if (!alwaysOn) {
dispatch({ type: "remove", payload: { option: option } });
}
} else {
if (!mutuallyExclusive) {
dispatch({ type: "add", payload: { option: option } });
} else {
dispatch({ type: "clear", payload: { options: [] } });
dispatch({ type: "add", payload: { option: option } });
}
}
_onClick && _onClick.apply(undefined, [e].concat(args));
},
className: handleClassName,
style: style
}, props);
};
// const themeContext = useContext(ThemeContext)
// console.log(themeContext)
return _react2.default.createElement(
_StyledMultipleChoice.CONTAINER,
null,
options.map(function (option) {
var isLayered = typeof option.label !== "string" ? true : false;
var checkboxProps = {
disabled: true,
className: "input",
id: option.value,
checked: isActive(option),
onChange: function onChange(e) {}
};
var triggerProps = (0, _extends3.default)({
isLayered: isLayered,
//padding: buttonType === "checkbox" ? "0 2.4rem 0" : "0.75rem 2.5rem",
isOn: isActive(option),
buttonType: buttonType
}, getChildProps({ option: option }));
return _react2.default.createElement(
_StyledMultipleChoice.OPTION,
{
key: option.value
},
!isLayered ? buttonType === "checkbox" ? _react2.default.createElement(
_StyledMultipleChoice.CHECKBOX_TRIGGER,
(0, _extends3.default)({}, triggerProps),
_react2.default.createElement(
_StyledMultipleChoice.CHECKBOX_CONTAINER,
null,
_react2.default.createElement(_CheckboxV2.default, (0, _extends3.default)({}, checkboxProps))
),
_react2.default.createElement(
_StyledMultipleChoice.LABEL,
null,
option.label
)
) : _react2.default.createElement(
_StyledMultipleChoice.RADIO_TRIGGER,
(0, _extends3.default)({}, triggerProps),
_react2.default.createElement(
_StyledMultipleChoice.CHECKBOX_CONTAINER,
null,
_react2.default.createElement(_RadioButton2.default, (0, _extends3.default)({}, checkboxProps))
),
_react2.default.createElement(
_StyledMultipleChoice.LABEL,
null,
option.label
)
) : _react2.default.createElement(
_StyledMultipleChoice.CHECKBOX_TRIGGER,
(0, _extends3.default)({}, triggerProps),
_react2.default.createElement(
_StyledMultipleChoice.CHECKBOX_CONTAINER,
null,
buttonType === "checkbox" ? _react2.default.createElement(_CheckboxV2.default, (0, _extends3.default)({}, checkboxProps)) : _react2.default.createElement(_RadioButton2.default, (0, _extends3.default)({}, checkboxProps))
),
_react2.default.createElement(
_StyledMultipleChoice.LABEL,
null,
option.label.map(function (row, i) {
return _react2.default.createElement(
_StyledMultipleChoice.ROW,
{ iconSize: iconSize, key: i, isOn: isActive(option) },
row.map(function (sublabel, j) {
var renderFootnote = function renderFootnote() {
if (footnote && footnote[0][0] === i && footnote[0][1] === j) {
return _react2.default.createElement(
_StyledMultipleChoice.FOOTNOTE_SIGN,
null,
footnote[1]
);
}
};
return _react2.default.createElement(
_StyledMultipleChoice.SUBLABEL,
{ key: j },
typeof sublabel === "string" ? sublabel : sublabel(),
renderFootnote()
);
})
);
})
)
),
option.subcontent && _react2.default.createElement(
_.RTGTransition,
{ in: isActive(option), transitionType: "dropdown" },
function (_ref4) {
var style = _ref4.style;
return _react2.default.createElement(
_StyledMultipleChoice.CONTENT,
{ style: style },
option.subcontent()
);
}
)
);
})
);
};
exports.default = MultipleChoice;