@makeen.io/material-ui-kit/distr/molecules/QuestionCard/index.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject6() {var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: ", ";\n  display: flex;\n  width: 100%;\n  position: absolute;\n  bottom: -", ";\n  padding: ", ";\n\n  .left-actions {\n    display: flex;\n    padding: ", ";\n  }\n\n  .right-actions {\n    padding: ", ";\n    display: flex;\n    margin-left: auto;\n  }\n"]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral(["\n  padding: ", ";\n  margin-bottom: ", ";\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  .label {\n    color: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  svg {\n    path[fill] {\n      fill: ", ";\n    }\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  & path[fill] {\n    fill: ", ";\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Icon, Switch, Tooltip, WidgetCard } from "../../atoms";
import styled from "styled-components";
import ConfirmationDialog from "../ConfirmationDialog";
var IconIndicator = styled.div(_templateObject(),

function (_ref) {var active = _ref.active;return active ? "blue" : "#bbb";});


var ActivationIconWrapper = styled.span(_templateObject2(),


function (_ref2) {var active = _ref2.active,theme = _ref2.theme;return active ? theme.palette.primary.main : theme.palette.text.secondary;});



var IconActivateButtonWrapper = styled.span(_templateObject3(),
function (props) {return props.theme.sizes.questionCard.iconButton.marginLeft;},
function (props) {return props.theme.sizes.questionCard.iconButton.marginRight;},
function (props) {return props.theme.sizes.questionCard.iconButton.marginTop;},
function (props) {return props.theme.sizes.questionCard.iconButton.marginBottom;});





var IconActivateButton = function IconActivateButton(_ref3) {var onClick = _ref3.onClick,icon = _ref3.icon;return /*#__PURE__*/React.createElement(IconActivateButtonWrapper, { onClick: onClick }, icon);};
var ToolTipWrapper = function ToolTipWrapper(_ref4) {var text = _ref4.text,children = _ref4.children,enabled = _ref4.enabled;
  return /*#__PURE__*/React.createElement(Tooltip, { text: text, enabled: enabled }, children);
};
var ActionItemWrapper = styled.div(_templateObject4(),


function (props) {return props.theme.sizes.questionCard.actionItem.marginLeft;},
function (props) {return props.theme.sizes.questionCard.actionItem.marginRight;},


function (props) {return props.theme.palette.text.secondary;},
function (props) {return props.theme.sizes.questionCard.actionItem.fontSize;},
function (props) {return props.theme.sizes.questionCard.actionItem.lineHeight;});


var ActionItem = function ActionItem(_ref5) {var onClick = _ref5.onClick,component = _ref5.component,label = _ref5.label,toolTipText = _ref5.toolTipText;return /*#__PURE__*/React.createElement(ToolTipWrapper, { text: toolTipText, enabled: true }, /*#__PURE__*/
  React.createElement(ActionItemWrapper, { onClick: onClick },
  component, /*#__PURE__*/
  React.createElement("div", { className: "label" }, label)));};
var customStyle = function customStyle() {return "\n  position: relative;\n";};


var cardStyleComponent = function cardStyleComponent() {return "\n  margin-bottom: 40px;\n";};


var QuestionCardContentWrapper = styled.div(_templateObject5(),
function (props) {return props.theme.sizes.questionCard.content.padding;},
function (props) {return props.theme.sizes.questionCard.actions.height;});

var QuestionCardFooterWrapper = styled.div(_templateObject6(),
function (props) {return props.theme.palette.colors.basic["200"];},
function (props) {return props.theme.sizes.questionCard.actions.height;},



function (props) {return props.theme.sizes.questionCard.actions.height;},
function (props) {return props.theme.sizes.questionCard.actions.padding;},



function (props) {return props.theme.sizes.questionCard.actions.left.padding;},



function (props) {return props.theme.sizes.questionCard.actions.right.padding;});




export default (function (_ref6) {var children = _ref6.children,onDelete = _ref6.onDelete,onDuplicate = _ref6.onDuplicate,cardStyle = _ref6.cardStyle,isLinkable = _ref6.isLinkable,onOpenFeaturedLink = _ref6.onOpenFeaturedLink,isLinked = _ref6.isLinked,isShareable = _ref6.isShareable,onChangeShared = _ref6.onChangeShared,isShared = _ref6.isShared,isRequireable = _ref6.isRequireable,onChangeRequired = _ref6.onChangeRequired,isRequired = _ref6.isRequired,isConditional = _ref6.isConditional,onChangeConditional = _ref6.onChangeConditional,hasConditions = _ref6.hasConditions,toolTipText = _ref6.toolTipText,theme = _ref6.theme,_ref6$controlName = _ref6.controlName,controlName = _ref6$controlName === void 0 ? "question" : _ref6$controlName;var _React$useState =
    React.useState({ open: false }),_React$useState2 = _slicedToArray(_React$useState, 2),confirmation = _React$useState2[0],setConfirmation = _React$useState2[1];
  var onDeleteQuestion = function onDeleteQuestion() {
    setConfirmation({
      confirmColor: "warning",
      confirmText: "Yes, Delete",
      message: "Are you sure you want to delete this ".concat(controlName, "?"),
      onConfirm: function onConfirm() {
        setConfirmation({ open: false });
        onDelete();
      },
      open: true,
      title: "Delete Question"
    });
  };
  var onDuplicateQuestion = function onDuplicateQuestion() {
    setConfirmation({
      confirmColor: "infoLight",
      confirmText: "Yes, Duplicate",
      message: "Are you sure you want to duplicate this ".concat(controlName, "?"),
      onConfirm: function onConfirm() {
        setConfirmation({ open: false });
        onDuplicate();
      },
      open: true,
      title: "Duplicate Question"
    });
  };
  var onChecked = function onChecked(handler) {return function (event) {return handler(event.target.checked);};};
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement(WidgetCard, { cardStyle: cardStyle || cardStyleComponent, customStyle: customStyle }, /*#__PURE__*/
  React.createElement(QuestionCardContentWrapper, null, children), /*#__PURE__*/
  React.createElement(QuestionCardFooterWrapper, null, /*#__PURE__*/
  React.createElement("div", { className: "left-actions" }, /*#__PURE__*/
  React.createElement(ActionItem, { toolTipText: toolTipText, label: "", onClick: onDuplicateQuestion, component: /*#__PURE__*/React.createElement(IconActivateButton, { icon: /*#__PURE__*/React.createElement(ActivationIconWrapper, null, /*#__PURE__*/
      React.createElement(Icon, { name: "templates", height: theme === null || theme === void 0 ? void 0 : theme.sizes.questionCard.actionItem.iconSize, width: theme === null || theme === void 0 ? void 0 : theme.sizes.questionCard.actionItem.iconSize })) }) }), /*#__PURE__*/
  React.createElement(ActionItem, { toolTipText: toolTipText, label: "", onClick: onDeleteQuestion, component: /*#__PURE__*/React.createElement(IconActivateButton, { icon: /*#__PURE__*/React.createElement(ActivationIconWrapper, null, /*#__PURE__*/
      React.createElement(Icon, { name: "dustbin", height: theme === null || theme === void 0 ? void 0 : theme.sizes.questionCard.actionItem.iconSize, width: theme === null || theme === void 0 ? void 0 : theme.sizes.questionCard.actionItem.iconSize })) }) })), /*#__PURE__*/
  React.createElement("div", { className: "right-actions" },
  isLinkable && /*#__PURE__*/React.createElement(ActionItem, { toolTipText: toolTipText, label: "Link Feature", component: /*#__PURE__*/React.createElement(IconActivateButton, { onClick: onOpenFeaturedLink, icon: /*#__PURE__*/React.createElement(IconIndicator, { active: isLinked }, /*#__PURE__*/
      React.createElement(Icon, { name: "link", height: theme === null || theme === void 0 ? void 0 : theme.sizes.questionCard.actionItem.iconSize, width: theme === null || theme === void 0 ? void 0 : theme.sizes.questionCard.actionItem.iconSize })) }) }),
  isShareable && /*#__PURE__*/React.createElement(ActionItem, { toolTipText: toolTipText, label: "Add to Question Bank", component: /*#__PURE__*/React.createElement(IconActivateButton, { onClick: function onClick() {return onChangeShared && onChangeShared(!isShared);}, icon: isShared ? /*#__PURE__*/React.createElement(IconIndicator, null, /*#__PURE__*/
      React.createElement(Icon, { name: "questionBank-active" })) : /*#__PURE__*/React.createElement(Icon, { name: "questionBank" }) }) }),
  isRequireable && /*#__PURE__*/React.createElement(ActionItem, { toolTipText: toolTipText, label: "Required", component: /*#__PURE__*/React.createElement(Switch, { checked: isRequired, onChange: onChecked(onChangeRequired) }) }),
  isConditional && /*#__PURE__*/React.createElement(ActionItem, { toolTipText: toolTipText, label: "Conditional Logic", component: /*#__PURE__*/React.createElement(Switch, { checked: hasConditions, onChange: onChecked(onChangeConditional) }) })))), /*#__PURE__*/
  React.createElement(ConfirmationDialog, { title: confirmation.title, open: confirmation.open, confirmText: confirmation.confirmText, cancelText: "Cancel", confirmColor: confirmation.confirmColor, onClose: function onClose() {return setConfirmation({ open: false });}, onCancel: function onCancel() {return setConfirmation({ open: false });}, onConfirm: confirmation.onConfirm }, confirmation.message));
});
//# sourceMappingURL=index.js.map