How to use the @material-ui/core/useMediaQuery function in @material-ui/core

To help you get started, we’ve selected a few @material-ui/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wduckitt / React-Automation-Studio / ReactApp / src / components / SystemComponents / IsPrinting.js View on Github external
export default function IsPrinting({children}) {
  const printingMode = useMediaQuery('print');
//  useEffect(() => {
//
//    props.isPrinting(matches);
//  });

  return children(printingMode===false);
}
github mayneyao / phos / src / components / SongList.js View on Github external
export default function VirtualizedList() {
    const { state, dispatch } = React.useContext(PhosPlayerContext)
    const { data, playlistName, artistName, albumName, filterBy, searchWord, searchType, showNowPlaylist, currentPlaylist } = state
    const classes = useStyles();
    let songlist = data.songs ? data.songs.rows : []

    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.down('sm'));

    const height = window.innerHeight - 185

    function playSongs() {
        // 播放第一首
        dispatch({
            type: 'playOneSong',
            payload: {
                song: songlist[0]
            }
        })
        dispatch({
            type: 'set',
            payload: {
                currentPlaylist: songlist
            }
github Altinn / altinn-studio / src / react-apps / applications / receipt / src / features / receipt / containers / Receipt.tsx View on Github external
function Receipt(props: WithStyles) {

  const [party, setParty] = React.useState(null);
  const [instance, setInstance] = React.useState(null);
  const [organisations, setOrganisations] = React.useState(null);
  const [application, setApplication] = React.useState(null);
  const [user, setUser] = React.useState(null);
  const [language, setLanguage] = React.useState(null);
  const [attachments, setAttachments] = React.useState(null);
  const [pdf, setPdf] = React.useState(null);
  const isPrint = useMediaQuery('print');

  const fetchParty = async () => {
    try {
      const response = await Axios.get(getPartyUrl());
      setParty(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const fetchApplication = async () => {
    try {
      const app = instance.appId.split('/')[1];
      const response = await Axios.get(getApplicationMetadataUrl(instance.org, app));
      setApplication(response.data);
    } catch (error) {
github Altinn / altinn-studio / src / Altinn.Apps / AppFrontend / react / receipt / src / features / receipt / containers / Receipt.tsx View on Github external
function Receipt(props: WithStyles) {
  const [party, setParty] = React.useState(null);
  const [instance, setInstance] = React.useState(null);
  const [organisations, setOrganisations] = React.useState(null);
  const [application, setApplication] = React.useState(null);
  const [user, setUser] = React.useState(null);
  const [language, setLanguage] = React.useState(null);
  const [attachments, setAttachments] = React.useState(null);
  const [textResources, setTextResources] = React.useState(null);
  const isPrint = useMediaQuery('print');

  const fetchInstanceAndParty = async () => {
    try {
      const response = await Axios.get(getExtendedInstanceUrl());
      setParty(response.data.party);
      setInstance(response.data.instance);
    } catch (error) {
      console.error(error);
    }
  };

  const fetchApplication = async () => {
    try {
      const app = instance.appId.split('/')[1];
      const response = await Axios.get(getApplicationMetadataUrl(instance.org, app));
      setApplication(response.data);
github mui-org / material-ui / docs / src / pages / components / autocomplete / Virtualize.js View on Github external
const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
  const { children, ...other } = props;
  const itemData = React.Children.toArray(children);
  const theme = useTheme();
  const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
  const itemCount = itemData.length;
  const itemSize = smUp ? 36 : 48;

  const getChildSize = child => {
    if (React.isValidElement(child) && child.type === ListSubheader) {
      return 48;
    }

    return itemSize;
  };

  const getHeight = () => {
    if (itemCount > 8) {
      return 8 * itemSize;
    }
    return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
github timmo001 / home-panel / src / Components / Configuration / EditPage.tsx View on Github external
function handleMoveUp() {
    props.handleUpdate(page);
    props.handleMove(-1);
    handleClose();
  }

  function handleMoveDown() {
    props.handleUpdate(page);
    props.handleMove(+1);
    handleClose();
  }

  const classes = useStyles();
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <dialog aria-labelledby="responsive-dialog-title" open="">
      Edit Page
      
        </dialog>
github nyss-platform-norcross / nyss / src / RX.Nyss.Web / ClientApp / src / components / alerts / components / AlertsEscalationDialog.js View on Github external
export const AlertsEscalationDialog = ({ isOpened, close, alertId, isEscalating, isFetchingRecipients, escalateAlert, notificationEmails, notificationPhoneNumbers }) =&gt; {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

  return (
    <dialog open="{isOpened}">
      {strings(stringKeys.alerts.assess.alert.escalateConfirmation)}
      
        {notificationEmails.length &gt; 0 &amp;&amp; (
          
            {notificationEmails.map(email =&gt; (
              <div>{email}</div>
            ))}
          
        )}

        {notificationPhoneNumbers.length &gt; 0 &amp;&amp; (
          
            {notificationPhoneNumbers.map(phoneNumber =&gt; (</dialog>
github nyss-platform-norcross / nyss / src / RX.Nyss.Web / ClientApp / src / components / reports / SendReportDialog.js View on Github external
export const SendReportDialog = ({ close, props, sendReport }) => {
  const [form, setForm] = useState(null);
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'))
  dayjs.extend(utc);

  const dataCollectors = useSelector(state => state.reports.sendReport.dataCollectors.map(dc => ({ title: `${dc.name} / ${dc.phoneNumber}` })));
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const isSending = useSelector(state => state.reports.formSaving);

  useEffect(() => {
    const fields = {
      dataCollector: '',
      message: '',
      time: dayjs().format('HH:mm')
    };

    const validation = {
      dataCollector: [validators.required],
      message: [validators.required],
github nyss-platform-norcross / nyss / src / RX.Nyss.Web / ClientApp / src / components / common / confirmationDialog / ConfirmationDialog.js View on Github external
export const ConfirmationDialogComponent = ({ children, isOpened, isFetching, close, submit, titleText, contentText }) =&gt; {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

  return (
    <dialog open="{isOpened}">
      
        {titleText}
      
      
        {contentText &amp;&amp;
          
            {contentText}
          
        }
        {children}
        
          <button>
            {strings(stringKeys.form.cancel)}</button></dialog>
github timmo001 / home-panel / src / Components / Configuration / EditGroup.tsx View on Github external
handleClose();
    props.handleUpdate(group);
  }

  const handleChange = (name: string) =&gt; (
    event: React.ChangeEvent
  ) =&gt; {
    setGroup({
      ...group,
      [name]: typeof event === 'string' ? event : event.target.value
    });
  };

  const classes = useStyles();
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <dialog aria-labelledby="responsive-dialog-title" open="">
      Edit Group
      
        </dialog>