GRID material ui

idを付けたelementが出てくる前に、<script src="app.js"></script>が先に来ているから。

<div id="test"></div>
のあとに
<script src="app.js"></script>
を持ってこないとJavaScriptは何を言わているか分からない。
一番良いのは</body>の直前。

import React from 'react';
import Carousel from 'react-material-ui-carousel'
import { Paper, Button } from '@material-ui/core'

function Example(props)
{
    var items = [
        {
            name: "Random Name #1",
            description: "Probably the most random thing you have ever seen!"
        },
        {
            name: "Random Name #2",
            description: "Hello World!"
        }
    ]

    return (
        <Carousel>
            {
                items.map( (item, i) => <Item key={i} item={item} /> )
            }
        </Carousel>
    )
}

function Item(props)
{
    return (
        <Paper>
            <h2>{props.item.name}</h2>
            <p>{props.item.description}</p>

            <Button className="CheckButton">
                Check it out!
            </Button>
        </Paper>
    )
}

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

<Input type="number"
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
    }}
/>

import React from 'react'

import styled, { keyframes } from 'styled-components'

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`

const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
  animation: 2s ${rotate} linear infinite;
  height: ${({ size }) => size};
  width: ${({ size }) => size};
  path {
    stroke: ${({ stroke, theme }) => stroke ?? theme.primary1};
  }
`

export default function Loader({
  size = '16px',
  stroke,
  ...rest
}: {
  size?: string
  stroke?: string
  [k: string]: any
}) {
  return (
    <StyledSVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" size={size} stroke={stroke} {...rest}>
      <path
        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </StyledSVG>
  )
}

  let sortedArray= !loading && assets.slice().sort((a, b) => a.name.localeCompare(b.name))

{(() => {
  if (minMaxError) return <InputInfoError>{errorMessage}</InputInfoError>
  if (minAmountError) return <InputInfoError>{errorMessage}</InputInfoError>
  if (isMinAmountZeroError) return <InputInfoError>{errorMessage}</InputInfoError>
  else return <InputInfo>{sellAssetName}</InputInfo>
})()}

const onlyIntegers = () => {
    const myInput = document.querySelectorAll("input[type=number]");

    function keyAllowed(key) {
      const keys = [8, 9, 13, 16, 17, 18, 19, 20, 27, 46, 48, 49, 50,
        51, 52, 53, 54, 55, 56, 57, 91, 92, 93
      ];
      if (key && keys.indexOf(key) === -1)
        return false;
      else
        return true;
    }

    myInput.forEach(function(element) {
      element.addEventListener('keypress', function(e) {
        const key = !isNaN(e.charCode) ? e.charCode : e.keyCode;
        if (!keyAllowed(key))
          e.preventDefault();
      }, false);

      // Disable pasting of non-numbers
      element.addEventListener('paste', function(e) {
        const pasteData = e.clipboardData.getData('text/plain');
        if (pasteData.match(/[^0-9]/))
          e.preventDefault();
      }, false);
    })
  };

  useEffect(() => {
    onlyIntegers()
  }, []);

 <Input type='number'/>

const referencePickupTime = moment(booking.reference_pickup_time).format('H:mm')
	console.log('test', referencePickupTime)

