メインコンテンツまでスキップ

属性選択編集ブロック

EditAttributeSelection は、MUI 上に構築された制御されたチェックボックス選択フォームブロックです。

インストール​

npm install @nodeblocks/frontend-edit-attribute-selection-block

必要なもの​

ItemWhy it matters
data制御されたフォーム状態。選択済みの値は data.attributes に入ります。
onDataChange変更されたパスのメタデータとともに、次のデータスナップショットを受け取ります。
optionsデフォルトの一覧に表示されるチェックボックスの選択肢です。この prop はコンポーネントのソースで必須です。
labels (optional)タイトル、サブタイトル、フィールド名、送信ボタンの文言です。
errors (optional)カスタムフロー用にブロックコンテキストへ渡されます。
layout (optional)チェックボックスの配置を制御します: one-column または grid.
children (optional)複合コンポーネントまたはブロックのオーバーライド描画を使用します。
制御コンポーネント

EditAttributeSelection はフォーム状態を所有しません。data はアプリ側で保持し、更新は onDataChange 経由で渡してください。想定される形は data.attributes: [{ key, value }] です。

コード例​

ライブエディター
function Example() {
  const defaultData = { attributes: [] };
  const [data, setData] = React.useState(defaultData);

  const options = [
    { key: 'role', value: 'frontend', label: 'フロントエンドエンジニア' },
    { key: 'role', value: 'backend', label: 'バックエンドエンジニア' },
    { key: 'role', value: 'devops', label: 'フルスタックエンジニア' },
    { key: 'role', value: 'security', label: 'データベースエンジニア' },
  ];

  return (
    <EditAttributeSelection
      data={data}
      options={options}
      labels={{
        editAttributeSelectionTitle: '職種',
        subtitle: 'ご自身の職種を選択してください',
        fieldName: '役割',
        submitButton: '保存',
      }}
      layout="grid"
      onDataChange={(nextData) => {
        setData(nextData);
      }}
    />
  );
}
結果
Loading...

重要な props​

基本 props​

PropTypeRequiredDefaultDescription
dataEditAttributeSelectionFormData ({ attributes: { key: string; value: string }[] })Yes-制御されたフォーム状態。
onDataChange(data: EditAttributeSelectionFormData, meta: { name: string; value: unknown; cause: one of input, change, blur, clear, reset, programmatic; event?: React.SyntheticEvent }) => voidYes-フィールドが変更されるたびに呼び出されます。meta.name はブラケット記法のパスを使います。
errors{ [fieldPath: string]: string | string[] }Noundefinedカスタムフロー用にブロックコンテキストへ渡されるフィールドレベルのエラー。

コンテンツ props​

PropTypeRequiredDefaultDescription
labels{ editAttributeSelectionTitle?: React.ReactNode; subtitle?: React.ReactNode; fieldName?: React.ReactNode; submitButton?: React.ReactNode }Noundefinedルートのタイトル、サブタイトル、フィールド名、送信ボタンの文言。
optionsEditAttributeSelectionOption[] ({ key: string; value: string; label: string }[])Yes-CheckboxList によって描画されるチェックボックスの選択肢。

レイアウトと構成 props​

PropTypeRequiredDefaultDescription
layout'one-column' | 'grid'No'one-column'デフォルトのチェックボックス一覧の配置を制御します。
childrenBlocksOverride<typeof defaultBlocks, CustomBlocks>NoundefinedJSX の複合コンポーネント、または blocks と blockOrder を返す関数を渡します。ルートでは既定で Title、Subtitle、FieldName、CheckboxList、SubmitButton を描画します。

継承される props は StackProps<'form'> 由来で、children がブロックのオーバーライド API に置き換えられているため、onSubmit、id、className、sx などの標準的な form/container props を利用できます。

デフォルト UI ブロック​

BlockBuilt onNotes
EditAttributeSelectionStackcomponent="form" を使うルートの form シェルです。
TitleTypographyvariant="h4", component="h2", 中央揃え。既定では labels.editAttributeSelectionTitle を使用します。
SubtitleTypographyvariant="body2" で太字テキスト。既定では labels.subtitle を使用します。
FieldNameTypographyvariant="body2" で太字テキスト。既定では labels.fieldName を使用します。
CheckboxListStack + CheckboxFieldoptions 配列をチェックボックスとして描画します。layout="grid" はレスポンシブなグリッドを使用し、xs で 2 列、sm で 3 列、md で 4 列になります。
SubmitButtonButtonvariant="contained", size="large", fullWidth, type="submit". 既定値は 保存 です。

追加のフィールドプリミティブ​

PrimitiveMain PropsInheritsBuilt onNotes
CheckboxFieldname, value, label, controlFormControlLabelProps with control optionalFormControlLabel + Checkboxdata.attributes 内の単一の { key, value } エントリを切り替えます。カスタムフローでは利用できますが、標準レイアウトでは描画されません。

TypeScript​

export type EditAttributeSelectionFormData = {
  attributes: {
    key: string;
    value: string;
  }[];
};

export type EditAttributeSelectionOption = {
  key: string;
  value: string;
  label: string;
};