Skip to content

Commit

Permalink
Fixed issue with small modals, on scrollables containers
Browse files Browse the repository at this point in the history
  • Loading branch information
Timur Khazamov committed Nov 13, 2017
1 parent 7ba1cb6 commit 845aa89
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 51 deletions.
29 changes: 7 additions & 22 deletions src/Behaviour/smoothScrollIntoView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,28 +142,13 @@ function scrollBy({ left, top }: { left: number, top: number }): Promise<void> {
);
}

function isElementInViewport(el: HTMLElement): boolean {
let currentElement = el;
let top = currentElement.offsetTop;
let left = currentElement.offsetLeft;
const width = currentElement.offsetWidth;
const height = currentElement.offsetHeight;

while (currentElement.offsetParent) {
const offsetParent = currentElement.offsetParent;
if (offsetParent instanceof HTMLElement) {
currentElement = offsetParent;
top += currentElement.offsetTop;
left += currentElement.offsetLeft;
} else {
break;
}
}

function isElementInViewport(element: HTMLElement): boolean {
const rect = element.getBoundingClientRect();
const html = document.documentElement || { clientHeight: 0, clientWidth: 0 };
return (
top >= (window.scrollY || window.pageYOffset) &&
left >= (window.scrollX || window.pageXOffset) &&
top + height <= (window.scrollY || window.pageYOffset) + window.innerHeight &&
left + width <= (window.scrollX || window.pageXOffset) + window.innerWidth
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
176 changes: 147 additions & 29 deletions stories/ModalInput.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,77 @@
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import Modal from 'retail-ui/components/Modal';
import Input from 'retail-ui/components/Input';
import Button from 'retail-ui/components/Button';
import Select from 'retail-ui/components/Select';
import { ValidationContainer, ValidationWrapperV1, text } from '../src';
/* eslint-disable react/no-multi-comp */
import React from "react";
import { storiesOf } from "@kadira/storybook";
import Modal from "retail-ui/components/Modal";
import Input from "retail-ui/components/Input";
import Button from "retail-ui/components/Button";
// import Select from "retail-ui/components/Select";
import { ValidationContainer, ValidationWrapperV1, text } from "../src";

storiesOf("ModalWithSingleInput", module)
.add("Example1", () => <ModalInputStory />)
.add("Example2", () => <SmallModalInputStory />);

class ModalInputStory extends React.Component {
state = {
value1: '',
value1: "",
};

validateValue1() {
const { value1 } = this.state;
if (value1 === '') {
return { message: 'Должно быть не пусто', type: 'submit' };
}
else if (value1.split(' ').length !== 2) {
return { message: 'Значение должно состоять из двух слов', type: 'lostfocus' };
if (value1 === "") {
return { message: "Должно быть не пусто", type: "submit" };
} else if (value1.split(" ").length !== 2) {
return {
message: "Значение должно состоять из двух слов",
type: "lostfocus",
};
}
return null;
}

render() {
return (
<ValidationContainer scrollOffset={115} ref='container'>
<ValidationContainer scrollOffset={115} ref="container">
<Modal>
<Modal.Header>
Заголовок
</Modal.Header>
<Modal.Header>Заголовок</Modal.Header>
<Modal.Body>
<div style={{ padding: 10 }}>
<div style={{ height: 1000, backgroundColor: '#eee' }} />
<div data-tid='ClickArea' style={{ textAlign: 'center', marginBottom: 10, padding: 10, border: '1px solid #ddd' }}>
<div
style={{
height: 1000,
backgroundColor: "#eee",
}}
/>
<div
data-tid="ClickArea"
style={{
textAlign: "center",
marginBottom: 10,
padding: 10,
border: "1px solid #ddd",
}}>
Click here
</div>
<ValidationWrapperV1
data-tid='ValidationWrapper'
data-tid="ValidationWrapper"
validationInfo={this.validateValue1()}
renderMessage={text('bottom')}>
renderMessage={text("bottom")}>
<Input
data-tid='SingleInput'
data-tid="SingleInput"
value={this.state.value}
onChange={(e, value) => this.setState({ value1: value })}
/>
</ValidationWrapperV1>
<div style={{ height: 1000, backgroundColor: '#eee' }} />
<div
style={{
height: 1000,
backgroundColor: "#eee",
}}
/>
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.refs.container.submit()} use='primary'>
<Button onClick={() => this.refs.container.submit()} use="primary">
Кнопка
</Button>
</Modal.Footer>
Expand All @@ -59,8 +81,104 @@ class ModalInputStory extends React.Component {
}
}

storiesOf('ModalWithSingleInput', module)
.add('Example1', () => {
return <ModalInputStory />;
})
;
class SmallModalInputStory extends React.Component {
state = {
value1: "",
};

componentDidMount() {
window.scrollTo(1000, 1000);
}

validateValue1() {
const { value1 } = this.state;
if (value1 === "") {
return { message: "Должно быть не пусто", type: "submit" };
} else if (value1.split(" ").length !== 2) {
return {
message: "Значение должно состоять из двух слов",
type: "lostfocus",
};
}
return null;
}

render() {
return (
<ValidationContainer ref="outerContainer">
<div>
<h1>
<center>Header</center>
</h1>
<div
style={{
height: 3000,
width: 3000,
background: `repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
)`,
}}
/>

<ValidationWrapperV1
data-tid="ValidationWrapper"
validationInfo={this.validateValue1()}
renderMessage={text("bottom")}>
<Input
data-tid="SingleInput"
value={this.state.value1}
onChange={(e, value) => this.setState({ value1: value })}
/>
</ValidationWrapperV1>
<h2>
<center>Footer</center>
</h2>
</div>

<Modal>
<ValidationContainer scrollOffset={115} ref="container">
<Modal.Header>Заголовок</Modal.Header>
<Modal.Body>
<div style={{ padding: 10 }}>
<div
data-tid="ClickArea"
style={{
textAlign: "center",
marginBottom: 10,
padding: 10,
border: "1px solid #ddd",
}}>
Click here
</div>
<ValidationWrapperV1
data-tid="ValidationWrapper"
validationInfo={this.validateValue1()}
renderMessage={text("bottom")}>
<Input
data-tid="SingleInput"
value={this.state.value1}
onChange={(e, value) => this.setState({ value1: value })}
/>
</ValidationWrapperV1>
</div>
</Modal.Body>
<Modal.Footer>
<Button
onClick={() => {
this.refs.container.submit();
// this.refs.outerContainer.submit();
}}
use="primary">
Кнопка
</Button>
</Modal.Footer>
</ValidationContainer>
</Modal>
</ValidationContainer>
);
}
}

0 comments on commit 845aa89

Please sign in to comment.