Resolving styling and using ready components (i.e Material UI)

[belhassen07]

Problem

Styling is so difficult here especially when trying to work with design system components such as Material UI #437 .

Suggested solution

The solution that I suggest is to expose the input and suggestion list in the component rather than wrapping it inside the GeoSuggest component. The react-places-autocomplete does this well but this package is much more complete than the other one which feels abandoned.

[belhassen07]

Or please add renderInput like renderSuggestItem

[belhassen07]

Any directions on how can I add the renderInput ? I've explored the project and I'm still thinking about how would you prefer this to be added. Any thoughts to make my life easier. I'd love to create a PR after some directions. @ro-ka

[caffodian]

This would be useful to us too - adding a renderInput prop. I may play with this a bit and see what this might take. I could see this being a bit more annoying than renderSuggestItem, though in most cases we can just pass them through to the native element.

[ro-ka]

Do you have a proposal on how to add this? Will this be needed for the suggest items, too? Would it work to allow to pass in a Input component, e.g. from Material UI and enhance it with the things we need?

[dunatron]

I know this isnt exactly what you are after but I suggest styles components.
I have changed 1 thing to show you that you can get the MD theme variables into here

import Geosuggest from 'react-geosuggest';
import styled from 'styled-components';

// look for p => p.theme.palette.secondary.main 

const StylesGeoSuggest = styled(Geosuggest)`
  .geosuggest {
    font-size: 18px;
    font-size: 1rem;
    position: relative;
    width: 50%;
    margin: 1em auto;
    text-align: left;
  }
  .geosuggest__input {
    width: 100%;
    border: 2px solid red;
    box-shadow: 0 0 1px #3d464d;
    padding: 0.5em 1em;
    -webkit-transition: border 0.2s, box-shadow 0.2s;
    transition: border 0.2s, box-shadow 0.2s;
  }
  .geosuggest__input:focus {
    border-color: #267dc0;
    box-shadow: 0 0 0 transparent;
  }
  .geosuggest__suggests {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 25em;
    padding: 0;
    margin-top: -1px;
    /* background: #fff; */
    background: ${p => p.theme.palette.secondary.main};
    border: 2px solid #267dc0;
    border-top-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    z-index: 5;
    -webkit-transition: max-height 0.2s, border 0.2s;
    transition: max-height 0.2s, border 0.2s;
  }
  .geosuggest__suggests--hidden {
    max-height: 0;
    overflow: hidden;
    border-width: 0;
  }

  /**
 * A geosuggest item
 */
  .geosuggest__item {
    font-size: 18px;
    font-size: 1rem;
    padding: 0.5em 0.65em;
    cursor: pointer;
  }
  .geosuggest__item:hover,
  .geosuggest__item:focus {
    background: #f5f5f5;
  }
  .geosuggest__item--active {
    background: #267dc0;
    color: #fff;
  }
  .geosuggest__item--active:hover,
  .geosuggest__item--active:focus {
    background: #ccc;
  }
  .geosuggest__item__matched-text {
    font-weight: bold;
  }
`;

const TheCOmponent = () => {
    return <StylesGeoSuggest
        // ref={el => (_geoSuggest = el)}
        fixtures={_getFixtures()}
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={onChange}
        onSuggestSelect={suggestion => _suggest(suggestion)}
        onSuggestNoResults={onSuggestNoResults}
        location={new google.maps.LatLng(-46.1326615, 168.89592100000004)}
        types={state.type === 'ALL' ? null : state.types}
        radius="20"
        country={state.country === 'ALL' ? null : state.country}
      />
}

[sovkay]

@ro-ka Up for grabs?

[ro-ka]

Still not sure on how to implement this non-breaking. Did you know that there is an Autocomplete for Material UI, too? They even provide a Google Maps example.

[sovkay]

@ro-ka It's not about Material UI, i think.

It's more about providing control to the Developer who wants to the components.

We should atleast provide devs with demos on how to achieve that.

[ro-ka]

You’re free to add some demos! I think covering all the various UI kits is tedious work to keep it up to date.