cinnecta-ui/lib/components/SummaryItem.js

"use strict";

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

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

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

var _lodash = _interopRequireDefault(require("lodash"));

var _moment = _interopRequireDefault(require("moment"));

var _ComboButton = _interopRequireDefault(require("./ComboButton"));

var _Text = _interopRequireDefault(require("./Text"));

var _Anchor = _interopRequireDefault(require("./Anchor"));

var _Spacing = _interopRequireDefault(require("./Spacing"));

var _StatusIndicator = _interopRequireDefault(require("./StatusIndicator"));

var _Grid = _interopRequireDefault(require("./Grid"));

var _Cell = _interopRequireDefault(require("./Cell"));

var _Responsive = require("./Responsive");

var _Visibility = _interopRequireDefault(require("./Visibility"));

var _CheckboxOnly = _interopRequireDefault(require("./CheckboxOnly"));

var _withStyles = require("../helpers/withStyles");

var _reactWithStyles = require("react-with-styles");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  item: _propTypes.default.object,
  clean: _propTypes.default.bool,
  checked: _propTypes.default.bool,
  onChange: _propTypes.default.func,
  onAction: _propTypes.default.func,
  children: _propTypes.default.any,
  divided: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  selectable: _propTypes.default.bool
});

var defaultProps = {
  item: {}
};

var SummaryItem =
/*#__PURE__*/
function (_Component) {
  _inherits(SummaryItem, _Component);

  function SummaryItem(props) {
    var _this;

    _classCallCheck(this, SummaryItem);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(SummaryItem).call(this, props));
    _this.state = {
      hover: false
    };
    return _this;
  }

  _createClass(SummaryItem, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          item = _this$props.item,
          clean = _this$props.clean,
          checked = _this$props.checked,
          _onChange = _this$props.onChange,
          onAction = _this$props.onAction,
          children = _this$props.children,
          divided = _this$props.divided,
          loading = _this$props.loading,
          selectable = _this$props.selectable,
          styles = _this$props.styles,
          css = _this$props.css;
      var hover = this.state.hover;
      return _react.default.createElement("li", _extends({}, css(styles.summaryItem, divided && styles.summaryItem_divided), {
        onMouseOver: function onMouseOver() {
          return _this2.setState({
            hover: true
          });
        },
        onMouseOut: function onMouseOut() {
          return _this2.setState({
            hover: false
          });
        }
      }), _react.default.createElement(_Grid.default, {
        resetSpacing: true
      }, _react.default.createElement(_Visibility.default, {
        showIf: selectable,
        unmount: true
      }, _react.default.createElement(_Responsive.Responsive, {
        showFor: "medium",
        unmount: true
      }, _react.default.createElement("div", css(styles.summaryItem__checkboxContainer, clean && styles.summaryItem__checkboxContainer_clean, clean && hover && styles.summaryItem__checkboxContainer_visible), _react.default.createElement(_Cell.default, {
        shrink: true,
        noSpacing: clean
      }, _react.default.createElement(_CheckboxOnly.default, {
        checked: checked,
        onChange: function onChange() {
          return _onChange();
        }
      }))))), children && _react.default.createElement(_Cell.default, {
        shrink: true
      }, children), _react.default.createElement(_Cell.default, {
        auto: true,
        noSpacing: true
      }, _react.default.createElement(_Grid.default, null, _react.default.createElement(_Cell.default, {
        auto: true,
        maxWidth: 24
      }, _react.default.createElement(_Text.default, {
        loading: loading,
        bold: true
      }, _react.default.createElement(_Anchor.default, {
        onClick: function onClick() {
          return onAction(item.clickAction ? item.clickAction : item.mainAction);
        }
      }, item.title)), _react.default.createElement(_Text.default, {
        small: true,
        shimmerWidth: "100%",
        loading: loading
      }, item.description), _react.default.createElement(_Text.default, {
        small: true,
        bold: true,
        loading: loading
      }, item.params && Array.isArray(item.params) && item.params.join(', ')), item.log && _react.default.createElement(_Spacing.default, {
        top: .5
      }, _react.default.createElement(_Text.default, {
        muted: true,
        small: true,
        shimmerWidth: "80%",
        loading: loading
      }, _react.default.createElement(_react.Fragment, null, _lodash.default.capitalize(item.log.action), _react.default.createElement("strong", null, item.log.datetime && //moment(item.log.datetime).format('DD [de] MMMM [de] YYYY [às] hh:mm')
      _moment.default.utc(item.log.datetime).fromNow()), item.log.user && _react.default.createElement("span", null, " por ", item.log.link ? _react.default.createElement("strong", null, _react.default.createElement("a", {
        href: item.log.link
      }, item.log.user)) : _react.default.createElement("strong", null, item.log.user), " "))))), _react.default.createElement(_Cell.default, {
        noSpacing: true,
        size: 12,
        largeSize: 2
      }, item.status && _react.default.createElement(_Spacing.default, {
        top: 1,
        topLargeAndAbove: 0.1,
        left: 1,
        leftLargeAndAbove: 0.25
      }, _react.default.createElement(_StatusIndicator.default, {
        loading: loading,
        text: item.status.label,
        color: item.status.color
      }))), _react.default.createElement(_Cell.default, {
        size: 12,
        autoOnMedium: true,
        center: true
      }, item.report && Array.isArray(item.report) && item.report.length > 0 && _react.default.createElement(_Spacing.default, {
        top: 1.25,
        topLargeAndAbove: 0
      }, _react.default.createElement("div", css(styles.summaryItem__info), item.report.map(function (data) {
        if (data) {
          return _react.default.createElement("div", _extends({}, css(styles.summaryItem__info__item), {
            key: data.label
          }), _react.default.createElement("strong", css(styles.summaryItem__info__value), data.value), _react.default.createElement("span", css(styles.summaryItem__info__label), data.label));
        } else {
          return false;
        }
      })))))), _react.default.createElement(_Cell.default, {
        size: 12,
        shrinkOnMedium: true
      }, _react.default.createElement("div", css(styles.summaryItem__actions, clean && styles.summaryItem__actions_clean, clean && hover && styles.summaryItem__actions_visible), item.customButtom, _react.default.createElement(_ComboButton.default, {
        soft: true,
        loading: loading,
        shimmer: loading,
        mainOption: item.actions && item.actions.filter(function (action) {
          return item.mainAction === action.value;
        })[0],
        options: item.actions ? item.actions.filter(function (action) {
          return item.mainAction !== action.value;
        }) : [],
        onClick: function onClick(option) {
          return onAction && onAction(option);
        },
        closeOnSelect: true,
        noSpacing: true
      })))));
    }
  }]);

  return SummaryItem;
}(_react.Component);

