コードで拡張する

amplify pullを実行すると、AmplifyはFigmaコンポーネントのJSXおよびTSバージョンを自動的に生成します。これらのコンポーネントのコードを直接編集することはできません。次のpullで上書きされるためです。ただし、コードを拡張するメカニズムが公開されています。

生成されたコードを拡張する

コンポーネントプロップを使用して生成されたコードを拡張する

Figmaで作成されたコンポーネントを使用する場合、公開されているコンポーネントプロップを使用できます。以下のコード例は、コレクションにページネーションを追加する方法を示しています。isPaginatedプロップは<Collection/>コンポーネントのプロパティです。同様に、gapやisSearchableなどのプロップを使用してコレクションを拡張できます。

import {AmpligramCollection} from './ui-components'

<AmpligramCollection isPaginated itemsPerPage={3}/>

オーバーライドプロップを使用して生成されたコンポーネントを拡張する

生成されたすべてのコードは、すべてのコンポーネントと子要素にoverridesプロップを公開して、生成されたコードを拡張するための完全な制御を提供します。次の例は、デフォルトのFigmaファイルの一部であるFAQItemコンポーネントのタイトルの色を赤にオーバーライドする方法を示しています。

1. StudioでFAQItemコンポーネントに移動します
2. テキスト要素の名前を見つけます。この場合はTitleです
3. FAQItemをレンダリングしている場所のoverridesプロップを追加します。

import {FAQItem} from './ui-components'
... ... //⬇️ Studioに表示される要素名
<FAQItem overrides={{ Title: { color: 'red' } }} />

overrideItemsプロップを使用してコレクションを拡張する

生成されたすべてのCollectionコードはoverrideItemsプロップを公開して、各コレクションアイテムをそのデータアイテムのコンテキストで拡張するための完全な制御を提供します。overrideItemsは{ item, index }パラメータを受け入れ、各コレクションアイテムに適用すべきオーバーライドプロップを返す関数を期待します。

次の例は、各コレクションアイテムをオーバーライドして、コレクション内のインデックスに基づいて異なる色を表示し、ユーザーにどのホームがクリックされたかを通知する方法を示しています。

<HomeCollection
  overrideItems={({ item, index }) => ({
    backgroundColor: index % 2 === 0 ? 'white' : 'lightgray',
    onClick: () =>
      alert(`Home with id: ${item.id} and ${item.address} clicked!`)
  })}
/>

コレクションアイテム内の特定の要素のプロップをオーバーライドする場合は、オーバーライドオブジェクトをoverrideItemsに渡します。

<HomeCollection
  overrideItems={(item, index) => ({
    overrides: { Share: { fontWeight: 'bold' } }
  })}
/>

コレクションのネスト

コレクション内のコンポーネントスロットを使用すると、条件付きで追加のネストされたコレクションをレンダリングできます。たとえば、ネストされたコレクションを使用して、投稿のコレクションを生成し、各投稿にはその関連コメントのコレクションがあります。

この例では、2つのコレクションAmpligramCollection（commentsという名前のスロットを持つ）とCommentViewCollectionがあります。これらはPostおよびCommentデータモデルにバインドされており、一対多の関係を持っています。したがって、Postデータモデルの各レコードには、Commentsという名前のフィールドがあり、その値はCommentレコードの配列です。

まず、overrideItems機能を使用して、AmpligramCollectionのcommentコンポーネントスロット内にCommentViewCollectionをネストします。これにより、CommentViewCollection内のすべてのアイテムが各Ampligramスロットでレンダリングされます。

import { AmpligramCollection, CommentViewCollection } from './ui-components';

function App() {
  return (
    <AmpligramCollection
      overrideItems={({ item, index }) => ({
        comments: <CommentViewCollection /> //Add the child collection to the "comments" slot
      })}
    />
  );
}
export default App;

次に、CommentViewCollectionをフィルタリングして、各Ampligramに関連するCommentレコードのみを含めます。CommentViewCollectionをフィルタリングするには、itemsプロップをCommentレコードの配列に等しく設定します。この構文はDataStoreを使用しているかどうかによって異なります。

DataStore

import { AmpligramCollection, CommentViewCollection } from './ui-components';

function App() {
  return (
    <AmpligramCollection
      overrideItems={({ item, index }) => ({
        /*Set the items in this collection to be only related items*/
        comments: <CommentViewCollection items={item.Comments} />
      })}
    />
  );
}
export default App;

DataStoreなしのGraphQL

import { AmpligramCollection, CommentViewCollection } from './ui-components';

