Semantic React Modal weird height behavior - javascript

Here is the problem I am having when using the semantic UI React modal: I do as shown on their website, but weirdly my Modal moves around like in this GIF of what is happening.
I have no idea how to fix this. Here is my code:
class Success extends React.Component {
constructor () {
super();
this.closeModal = this.closeModal.bind(this)
this.state = {
Modalopen: true,
Orders: "",
urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
}
}
closeModal () {
this.setState({Modalopen: false})
this.props.history.pushState(null, "/")
}
render () {
return (
<Modal open={this.state.Modalopen}>
<Modal.Header>Success!</Modal.Header>
<Modal.Content image>
<Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
<Modal.Description>
<Header>Thank you</Header>
<p>bla bla bla</p>
<Button color='green' onClick={this.closeModal} inverted>
<Icon name='checkmark' /> Got it
</Button>
</Modal.Description>
</Modal.Content>
</Modal>
);
}
}
What might be causing this issue? Thank you.

I had the same problem today when trying to create a custom 'fullscreen' modal.
This is the line causing us trouble...
https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Modal/Modal.js#L255
If the modal height is greater than or equal to window.innerHeight, it adds the class scrolling which comes with a bunch of styles.
setPositionAndClassNames then appears to be called recursively on line 271, which is probably causing the weird looping behaviour.
Dirty fix
I'm adding margin-bottom: 1px to my modal to make sure it's a tiny bit less than window.innerHeight.
Long term solution
I'll open a PR into semantic-ui-react and see what they say...
UPDATE
I have a PR open at https://github.com/Semantic-Org/Semantic-UI-React/pull/3024 with a suggested fix.
UPDATE
That's merged and now part of Semantic UI React.

In my case, it create Modal normally.
Here is the test code(ES5/webpack) :
[index.html]
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
</head>
<body>
<div id="wrap"></div>
<script src="dist/app.js"></script>
</body>
</html>
[app.jsx]
var React = require('react');
var ReactDOM = require('react-dom');
var Semantic = require('semantic-ui-react');
var Button = Semantic.Button;
var Header = Semantic.Modal.Header;
var Image = Semantic.Image;
var Modal = Semantic.Modal;
var Icon = Semantic.Icon;
var IndexPage = React.createClass({
getInitialState : function() {
return {
Modalopen: true,
Orders: "",
//urlparameter: qs.parse(location.search.replace(/^.*?\=/, ''))
}
},
closeModal: function() {
this.setState({Modalopen: false})
//this.props.history.pushState(null, "/")
},
render : function () {
return (
<Modal open={this.state.Modalopen}>
<Modal.Header>Success!</Modal.Header>
<Modal.Content image>
<Image wrapped size='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
<Modal.Description>
<Header>Thank you</Header>
<p>bla bla bla</p>
<Button color='green' inverted>
<Icon name='checkmark' /> Got it
</Button>
</Modal.Description>
</Modal.Content>
</Modal>
);
}
});
ReactDOM.render(<IndexPage/>, document.getElementById('wrap'));
Image of Result by the upper code
If you get the error continually,
Please add the html/js files more detail with Codepen to test like your situation.

Related

React - change view when we click on img