SummaryItem.propTypes = propTypes;
SummaryItem.defaultProps = defaultProps;
var SummaryItemWithStyles = (0, _withStyles.withStyles)(function (_ref) {
  var color = _ref.color,
      units = _ref.units,
      breakpoint = _ref.breakpoint,
      gutter = _ref.gutter,
      fontSize = _ref.fontSize,
      font = _ref.font,
      weight = _ref.weight;
  return {
    summaryItem: {
      padding: 0,
      paddingTop: units(1.25),
      paddingBottom: units(1.25),
      position: 'relative',
      display: 'flex',
      fontFamily: font.default
    },
    summaryItem_divided: {
      borderBottomWidth: 1,
      borderBottomStyle: 'solid',
      borderBottomColor: color.blueGrayLight
    },
    summaryItem__checkboxContainer: {
      flexShrink: 1,
      flexGrow: 0
    },
    summaryItem__checkboxContainer_clean: _defineProperty({
      position: 'absolute',
      paddingLeft: units(1),
      transform: 'translate(calc(-100% + .5rem), 0)',
      visibility: 'visible',
      height: '100%',
      transition: 'visibility .25s ,opacity .25s'
    }, breakpoint.large, {
      visibility: 'hidden',
      opacity: 0.01
    }),
    summaryItem__checkboxContainer_visible: _defineProperty({}, breakpoint.large, {
      visibility: 'visible',
      opacity: 1
    }),
    summaryItem__actions: _defineProperty({
      marginTop: units(1)
    }, breakpoint.mediumAndAbove, {
      marginTop: 0
    }),
    summaryItem__actions_clean: _defineProperty({
      visibility: 'visible',
      transition: 'visibility .25s ,opacity .25s'
    }, breakpoint.large, {
      visibility: 'hidden',
      opacity: 0.01
    }),
    summaryItem__actions_visible: _defineProperty({}, breakpoint.large, {
      visibility: 'visible',
      opacity: 1
    }),
    summaryItem__content: {
      flex: 1
    },
    summaryItem__info: {
      display: 'flex'
    },
    summaryItem__info__item: _defineProperty({
      width: units(5),
      padding: units(.25),
      textAlign: 'left'
    }, breakpoint.large, {
      textAlign: 'center'
    }),
    summaryItem__info__value: _defineProperty({
      fontSize: fontSize.small.large,
      fontWeight: weight.bold,
      color: color.primary,
      lineHeight: 1,
      display: 'block'
    }, breakpoint.large, {
      fontSize: fontSize.large.large
    }),
    summaryItem__info__label: _defineProperty({
      fontSize: fontSize.small.small,
      color: color.grayDarker
    }, breakpoint.large, {
      fontSize: fontSize.large.small
    })
  };
})(SummaryItem);
var _default = SummaryItemWithStyles;
exports.default = _default;