Front-end/React.js

react-admin : Field Components

byolee 2020. 3. 3. 14:31

Field Components

  • Field 컴포넌트는 REST 자원의 property를 display한다.
  • List view에서 사용되고, Edit이나 Create view에서도 사용할 수 있다.
  • 가장 흔히 사용되는 필드 컴포넌트는 TextField이다.

모든 필드 컴포넌트들은 다음과 같은 attribute들을 가짐

source required -> view/edit을 위한 prop 이름
label input 레이블의 헤더로 사용됨, 생략되었을 경우 source가 기본값
sortable source를 이용하여 정렬해야 하는가? 기본값은 true
className 클래스 이름 (field element)
cellClassName 클래스 이름 (field container)
headerClassName 헤더 클래스 이름 (field header)
formClassName <SimpleForm> <TabbedForm> 에서 사용되는 클래스 이름 (field container)
addLabel 필드가 datagrid에 있지 않을 때 label을 보여주는지 정의, 기본값은 true
textAlign 셀 안에서의 텍스트 정렬 정의 (기본값은 left고 right도 가능함)

 

여러 언어를 지원하는 인터페이스의 경우 label prop을 사용하지 않아야 한다.

대신에 딕셔너리에 localized label을 넣어야 한다.

 

 

 

<ArrayField>

  • child는 반드시 iterator 컴포넌트여야 함 (ex. <Datagrid>, <SingleFieldList>)
  • 커스텀 방식으로 렌더할 때 아래와 같이 쓸 수 있음
const TagsField = ({ record }) => (
    <ul>
        {record.tags.map(item => (
            <li key={item.name}>{item.name}</li>
        ))}
    </ul>
)
TagsField.defaultProps = { addLabel: true };

 

<BooleanField>

  • boolean 값은 check 모양으로 디스플레이
  • tooltip text (true or false in Eng)
  • 오버라이딩할 때 valueLabelTrue와 valueLabelFalse props 있음 (String)

 

<ChipField>

  • chip 모양 안에 있는 값 display

 

<DateField>

  • date, datetime 디스플레이
  • showTime attribute (기본값 false) 허용 : 시간도 보여줄 것인지
<DateField source="publication_date" />
// renders the record { id: 1234, publication_date: new Date('2017-04-23') } as
<span>4/23/2017</span>

<DateField source="publication_date" showTime />
// renders the record { id: 1234, publication_date: new Date('2017-04-23 23:05') } as
<span>4/23/2017, 11:05:00 PM</span>

<DateField source="publication_date" options={{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }} />
// renders the record { id: 1234, publication_date: new Date('2017-04-23') } as
<span>Sunday, April 23, 2017</span>

<DateField source="publication_date" locales="fr-FR" />
// renders the record { id: 1234, publication_date: new Date('2017-04-23') } as
<span>23/04/2017</span>

<DateField source="publication_date" elStyle={{ color: 'red' }} />
// renders the record { id: 1234, publication_date: new Date('2017-04-23') } as
<span style="color:red;">4/23/2017</span>

 

<EmailField>

  • email 디스플레이
  • <a href="mailto:" /> 

 

<FunctionField>

  • 필드를 렌더링할 때 특정한 함수가 필요할 때 사용
  • record를 렌더 함수에 전달
  • source와 sortBy property 생략 가능하지만 주어져야 행을 정렬할 수 있음
import { FunctionField } from 'react-admin'

<FunctionField label="Name" render={record => `${record.first_name} ${record.last_name}`} />

 

<ImageField>

  • API에서 제공되는 이미지를 디스플레이하기 위해 사용
  • property인 title은 alt로도 사용됨 
// This is the record
{
    pictures: [
        { url: 'image1.jpg', desc: 'First image' },
        { url: 'image2.jpg', desc: 'Second image' },
    ],
}
<ImageField source="pictures" src="url" title="desc" />

 

<FileField>

  • API에서 제공되는 파일을 디스플레이하기 위해 사용
  • target prop을 통해서 링크를 열 때 윈도우를 어떻게 할 것인지 선택 가능 (새창, 기존 창에서)

 

<NumberField>

import { NumberField }  from 'react-admin';

<NumberField source="score" />
// renders the record { id: 1234, score: 567 } as
<span>567</span>

<NumberField source="score" options={{ maximumFractionDigits: 2 }}/>
// renders the record { id: 1234, score: 567.3567458569 } as
<span>567.35</span>

<NumberField source="share" options={{ style: 'percent' }} />
// renders the record { id: 1234, share: 0.2545 } as
<span>25%</span>

<NumberField source="price" options={{ style: 'currency', currency: 'USD' }} />
// renders the record { id: 1234, price: 25.99 } as
<span>$25.99</span>

<NumberField source="price" locales="fr-FR" options={{ style: 'currency', currency: 'USD' }} />
// renders the record { id: 1234, price: 25.99 } as
<span>25,99 $US</span>

<NumberField source="score" elStyle={{ color: 'red' }} />
// renders the record { id: 1234, score: 567 } as
<span style="color:red;">567</span>

 

<SelectField>

  • optionText, optionValue로 커스터마이징 가능
  • optionText -> 함수 가능 
const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <Chip>{record.first_name} {record.last_name}</Chip>;
<SelectField source="author_id" choices={choices} optionText={<FullNameField />}/>

 

<ReferenceField>

  • 한 개의 referenced record를 fetch하고 하나의 필드를 display함
  • 하나 이상의 자식 <Field>를 가져야 함
  • reference : fetch할 리소스를 구체적으로 명시

 

 

<ReferenceManyField>

  • referenced record의 베열을 fetch함
  • value를 포함하는 필드를 정의하는 source 애트리뷰트 (기본값 id)
  • reference data를 fetch하기 위해 readc-admin에 <Resource>를 추가해야 함
  • perPage prop으로 리밋을 조절할 수 있음 (기본값 25)
  • 페이지네이션 하고 싶으면 pagination={<Pagination />} prop 추가하기
  • filter prop도 옵션으로 추가할 수 있음
import React from 'react';
import { Edit, Datagrid, SimpleForm, DateField, EditButton, ReferenceManyField, TextField, TextInput } from 'react-admin';

export const PostEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <TextInput disabled label="Id" source="id" />
            <TextInput source="title" />
            <ReferenceManyField
                label="Comments"
                reference="comments"
                target="post_id"
            >
                <Datagrid>
                    <DateField source="created_at" />
                    <TextField source="author.name" />
                    <TextField source="body" />
                    <EditButton />
                </Datagrid>
            </ReferenceManyField>
        </SimpleForm>
    </Edit>
);

 

 

<ReferenceArrayField>

  • 외래 키의 배열을 기반으로 하는 reference value들의 배열을 디스플레이하기 위해 사용

<RichTextField>

  • HTML content 디스플레이

<TextField>

  • plain text 디스플레이

<ReferenceArrayField>

  • <a href=""> 태그의 URL 디스플레이

 

저작자표시 비영리