{
    "about.contactEmail":"E-mail",
    "about.contactForm":"Formulaire",
    "about.contactPhone":"Téléphone",
    "about.contactTitle":"Contacter notre service {brand} par :",
    "about.copyEmail":"Copier l'adresse e-mail",
    "about.copyPhone":"Copier le numéro de téléphone",
    "about.formFill":"Aller sur le site internet",
    "about.labelTab1":"Zone du service",
    "about.labelTab2":"Contact",
    "about.noInfos":"Les informations de cette page seront bientôt disponibles.",
    "about.operating":"Découvrir le fonctionnement du service",
    "about.text":"Sur la carte vous pouvez voir la zone d'action de notre service.",
    "about.title":"Vous utilisez le service de {brand}",
    "about.zone":"Voir les zones desservies",
    "brand":"Marque",
    "booking.confirm":"{dayCount, plural, one {La} other {Les}} {dayCount, plural, one {réservation} other {réservations}} {dayCount, plural, one {suivante} other {suivantes}} {dayCount, plural, one {est} other {sont}} {dayCount, plural, one {confirmée} other {confirmées}} :",
    "booking.error":"{dayCount, plural, one {La} other {Les}} {dayCount, plural, one {réservation} other {réservations}} {dayCount, plural, one {suivante} other {suivantes}} {dayCount, plural, one {a} other {ont}} {dayCount, plural, one {échoué} other {échoué}} :",
    "breadcrumb.bookingValidation":"Confirmation",
    "breadcrumb.home":"Accueil",
    "breadcrumb.reservation":"Trajets à venir",
    "breadcrumb.myResa":"Ma réservation",
    "breadcrumb.callcenter":"Espace centre d'appel",
    "breadcrumb.search":"Propositions",
    "button.confirm_next":"Valider et continuer",
    "cancel":"Annuler",
    "credit.buyWithDiscount":"Acheter {creditAmount} crédits et payer {price} {currency}",
    "credit.wallet":"Portefeuille",
    "credit.balance":"Solde actuel : {balance} {balance, plural, one {crédit} other {crédits}}",
    "credit.notEnough":"Vous n'avez pas assez de crédits. Vous pouvez en acheter depuis le menu en haut à droite !",
    "credit.balanceAfter":"Solde après paiement : {balance}",
    "date.the":"le {date}",
    "date.title":"Dates",
    "edition.title":"Modifiez votre réservation",
    "editionConfirm.title":"Confirmez votre modification de réservation",
    "favorite.error":"Vous n'avez pas de favoris",
    "favorite.favorite1":"Favori 1",
    "favorite.favorite2":"Favori 2",
    "favorite.home":"Domicile",
    "favorite.home_to_workplace":"Domicile > Gare",
    "favorite.trip_1_to_2":"Favori 1 > Favori 2",
    "favorite.trip_2_to_1":"Favori 2 > Favori 1",
    "favorite.workplace":"Gare",
    "favorite.workplace_to_home":"Gare > Domicile",
    "footer.cvg":"CGU",
    "footer.gdpr":"Vie privée",
    "footer.privatePolicy":"Mentions légales",
    "forgetPassword.title":"Formulaire de réinitialisation de mot de passe",
    "forgetPassword.newPassword":"Nouveau mot de passe",
    "forgetPassword.newPasswordConfirmed":"Mot de passe modifié avec succès",
    "forgetPassword.resetPassword":"Réinitialiser votre mot de passe",
    "forgetPassword.enterEmail":"Veuillez entrer votre adresse email, et nous vous enverrrons un lien de réinitialisation de mot de passe",
    "forgetPassword.send":"Envoyer",
    "form.error.date_past":"La date doit être supérieure à aujourd'hui",
    "form.error.endstart":"La date de fin doit être après celle de début",
    "form.error.datetime_past":"L'heure doit être ultérieure à l'heure actuelle",
    "form.error.not_blank":"Cette valeur ne doit pas être vide",
    "form.error.select_date":"Veuillez sélectionner une date",
    "form.error.select_time":"Veuillez sélectionner une heure",
    "form.error.too_many_dates":"Le nombre de jour est limité à {count}",
    "help.swap":"Inverser les lieux de départ et d'arrivée",
    "help.address":"Adresse, arrêt de bus ...",
    "help.fav1To2":"favori 1 vers favori 2",
    "help.fav2To1":"favori 2 vers favori 1",
    "help.history":"Liste des lieux de départ et d'arrivée des derniers trajets",
    "help.passengersAdd":"Actuellement {number} {type}, Ajouter un passager",
    "help.passengersSubstract":"Actuellement {number} {type}, Enlever un passager",
    "help.recurrenceOffer":"Fréquence de répétition",
    "help.calendar":"{number, plural, one {La date choisie est} other {Les dates choisies sont}}",
    "help.recurrenceStartDate":"La période récurrente commence à {startDate}",
    "help.calendarMonth":"Le mois en cours est {month1}, aller à {month2}",
    "help.recurrenceEndDate":"La période récurrente finit à {endDate}",
    "help.rideShort":"Départ de {pickupNode} à {pickupTime}. Arrivée à {dropoffNode} à {dropoffTime}.",
    "impersonate.title":"Espace de la centrale d'appel",
    "impersonate.floattingHint":"Rechercher par nom, prénom, téléphone, email",
    "impersonate.helpText":"Utilisez la barre de recherche pour rechercher un utilisateur. Une fois validé, vous agirez en sa personne",
    "impersonate.new":"Créer un nouvel utilisateur",
    "impersonate.session_closed":"Session terminée",
    "impersonate.start":"Démarrer la session",
    "impersonate.title2":"Agir en tant que",
    "impersonate.me":"Votre identité principale",
    "impersonate.users_available":"Utilisateurs disponibles",
    "impersonate.survey_title":"Aidez-nous à améliorer votre expérience du site de réservation",
    "impersonate.survey_body":"C’est très rapide, cela vous prendra 5 min pour répondre à notre questionnaire. Vos réponses nous permettront d’améliorer notre service pour mieux répondre à vos besoins.",
    "impersonate.survey_link":"Répondre au questionnaire",
    "link.register":"S'inscrire",
    "locale.timepicker_hint":"saisissez l'heure de la réservation",
    "menu.about":"Aide et contact",
    "menu.account":"Informations du compte",
    "menu.booking":"Réserver un trajet",
    "menu.choose_territory":"Choisir mon territoire",
    "menu.current_territory":"Votre territoire : \u200B {territory}",
    "menu.edit_favorite":"Editer vos favoris",
    "menu.favorite":"Vos favoris",
    "menu.impersonate":"Agir en tant que",
    "menu.journey":"Vos trajets",
    "menu.logout":"Déconnexion",
    "menu.switch_territory":"Changer mon territoire",
    "menu.territory_current":"Votre territoire desservi",
    "menu.territory_info":"Votre choix de territoire affectera la zone dans laquelle vous pourrez chercher des trajets dans l’application. Vous pourrez changer de territoire à tout moment, dans le menu de l'application.",
    "menu.territory_other":"Autres territoires",
    "misc.back_to_search":"Retour à la recherche",
    "misc.book":"Réserver",
    "misc.book_price":"Réserver {price} {currency}",
    "misc.cancel":"Annuler",
    "misc.choose_list":"Choisir dans la liste",
    "misc.confirm":"Confirmer",
    "misc.confirm_cancellation":"Confirmer l'annulation",
    "misc.confirm_delete_reservation":"Voulez vous vraiment annuler cette réservation ?",
    "misc.delete":"Annuler",
    "misc.edit":"Modifier",
    "misc.editTime":"Modifier les horaires",
    "misc.editPassengers":"Modifier le nombre de passagers",
    "misc.loading":"Chargement",
    "misc.later":"Plus tard",
    "misc.redirect":"Y aller",
    "misc.new":"Nouveau",
    "misc.no":"Non",
    "misc.not_blank":"Veuillez remplir ce champ",
    "misc.save":"Enregistrer",
    "misc.see_my_ride":"Voir mon trajet",
    "misc.see_my_rides":"Voir mes trajets",
    "misc.sooner":"Plus tôt",
    "misc.unexpected_error":"Une erreur est survenue",
    "misc.validate":"Valider",
    "misc.why_delete_reservation":"Optionnel: Pourquoi souhaitez-vous annuler votre réservation ?",
    "misc.yes":"Oui",
    "notFound.title":"Cette page n'est pas disponible",
    "notFound.not_exist":"Le lien saisi est incorrect ou n'existe plus.",
    "notFound.not_exist2":"Nous vous invitons à revenir à l'accueil.",
    "notFound.back_home":"Accéder à l'accueil",
    "optin.accept":"Oui, je donne mon consentement",
    "optin.confirmation":"Confirmez-nous que vous souhaitez recevoir de notre part des informations et des propositions commerciales ?",
    "optin.decline":"Non, je ne donne pas mon consentement",
    "optin.info":"Pour plus d’information sur le traitement de vos données,",
    "optin.link":"cliquez sur ce lien",
    "optin.rule":"Le 25 mai 2018, le règlement général sur la protection des données (GDPR) est entré en vigueur. Nous nous engageons à ne pas vendre, louer ou céder vos données personnelles.",
    "passengers.title":"Passagers",
    "payment.title":"Paiement des trajets sélectionnés",
    "payment.confirmed":"Paiement confirmé",
    "payment.credits":"Crédits",
    "payment.credit_card":"Carte de crédit",
    "payment.cardNumber":"Numéro de carte",
    "payment.cvc":"CVC",
    "payment.enter_credit_card":"Entrez votre n° de carte de crédit",
    "payment.expiration_date":"Date d'expiration",
    "payment.free":"Votre réservation est à présent gratuite !",
    "payment.onboard":"À bord",
    "payment.payment":"Paiement",
    "payment.promoCode":"Promo code",
    "payment.ride":"Payer votre réservation {price} {currency}",
    "payment.general":"Payer {price} {currency}",
    "payment.type":"Mode de paiement :",
    "payment.total": "Total : {price} {currency}",
    "payment.saved_cards": "Cartes enregistrées",
    "payment.saveCard": "Enregistrez votre carte",
    "payment.saveCard2": "Enregistrer votre carte vous permettra de payer en un clic lors de votre prochaine résevation",
    "payment.summary":"Récapitulatif",
    "payment.new_card": "Nouvelle carte",
    "payment.withCredits":"Payer {price} crédits",
    "payment.withOnBoard":"Payer à bord",
    "profile.title":"Modifier les informations personnelles",
    "profile.edit_password":"Modifiez le mot de passe",
    "profile.old_password":"Ancien mot de passe",
    "profile.repeat_new_password":"Répetez le nouveau mot de passe",
    "profile.updated":"Profil mis à jour",
    "reservationList.title":"votre liste de réservation",
    "reservation.title":"Votre reservation",
    "reservation.deleted":"Réservation annulée",
    "reservation.edited":"Réservation modifiée",
    "reservationEdition.sidebar.desc":"Modifier ici l'horaire de votre réservation",
    "reservationEdition.sidebar.title":"Modifier votre réservation",
    "reservations.date":"Date",
    "reservations.dropoff":"Point d'arrivée",
    "reservations.passengers":"Passager(s)",
    "reservations.pickup":"Point de départ",
    "reservations.time":"Heure départ",
    "reservation.rate.button":"Me noter",
    "reservation.rate.subtitle":"Comment s'est passé votre trajet ?",
    "reservation.rate.driver":"Notez votre conducteur",
    "reservation.rate.ride":"Notez votre course",
    "reservation.rate.error":"Veuillez choisir une note",
    "reservation.ride":"Course",
    "reservation.rate.comment":"Commentaires",
    "ride.alternatives":"Voir les alternatives",
    "ride.arrive_on":"Votre bus arrive le {time}",
    "ride.arrive_at":"Votre bus arrive à {time}",
    "ride.arrive_in":"Votre bus arrive dans {time}",
    "ride.bus_model":"Modèle",
    "ride.bus_plate":"Plaque",
    "ride.delete":"Annuler",
    "ride.driver_name":"Conducteur",
    "ride.driver_phone":"N° de téléphone",
    "ride.incoming":"Votre bus arrive",
    "ride.maximum_detours_allowed":"L'heure d'arrivée inclut les détours maximums possibles.",
    "ride.minute":"{count} {count, plural, =0 {minute} one {minute} other {minutes}}",
    "ride.price":"Prix: {price} {currency}",
    "ride.reference":"Il vous attendra jusqu'à {time}",
    "ride.see_more":"Voir plus",
    "ride.welcome":"Bienvenue à bord !",
    "ride.no_trips":"Il n'y a pas de voyage sélectionné",
    "ride.select_trips":"Aller à la page d'accueil pour en sélectionner un!",
    "search.title":"Formulaire de recherche de trajets",
    "search.arrival_time":"Arrivée à",
    "search.confirm.title":"Trajets sélectionnés",
    "search.confirm.single_trip":"Trajet sélectionné",
    "search.confirm.notrip":"Aucun trajet sélectionné",
    "search.confirmation.no_date_selected":"Veuillez sélectionner au moins une date",
    "search.confirmationText.edition":"Changement d'horaire pour la réservation du :",
    "search.confirmationText.many":"Vous avez réservé {count} {count, plural, one {jour} other {jours}} entre :",
    "search.confirmationText.one":"Vous avez réservé 1 jour :",
    "search.date":"Le {date}",
    "search.recurring":"À partir du {start_date} jusqu'au {end_date} pour : {offer}",
    "search.departure_time":"Départ à",
    "search.departureNow":"Dès que possible",
    "search.dropoff":"À",
    "search.dropoff.placeholder":"Arrivée",
    "search.error.nbPassengers":"Vous devez renseigner au moins un passager",
    "search.grid.title":"Vos trajets préselectionnés",
    "search.lastBookings":"Trajets récents",
    "search.motive":"Motif",
    "search.multi_date":"Du {startDate} au {endDate}",
    "search.nb_bikechairs":"Passagers en vélo",
    "search.nb_wheelchairs":"Passagers en fauteuil roulant",
    "search.nb_standards":"Passagers",
    "search.no_result":"Aucun résultat pour le {date}",
    "search.no_result2":"Il n'y a actuellement aucun trajet possible possible pour votre recherche",
    "search.once":"Une seule fois",
    "search.passengersNumber":"Nombre de passagers",
    "search.pickup":"DE",
    "search.pickup.placeholder":"Départ",
    "search.recurrence.start_date":"Sélectionner une date de début",
    "search.recurrence.doNotRepeat":"Ne pas répéter",
    "search.recurrence.end_date":"Sélectionner une date de fin",
    "search.recurrence.title":"Répétition",
    "search.recurrence.from":"Du",
    "search.recurrence.until":"Jusqu'au",
    "search.schedule":"Date(s)",
    "search.sidebar.title":"Votre recherche",
    "search.submit":"Rechercher",
    "search.time":"Heure",
    "search.the":"Sélectionner une ou plusieurs date(s)",
    "search.monoDate":"Sélectionner une date",
    "searchResult.title":"Sélection des résultats de recherche",
    "searchResultConfirm.title":"Confirmer les trajets sélectionnées",
    "section.history":"Mes derniers trajets",
    "section.time":"Date et heure",
    "section.options":"Options de trajet",
    "signin.title":"Formulaire de connexion",
    "signin.connexion":"Se connecter",
    "signin.disabled":"Bonjour, le site de réservations est indisponible pour ce service, utiliser l'application mobile pour réserver s'il-vous-plaît, bonne journée !",
    "signin.forgetPassword":"J'ai oublié mon mot de passe",
    "signin.password":"Mot de passe",
    "signin.email":"Adresse email",
    "signup.title":"Formulaire d'inscription",
    "signup.accept_terms":"En vous inscrivant, vous acceptez les {cgu}",
    "signup.firstname":"Prénom ou pseudo",
    "signup.lastname":"Nom (Privé)",
    "signup.mail":"Mail",
    "signup.passportNumber":"Carte d'Identité/Passeport",
    "signup.password_doesnt_match":"Les mots de passe ne correspondent pas",
    "signup.password_repeat":"Répétez votre mot de passe",
    "signup.phoneNumber":"Numéro de téléphone",
    "signup.terms":"CGU",
    "signup.verification.number":"Numéro de vérification",
    "signup.verification.re_send":"renvoyer un SMS",
    "signup.verification.verify":"Vérifier",
    "signupVerification.title":"Vérifiez Votre Identité",
    "sitemap.title":"Plan du Site",
    "tabs.recurring":"Trajets récurrents",
    "tabs.empty_recurring":"Pas de trajet récurrent",
    "tabs.cancelled":"Trajets annulés",
    "tabs.empty_cancelled":"Aucun trajet annulé",
    "tabs.empty_past":"Aucun trajet passé",
    "tabs.empty_upcoming":"Aucun trajet à venir",
    "tabs.past":"Trajets passés",
    "tabs.upcoming":"Trajets à venir",
    "terms.additional_checkbox":"J'accepte aussi que TAD collecte et utilise les données personnelles que je viens de renseigner dans ce formulaire dans le but de m'envoyer des propositions commerciales, en lien avec la politique de protection des données de TAD",
    "terms.body":"J’accepte les conditions générales du service",
    "terms.bodyAge":"J’accepte les conditions générales du service et je confirme avoir plus de {age} ans",
    "terms.button_terms_of_use":"Voir les conditions d’utilisation",
    "terms.button_gdpr_traitement":"Voir les conditions RGPD",
    "terms.commercial":"J'accepte également que {brand} collecte et utilise mes données personnelles pour envoyer des offres commerciales et des suggestions, conformément à la politique de protection des données de {brand}",
    "terms.confirm":"En cliquant sur \"CONFIRMER\", j'accepte les conditions d'utilisation du service.",
    "terms.dataConfirm":"J'accepte également que {brand} collecte et utilise mes données personnelles pour envoyer des offres commerciales et des suggestions, conformément à la politique de protection des données de {brand}",
    "terms.unsubscribe":"Vous n'êtes plus inscrits aux e-mails à visée commerciale !",
    "terms.title":"Conditions d’utilisation et politique de données",
    "territories":"Territoire"
}

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { TextField, List, ListItem, CircularProgress, InputAdornment, createMuiTheme, makeStyles } from '@material-ui/core'
import NodeSuggestions from 'components/Autocomplete/NodeSuggestions'
import AddressSuggestions from 'components/Autocomplete/AddressSuggestions'
import UserSuggestions from 'components/Autocomplete/UserSuggestions'
import GeocodedSuggestion from 'components/Autocomplete/GeocodedSuggestion'
import {map} from 'lodash'
import { ARROW_UP, ARROW_DOWN,
	enter, onInputChange, RESET_AUTOCOMPLETE, contextToData } from 'containers/Autocomplete/actions'
