@krowdy-ui/views/TaskConfig/TaskConfig.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _core = require("@krowdy-ui/core");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var TaskConfig = function TaskConfig(_ref) {
  var panelTask = _ref.panelTask,
      panelResponsable = _ref.panelResponsable,
      panelCandidates = _ref.panelCandidates,
      action = _ref.action,
      back = _ref.back,
      urlIconTask = _ref.urlIconTask,
      actionFooter = _ref.actionFooter,
      taskTextField = _ref.taskTextField;
  var classes = useStyles();

  var _useState = (0, _react.useState)(0),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var panelConfigs = (0, _react.useMemo)(function () {
    var panelConfigs = [{
      label: 'Tarea',
      panel: panelTask
    }, {
      label: 'Candidatos',
      panel: panelCandidates
    }, {
      label: 'Responsables',
      panel: panelResponsable
    }];
    return panelConfigs.filter(function (_ref2) {
      var panel = _ref2.panel;
      return panel;
    });
  }, [panelCandidates, panelResponsable, panelTask]);

  var _handleChange = function _handleChange(_, newValue) {
    setValue(newValue);
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.container
  }, /*#__PURE__*/_react["default"].createElement(_core.Paper, {
    className: classes.paper,
    variant: "outlined"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.headerLeft
  }, back, urlIconTask && /*#__PURE__*/_react["default"].createElement("img", {
    alt: "logo",
    className: classes.logo,
    src: urlIconTask
  }), taskTextField), /*#__PURE__*/_react["default"].createElement(_core.AppBar, {
    className: classes.appBar,
    position: "static"
  }, /*#__PURE__*/_react["default"].createElement(_core.Tabs, {
    centered: true,
    classes: {
      indicator: classes.indicator
    },
    indicatorColor: "primary",
    onChange: _handleChange,
    value: value
  }, panelConfigs.map(function (_ref3, index) {
    var label = _ref3.label;
    return /*#__PURE__*/_react["default"].createElement(_core.Tab, {
      classes: {
        textColorInherit: classes.textColor,
        textColorPrimary: classes.textColor,
        textColorSecondary: classes.textColor
      },
      className: classes.tab,
      key: "TabPanel-".concat(index),
      label: label
    });
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.actionContainer
  }, action)), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.content
  }, panelConfigs.map(function (_ref4, index) {
    var panel = _ref4.panel;
    return /*#__PURE__*/_react["default"].createElement(_core.TabPanel, {
      index: index,
      key: "Panel-".concat(index),
      value: value
    }, panel);
  })), /*#__PURE__*/_react["default"].createElement(_core.Paper, {
    className: classes.actionContainerFooter,
    variant: "outlined"
  }, actionFooter));
};

process.env.NODE_ENV !== "production" ? TaskConfig.propTypes = {
  action: _propTypes["default"].node,
  actionFooter: _propTypes["default"].node,
  back: _propTypes["default"].node,
  panelCandidates: _propTypes["default"].node,
  panelResponsable: _propTypes["default"].node,
  panelTask: _propTypes["default"].node,
  taskTextField: _propTypes["default"].node,
  urlIconTask: _propTypes["default"].string
} : void 0;
var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    actionContainer: {
      alignItems: 'center',
      display: 'flex',
      flex: 1,
      justifyContent: 'flex-end'
    },
    actionContainerFooter: {
      alignItems: 'center',
      borderRadius: 0,
      display: 'flex',
      height: 56,
      justifyContent: 'flex-end',
      padding: theme.spacing(1.5, 2.5)
    },
    appBar: {
      backgroundColor: theme.palette.common.white,
      boxShadow: 'none',
      color: theme.palette.common.black,
      flex: 1
    },
    arrowBackIcon: {
      height: 20,
      width: 20
    },
    arrowIcon: {
      color: theme.palette.grey[800],
      margin: theme.spacing(0, 1)
    },
    container: {
      height: '100%'
    },
    content: {
      '& > div': {
        height: '100%'
      },
      backgroundColor: theme.palette.secondary[10],
      height: 'calc(100% - 112px)'
    },
    groupActionTitle: {
      alignItems: 'center',
      display: 'flex'
    },
    header: {
      display: 'flex',
      justifyContent: 'space-between',
      paddingRight: theme.spacing(2.5),
      width: '100%'
    },
    headerLeft: {
      alignItems: 'center',
      display: 'flex',
      flex: 1
    },
    indicator: {
      height: 3
    },
    logo: {
      height: 24,
      marginRight: theme.spacing(1.5),
      width: 24
    },
    main: {
      overflow: 'hidden',
      padding: 0
    },
    nameTask: {
      fontSize: 18,
      fontStyle: 'normal',
      fontWeight: 'bold',
      marginRight: theme.spacing(1.5)
    },
    paper: {
      alignItems: 'center',
      borderRadius: 0,
      display: 'flex',
      height: 56,
      justifyContent: 'space-between',
      padding: theme.spacing(1.5, 2.5),
      width: '100%'
    },
    tab: {
      textTransform: 'initial'
    },
    task: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'space-between',
      width: '100%'
    },
    textColor: {
      color: theme.palette.grey[800],
      fontWeight: 'bold',
      opacity: 1
    }
  };
}, {
  name: 'TaskConfig'
});
var _default = TaskConfig;
exports["default"] = _default;