Discussion on: Inner Hooks: New idea of React Hooks

[tkow]

For you, I'll show you my partial react-admin code in my project which written in declarative way as long as I can about selling book data. TabbedForm component has implicitly context provider in it. I want to ask you want to insert FormDataConsumer or extract components for using context data will be redundant expression and increase files if you use single component style as on a basis you need it. If you don't so, my library should mean it.

(
    <Edit
      {...props}
      transform={transform}
      title={<NameTitle resourceName="Book" />}
    >
      <TabbedForm
        toolbar={<WithoutDeleteButtonEditToolbar />}
        submitOnEnter={false}
      >
        <FormTab label={'resources.Book.tabs.book_info' as TranslateKeys}>
          <TextInput disabled label="Id" source={properties.id} />
          {isAdmin && (
            <ReferenceInput reference="Publisher" source="publisher_id">
              <AutocompleteInput source="id" optionText="name" alwaysOn />
            </ReferenceInput>
          )}
          <TextInput source={properties.name} fullWidth />
          <NumberInput source={properties.price} />
          <SelectInput
            source={properties.price_unit}
            choices={priceUnitOptions}
          />
          <TextInput source={properties.isbn_code} />
          {/* Author Start*/}
          <ArrayInput validate={required()} source="authors">
            <SimpleFormIterator>
              <TextInput
                label="resources.Book.fields.author.name"
                validate={required()}
                source="name"
              />
              <SelectInput
                label="resources.Book.fields.author.type"
                choices={authorTypeOptions}
                validate={required()}
                source="type"
              />
            </SimpleFormIterator>
          </ArrayInput>
          {/* Author End */}
          <TextInput source={properties.label} />
          <NumberInput source={properties.page} />
          <SelectInput
            source={properties.format}
            choices={selectBoxOptions(BookFormat)}
          />
          <DateInput source={properties.published_at} validate={required()} />
          <FileInput
            source={properties.file_path}
            validate={required()}
            title="title"
            accept={['application/epub+zip', 'application/pdf'].join(',')}
            placeholder={<p>Drop your file here</p>}
          >
            <PreviewFileField source="src" title="src" />
          </FileInput>
          <ImageInput
            source={properties.image_url}
            accept="image/*"
            placeholder={<p>Drop your image file here</p>}
            validate={required()}
          >
            <PreviewImageField source="src" />
          </ImageInput>
          <TextInput source={properties.publisher_accounting_code} />
          <FormDataConsumer>
            {({
              formData
            }) => {
              return (
                <TextInput
                  resource={'Book'}
                  defaultValue={formData.id}
                  source={'bookCheck.book_id'}
                  disabled
                />
              );
            }}
          </FormDataConsumer>
          {isAdmin && (
            <SelectInput
              source={'bookCheck.service_type'}
              defaultValue={ServiceType.default}
              choices={selectBoxOptions(ServiceType)}
              disabled
            />
          )}
          <SelectInput
            source={'bookCheck.availability'}
            choices={availabilityOptions}
          />
          {isAdmin && (
            <SelectInput
              source={'bookCheck.status'}
              choices={checkStatusOptions}
            />
          )}
          {isAdmin && <BooleanInput source={properties.is_deleted} />}
          {!isAdmin && (
            <FunctionField
              source="bookCheck.status"
              render={(record: any, source?: string | undefined) => {
                return t(
                  `resources.Book.fields.CheckStatus.${record['bookCheck']['status']}`,
                );
              }}
            />
          )}
        </FormTab>
   </ TabbedForm>
</Edit>