react-mapfilter/commonjs/ReportView/HideFieldsButton.js

These components are designed for viewing data in Mapeo. They share a common interface:

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

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

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));

var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

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

var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));

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

var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));

var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _ListItemSecondaryAction = _interopRequireDefault(require("@material-ui/core/ListItemSecondaryAction"));

var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _styles = require("@material-ui/core/styles");

var _reactIntl = require("react-intl");

var _ToolbarButton = _interopRequireDefault(require("../internal/ToolbarButton"));

// @flow
var msgs = (0, _reactIntl.defineMessages)({
  // Button label for hide fields menu
  hideFieldsLabel: {
    "id": "3KGH9w==",
    "defaultMessage": "{count} Hidden Fields"
  },
  // Show all fields in report view
  showAll: {
    "id": "I2ElhA==",
    "defaultMessage": 'Show All'
  },
  // Hide all fields in report view
  hideAll: {
    "id": "Ltdnug==",
    "defaultMessage": 'Hide All'
  }
});
var useStyles = (0, _styles.makeStyles)(function (theme) {
  var _context;

  return {
    actions: {
      margin: (0, _concat.default)(_context = "".concat(theme.spacing(1), "px ")).call(_context, theme.spacing(1) / 2, "px")
    },
    button: {
      margin: "0 ".concat(theme.spacing(1) / 2, "px")
    },
    listItem: {
      paddingRight: 48
    },
    fieldname: {
      maxWidth: 300,
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap'
    }
  };
});
/*:: type Props = {|
  fieldState: FieldState,
  onFieldStateUpdate: FieldState => any
|}*/

var HideFieldsButton = function HideFieldsButton(_ref) {
  var fieldState = _ref.fieldState,
      onFieldStateUpdate = _ref.onFieldStateUpdate;
  var classes = useStyles();

  var _React$useState = React.useState(null),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      anchorEl = _React$useState2[0],
      setAnchorEl = _React$useState2[1];

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  function toggleFieldVisibility(id
  /*: string*/
  ) {
    var _context2;

    var newState = (0, _map.default)(_context2 = (0, _slice.default)(fieldState).call(fieldState)).call(_context2, function (f) {
      return f.id === id ? (0, _assign.default)({}, f, {
        hidden: !f.hidden
      }) : f;
    });
    onFieldStateUpdate(newState);
  }

  function showAllFields() {
    var _context3;

    var newState = (0, _map.default)(_context3 = (0, _slice.default)(fieldState).call(fieldState)).call(_context3, function (f) {
      return (0, _assign.default)({}, f, {
        hidden: false
      });
    });
    onFieldStateUpdate(newState);
  }

  function hideAllFields() {
    var _context4;

    var newState = (0, _map.default)(_context4 = (0, _slice.default)(fieldState).call(fieldState)).call(_context4, function (f) {
      return (0, _assign.default)({}, f, {
        hidden: true
      });
    });
    onFieldStateUpdate(newState);
  }

  var open = Boolean(anchorEl);
  var hiddenCount = (0, _filter.default)(fieldState).call(fieldState, function (f) {
    return f.hidden;
  }).length;
  console.log('hiddenCount', hiddenCount);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_ToolbarButton.default, {
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(_VisibilityOff.default, null), /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, msgs.hideFieldsLabel, {
    values: {
      count: hiddenCount
    }
  }))), /*#__PURE__*/React.createElement(_Popover.default, {
    anchorEl: anchorEl,
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left'
    },
    open: open,
    onClose: handleClose,
    PaperProps: {
      style: {
        maxHeight: '50vh',
        minWidth: 200,
        maxWidth: '50vw'
      }
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.actions
  }, /*#__PURE__*/React.createElement(_Button.default, {
    size: "small",
    onClick: showAllFields,
    className: classes.button
  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, msgs.showAll)), /*#__PURE__*/React.createElement(_Button.default, {
    size: "small",
    onClick: hideAllFields,
    className: classes.button
  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, msgs.hideAll))), /*#__PURE__*/React.createElement(_List.default, {
    dense: true
  }, (0, _map.default)(fieldState).call(fieldState, function (f) {
    return /*#__PURE__*/React.createElement(_ListItem.default, {
      key: f.id,
      className: classes.listItem
    }, /*#__PURE__*/React.createElement(_ListItemText.default, {
      className: classes.fieldname,
      primary: f.label
    }), /*#__PURE__*/React.createElement(_ListItemSecondaryAction.default, null, /*#__PURE__*/React.createElement(_Switch.default, {
      onClick: function onClick() {
        return toggleFieldVisibility(f.id);
      },
      checked: !f.hidden
    })));
  }))));
};

var _default = HideFieldsButton;
exports.default = _default;
//# sourceMappingURL=HideFieldsButton.js.map