Keystonejs Tutorials #8/Custom Field2 #JavaScript

前ページ https://qiita.com/bontensuzuki/items/8f91e3f0128b6be1ecbb

Keystonejsのtutorialsから学んでいきます。（ほとんど機械翻訳です）
https://www.keystonejs.com/tutorials/custom-fields

実装

ここにあるソースを説明しています
https://github.com/keystonejs/keystone/tree/master/demo-projects/custom-fields/

まず、Implementation.jsを見てみましょう。


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

class Stars extends Integer.implementation {
  extendAdminMeta(meta) {
    return { ...meta, starCount: this.config.starCount || 5 };
  }
}

module.exports = {
  Stars,
  MongoIntegerInterface: Integer.adapters.mongoose,
  KnexIntegerInterface: Integer.adapters.knex,
};

アダプターインターフェイスと共にフィールド実装クラスをエクスポートするための既存のフィールドタイプとの規則。

アダプターは、フィールドとデータベース間のインターフェースを提供します。ここでは、クエリとミューテーションをSQLまたはMongoDBアクションに変換する方法を定義します。繰り返しますが、Startsの実装はIntegerフィールドタイプと同じになるため、Integerフィールドタイプのアダプタを再エクスポートするだけで済みます。

データの保存方法については何も変更しないので、ここでは、Integerフィールドのアダプターを再エクスポートします。

実装クラスは、Keystoneバックエンドで使用されます。それは多くのものを定義します。まず、タイプ、クエリ、リゾルバを含むGraphQLインターフェース。次に、フィールドが順序付け可能かどうかなどのフィールドプロパティ。最後に、Keystoneが管理UIに渡す必要のあるデータ。

Starsフィールドの場合、Integerの実装から変更したいのは、星の数の構成オプションを追加することだけです。このため、Integer実装クラスを拡張し、メソッドextendAdminMetaをオーバーライドできます。

ビュー(Views)

これでバックエンドインターフェイスが用意できたので、UIコンポーネントを見てみましょう。

これは通常、コントローラーから始まります。コントローラーは、フィルタリング、デフォルト値、データのシリアル化、ラベルリゾルバー、一部のGraphQlオプションなど、フロントエンド機能の動作を定義します。この例のフィルタリングでは、デフォルト値とコントローラーのアスペクトはすべてIntegerフィールドと同じになります。もう一度、Integerコントローラーを参照するだけにします。

注：Integer.views.Controllerもnode_modulesフォルダー内のパスに解決され、ビルド時にKeystoneによってバンドルされます。

残りのビューは、管理UIでレンダリングされるReactコンポーネントに関連しています。まず、カウントと値の小道具に応じて、塗りつぶされたまたは輪郭が描かれた星の数をレンダリングする一般的なコンポーネントを作成します。したがって、5つの評価のうち3つ星は次のようになります。

<Stars count={5} value={3}>

このコンポーネントの例は、custom-fieldsデモプロジェクトにあります。

星評価用のコンポーネントを作成したら、これをKeystoneで使用できます。

Cell

セルコンポーネントは、Keystone管理UIのアイテムのリストを示すテーブルにレンダリングされます。作成したstarコンポーネントを使用します。セルコンポーネントは、整数値になるデータと、Implementation.jsファイルに追加したstarCountフィールド構成オプションを使用します。セルを操作して、コンポーネントにonChangeプロップを提供しないようにすることができます。

import { jsx } from '@emotion/core';
import Stars from './Stars';

export default function StarsCell({ field, data }) {
  const { starCount } = field.config;
  return <Stars count={starCount} value={data} />;
}

Field

フィールドコンポーネントは、Keystoneでリストアイテムを作成または編集するときに使用されるメインインターフェイスを提供します。一貫性のある外観を得るために、@ arch-ui / fieldsからラッピングコンポーネントをインポートします。これはKeystoneのUIライブラリです。これにより、ラベルがレンダリングされ、一定の間隔が確保されます。これ以外は、ユーザーが星をクリックするときに値を更新できるように、onChangeイベントを星に委任するだけです。


import { jsx } from '@emotion/core';
import { FieldContainer, FieldLabel, FieldInput } from '@arch-ui/fields';
import Stars from './Stars';

const StarsField = ({ field, value, errors, onChange }) => (
  <FieldContainer>
    <FieldLabel htmlFor={`ks-input-${field.path}`} field={field} errors={errors} />
    <FieldInput>
      <Stars count={field.config.starCount} value={value} onChange={onChange} />
    </FieldInput>
  </FieldContainer>
);
export default StarsField;

これで、基本的なカスタムフィールドが作成されました。

前ページ https://qiita.com/bontensuzuki/items/8f91e3f0128b6be1ecbb