123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- import React from 'react';
- class Spoiler extends React.Component {
- constructor(props) {
- super(props)
- this.state = { open: "true" };
- this.press = this.press.bind(this);
- }
- spoilerHide() {
- if (this.state.open === "true") {
- return <div>{this.props.children}</div>
- } else {
- return <div></div>
- }
- }
- press() {
- let stateChange = (this.state.open === "true") ? "false" : "true"
- this.setState({
- open: stateChange
- });
- }
- render() {
- return (
- <>
- <div onClick={this.press}>{this.props.header}</div>
- <div>{this.spoilerHide()}</div>
- </>
- );
- }
- }
- //
- class RangeInput extends React.Component {
- constructor(props) {
- super(props)
- this.state = { text: "" }
- }
- render() {
- return (
- <input value={this.state.text} onChange={(e) => {
- (e.target.value.length < this.props.min + 1 || e.target.value.length > this.props.max - 1) ? (e.target.style.backgroundColor = "red")
- : (e.target.style.backgroundColor = "white")
- this.setState({ text: e.target.value })
- }} />
- )
- }
- }
- //
- class PasswordConfirm extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- password: "",
- passwordConfirmed: ""
- }
- }
- render() {
- return (
- <>
- <form>
- <input placeholder="enter password..." type='password' value={this.state.password} onChange={(e) => {
- this.setState({ password: e.target.value })
- }} />
- <input placeholder="enter password again..." type='password' value={this.state.passwordConfirmed} onChange={(e) => {
- this.setState({ passwordConfirmed: e.target.value })
- }} />
- <button disabled={!(this.state.password.length > this.props.min && this.state.password === this.state.passwordConfirmed)}>submit</button>
- </form>
- </>
- )
- }
- }
- //
- class Timer extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- time: {},
- sec: this.props.sec,
- pause: "false"
- }
- this.pause = this.pause.bind(this);
- }
- secondsToTime(secs) {
- let hours = Math.floor(secs / (60 * 60))
- let divisor_for_minutes = secs % (60 * 60);
- let minutes = Math.floor(divisor_for_minutes / 60);
- let divisor_for_seconds = divisor_for_minutes % 60;
- let seconds = Math.ceil(divisor_for_seconds);
- let obj = {
- "h": hours,
- "m": minutes,
- "s": seconds
- };
- return obj;
- }
- pause() {
- let statePause = (this.state.pause === "true") ? "false" : "true"
- this.setState({
- pause: statePause
- });
- }
- tick() {
- if (this.state.pause === "false") {
- this.setState({
- sec: this.state.sec - 1,
- time: this.secondsToTime(this.state.sec - 1)
- });
- } else {
- this.setState({
- sec: this.state.sec,
- time: this.secondsToTime(this.state.sec)
- });
- }
- }
- componentDidMount() {
- let timeLeftVar = this.secondsToTime(this.state.seconds);
- this.setState({ time: timeLeftVar });
- this.timerID = setInterval(
- () => this.tick(),
- 1000
- );
- }
- componentWillUnmount() {
- clearInterval(this.timerID);
- }
- render() {
- return (
- <>
- <div>Hrs: {this.state.time.h} min: {this.state.time.m} sec: {this.state.time.s}</div>
- <button onClick={this.pause}>pause/start</button>
- </>
- )
- }
- }
- //
- // class TimerControl extends React.Component {
- // constructor(props) {
- // super(props)
- // this.state = {
- // hours: 0,
- // minutes: 0,
- // sec: 100,
- // pause: "false"
- // }
- // debugger;
- // this.pause = this.pause.bind(this);
- // }
- // secondsToTime(secs) {
- // debugger
- // if (this.state.sec != 0) {
- // let hoursCalc = Math.floor(secs / (60 * 60))
- // let divisor_for_minutes = secs % (60 * 60);
- // let minutesCalc = Math.floor(divisor_for_minutes / 60);
- // let divisor_for_seconds = divisor_for_minutes % 60;
- // let secondsCalc = Math.ceil(divisor_for_seconds);
- // this.setState({
- // hours: hoursCalc,
- // minutes: minutesCalc,
- // sec: secondsCalc,
- // });
- // } else {
- // }
- // }
- // //
- // // hoursToTime(hours) {
- // // let hoursCalc = hours
- // // let secondsCalc = Math.floor(hours * 3600)
- // // let minutesCalc = Math.floor(hours * 60)
- // // //let divisor_for_seconds = divisor_for_minutes % 60;
- // // // let divisor_for_minutes = hours % (60 * 60);
- // // // let minutesCalc = Math.floor(divisor_for_minutes / 60);
- // // // let secondsCalc = Math.ceil(divisor_for_seconds);
- // // this.setState({
- // // hours: hoursCalc,
- // // minutes: minutesCalc,
- // // sec: secondsCalc,
- // // });
- // // }
- // pause() {
- // let statePause = (this.state.pause === "true") ? "false" : "true"
- // this.setState({
- // pause: statePause
- // });
- // }
- // tick() {
- // if (this.state.pause === "false") {
- // this.setState({
- // // hours: this.state.hours,
- // // minutes: this.state.minutes,
- // sec: this.secondsToTime(this.state.sec - 1)
- // });
- // } else {
- // this.setState({
- // // hours: this.state.hours,
- // // minutes: this.state.minutes,
- // sec: this.state.sec
- // });
- // }
- // }
- // componentDidMount() {
- // debugger;
- // let timeLeftVar = this.secondsToTime(this.state.sec);
- // this.setState({ sec: timeLeftVar });
- // this.timerID = setInterval(
- // () => this.tick(),
- // 1000
- // );
- // }
- // componentWillUnmount() {
- // clearInterval(this.timerID);
- // }
- // render() {
- // return (
- // <>
- // <div>
- // <form>
- // <input type="number" placeholder="h" onChange={(e) => {
- // this.setState({ hours: e.target.value })
- // }} />
- // <input type="number" placeholder="m" onChange={(e) => {
- // this.setState({ minutes: e.target.value })
- // }} />
- // <input type="number" placeholder="s" onChange={(e) => {
- // this.setState({ sec: e.target.value })
- // }} />
- // </form>
- // </div>
- // <div>
- // <div>Hrs: {this.state.hours} min: {this.state.minutes} sec: {this.state.sec}</div>
- // <button onClick={this.pause}>pause/start</button>
- // </div>
- // </>
- // )
- // }
- // }
- const App = () => {
- return (
- <>
- <Spoiler header={<h1>Заголовок</h1>} open>
- Контент 1
- <p>
- лорем ипсум траливали и тп.
- </p>
- </Spoiler>
- <RangeInput min={2} max={10} />
- <PasswordConfirm min={2} />
- <Timer sec={3606} />
- </>
- )
- }
- export default App;
|