How to use the @material/ripple/dist/mdc.ripple.util.getMatchesProperty function in @material/ripple

To help you get started, we’ve selected a few @material/ripple 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 gutenye / react-mc / src / Checkbox / Checkbox.js View on Github external
initRipple_() {
    const MATCHES = util.getMatchesProperty(HTMLElement.prototype)
    const adapter = Ripple.createAdapter(this, {
      isUnbounded: () => true,
      isSurfaceActive: () => this.nativeCb_[MATCHES](':active'),
      registerInteractionHandler: (type, handler) =>
        this.nativeCb_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) =>
        this.nativeCb_.removeEventListener(type, handler),
      computeBoundingRect: () => {
        const { left, top } = this.root_.getBoundingClientRect()
        const DIM = 40
        return {
          top,
          left,
          right: left + DIM,
          bottom: top + DIM,
          width: DIM,
github material-components / material-components-web-react / packages / ripple / index.js View on Github external
createAdapter_ = (surface, activator) => {
      const MATCHES = util.getMatchesProperty(HTMLElement.prototype);

      return {
        browserSupportsCssVars: () => util.supportsCssVariables(window),
        isUnbounded: () => this.props.unbounded,
        isSurfaceActive: () => activator ? activator[MATCHES](':active') : surface[MATCHES](':active'),
        isSurfaceDisabled: () => this.props.disabled,
        addClass: (className) => {
          if (!this.isMounted_) {
            return;
          }
          this.setState({classList: this.state.classList.add(className)});
        },
        removeClass: (className) => {
          if (!this.isMounted_) {
            return;
          }