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

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { AppBar, makeStyles, Paper, Tab, TabPanel, Tabs } from '@krowdy-ui/core';

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 = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var panelConfigs = 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.createElement("div", {
    className: classes.container
  }, /*#__PURE__*/React.createElement(Paper, {
    className: classes.paper,
    variant: "outlined"
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerLeft
  }, back, urlIconTask && /*#__PURE__*/React.createElement("img", {
    alt: "logo",
    className: classes.logo,
    src: urlIconTask
  }), taskTextField), /*#__PURE__*/React.createElement(AppBar, {
    className: classes.appBar,
    position: "static"
  }, /*#__PURE__*/React.createElement(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.createElement(Tab, {
      classes: {
        textColorInherit: classes.textColor,
        textColorPrimary: classes.textColor,
        textColorSecondary: classes.textColor
      },
      className: classes.tab,
      key: "TabPanel-".concat(index),
      label: label
    });
  }))), /*#__PURE__*/React.createElement("div", {
    className: classes.actionContainer
  }, action)), /*#__PURE__*/React.createElement("div", {
    className: classes.content
  }, panelConfigs.map(function (_ref4, index) {
    var panel = _ref4.panel;
    return /*#__PURE__*/React.createElement(TabPanel, {
      index: index,
      key: "Panel-".concat(index),
      value: value
    }, panel);
  })), /*#__PURE__*/React.createElement(Paper, {
    className: classes.actionContainerFooter,
    variant: "outlined"
  }, actionFooter));
};

process.env.NODE_ENV !== "production" ? TaskConfig.propTypes = {
  action: PropTypes.node,
  actionFooter: PropTypes.node,
  back: PropTypes.node,
  panelCandidates: PropTypes.node,
  panelResponsable: PropTypes.node,
  panelTask: PropTypes.node,
  taskTextField: PropTypes.node,
  urlIconTask: PropTypes.string
} : void 0;
var useStyles = 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'
});
export default TaskConfig;