function App() {
  return (
    <AmpligramCollection
      overrideItems={({ item, index }) => ({
        /*Set the items in this collection to be only related items*/
        comments: <CommentViewCollection items={item.Comments.items} />
      })}
    />
  );
}
export default App;

アクション実行中またはその後のビジネスロジックの追加

コンポーネントがDataStoreを使用するGraphQL APIにバインドされている場合、Amplify Hubを使用してUIイベントハンドラーを介して実行されるアクションをリッスンし、カスタムビジネスロジックを追加できます。

import { Hub } from 'aws-amplify/utils'

...
Hub.listen("ui", (capsule) => {
  if (capsule.payload.event === "actions:auth:signout:finished") {
    // Post-signout logic
  }
});

上記の例では、顧客が「Sign out」ボタンをクリックしたときにカスタムビジネスロジックを追加できます。AmplifyHubはuiチャネルでStudio生成イベントを提供します。アクションバインディングHubイベントの形式はactions:[category]:[action_name]:[status]です。

生成されたコードを変更する

次のamplify pullで上書きされるため、生成されたすべてのコンポーネントコードを直接カスタマイズすることはできません。ただし、コンポーネント変更を制御したい場合は、以下の回避策が利用可能です。

1. ui-componentsから生成されたJSXおよびTSファイルを新しいフォルダー（たとえばAmpligram）に複製します
2. ファイルの名前を別の名前（たとえばAmpligram2）に変更し、関数名も一致するように更新します。
3. 新しいフォルダーに新しい「index.js」ファイルを作成して、新しいエクスポートを含めます（たとえばexport { default as Ampligram2 } from "./Ampligram2";）
4. 複製されたコンポーネントを必要な場所にインポートします。

次のamplify pullは新しいファイルを上書きしません。

使用例

次のコードスニペットは、アプリで特定のシナリオを処理する方法を示しています。

コレクションにページネーションを追加する

import {AmpligramCollection} from './ui-components'

<AmpligramCollection isPaginated itemsPerPage={3}/>

コンポーネントをレスポンシブにする

_自動レイアウト_を使用するFigmaコンポーネントは自動的にレスポンシブReactコンポーネントにマップされます。ただし、一部のコンポーネントは追加のカスタマイズが必要な場合があります。

ブレークポイントを使用して動作を定義します。

<NavBar width={{ small: '300px', large: '600px', xl: '800px' }} />

または

<NavBar width={'100vw'} />

アイコンのホバー状態を設定する

次の例は、CSSクラス名を使用してアイコンをオーバーライドする方法を示しています。

// App.css
.custom-btn:hover {
   transform: scale(1.2);
}

// App.jsx
const iconOverrides = {
  "Button": {
     className: "custom-btn"
  }
}

<HeroLayout1 overrides={iconOverrides} />

フォームデータを保存する

Amplify Studioはデータアクションバインディングを提供していますが、コード内でフォーム送信状態とワークフローを自分で管理することもできます。

Studioの要素名に基づいてオーバーライドキーを取得し、onChangeハンドラーを設定します。たとえば、TextFieldzohは「name input field」コンポーネントの名前です。

const [name, setName] = useState("");
const [location, setLocation] = useState("");
const [email, setEmail] = useState("");

const profileOverrides = {
  "TextFieldzoh": {
    onChange: (event) => { setName(event.target.value) }
  },
  "TextFieldzwu": {
    onChange: (event) => { setLocation(event.target.value) }
  },
  "TextFieldsdk": {
    onChange: (event) => { setEmail(event.target.value) }
  },
  "Button": {
    onClick: () => alert(`Saving form ${name} ${location} ${email}`)
  }
}

return (
    ...
    <EditProfile overrides={profileOverrides}/>
    ...
)

親ビューから詳細ビューへのナビゲーション

Amplify Studioはナビゲーションアクションバインディングを提供していますが、独自のルーティングシステムと統合したい場合は、ナビゲーションアクションを自分で管理することもできます。

たとえば、コレクション内のアイテムをクリックして詳細ビューに移動したい場合。overrideItemsプロップを使用してコレクション内の各要素のプロパティを変更します。overrideItemsの戻り値は、コレクションアイテムのコンポーネントのオーバーライドとして適用されます。

<HomeCollection
  overrideItems={({ item, index }) => ({
    style: {
      cursor: 'pointer'
    },
    onClick: () => {
      // The actual redirect can happen whichever way you want
      // `item` represent the data item that is passed into the
      // collection item. In this case, it's a "home".
    }
  })}
/>