I woudlike to change a view when I click on my img :
const imageClick = () => {
console.log('Click');
}
const Next = () => {
return (
<Heading size="xl" mb="24px">
<br/>
<Row>New Feature Launched</Row>
</Heading>
<Row><img
src={img}
onClick={() => imageClick()}
loading='lazy'
alt=''
/></Row>
<br/>
I wouldike to go there after clicked : http://localhost:3000/view/1
Look into a form of routing like react-router-dom
https://reactrouter.com/web/guides/quick-start
Then you can simply use <Link to="/view1">Home</Link>
Look into my experiment
https://codesandbox.io/embed/simple-route-pgxw4?fontsize=14&hidenavigation=1&theme=dark
full sample above is implementation the react route, you can move from View 1 to View 2

Changing Font Awesome Button Style onClick

I have a button styled as a Font Awesome.
<button
onClick={this.changeLockButtonStyle}
id="LockButton"
>
<FaLockOpen />
</button>
I'm trying to find a way to change the style to <FaLockClosed /> From reading up online the only examples I see are regarding JQuery and class=”fas fa-lockclosed” toggle class. But I am using a button, not the normal icon. I have tried document.getElementById('LockButton').innerHTML= '<FaLockClosed />' but doesnt work. I'd like to avoid using JQuery if possible.
Here you go:
const [isLocked, setIsLocked] = useState(false);
return (
<button
type="button"
onClick={() => { setIsLocked(true); }}
>
{isLocked ? <FaLockClose /> : <FaLockOpen />}
</button>
);
Update:
Thats how you do it in class component.
constructor(props) {
super(props);
this.state = {
isLocked: false
};
this.lockIcon = this.lockIcon.bind(this);
}
lockIcon() {
this.setState({ isLocked: true });
}
render() {
const { isLocked } = this.state;
return (
<button
type="button"
onClick={this.lockIcon}
>
{isLocked ? <FaLockClose /> : <FaLockOpen />}
</button>
);
}
My best practice solution is using css class.
But if you can't do it , you can use display state for the 2 icons that controlled by a javascript variable.
If you using react or angular, I would just toggle the component depending on a variable set during button pushed.
Reference on how to do the toggle in react
https://stackoverflow.com/a/46425155/14167216
Here is a jQuery example.
You can set the class on the button and then check if button has class. If it has lock class then change to unlock class, and vice-versa. Check the sample code below.
function changeLockButtonStyle() {
var icon = $('#LockButton')
var hasLock = icon.hasClass('fa-lock');
if(hasLock) {
icon.removeClass('fa-lock').addClass('fa-unlock');
} else {
icon.removeClass('fa-unlock').addClass('fa-lock');
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button
onClick='changeLockButtonStyle()'
id="LockButton"
class="fa fa-lock"
>
</button>
</body>

React can't figure out how to change a text through buttons onClick events

I'm new to React, Nodejs and JavaScript so bear with me.
I'm doing some practice with onClick events to change text by clicking some buttons, I have an input type="checkbox" to make the text bold when checked and vise versa, 2 buttons to increase and decrease the text size by 1+ or 1- and a span that shows the current text size (16 is my default), and finally a span with the id="textSpan" that have the text meant to be modified. I also want this buttons, the checkbox and the span with the id="fontSizeSpan" that shows the current font size to be hidden by default and when you click the text it appears on its left.
This is the code so far:
class FontChooser extends React.Component {
constructor(props) {
super(props);
this.state = {hidden: true};
this.checkInput = React.createRef();
this.hide = React.createRef();
}
toggle(){
this.setState({hidden: !this.state.hidden});
this.hide.current
}
makeBold(){
this.setState({bold: !this.state.bold});
this.checkInput.current
}
changeSize(){
this.setState({size: !this.props.size})
for(var i = this.props.size; i <= this.props.max; i++);
}
render() {
return(
<div>
<input type="checkbox" id="boldCheckbox" ref={this.hide} hidden={false} onClick={this.makeBold.bind(this)}/>
<button id="decreaseButton" ref={this.hide} hidden={false}>-</button>
<span id="fontSizeSpan" ref={this.hide} hidden={false}>{this.props.size}</span>
<button id="increaseButton" ref={this.hide} hidden={false} onClick={this.changeSize.bind(this)}>+</button>
<span id="textSpan" ref={this.checkInput} onClick={this.toggle.bind(this)}>{this.props.text}</span>
</div>
);
}
right now their hidden attribute is false so I can see them.Here's the html which is not much:
<div id='container'></div>
<script type="text/jsx">
ReactDOM.render(
<div>
<FontChooser min='4' max='40' size='16' text='You can change me!' bold='false'/>
</div>,
document.getElementById('container'))
;
</script>
So far all I have managed is for the browser console(I'm using Firefox react component addon) to confirm there is a functioning event that doesn't really work, as in when I click the text, the buttons or the input checkbox the props does change to false or true every click but that's about it.
I appreciate it if someone could guide me through this.
NOTE:
just in case nothing is imported, also I setup a local server with Nodejs
Here is an Example of what you want: https://codesandbox.io/s/mystifying-cookies-v7w3l?file=/src/App.js
Basically, I have 4 variables: text, fontWeight, fontSize and showTools.
Each button has its own task and also you can select if show or not.
In React you don't have to care about ids like in older frameworks. You can generate the elements just in the place where you are with the information which you need. So, basically, we have the 4 variables and use them wisely where we want (as styles props, as text and even as a conditional to show components). It's the magic of React and JSX.
In the code I've use hooks, part of the latest definition of React. For that my Components is functional and not a Class. it makes it easier and faster for examples and prototyping.
The tools are show by default just to let you play with it
import React from "react";
import "./styles.css";
export default function App() {
const [text, setText] = React.useState("");
const [boldFont, setBoldFont] = React.useState(false);
const [fontSize, setFontSize] = React.useState(14);
const [showTools, setShowTools] = React.useState(true);
return (
<div className="App">
<div
style={{
fontWeight: boldFont ? "bold" : "normal",
fontSize: `${fontSize}px`
}}
>
<span onClick={() => setShowTools(!showTools)}>
{text || "Text Example"}
</span>
</div>
{showTools && (
<div>
<button onClick={() => setBoldFont(!boldFont)}>Bold</button> |
<button onClick={() => setFontSize(fontSize + 1)}>A+</button>
<button onClick={() => setFontSize(fontSize - 1)}>a-</button>
<input
type="text"
value={text}
onChange={event => {
setText(event.target.value);
}}
/>
</div>
)}
</div>
);
}

Using ReactModal button with Href, not working. Unsure why

I am fairly new to react and have redone my personal site in react. The issue I am running into is my button that links (with href) to my JSfiddle for each portfolio demo is not working. I am not sure if I did not bind correctly or what exactly the issue is other than when the modal is open, the Demo button does not work. Close modal button works fine. Please see code below.
import React from 'react';
import ReactModal from 'react-modal';
class Project extends React.Component {
constructor () {
super();
this.state = {
showModal: false
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal() {
this.setState({ showModal: true});
}
handleCloseModal() {
this.setState({ showModal: false});
}
componentWillMount() {
ReactModal.setAppElement('body');
}
render() {
const { details } = this.props;
return (
<li className="Project">
<div onClick={this.handleOpenModal}>
<img className="Project-image" src={'projects/' + details.image} alt={details.name}/>
<div className="Project-overlay">
<p>{details.name}</p>
</div>
</div>
<div >
<ReactModal
isOpen={this.state.showModal}
contentLabel="This is my Modal"
shouldCloseOnOverlayClick={true}
onRequestClose={this.handleCloseModal}
>
<div className="modal-header">
<h3>{details.name}</h3>
</div>
<div className="modal-body">
<img className="Project-image" src={'projects/' + details.image} alt={details.name} />
<p className="desc-body">{details.desc}</p>
<p className="desc-body">{details.link}</p>
</div>
<div className="modal-footer">
{ details.havLink && <button className="button" href={details.link}>Click for Demo!</button> }
<button className="button" onClick={this.handleCloseModal}>Close Modal</button>
</div>
</ReactModal>
</div>
<div className="Project-tag">
<p>{details.tag}</p>
</div>
</li>
)
}
}
const props = {};
export default Project;
The issue is in the first line of the "modal-footer" class. This button will show if the havLink property is true. This data is being exported from another JS file. Everything else (image, description, modal title) all import correctly, even the link I set imports correctly but when the button is pushed nothing fires as I expected. I do not see any errors in my React dev tools either.
{details.link} as an href is not routing me to the specified link. The link will show up in the paragraph tag though (just to see if correct link populated).
Let me know if anything else is needed, I am hoping the solution is as simple as an incorrect binding. Thank you in advance!
<button> does not have the href attribute. You should be using an anchor element <a>. To the anchor you can pass whatever class or style you want to make it look like a button, but it's still an anchor element, not button.

Owl Carousel with React

I want to use Owl Carousel with React, and I am new to React.
Please see this jsfiddle, I spent much time to do it.
The JSX code
var Carousel = React.createClass({
componentDidMount: function(){
$(React.findDOMNode(this)).owlCarousel({
items: 4
});
},
render: function(){
return(
<div id="inx-carousel-thumb" className="owl-carousel">
{
this.props.images.map(function(image, index){
return (
<div className="item" key={index}><img src={image} /></div>
)
}.bind(this))
}
</div>
);
}
});
var imagesList = [['http://www.myfacewhen.net/uploads/3908-troll-smile.jpg', 'http://www.captionite.com/templates/thumb-success.jpg', 'http://pauljadam.com/forma11y/img/rage-guy-teeth-smile.jpg'],['http://i2.kym-cdn.com/entries/icons/original/000/004/073/smile.png']];
var Container = React.createClass({
getInitialState: function(){
return {
images: imagesList[0]
};
},
changeImages: function(index) {
this.setState({images: imagesList[index]});
},
render: function(){
return(
<div>
<Carousel images={this.state.images} />
<input type="button" onClick={this.changeImages.bind(this, 0)} value="Images List 0" />
<input type="button" onClick={this.changeImages.bind(this, 1)} value="Images List 1" />
</div>
);
}
});
$(document).ready(function(){
React.render(
<Container />,
document.getElementById('container')
);
});
I included Jquery, Reactjs, Owl Carousel, too.
The problem is that when I tap button "Images List 1" to change the source array of Owl Carousel, the item count of carousel should become 1. However, it is still 3, and it only change first item. I think React only replace first item and ignore whole div, but I don't know how to fix it. Please give me some hints.
You have two options here:
You should deinitialize (destroy) OwnCarousel on componentWillUpdate and init it againt on componentDidUpdate after React rerendered the component with new images
You should return false in shouldComponentUpdate and manually update DOM in componentWillReceiveProps using nextProps.images value and jQuery
sorry my bad english!
You should verify length of element the carousel will use.
Example: in this case, my element is .banner-img - refer elements of <img />
componentDidUpdate: function () {
if ($('.banner-img').length > 0) {
$("#owl-home-slider").owlCarousel();
}
}

Categories