10 examples of 'material ui media queries' in JavaScript

86
@Input() set mediaQuery(m: Array<{screenWidth: number, blockCount: number}>) {
87
    this._mediaSorted = m.sort((a, b) => a.screenWidth - b.screenWidth)
88
}

18
get media() {
19
  return this._query
20
}

69
public get mediaQuery(): ComponentMediaQuery {
70
  if (this.offsetWidth < 768) {
71
    return ComponentMediaQuery.mobile;
72
  } else if (this.offsetWidth < 1200) {
73
    return ComponentMediaQuery.tablet;
74
  } else {
75
    return ComponentMediaQuery.desktop;
76
  }
77
}

89
public get isMqL(): boolean {
90
    return this.$mq.state.isMqL;
91
}

13
render(): ?React$Element<*> {
14
    const {width, height} = this.state.window;
15
    const val = MediaQuerySelector.query(this.props, width, height);
16
    if (val) {
17
        return this.props.children;
18
    } else {
19
        return null;
20
    }
21
}

14
export var MediaQueryWrapper = function MediaQueryWrapper() {
15
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
16
17
  var dispatch = props.dispatch,
18
      fakeWidth = props.fakeWidth,
19
      children = props.children,
20
      other = _objectWithoutProperties(props, ["dispatch", "fakeWidth", "children"]);
21
22
  var values = {
23
    deviceWidth: fakeWidth,
24
    width: fakeWidth
25
  };
26
  return React.createElement(MediaQuery, _extends({}, other, {
27
    values: values
28
  }), children);
29
};

3
export default function MediaQuery({ children, device, onChange, ...settings }) {
4
  const matches = useMediaQuery(settings, device, onChange)
5
6
  if (typeof children === 'function') {
7
    return children(matches)
8
  }
9
  return matches ? children : null
10
}

153
function updateMatchedMedia(polyfill, queries) {
154
  var query
155
    , current = {}
156
157
  // clear the cache since a resize just happened
158
  MediaManager.clearCache()
159
160
  // look for media matches that have changed since the last inspection
161
  for (query in queries) {
162
    if (!queries.hasOwnProperty(query)) continue
163
    current[query] = MediaManager.matchMedia(query).matches
164
    if (current[query] != state[query]) {
165
      callback.call(polyfill, query, MediaManager.matchMedia(query).matches)
166
    }
167
  }
168
  state = current
169
}

30
var MediaQueryWrapper = function MediaQueryWrapper() {
31
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
32
  var dispatch = props.dispatch,
33
      fakeWidth = props.fakeWidth,
34
      children = props.children,
35
      other = (0, _objectWithoutProperties2["default"])(props, ["dispatch", "fakeWidth", "children"]);
36
  var values = {
37
    deviceWidth: fakeWidth,
38
    width: fakeWidth
39
  };
40
  return _react["default"].createElement(_reactResponsive["default"], (0, _extends2["default"])({}, other, {
41
    values: values
42
  }), children);
43
};

223
get hasMedia(): boolean {
224
  /**
225
   * This tags represents media-content
226
   * @type {string[]}
227
   */
228
  const mediaTags = [
229
    'img',
230
    'iframe',
231
    'video',
232
    'audio',
233
    'source',
234
    'input',
235
    'textarea',
236
    'twitterwidget',
237
  ];
238
239
  return !!this.holder.querySelector(mediaTags.join(','));
240
}