react-mapfilter/esm/ReportView/HideFieldsButton.js

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

import "core-js/modules/es.array.iterator";
import "core-js/modules/web.dom-collections.iterator";
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
// @flow
import * as React from 'react';
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
import Popover from '@material-ui/core/Popover';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Switch from '@material-ui/core/Switch';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import { defineMessages, FormattedMessage } from 'react-intl';
import ToolbarButton from '../internal/ToolbarButton';
/*:: import type { FieldState } from '../types'*/

const msgs = 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'
  }
});
const useStyles = makeStyles(theme => {
  return {
    actions: {
      margin: `${theme.spacing(1)}px ${theme.spacing(1) / 2}px`
    },
    button: {
      margin: `0 ${theme.spacing(1) / 2}px`
    },
    listItem: {
      paddingRight: 48
    },
    fieldname: {
      maxWidth: 300,
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap'
    }
  };
});
/*:: type Props = {|
  fieldState: FieldState,
  onFieldStateUpdate: FieldState => any
|}*/

const HideFieldsButton = ({
  fieldState,
  onFieldStateUpdate
}
/*: Props*/
) => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

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

  function handleClose() {
    setAnchorEl(null);
  }

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

    const newState = _mapInstanceProperty(_context = _sliceInstanceProperty(fieldState).call(fieldState)).call(_context, f => f.id === id ? _Object$assign({}, f, {
      hidden: !f.hidden
    }) : f);

    onFieldStateUpdate(newState);
  }

  function showAllFields() {
    var _context2;

    const newState = _mapInstanceProperty(_context2 = _sliceInstanceProperty(fieldState).call(fieldState)).call(_context2, f => _Object$assign({}, f, {
      hidden: false
    }));

    onFieldStateUpdate(newState);
  }

  function hideAllFields() {
    var _context3;

    const newState = _mapInstanceProperty(_context3 = _sliceInstanceProperty(fieldState).call(fieldState)).call(_context3, f => _Object$assign({}, f, {
      hidden: true
    }));

    onFieldStateUpdate(newState);
  }

  const open = Boolean(anchorEl);

  const hiddenCount = _filterInstanceProperty(fieldState).call(fieldState, f => f.hidden).length;

  console.log('hiddenCount', hiddenCount);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarButton, {
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(VisibilityOffIcon, null), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, msgs.hideFieldsLabel, {
    values: {
      count: hiddenCount
    }
  }))), /*#__PURE__*/React.createElement(Popover, {
    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, {
    size: "small",
    onClick: showAllFields,
    className: classes.button
  }, /*#__PURE__*/React.createElement(FormattedMessage, msgs.showAll)), /*#__PURE__*/React.createElement(Button, {
    size: "small",
    onClick: hideAllFields,
    className: classes.button
  }, /*#__PURE__*/React.createElement(FormattedMessage, msgs.hideAll))), /*#__PURE__*/React.createElement(List, {
    dense: true
  }, _mapInstanceProperty(fieldState).call(fieldState, f => /*#__PURE__*/React.createElement(ListItem, {
    key: f.id,
    className: classes.listItem
  }, /*#__PURE__*/React.createElement(ListItemText, {
    className: classes.fieldname,
    primary: f.label
  }), /*#__PURE__*/React.createElement(ListItemSecondaryAction, null, /*#__PURE__*/React.createElement(Switch, {
    onClick: () => toggleFieldVisibility(f.id),
    checked: !f.hidden
  })))))));
};

export default HideFieldsButton;
//# sourceMappingURL=HideFieldsButton.js.map