How can we set default value for React RRule Generator in react-admin?

Question

I am using react-admin and react-rrule-generator (https://github.com/Fafruch/react-rrule-generator). Create / Adding records is working fine while using rrule widget. But whenever I try to edit a record, the widget should have its values automatically filled based on the record's values. But the value is always the default one provided by the widget itself. Here is my code:

main_file.jsx

export const JobCreate = (props) => {
  return (
    <Create {...props}>
      <SimpleForm>
        <CustomRRuleInput name="recurrency" label="Recurrency" />
      </SimpleForm>
    </Create>
  )
}

recurrency_field.jsx

export const CustomRRuleInput = (props) => {
  const {
    input: { onChange },
    meta: { touched, error },
  } = useInput(props)

  return (
    <Labeled label={props.label}>
      <RRuleGenerator
        onChange={onChange}
        name={props.name}
      />
    </Labeled>
  )
}

If I add value={props.record.recurrency} in RRuleGenerator component, I can't change values because I kind of fixed / hardcoded its value which is constant even if I try to change them. If this widget had a prop called defaultValue then it would have worked out! How can I achieve this?

Answer 1

Never mind I did it! I can use this for creation as well as updating records. I also used rrule library for converting rrule to human readable text which gets displayed in TextInput field just below RRule widget. The text dynamically changes when you change data in RRule widget.

recurrency_field.jsx

import RRuleGenerator from "react-rrule-generator"
import React, { useState } from "react"
import { useInput, Labeled, TextInput } from "react-admin"
import { rrulestr } from "rrule"


export const CustomRRuleInput = (props) => {
  const record = props.record
  const {
    input: { onChange },
  } = useInput(props)

  const [state, setState] = useState(record[props.name])

  return (
    <>
      <Labeled label={props.label}>
        <RRuleGenerator
          onChange={(val) => {
            setState(val)
            onChange(val)
          }}
          value={state}
          name={props.name}
        />
      </Labeled>

      <TextInput
        fullWidth
        disabled
        label={"RRule Text"}
        value={state ? rrulestr(state).toText() : ""}
      />
    </>
  )
}

main_file.jsx

<CustomRRuleInput name="recurrency" label="Recurrency(r rule)" />

Answer 2

If you check closely the documentation's Inputs/Writing your own input part you will notice that custom input compoenents using either useField or useInput hooks still receive the source prop which is passed inside the input as part of the hook parameters.

Try this:

Inside main_file.jsx

<CustomRRuleInput source="recurrency" label="Recurrency" />

Inside recurrency_field.jsx

const {
    input: { name, onChange },
    meta: { touched, error },
  } = useInput(props)

  return (
    <Labeled label={props.label}>
      <RRuleGenerator
        onChange={onChange}
        name={name}
      />
    </Labeled>
  )