Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useState } from 'react';
- import PropTypes from 'prop-types';
- import { Icon, Tooltip, Button, Typography } from 'antd';
- import { Form, Field } from 'react-final-form';
- import arrayMutators from 'final-form-arrays';
- import createDecorator from 'final-form-focus';
- import cx from 'classnames';
- import {
- Input,
- DatePicker,
- TimePicker,
- Textarea,
- Select
- } from '../../../components';
- import EventPreview from '../../EventPreview/EventPreview';
- import ImageBrowser from './ImageBrowser/ImageBrowser';
- import Mentors from './Mentors/Mentors';
- import {
- Validators,
- eventsStatuses,
- eventPositions,
- pipe
- } from '../../../utils';
- import styles from './EventForm.scss';
- const focusOnError = createDecorator();
- const EventForm = ({ event, onSave, onDelete, onDuplicate, isNew }) => {
- const [eventForPreview, setEventForPreview] = useState(event);
- const [isVisible, setIsVisible] = useState(false);
- return (
- <div className={styles.wrapper}>
- <Form
- onSubmit={onSave}
- decorators={[focusOnError]}
- mutators={{
- ...arrayMutators
- }}
- initialValues={{
- status: 'notPublished',
- ...event
- }}
- validate={values => {
- const newImageSRC = (values.newImage || {}).src;
- /* eslint consistent-return: 0 */
- if (!newImageSRC && !values.imageUrl) {
- return { imageField: 'Zdjęcie jest wymagane' };
- }
- }}
- render={({ handleSubmit, values, invalid, form }) => (
- <form onSubmit={handleSubmit}>
- <div className={styles.wrapperOneLine}>
- <Typography.Title level={2} className={styles.title}>
- {isNew ? 'Dodaj Wydarzenie' : 'Edytuj Wydarzenie'}
- </Typography.Title>
- <Button
- type='primary'
- htmlType='submit'
- className={styles.saveButton}
- >
- Zapisz
- </Button>
- </div>
- <div className={cx(styles.wrapperOneLine, styles.eventFormula)}>
- <Select
- name='status'
- options={eventsStatuses}
- className={styles.select}
- placeholder='Status'
- />
- <span>
- <Tooltip title='Wyświetl event'>
- <Icon
- type='eye'
- className={styles.icon}
- onClick={() => {
- setEventForPreview(values);
- setIsVisible(true);
- }}
- />
- </Tooltip>
- <If condition={!isNew}>
- <Tooltip title='Duplikuj wydarzenie'>
- <Icon
- type='copy'
- className={cx(
- styles.icon,
- invalid && styles.iconDisabled
- )}
- onClick={() => onDuplicate(event.eventId)}
- />
- </Tooltip>
- <Tooltip title='Usuń wydarzenie'>
- <Icon
- type='delete'
- className={cx(styles.icon, styles.iconDelete)}
- theme='filled'
- onClick={() => onDelete([event.eventId])}
- />
- </Tooltip>
- </If>
- </span>
- </div>
- <div className={styles.wrapperForm}>
- <Typography.Title level={4} className={styles.subTitle}>
- Nazwa
- </Typography.Title>
- <hr />
- <Input
- name='name'
- label='Nazwa wydarzenia *'
- validate={pipe(
- Validators.isRequired,
- Validators.min(2),
- Validators.max(255)
- )}
- />
- <Typography.Title level={4} className={styles.subTitle}>
- Pozycja na stronie
- </Typography.Title>
- <hr />
- <div className={styles.flexBasis45}>
- <Select
- name='promoted'
- label='Pozycja wydarzenia na stronie'
- options={eventPositions}
- />
- </div>
- <Typography.Title level={4} className={styles.subTitle}>
- Adres
- </Typography.Title>
- <hr />
- <Input
- name='locationName'
- label='Nazwa miejsca *'
- validate={pipe(
- Validators.isRequired,
- Validators.min(2),
- Validators.max(255)
- )}
- />
- <div className={styles.flexBasis60}>
- <Input
- name='street'
- label='Ulica *'
- validate={pipe(
- Validators.isRequired,
- Validators.min(2),
- Validators.max(255)
- )}
- />
- </div>
- <div className={styles.flexBasis35}>
- <Input
- name='houseNumber'
- label='Numer *'
- validate={pipe(
- Validators.isRequired,
- Validators.max(255)
- )}
- />
- </div>
- <div className={styles.flexBasis35}>
- <Input
- name='zipCode'
- label='Kod pocztowy *'
- validate={pipe(
- Validators.isRequired,
- Validators.min(2),
- Validators.max(255)
- )}
- />
- </div>
- <div className={styles.flexBasis60}>
- <Input
- name='city'
- label='Miasto *'
- validate={pipe(
- Validators.isRequired,
- Validators.min(2),
- Validators.max(255)
- )}
- />
- </div>
- <Input name='mapLink' label='Google Maps link' />
- <Typography.Title level={4} className={styles.subTitle}>
- Czas Trwania
- </Typography.Title>
- <hr />
- <div className={styles.flexBasis45}>
- <DatePicker
- name='startDate'
- label='Data od *'
- validate={Validators.isRequired}
- />
- </div>
- <div className={styles.flexBasis45}>
- <DatePicker
- name='endDate'
- label='Data do *'
- validate={Validators.isRequired}
- />
- </div>
- <div className={styles.flexBasis45}>
- <TimePicker
- name='startHour'
- label='Godzina od *'
- validate={Validators.isRequired}
- />
- </div>
- <div className={styles.flexBasis45}>
- <TimePicker
- name='endHour'
- label='Godzina do *'
- validate={Validators.isRequired}
- />
- </div>
- <Input
- name='timePeriod'
- // eslint-disable-next-line max-len
- label='Dni tygodnia, w których będzie się odbywać wydarzenie *'
- validate={pipe(
- Validators.isRequired,
- Validators.min(2),
- Validators.max(255)
- )}
- placeholder='Podaj dni tygodnia'
- />
- <Typography.Title level={4} className={styles.subTitle}>
- Opis
- </Typography.Title>
- <hr />
- <Textarea
- name='shortDescription'
- label='Skrócony opis *'
- rows='5'
- validate={pipe(
- Validators.isRequired,
- Validators.min(3),
- Validators.max(255)
- )}
- />
- <Textarea
- name='longDescription'
- label='Pełny opis *'
- rows='5'
- validate={pipe(
- Validators.isRequired,
- Validators.min(3),
- Validators.max(5000)
- )}
- />
- </div>
- <Typography.Title level={4} className={styles.subTitle}>
- Zdjęcie *
- </Typography.Title>
- <hr />
- <Field
- name='imageField'
- render={({ meta }) => (
- <React.Fragment>
- <ImageBrowser
- formValues={values}
- updateImage={imageData =>
- form.change('newImage', imageData)
- }
- error={!!(meta.touched && meta.error)}
- />
- {meta.touched && meta.error && (
- <span className={styles.errorField}>{meta.error}</span>
- )}
- </React.Fragment>
- )}
- />
- <Typography.Title level={4} className={styles.subTitle}>
- Mentorzy
- </Typography.Title>
- <hr />
- <Mentors selectedMentors={values.mentors} />
- </form>
- )}
- />
- <EventPreview
- isVisible={isVisible}
- event={eventForPreview}
- onOk={() => setIsVisible(false)}
- />
- </div>
- );
- };
- EventForm.propTypes = {
- event: PropTypes.object,
- onSave: PropTypes.func,
- onDelete: PropTypes.func,
- onDuplicate: PropTypes.func,
- isNew: PropTypes.bool
- };
- export default EventForm;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement