teamwertarbyte / material-ui-fullscreen-dialog Goto Github PK

If the page containgin the FullScreenDialog is swowing a scrollbar the FullScreenDialog should set {overflow: 'hidden'} to body until the dialog is closed

Is there any plan to support latest react-transition-group?

Has this package been tested against React 16? If so, can we add it as an allowed peer dependency? If not, is that on the roadmap?

Thanks!

Hi,

I need some help with the above warning. I obtained this when I passed a function in the open prop when calling the fullScreenDialog in the parent container.

Along with the previous warning, I also get this warning:

warning.js?8a56:36 Warning: Failed prop type: Invalid prop `lock` of type `function` supplied to `AutoLockScrolling`, expected `boolean`.

In the parent component

{this.state.isLoginModalOpen ? <UserLogin openModal={this.openLoginModal} closeModal={this.closeLoginModal} /> : null}

UserLogin component

<FullscreenDialog open={this.props.openModal}>
	<div className="Login container">
		<Icon name="times" onClick={this.props.closeModal}/>
		... (rest of the login form)
	</div>
</FullscreenDialog>

Also, the smooth scroll animation on opening the modal doesn't come the second time the modal is opened.

Please let me know if I'm doing something incorrectly and there is a better way to do this, or if some clarification is required.

is this component fullscreen when screen width is small ?
i look for a component that be full scren only when the screen is small, I mean responsive.

Hi,

I am having issue testing a react component having a full-screen dialog.

import FullscreenDialog from 'material-ui-fullscreen-dialog'

<FullscreenDialog
  open={this.state.open}
  onRequestClose={() => this.setState({ open: false })}
  title={'Demo dialog'}
  actionButton={<FlatButton
    label='Done'
    onTouchTap={() => this.setState({ open: false })}
  />}
>

</FullscreenDialog>

This is the example from the documentation. Could you please shed some light on how could i test 'onRequestClose' and onTouchTap' using enzyme.When i mount it using enzyme i am not able to simulate with click. Any comment would be helpful.

Heyyy :)

Why the property appBarZDepth cannot be set to 0 without this warning ?

Thanks

Hello guy,

There are a way to modify the close button's color ?

Thanks :)

I'm using material-ui-fullscreen-dialog in a Cordova app. All appears to be well, until the Safari inspector is opened.

The dialog starts to vary its width somewhere between 98% and 100% of the screen width.

After opening the web inspector, the effect can be triggered by:

• Hovering elements in the web inspector.
• Interacting with the DOM.

A workaround is to set the width to 100%.

I think this is a bug in iOS or Safari, but it could this be worked around in this project by setting the width to 100% instead of 100vw?

The react-tap-event-plugin dependency was removed. This change is paving the way toward supporting the upcoming react@16 release a.k.a Fiber. The react-tap-event-plugin dependency was first introduced 3 years ago in order to remove the click delay on mobile devices. Mobiles devices' browsers have improved since then, it's no longer required. It's time to remove that dependency as we have done it a year ago on the v1-beta branch. You need to replace the onTouchTap property callbacks with onClick.

https://github.com/callemall/material-ui/blob/v0.19.0/CHANGELOG.md

I follow the CHANGELOG tip and material-ui-fullscreen-dialog is working now.
I'm preparing PR. It'll be ready in 30 minutes.

Hi thanks for the component, pretty useful. Is there a way to remove the close button on the left side completely ? I get it working by providing an empty div and returning false in the onRequestClose event:

<FullscreenDialog
    open={this.state.open}
    onRequestClose={() => {
        //this.setState({ open: false })
        return false;
    }}
    title={'Demo dialog'}
    actionButton={
        <FlatButton
            label='Done'
            onTouchTap={() => this.setState({ open: false })}
        />        
    }
    closeIcon={<div></div>}
>

It works perfect, however i would like to know if there's a way to remove it completely as the button still occupies some space:

Sorry if the answer is too obvious but i'm a noob in React , appreciate any help.

The version of react-transition-group required as a peer dependency is outdated and still uses the v1 API. Since most users are likely to install the newest version (For example, if they have react-router installed before this package and want to animate the transition), it would be great to update the version and API.

While I understand this could be fixed by using material UI 1.0, we are many who will not have updated in the near future and this issue prevents any full screen dialog from working.

I have create this PR #16 that fixes the issue and implement the new API.