Skip to content
Snippets Groups Projects
Select Git revision
  • 330fa3b40f18228cde26d3973e1298bccd442dc6
  • master default protected
  • 2023-ujoncdelutan
  • 2023-update
  • 1.4.7 protected
  • 1.4.6 protected
  • 1.4.5 protected
  • 1.4.4 protected
  • 1.4.3 protected
  • 1.4.2 protected
  • 1.4.1 protected
  • 1.4.0 protected
  • 1.3.19 protected
  • 1.3.18 protected
  • 1.3.17 protected
  • 1.3.16 protected
  • 1.3.15 protected
  • 1.3.14 protected
  • 1.3.13 protected
  • 1.3.12 protected
  • 1.3.10 protected
  • 1.3.11 protected
  • 1.3.9 protected
  • 1.3.8 protected
24 results

AddEventForm.js

Blame
  • AddEventForm.js 2.62 KiB
    import React, { Component } from 'react';
    import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
    import { connect } from 'react-redux';
    import { DateTimeInput } from 'semantic-ui-calendar-react';
    import { writeEvent, eventDate, addEvent } from '../../actions/statistics'
    
    class AddEventForm extends Component {
      constructor(props) {
        super(props);
        this.state = {
          showModal: false,
          date: '',
        };
      }
    
    
      // Handling change in redux action creator throws an exception
      // Temporal solotion using the components state to display, instead redux state
      handleChange = (event, {name, value}) => {
        if (this.state.hasOwnProperty(name)) {
          this.setState({ [name]: value });
        }
        this.props.eventDate(name, value)
      }
    
      render() {
        const { name, date } = this.props.newEvent;
        return (
          <Modal
            open={this.state.showModal}
            trigger={
              <Button
                size='big'
                onClick={() => { this.setState({ showModal: true }); }}
              >Alkalom hozzáadása
              </Button>
            }
          >
            <Modal.Header>Új alkalom:</Modal.Header>
            <Modal.Content
              style={{
                paddingTop: '50px',
              }}
            >
              <Form>
                <Form.Field
                  control={Input}
                  label='Név'
                  name='name'
                  onChange={e => this.props.writeEvent(e)}
                  value={name}
                  style={{
                    marginBottom: '50px',
                  }}
                  placeholder='Title'
                />
                <DateTimeInput
                  name="date"
                  label="Dátum:"
                  dateFormat='YYYY-MM-DD'
                  placeholder="Date"
                  value={this.state.date}
                  iconPosition="left"
                  onChange={this.handleChange}
                />
              </Form>
            </Modal.Content>
            <Modal.Actions>
              <Button
                inverted