Upgrade to latest versions of React Admin and Material-UI

[Kmaschta]

Hi, React Admin maintainers here. Thanks for making this lib!

We had an issue about your library on react-admin: https://github.com/marmelab/react-admin/issues/2795 react-admin-date-inputs seems to no longer be working because of out-to-date dependencies.

I closed the issue because it is not directly related to react-admin.

I see that you have a opened PR about this: https://github.com/vascofg/react-admin-date-inputs/pull/17 Let me know if you need something more to support the latest versions of RA!

[vascofg]

Done in 1.1.1

[vascofg]

It seems like the issue on react-admin's repo was due to a wrong version of material-ui. I can't merge my PR (#22 - had to open a new one) until you guys migrate to material-ui 3.2 or higher.

[swoopamir]

I'm having issues with this at the moment, what is the best work around for this?

[vascofg]

Use the correct material-ui version (I believe 1.4.0 right now but you can check react-admin/packages/ra-ui-materialui/package.json for an up to date answer)

On Mon, Jan 21, 2019, 23:00 Amir Ghorbani <notifications@github.com wrote:

I'm having issues with this at the moment, what is the best work around for this?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/vascofg/react-admin-date-inputs/issues/20#issuecomment-456209706, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmuSSkTNFLDr-nxyKIV26gmrDkWpoJUks5vFjiEgaJpZM4aK8Mp .

[swoopamir]

amazing, thanks for the quick response @vascofg

[Kmaschta]

Ref to my anwser about React Admin supporting Material UI v3: https://github.com/vascofg/react-admin-date-inputs/pull/22#issuecomment-456315069

[danillobarbosa]

I wrote this using forwardRef function and using the latest material-ui version.

Added also the KeyboardTimePicker option in exports.

import MomentUtils from "@date-io/moment";
import {
  DatePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
  TimePicker,
  KeyboardDatePicker
} from "@material-ui/pickers";
import PropTypes from "prop-types";
import { addField, FieldTitle, useTranslate } from "ra-core";
import React from "react";
const makePicker = PickerComponent => {
  const _makePicker = React.forwardRef((props, ref) => {
    const translate = useTranslate();

    const onChange = date => {
      props.input.onChange(date);
      props.input.onBlur();
    };

    const {
      input,
      options,
      label,
      source,
      resource,
      isRequired,
      className,
      meta,
      providerOptions
    } = props;

    const { touched, error } = meta;

    return (
      <div className="picker">
        <MuiPickersUtilsProvider {...providerOptions}>
          <PickerComponent
            {...options}
            label={
              <FieldTitle
                label={label}
                source={source}
                resource={resource}
                isRequired={isRequired}
              />
            }
            error={!!(touched && error)}
            helperText={touched && translate(error)}
            ref={ref}
            className={className}
            value={input.value ? input.value : null}
            onChange={date => onChange(date)}
          />
        </MuiPickersUtilsProvider>
      </div>
    );
  });
  _makePicker.propTypes = {
    input: PropTypes.object,
    isRequired: PropTypes.bool,
    label: PropTypes.string,
    meta: PropTypes.object,
    options: PropTypes.object,
    resource: PropTypes.string,
    source: PropTypes.string,
    labelTime: PropTypes.string,
    className: PropTypes.string,
    providerOptions: PropTypes.shape({
      utils: PropTypes.func,
      locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
    })
  };

  _makePicker.defaultProps = {
    input: {},
    isRequired: "false",
    label: "",
    meta: { touched: false, error: false },
    options: {},
    resource: "",
    source: "",
    labelTime: "",
    className: "",
    providerOptions: {
      utils: MomentUtils,
      locale: undefined
    }
  };
  return _makePicker;
};

export const DateInput = addField(makePicker(DatePicker));
export const KeyboardDateInput = addField(makePicker(KeyboardDatePicker));
export const TimeInput = addField(makePicker(TimePicker));
export const DateTimeInput = addField(makePicker(DateTimePicker));