import PickUp from 'components/Icons/PickUp/PickUp.jsx'
import {useIntl} from 'react-intl'


const suggestionProviders = {
	'geocodes': GeocodedSuggestion,
	'nodes': NodeSuggestions,
	'addresses': AddressSuggestions,
	'users': UserSuggestions
}

const useStyles = makeStyles((theme) => ({
	root: {
		'& .MuiTextField-root': {
			margin: '20px',
		}
	}
}))

function Autocomplete(props){
	const classes = useStyles()

	/********  props from parent
    * text : the text in the field, controlled by parent with:
		* onChange
    * context : the view where is the autocomplete => which data it displays ?
    * onSelect : when clicking on suggestion
    */
	const { onChange, onInputChange, context, onSelect, loading, highlightedIndex } = props
	const { text, helperText, label} = _.get(props, 'inputProps', {})
	/******* props generated from inside
		*/
	const { arrowUp, arrowDown, enter, resetAutocomplete } = props

	/******** internal state that is not needed above the component
    */
	const [isFocused, setFocus] = useState(false)
	// conditional opening of autocomplete
	const open = isFocused && text &&	text.length >= 3

	// highlighted index (for keyboard navigation) is managed via redux to answer the case of
	// switching from node to address suggestion

	const handleKey = (e) => {
		e.stopPropagation()
		switch (e.keyCode) {
		// second thought : a "selected" element with arrows is also displayed and entered in form
		// context to know which datatypes are displayed and to guess the highlightedIndex element
		case 38:// arrowUp key
			arrowUp(context)
			enter(context, onSelect)
			break
		case 40:// arrowDown key
			arrowDown(context)
			enter(context, onSelect)

			break
		case 13:// enter key
			enter(context, onSelect)
			setFocus(false)
			resetAutocomplete()
			break
		}
	}

	// below is cleaning the "highlightedIndex" in an edge case
	useEffect(()=>{
		if(isFocused && text &&	text.length < 3){
			resetAutocomplete()
		}
	},[text])

	const intl = useIntl()

	return(
		<div className="fullWidth" style={{position:'relative'}}
			//ACCESSIBILITY
			role="combobox"
			aria-expanded={open}
		>
			<label htmlFor={label} style={{color:'#6c6c6c'}}>{label}</label>
			<TextField
				autoComplete="off" // not from the browser
				id={label}
				fullWidth
				value={text}
				onChange={e =>{
					// update search.formData and textfield
					onChange(e)
					// update autoComplete only when user types a letter
					onInputChange(e.target.value, context)
					setFocus(true)
				}}
				onFocus={()=>{
					// loads suggestions also when clicking
					if (text && text.length >= 3){
						onInputChange(text, context)
					}
					setFocus(true)
				}}
				onBlur={()=>{
					setFocus(false)
					resetAutocomplete()
				}}
				onKeyDown={handleKey}
				// label={label}
				// hiddenLabel
				helperText={helperText}
				error={Boolean(helperText)}
				title={label}
				InputProps={{
					disableUnderline: true
				}}
				InputLabelProps={{ shrink: true }}

				// ACCESSIBILITY
				inputProps={{
					autoComplete:'off',
					'aria-autocomplete':open ? 'list' : 'none',
					'aria-controls':open ? 'autocomplete_results' : '',
					'aria-activedescendant': open ? 'suggestion-'+highlightedIndex : '',
					role:'textbox'
				}}
				placeholder={intl.formatMessage({ id: 'help.address' })}
				style={{height: '2.5rem', marginTop:'0.5rem', backgroundColor:'#f1f0f0', borderRadius:'0 5px 5px 0'}}
			/>

			{ open &&
			<List
				tabIndex={-1}
				disablePadding
				className="suggestionsContainer"
				// ACCESSIBILITY
				id="autocomplete_results"
				role="listbox"
			>
        	{ loading ? <div className="row centered fullWidth padded"><CircularProgress size={20} /></div>
					:
						 map(contextToData[context],(dataType,i)=>{
        		const SuggestionProvider = suggestionProviders[dataType]
        		return(
        			<SuggestionProvider
        				key={i}
        				onSelect={onSelect}
        			/>
        		)
        	})}
			</List>
			}
		</div>
	)
}
const mapStateToProps = state => ({
	loading: state.autocomplete.loading,
	highlightedIndex: state.autocomplete.highlightedIndex
})

