カスタムフィールド：星

このチュートリアルでは、星評価用のシンプルなカスタムフィールドタイプを作成します⭐️⭐️⭐️⭐️⭐️

このコンポーネントの場合、データ要件は単純です。星の数を表す整数を格納する必要があります。組み込みのInteger型を拡張して、その実装を活用し、必要に応じてカスタム動作とUIコンポーネントのみを提供できます。

フィールドタイプの定義

これが完了すると、カスタムフィールドのディレクトリは次のようになります。

.
└── Stars
    ├── index.js
    ├── Implementation.js
    └── views
        ├── Cell.js
        ├── Field.js
        ├── Filter.js
        ├── Stars.js
        ├── star-empty.svg
        └── star-full.svg

カスタムフィールドには、フィールド定義をエクスポートするindex.jsファイルが必要です。フィールド定義は、フロントエンドコードとバックエンドコードを含むフィールドを構成するすべての部分をまとめます。

スターフィールドの場合、次のようになります。

const { Stars, MongoIntegerInterface, KnexIntegerInterface } = require('./Implementation');

const { Integer } = require('@keystonejs/fields');

module.exports = {
  type: 'Stars',
  implementation: Stars,
  adapters: {
    mongoose: MongoIntegerInterface,
    knex: KnexIntegerInterface,
  },
  views: {
    Controller: Integer.views.Controller,
    Field: require.resolve('./views/Field'),
    Filter: Integer.views.Filter,
    Cell: require.resolve('./views/Cell'),
  },
};

実装とアダプターはKeystoneによって使用されるバックエンドコードを参照し、ビューの下のすべては、管理UIまたはGraphQLアプリのいずれかで使用されるフロントエンドコードを参照します。

フロントエンドとバックエンドのコードを同じファイルにバンドルできないことに気付いたかもしれません。そのため、フロントエンドコードをインポートするのではなく、require.resolveを使用して文字列値を提供します。文字列値は、ファイルの場所への参照です。 Keystoneには、フィールドタイプのフロントエンドコードをコンパイルする特別なビルドステップがあります。

注：独自のプロジェクトの外で使用するためにフィールドタイプをパッケージ化する場合は、追加の手順が必要ですが、これらはこのチュートリアルの範囲外です。

前ページ https://qiita.com/bontensuzuki/items/9982196b4f7956ba0fd9
次ページ https://qiita.com/bontensuzuki/items/7e9b5b7483b30324e9da