adminJS - UI 커스터마이즈 / 사용자설정 컴포넌트(공식 사이트 번역)

커스텀 컴포넌트 추가

AdminJS는 자체 내장 구성 요소를 사용하여 모든 속성과 작업을 처리합니다. 이들은 친숙한 텍스트 입력, 체크박스, 페이지가 매겨진 목록, 편집 양식 등입니다. 그러나 대신 단일 속성 또는 작업에 대한 사용자 정의 구성 요소를 정의할 수 있습니다. 이렇게 하면 데이터가 표시되고 수정되는 방식을 효과적으로 제어할 수 있습니다.

일반적으로 ComponentLoader의 인스턴스를 만들고 거기에 사용자 정의 구성 요소를 추가하고 AdminJS 옵션 개체에 전달하고 사용자 정의 구성 요소를 사용하는 속성/작업과 위치를 지정해야 합니다.

// ./components.ts
import { ComponentLoader } from 'adminjs'

const componentLoader = new ComponentLoader()

const Components = {
    MyInput: componentLoader.add('MyInput', './my-input'),
    // other custom components
}

export { componentLoader, Components }

// ./my-input.tsx
import React from 'react'

// just some regular React component
const MyInputComponent = () => <input />

export default MyInputComponent

// ./some-resource.ts
import { Components } from './components'

export const SomeResource = {
  resource: Something, // database model
  options: {
    properties: {
      someText: {
        type: 'string',
        components: {
          edit: Components.MyInput, // this is our custom component
        },
      },
    },
  },
}

// ./index.ts
import { AdminJS } from 'adminjs'
import { componentLoader } from './components'
import { SomeResource } from './some-resource'

const admin = new AdminJS({
    resources: [SomeResource],
    componentLoader, // the loader needs to be added here
    // other options
})

admin.watch() // this builds your frontend code in development environment

// rest of the adapter and plugin code

 

커스텀 컴포넌트 구조

ComponentLoader에 추가된 파일은 구성 요소 기능을 기본 내보내기로 노출해야 합니다. jsx 및 .tsx 형식이 모두 지원됩니다.

고급 사용법

ComponentLoader.add() 및 ComponentLoader.override() 함수에 대한 두 번째 인수에 전달된 경로는 호출된 파일에 상대적이어야 합니다. 이러한 호출을 다른 함수로 래핑하려는 경우 AdminJS가 올바른 파일을 찾을 수 없음을 알 수 있습니다. 이를 수정하려면 다음과 같이 호출자 함수의 이름과 함께 세 번째 인수를 전달하십시오.

import { ComponentLoader } from 'adminjs'

const loader = new ComponentLoader()

export const bundleFile = (key: string, path: string) => {
    loader.add(key, path, 'bundleFile') // `bundleFile` is the name of this function
}

 

종속성

AdminJS는 이러한 종속성을 내부적으로 사용하므로 package.json파일에서 요구할 필요 없이 코드에 노출됩니다.

• react
• react-dom
• prop-type

State management

• redux
• react-redux

Routing

• react-router
• react-router-dom

Styling

• styled-components
• styled-system

Other

• axios
• recharts
• flat
• @carbon/icons-react

 

구성 요소에 전달된 소품

속성 및 작업 구성 요소에서 제어 구성 요소 가 전달한 소품을 사용할 수 있습니다 .

현재 2개의 제어 구성 요소 가 있습니다 .

• action용 : ActionProps가 있는 BaseActionComponent
• 사용자 지정 속성 필드용: BasePropertyProps 가 포함된 BasePropertyComponents

사용 가능한 소품 을 보려면 설명서를 확인하세요.

기타 내부 구성 요소(예: 대시보드)에는 prop이 없거나 서로 다릅니다. 각 경우의 소스 코드를 참조하세요.

 

내부 AdminJS 구성 요소 재정의