const mapDispatchToProps = dispatch => ({
	arrowUp : (context) => dispatch({ type : ARROW_UP, context }),
	arrowDown : (context) => dispatch({ type : ARROW_DOWN, context }),
	enter : (context, onSelect) => dispatch(enter(context, onSelect)),
	onInputChange : (newText, context) => dispatch(onInputChange(newText, context)),
	resetAutocomplete: () => dispatch({type: RESET_AUTOCOMPLETE})
})
export default connect(mapStateToProps, mapDispatchToProps)(Autocomplete)

import React from 'react'
import { MenuItem, IconButton, Button as MuiButton, Switch, RadioGroup, Radio, FormControlLabel,
	Typography, Paper, TextField, Collapse, Card, makeStyles, InputLabel, InputAdornment } from '@material-ui/core'
import Swap from 'components/Icons/Swap'
import FavoriteLoader from './FavoriteLoader.jsx'
import PassengersCount from './PassengersCount.jsx'
import Autocomplete from 'containers/Autocomplete/Autocomplete.js'
import CustomDayPickerInput from 'containers/CustomDayPickerInput/CustomDayPickerInput.jsx'
import styles from './form.cssmodule.scss'
import api from 'api'
import moment from 'moment'
import DropOff from 'components/Icons/DropOff/DropOff.jsx'
import PickUp from 'components/Icons/PickUp/PickUp.jsx'
import { FormattedMessage } from 'react-intl'
import LastBookings from './LastBookings'
import FormSectionHeader from './FormSectionHeader'
import { get } from 'lodash'
import {extrasToGenericSeats} from 'lib/genericSeatsFunctions'
import {KeyboardTimePicker as TimePicker} from '@material-ui/pickers'
import Clock from 'components/Icons/Clock/Clock.jsx'
import ExpandMore from '../Icons/ExpandMore.js'


const useStyles = makeStyles((theme) => ({
	input: {
		background: '#cee6f3',
		color: '#0869af',
		// fontSize:'18px'
		borderRadius:'10px',
		padding: '0.5rem',
	}
}))


export default function SearchForm(props){
	const classes = useStyles()

	const { formData, errors, onAddressSelected, onFieldChange, loadFavorite, intl,
		territory, increasePassengers, decreasePassengers, onSubmit, swapActive, swapAddresses,
		actualizeDeparture, onDayClick, customFieldInfos, requesting } = props
	const { departure, destination, time, timeRestrictionType,
		passengers, asap, recurrence, selectedDays, customFields} = formData

	const recurringOffers = _.get(props, 'territory.booking.recurring_bookings.offers') || []

	const extras = _.get(territory,'extras',{}) // special seats
	const extrasTypes = extrasToGenericSeats(extras)

	const nbPassengers = _.reduce(extrasTypes, (red, type) => red + _.get(passengers, type, 0), passengers.standard)

	return (
		<div className={styles.form}>
			<Paper>
				<form
					className={'row'}
					style={{justifyContent:'space-around'}}
				>
					<div className="column padded" style={{ flex: '0 0 45%' }}>
						<div className='column' style={{justifyContent:'flex-start'}}>
							<div className={`row-only ${styles.autoCompletes}`}>
								<div className="column" style={{ width: '100%' }}>
									<div className="row-only" style={{margin:'0.5rem 0',alignItems: 'flex-end'}}>
										<PickUp width={24} height={24} style={{marginTop:'0.5rem', padding:'0.5rem', backgroundColor:'#f1f0f0', borderRadius:'5px 0 0 5px'}}/>
										<Autocomplete
											context="search"
											inputProps={{
												label:intl.formatMessage({id: 'search.pickup.placeholder'}),
												helperText:errors.departure,
												text:departure.display,
											}}
											onChange={ e => {
												onFieldChange('departure', {
													display: e.target.value
												})
											}}
											onSelect={p =>
												onAddressSelected(p.suggestion, p.nodeId, 'departure', p.latitude, p.longitude, p.address)
											}
										/>
									</div>
									<div className="row-only" style={{margin:'0.5rem 0',alignItems: 'flex-end'}}>
										<DropOff width={24} height={24}  style={{marginTop:'0.5rem', padding:'0.5rem', backgroundColor:'#f1f0f0', borderRadius:'5px 0 0 5px'}}/>
										<Autocomplete
											context="search"
											inputProps={{
												label:intl.formatMessage({id: 'search.dropoff.placeholder'}),
												helperText:errors.destination,
												text:destination.display
											}}
											onChange={ e => {
												onFieldChange('destination', {
													display: e.target.value
												})
											}}
											onSelect={p =>
												onAddressSelected(p.suggestion, p.nodeId, 'destination', p.latitude, p.longitude, p.address)
											}
										/>
									</div>
								</div>
								<div className={`column ${styles.swapIcon}`}>
									{swapActive &&
								<IconButton
									title={intl.formatMessage({ id: 'help.swap' })}
									onClick={swapAddresses}
								>
									<Swap
										color="primary"
										style={{width:'1.5rem', height:'1.5rem'}}
									/>
								</IconButton>
									}
								</div>

							</div>
							<FavoriteLoader
								intl={intl}
								loadFavorite={loadFavorite}
							/>

							<LastBookings />
						</div>
					</div>

					<div className="column aligned padded"
						style={{ flex: '0 0 45%'}}>
						<div // big vertical container so that the BOOK button is on bottom
							className="column aligned fullWidth"
							style={{flexGrow:1, justifyContent:'space-around'}}>

							<Card elevation={4} style={{width:'100%', padding:'1rem'}}>
								<div className="column aligned fullWidth" /* HOUR + DATE + RECURRENCE */>
									<FormSectionHeader title={intl.formatMessage({ id:'section.time'})}/>
									<RadioGroup aria-label={intl.formatMessage({id:'search.time'})}
									// MAYBE REFACTOR INTELLIGENCE ?
										row
										className="fullWidth"
										style={{paddingLeft:'1rem'}} 
										value={asap ? 'asap' : timeRestrictionType}
										onChange={(e)=>{
											if (e.target.value === 'asap'){
												actualizeDeparture()
											}
											else {
												onFieldChange('asap', false)
												onFieldChange('timeRestrictionType', e.target.value)
											}
										}}>
										<FormControlLabel value="asap"
											control={<Radio color="primary" id="asap"/>}
											label={intl.formatMessage({ id: 'search.departureNow' })}
										/>
										<FormControlLabel value="departure"
											control={<Radio color="primary" id="departure"/>}
											label={intl.formatMessage({id: 'search.departure_time'})}
										/>
										<FormControlLabel value="arrival"
											control={<Radio color="primary" id="arrival"/>}
											label={intl.formatMessage({id: 'search.arrival_time'})}
										/>
									</RadioGroup>
									<Collapse in={!asap} style={{width:'100%'}} /* HOUR + DATE + RECURRENCE */>
										<div // HOUR
											className={styles.selectTime}>
											<TimePicker
												value={window.Cypress ? 1582949766 : time}
												onChange={newTime=>{
													if (newTime && newTime.isValid()){
														onFieldChange('time',newTime.format())
													}
												}}
												autoOk
												ampm={false}
												disabled={asap}
												inputVariant="outlined"
												maskChar=" "
												// below is because the modal is not keyboard accessible
												KeyboardButtonProps={{tabIndex:-1}}
												keyboardIcon={<Clock color="grey"/>}
												invalidDateMessage={<Typography color="error">"Invalid date"</Typography>}
												invalidLabel="false"
												helperText={errors && errors.time}
												error={Boolean(errors.time)}
												label={intl.formatMessage({id:'search.time'})}
												id="time"
												className={styles.timePicker}
												required
											/>

											{ /**  recurrence enabled but "do not repeat" => classic calendar here */
												recurringOffers && recurringOffers.length > 0 && recurrence.id === 0 &&
											<CustomDayPickerInput
												disabled={asap}
												tabIndex={0}
												selectedDays={(!asap ? selectedDays : [time]) || []}
												onDayClick={(day, r) => onDayClick(moment(day).format(), r)}
												errorText={errors.selectedDays}
												maxBookingDay={_.get(territory, 'booking.max_booking_day')}
												name="date"
												maxBookableDates={
													_.get(territory, 'booking.multi_date.max_bookable_dates')
												}
												label={intl.formatMessage({
													id: _.get(territory, 'booking.multi_date.enabled')
														&& _.get(territory, 'booking.multi_date.max_bookable_dates',0) > 1
														? 'search.the'
														: 'search.monoDate'
												})}
											/>
											}
										

											{	/*recurring two fields (start & end) */
												recurringOffers && recurringOffers.length > 0 && recurrence.id !== 0 &&
												<div className="column">
													<CustomDayPickerInput
														name="startDate"
														disabled={asap}
														// tabIndex={asap ? -1 : 12}
														selectedDays={[recurrence.start_datetime]}
														onDayClick={(day, requestRide) => onFieldChange('recurrence', {
															...recurrence,
															start_datetime: moment(day).format()
														})}
														errorText={errors.selectedDays}
														label={intl.formatMessage({
															id: 'search.recurrence.start_date'
														})}
													/>
													<CustomDayPickerInput
														name="endDate"
														disabled={asap}
														selectedDays={[recurrence.end_datetime]}
														onDayClick={(day, requestRide) => onFieldChange('recurrence', {
															...recurrence,
															end_datetime: moment(day).format()
														})}
														// tabIndex={asap ? -1 : 12}
														errorText={errors.selectedDays}
														label={intl.formatMessage({
															id: 'search.recurrence.end_date'
														})}
													/>
												</div>
											}
										</div>
										
										{ // either calendar OR recurence-offer-choice here
											!recurringOffers || recurringOffers.length === 0
												// CALENDAR
												?
												<CustomDayPickerInput
													disabled={asap}
													tabIndex={0}
													selectedDays={(!asap ? selectedDays : [time]) || []}
													onDayClick={(day, r) => onDayClick(moment(day).format(), r)}
													errorText={errors.selectedDays}
													maxBookingDay={_.get(territory, 'booking.max_booking_day')}
													name="date"
													maxBookableDates={
														_.get(territory, 'booking.multi_date.max_bookable_dates')
													}
													label={intl.formatMessage({
														id: _.get(territory, 'booking.multi_date.enabled')
														&& _.get(territory, 'booking.multi_date.max_bookable_dates',0) > 1
															? 'search.the'
															: 'search.monoDate'
													})}
												/>
												:
												<div style={{display: 'flex', alignItems:'center'}}>
													<label 
														htmlFor={'recurrence-offer-select'} 
														variant='body' style={{fontSize:'18px', marginRight:'0.5rem'}}
													>
														{intl.formatMessage({id:'help.recurrenceOffer'})}
													</label>
													<TextField  // RECURRENCE OFFER
														required
														id="recurrence-offer-select"
														select
														name="recurrenceOffer"
														className={`column ${styles.selectTargetMode}`}
														value={recurrence.id}
														style={asap ? { color: '#ccc' } : null}
														disabled={asap}
														onChange={(e) => {
															onFieldChange('recurrence', {
																...recurrence,
																id: e.target.value
															})
														}}
														// style={{minWidth:'18rem'}}
														InputProps={{ 
															className: classes.input,
															disableUnderline: true,
														}}
														SelectProps={{ 
															IconComponent: () => <ExpandMore style={{position:'absolute', right: 10}}/>
														}}
													>
														<MenuItem value={0}>
															{intl.formatMessage({
																id: 'search.recurrence.doNotRepeat',
															})}
														</MenuItem>
														{/* map on [{id: "work_days", display_name:"Work days"}]}
												 	OR territory.recurringOffers. */}
														{recurringOffers.map((offer, index) =>
															(<MenuItem key={index} value={offer.id}>
																{offer.name}
															</MenuItem>)
														)}
													</TextField>
												</div>
										}
									</Collapse>
								</div>
							</Card>

							<Card elevation={4} style={{width:'100%', padding:'1rem', margin:'1rem'}}>
								<div className="column aligned fullWidth" /* OPTIONS : PASSENGERS + CUSTOM FIELDS */>
									<FormSectionHeader title={intl.formatMessage({ id:'section.options'})}/>
									<div className='fullWidth'>
										<PassengersCount
											type="standard"
											decrease={() => decreasePassengers('standard')}
											increase={() => increasePassengers('standard')}
											value={passengers.standard}
										/>
										{ extrasTypes.map( type =>{
											return(
												<PassengersCount
													extras={extras}
													key={type + '_counter'}
													type={type}
													decrease={() => decreasePassengers(type)}
													increase={() => increasePassengers(type)}
													value={passengers[type]}
												/>
											)}
										)}
									</div>
								</div>
								{ nbPassengers == 0 ?
									<Typography 
										color="error"
										variant="caption"
									>
										{intl.formatMessage({ id: 'search.error.nbPassengers'})}
									</Typography>
									: null 
                    		}
								{ /* customFields is a dict. This works similarly to "recurrence" */
									customFields &&
								<div className="column spaced" style={{flexWrap:'wrap'}}>
									{_.map(_.keys(customFieldInfos).sort(), (cf_key, name)=>{
										const cf = customFieldInfos[cf_key]
										return(
											<div
												className="ron-only column"
												style={{padding:'1rem 0 0 0'}}
												key={'cf-'+name}
											>
												<TextField
													id={cf.display_name}
													required={Boolean(cf.is_required)}
													label={cf.display_name}
													style={{width: '90%'}}
													select={cf.type === 'select'}
													value={_.get(formData, 'customFields.'+cf_key) || ''}
													onChange={e => onFieldChange(
														'customFields',{
															...customFields,
															[cf_key]:e.target.value
														}
													)}
													error={Boolean(get(errors,'customFields.'+cf_key))}
													helperText={get(errors,'customFields.'+cf_key)}
													variant="outlined"
													SelectProps={{ 
														IconComponent: () => <ExpandMore style={{position:'absolute', right: 10}}/>
													}}
												>
													{_.map(_.get(cf, 'options', []), (m, index) =>
														(<MenuItem key={index} value={m.key}>
															{m.display}
														</MenuItem>)
													)}
												</TextField>
											</div>
										)})
									}
								</div>
								}
							</Card>
						</div>
					</div>

				</form>
			</Paper>
			<div className="row"
				style={{ paddingTop:'1rem', flexDirection: 'row-reverse' }}>
				<MuiButton
					variant="contained"
					color="primary"
					disabled={requesting}
					onClick={()=>onSubmit()}
				>
					<Typography variant="body1">
						{intl.formatMessage({ id: 'search.submit' })}
					</Typography>
				</MuiButton>
			</div>
		</div>
	)
}