import React from 'react'; import ImmutablePureComponent from 'react-immutable-pure-component'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { v4 as uuidv4 } from 'uuid'; export const InputContainer = (props) => { const containerClass = classNames('input', { 'with_label': props.label, 'required': props.required, 'boolean': props.type === 'checkbox', }, props.extraClass); return (
{props.children} {props.hint && {props.hint}}
); }; InputContainer.propTypes = { label: PropTypes.string, hint: PropTypes.string, required: PropTypes.bool, type: PropTypes.string, children: PropTypes.node, extraClass: PropTypes.string, }; export const LabelInput = ({ label, ...props }) => { const id = uuidv4(); return (
); }; LabelInput.propTypes = { label: PropTypes.string.isRequired, }; export class SimpleInput extends ImmutablePureComponent { static propTypes = { label: PropTypes.string, hint: PropTypes.string, } render() { const { hint, ...props } = this.props; const Input = this.props.label ? LabelInput : 'input'; return ( ); } } export class SimpleForm extends ImmutablePureComponent { static propTypes = { children: PropTypes.node, onSubmit: PropTypes.func, } static defaultProps = { onSubmit: e => e.preventDefault(), } render() { const { children, onSubmit } = this.props; return (
{children}
); } } export class FieldsGroup extends ImmutablePureComponent { static propTypes = { children: PropTypes.node, } render() { const { children } = this.props; return (
{children}
); } } export const Checkbox = props => ( ); export class RadioGroup extends ImmutablePureComponent { static propTypes = { label: PropTypes.string, children: PropTypes.node, } render() { const { label, children, onChange } = this.props; const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { onChange }) ); return (
    {childrenWithProps}
); } } export class RadioItem extends ImmutablePureComponent { static propTypes = { label: PropTypes.string, hint: PropTypes.string, value: PropTypes.string.isRequired, checked: PropTypes.bool.isRequired, onChange: PropTypes.func, } static defaultProps = { checked: false, } render() { const { label, hint, value, checked, onChange } = this.props; const id = uuidv4(); return (
  • ); } } export class SelectDropdown extends ImmutablePureComponent { static propTypes = { label: PropTypes.string, items: PropTypes.object.isRequired, defaultValue: PropTypes.string, onChange: PropTypes.func, } render() { const { label, items, defaultValue, onChange } = this.props; const id = uuidv4(); return (
    ); } } export const TextInput = props => ( ); export const FileChooser = props => ( ); FileChooser.defaultProps = { accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], };