ComponentLoader또한 .override()AdminJS에서 내부적으로 사용하는 구성 요소를 사용자 지정 구성 요소로 교체할 수 있는 방법도 있습니다. 이는 전체 AdminJS 앱의 동작을 변경하거나 추가하려는 경우에 유용합니다. 예를 들면 다음과 같습니다.

• 사용자 지정 대시보드 추가
• 앱 레이아웃 변경
• 전체 컨트롤 재정의(예: 부울 체크박스를 토글로 교체)
• 테마가 불충분할 때 구성 요소 모양과 느낌 사용자 지정

구성 요소 재정의는 사용자 지정 구성 요소를 추가하는 것과 정확히 동일한 방식으로 작동하지만 일치하는 구성 요소 이름을 지정해야 합니다( 여기에 목록이 있음).

메서드는 안전 계층으로 분할 되므로 실수 .add()로 .override()동일한 이름의 사용자 지정 구성 요소로 내부 구성 요소를 재정의하지 않습니다. 충돌하는 구성 요소에 함수를 사용하면 오류가 발생합니다. 즉, .add()내부 구성 요소 이름을 사용할 수 없으며 내부 구성 요소 이름 .override()이 필요합니다.

 

기타 사용자 정의

테마

https://system-ui.com/theme 표준과 호환되는 테마 를 지원 합니다.

기본 색상, 글꼴, 크기 등을 재정의하려면 AdminJSOptions.branding에 값을 입력할 수 있습니다.

스타일 소품 사용

AdminJS 구성 요소는 스타일을 제어하는 ​​여러 소품으로 강력합니다. 예를 들어 module:@adminjs/design-system.Button의 색상을 변경하려면 다음과 같이 module:@adminjs/design-system.Theme에서 backgroundColor (bg)를 전달할 수 있습니다 .

import { Button } from '@adminjs/design-system'

const MyButton = styled(Button)`
  background-color: #ccc;
  color: ${({theme}) => theme.colors.grey100};
  ...
`

내부적으로 styled-components를 사용 하므로 해당 문서를 확인하십시오.

 

AdminJS의 UI 구성 요소 재사용

AdminJS는 구성 요소 라이브러리를 재사용할 수 있는 기능을 제공합니다.

import { Label } from '@adminjs/design-system'

const YourComponent (props) => {(
  <Label>Some styled text<Label>
)}

 

내부적으로 구성 요소들을 두 그룹으로 나눕니다.
  - 응용 프로그램 구성 요소 - AdminJS가 필요한 '스마트 구성 요소'로 생각할 수 있습니다.
  - 디자인 시스템 구성 요소 - AdminJS가 필요하지 않으며 AdminJS 설정 외부에서 사용할 수 있습니다.
그렇기 때문에 때로는 'adminjs'패키지에서, 때로는 '@adminjs/design-systen'에서 구성 요소를 가져와야 합니다.

각 구성 요소는 놀이터 옵션으로 설명되어 있으므로 모든 구성 요소의 모든 문서를 확인하십시오.

가장 다재다능한 구성 요소 중 하나는 BasePropertyComponent 입니다. 모든 속성을 렌더링할 수 있습니다. useRecord 와 결합하면 양식 작성을 위한 강력한 도구입니다.

 

 

사용자 지정 페이지 만들기

AdminJS 옵션의 페이지 개체에 해당 이름을 지정하여 사용자 지정 구성 요소를 전체 페이지로 사용할 수도 있습니다.

import AdminJS from 'adminjs'
import { Components } from './components'

new AdminJS({
    pages: {
        myPage: { // name, will be used to build an URL
            handler: // handler code,
            component: Components.MyPage,
            icon: // page icon name
        }
    }
})

 

 

다른 AdminJS 프런트엔드 클래스 및 개체 사용

AdminJS는 다음 클래스도 노출합니다.

• API 클라이언트
• View Helper

다음과 같이 사용할 수 있습니다.

import { ApiClient, ViewHelpers } from 'adminjs'