marcio / react-skylight Goto Github PK
View Code? Open in Web Editor NEWA react component for modals and dialogs
Home Page: http://marcio.github.io/react-skylight/
License: MIT License
A react component for modals and dialogs
Home Page: http://marcio.github.io/react-skylight/
License: MIT License
The component is successfully loading on my browser, however, when I hover over the document, the text turns white and the close button is not working.
Please note that I am listing an array of links where each link should open a modal.
Here is a snapshot of my function where skylight is called:
the function is invoked here:
ESC to close modal as default option
maybe we can override default behavior by pass an option
@marcio Could you remind us that we should use import SkyLight from 'react-skylight'
instead SkyLight = require('react-skylight')
in READMD.md?
Because not everyone use es2015. at least I think you should have to explain that react-skylight 3.0 is on es2015 only.
Hi,
I have been trying to implement autofocus on a text input field inside a modal. I started by calling focus()
on the element inside the _executeAfterModalOpen()
callback. An alert function inside the callback is working fine.
But it looks like this
inside the callback is not pointing to the component. So, this.refs
is showing up as which I am trying to use to get hold of the input field in turn doing _unassigned_
this.refs.modal.focus()
.
EDIT: I meant this.refs
is showing up as undefined
.
How do you recommend handling dynamic content? I have a component where I set the content of the modal in a state variable. The problem is that when I set state and open the modal in the same function, the modal always get old content.
Component = React.createClass({
openModal: function( item ){
this.setState({ item: item });
this.refs.itemModal.show();
},
render: function(){
return(
<a href="javascript:;" onClick={ this.openModal.bind( this, item ) }>Load dynamic content</a>
<SkyLight ref="itemModal">
<CreatePurchase item={ this.state.item } />
</SkyLight>
)
}
});
Is there an easy way to have the skylight render on top of another component vs. the one it was called in?
Hello. I've been looking to implement skylight in one of my projects and have run into a couple questions. I have multiple items on a page that when clicked open up a modal with more info. I'm having trouble figuring out how to reference each individual modal when an item is clicked. In your examples, you open them using this.refs.refName.open(). Is there a way to open a modal using an ID? I was hoping to pass an ID to the store (flux), and then use this id to open the appropriate modal.
Line 47 of skylight.js may call onOverlayClicked() a second time.
Would it be possible for you to rename lib/skylight.js as
lib/skylight.jsx`?
Webpack can't pick up the right format now and you have to point directly to the file so you get an ugly import like this require('jsx!react-skylight/src/skylight.js').SkyLight
. I think that could be just require('react-skylight')
if it was correct.
I get the warning:
Failed prop type: Invalid prop `title` of type `object` supplied to `SkyLight`, expected `string`
I assign my title like this
<SkyLight title={<h5>{ myTitle }</h5>} />
And it works fine.
Unless I am missing something, I think you can relax the requirement that this be a string to allow any react element.
Hi ! Firstable, thank you for react-skylight, it works fine for me !!
Since a few weeks, there is an error for everyone :
"Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead."
The problem is : I installed prop-types but the error is still visible.
After doing what brianvaughn recommanded, it figured that the problem comes from react-skylight
http://stackoverflow.com/questions/43303761/accessing-proptypes-via-the-main-react-package-is-deprecated
Can you fix it ?
Thank you again !!
Would be nice if there would be built-in options to hide the dialog title and the closebox. I am implementing my own title and closebox (which is located at the bottom) and so currently I have to specify a CSS override to hide these elements.
Having an option in the 'dialogstyles' or somewhere else to hide these elements would be helpful.
All of a sudden there is an error thrown when SkyLight is mounted, saying "Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined".
It used to work, it might have broke after i updated npm. Any ideas what could be wrong?
I have a modal page popping up when the user clicks a button :
`render() {
return (
<div>
<section>
<button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button>
</section>
<SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
Text that appears inside the modal page
<Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
</SkyLight>
</div>
)} `
My goal is to open the modal automatically when the user opens the page for the first time.
I don't want to open the modal page by clicking on a button
Question:
Can I use an IIFE (An immediately-invoked function expression) in order to open the modal as soon as the user open the page ?
My approach was to set a boolean to true. Then open the modal if the value is set to true
How come I'm not getting the latest version even though i clear the npm cache and delete the installation folder before running npm update?
In my package.json it says version 0.2.0, as it does here. However I can see there are changes to skylight.jsx that I'm missing. Do you need to bump the version number?
Hi,
I recently started using your skylight component since it's so great and does exactly what I want, but the problem is that it seems to be impossible to give params to callbacks, when they have a parameter the callback functions only run once.
Also, is there a way to specify the callback (or its parameters) to the button that calls the Skylight Modal
Thanks :)
: Object doesn't support property or method 'assign'
It would be possible to consume the library CSS directly through a require
using Webpack if it was provided with the project. If you unignored styles-examples
, then you could do require('react-skylight/styles-examples/default.css')
. Maybe it would be even better to push default.css
to project root as that would clean up the require even further.
I noticed it can be problematic to have skylight-dialog__overlay
use absolute positioning by default. If you do this, the overlay won't follow while you are scrolling (it gets 100% width/height based on viewport, not whole document). It might be preferable to use fixed positioning instead. You are already doing this with the dialog itself.
Besides that the modal seems to be performing ok. I have a demo running at http://bebraw.github.io/reactabular/ (hit one of those edit buttons at a row). It could use some styling still.
It could be nice to include some basic animation examples with Skylight. Ie. animate opacity (fade in, fade out).
Instead of growing the API, maybe it would make sense to make background replaceable? You can provide some default thinger for it. I mean something like:
<SkyLight background={<SkyLight.Background onClick={...} />} />
If background is not provided, it would use the default implementation.
This injection mechanism could be used for other parts of the component if you want to provide extension points.
Maybe some kind of an alternative API could work for this. It's just the obvious solution that came to my mind.
Hello @marcio ,
Could you please update your awesome component for new React? It is working, but the warnings are thrown
Warning: a a
tag (owner: SkyLight
) was passed a numeric string value for CSS property top
(value: 0
) which will be treated as a unitless number in a future version of React.
Warning: a h2
tag (owner: SkyLight
) was passed a numeric string value for CSS property marginTop
(value: 0
) which will be treated as a unitless number in a future version of React.
I think, you just need to change the style.js file....
Thanks
I'm only able to get the hide() option to work when the skylight show()'s from a button. If any other event generates the skylight, the this.hide() function loses track. I can put an image and button side-by-side with the same onClick={foo.hide()} and the button will open, with the X in the corner closing it, while the image when clicked will pop the same skylight component up, but the X doesn't work.
Am I missing something?
Hi there,
I'm looking for a modal component, yours looks great in terms of functionality.
I was wondering if it is possible to get transition effects with it like with Boron
Thank you!
As it's then universally consumable.
You could do something similar to andreypopp/react-time#9
Hi there! Love your demo at http://marcio.github.io/react-skylight/. I do notice that there is a typo at "Default Styles" section there, where the styles name for title was "title" and I think it should be "titleStyle", else it would have the same variable name passing to the Skylight component.
"SkyhLight" on http://marcio.github.io/react-skylight/
Also, " in or design" -- or->our?
I am using the boilerplate https://github.com/juliancwirko/react-boilerplate, and tried applying some properties on a modal using...
var improvedObjectiveModal = {
backgroundColor: '#00897B',
color: '#ffffff',
width: '50%',
height: '100px',
display: 'flex',
align-items: 'center',
justify-content: 'center'
};
But my app produces the error for properties like align-items
and justify-content
. The other properties are otherwise working as expected.
My SkyLightStatelessComponent is not showing even when the isVisible prop is set to true.
When debugging with react dev tools i could see that the isVisible prop of SkyLightStatelesscomponent changes but its isVisible state is not set accordingly.
My code
<SkyLightStateless isVisible={this.props.page_details.user_popup_requested} dialogStyles={myBigGreenDialog} onCloseClicked={() => {this.closePopUp()}}>
<Loader loaded={this.props.page_details.popup_user_loaded}/>
<If condition={this.props.page_details.popup_user_loaded}>
<UserPopupCard />
</If>
</SkyLightStateless>
As they're regular deps now they bloat up the distribution version somewhat. Can you push those as dev deps instead?
Hi, I see there's a commit to add support for a custom close button. We'd like to start using this, however there's no release on npm for it and if I point at HEAD, lib
hasn't been updated with the new code in src
. Would it be possible to do an official release?
This modal is good, But I'm not getting, how to get input data on a submitting form in modal ?.
Is there any example then please help.
Question: what is the preferred why (SEO wise) to trigger a popup if I cannot use buttons (design issue)?
I need this for site crawlers to crawl our modal content which contains important info.
Any thoughts?
Best.
In Flux/Redux apps, the state of components is externalized and injected via properties. What I would like to do is have flux events that mutate the contents of the skylight, then present it by setting the "open" state to true.
Seems still broken in Internet Explorer 11 with version 0.4.1.
I included latest version in my project and get following error in IE11:
SCRIPT438: Object doesn't support property or method 'assign'
Following page is not working either if I try to open it in IE 11: http://marcio.github.io/react-skylight/.
Also there I get following error:
SCRIPT438: Object doesn't support property or method 'assign'
Hi, thanks for your work on this component! I was wondering if it is possible to pass in a classname that gets passed to the modal window and the overlay? I was hoping to do this as an alternative to inline styles since I am using CSS Modules.
Thanks so much!
Is there a particular reason why display: block is forced on the overlay element? I'd like to use flexbox to center the modal on the page properly.
Hi, I'm running react-skylight in my app and am testing it now across browsers.
I found that react-skylight depends on Object.assign() in the skylightstateless.jsx code, which crashes in IE11 because Object.assign() is not yet available in the browser.
For now I worked around this issue by introducing a polyfill into my app, but there really should be a proper fail-safe handling in react-skylight that either throws an error to inform the developer that they need to introduce a polyfill when using react-skylight, or react-skylight could include it's own polyfill to fall back to if it is not natively supported by the browser it is running in.
(for example the Mozilla polyfill code could be used)
Regards,
Wolfgang
Hi, I encounter the following problem when installing:
georgejor$ npm install --save react-skylight
npm ERR! Darwin 14.3.0
npm ERR! argv "/Users/georgejor/.nvm/versions/node/v0.12.5/bin/node" "/Users/georgejor/.nvm/versions/node/v0.12.5/bin/npm" "install" "--save" "react-skylight"
npm ERR! node v0.12.5
npm ERR! npm v2.11.2
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package object-assign does not satisfy its siblings' peerDependencies requirements!
Please help! Thanks!
By relying on JS to set inline styles, I am now finding it very troublesome to implement mobile friendliness. If the styles were controlled with CSS, I could have easily used media queries.
Now it's "react": "^0.12.x"
which seems a bit too tight. "react": ">=0.12.0 <1.0.0"
would work though you can use something else if you want.
would be nice allow a modal have another modal inside it :) what do you think?
When using the following SkyLight component, React says that "Using string literals in ref attributes is depreciated. react/no-string-refs".
<SkyLight
ref="dialogWithCallBacks"
title="Hello!"
beforeOpen={beforeFirstOpen}
afterOpen={afterFirstOpen}
beforeClose={beforeFirstClose}
afterClose={afterFirstClose}>
I have callbacks!
</SkyLight>
Would be nice if this were configured so that if the modal size exceeds screen size, that the modal area will scroll... It's a work in progress (almost done if I can find the time), but you can look at how I did this in my md-datepicker demo.
Basically, I had to place a container inside the overlay with automatic scrolling, so that when the size of the window is smaller than the modal, the modal area becomes scrollable. If you look at the stylesheet specifically .outer, .inner, .inner2 is how this is done... it will middle-align the content, unless it's too big, which will be at the top, then scroll.
You'll have to capture click bubbling from the modal, in order to prevent the outer from being clicked, doing it the way I did... other than that, it works pretty well.
react-skylight/src/skylight.jsx Line 72: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| if (this.props.showOverlay) {
| overlay = (<div style={overlayStyles}></div>);
| }
|
@ ./~/react-skylight/index.js 1:17-46
Hi, I think your module is really neat. Nice job there. ^_^
But, would you mind offering a non-jsx source too?
I'm using browserify and mocha and preprocessed jsx is fine
when used in an app, but the preprocesser is not run when
files are piped mocha/node instead - I really don't want to keep a
compiled version of the module and update it whenever I
update from npm. =/
I'm also curious as to why you'd decide to force users to
compile jsx when using the Skylight?
Having SkyLight modal which should be opened when isVisible is true, I'd like do some actions after modal opens (particularly focus on some field). It seems that afterOpen callback does not work (console.log doesn't show anything, when modal opens...)
someFunc() {
console.log('cb test')
}
<SkyLightStateless
isVisible={isVisible}
afterOpen={this.someFunc}
>
....
I have some issues on using react-skylight in requirejs.
Can you please confirm that you have tested this component in requirejs?
Just came by https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56 . It might be a good idea to go through those issues and see how Skylight manages with them.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.