Custom Usage

The AssetPicker component can be customized in several ways:

Multiple Asset Selection

import React, { useState } from "react";
import { Button } from "@tag/tag-components-react-v4";
import AssetPicker from "@components/asset-picker/AssetPicker";

function MultipleSelectionExample() {
  const [openAssetPicker, setOpenAssetPicker] = useState(false);

  return (
    <>
      <Button accent="teal" onClick={() => setOpenAssetPicker(true)}>
        Select Multiple Assets
      </Button>

      <AssetPicker
        visible={openAssetPicker}
        onClose={() => setOpenAssetPicker(false)}
        onSelect={(selectedAssets) => {
          console.log("Selected assets:", selectedAssets);
          // Handle the selected assets
        }}
        isMultiple={true}
      />
    </>
  );
}

Filtered Asset Display

import React, { useState } from "react";
import { Button } from "@tag/tag-components-react-v4";
import AssetPicker from "@components/asset-picker/AssetPicker";

function FilteredAssetExample() {
  const [openAssetPicker, setOpenAssetPicker] = useState(false);

  // Filter to show only image assets, small size, and available for a specific channel
  const globalFilter = {
    Types: [2], // Images
    Sizes: [1], // Small
    AvailableFor: ["O+EadAcbjW/gBHJeXy5zcg=="], // Social Media cid
  };

  return (
    <>
      <Button accent="teal" onClick={() => setOpenAssetPicker(true)}>
        Select Filtered Assets
      </Button>

      <AssetPicker
        visible={openAssetPicker}
        onClose={() => setOpenAssetPicker(false)}
        onSelect={(selectedAsset) => {
          console.log("Selected asset:", selectedAsset);
          // Handle the selected asset
        }}
        globalFilter={globalFilter}
      />
    </>
  );
}

Enhanced Asset Data

import React, { useState } from "react";
import { Button } from "@tag/tag-components-react-v4";
import AssetPicker from "@components/asset-picker/AssetPicker";

function EnhancedAssetDataExample() {
  const [openAssetPicker, setOpenAssetPicker] = useState(false);

  // Extra fields to add to each selected asset
  const extraFields = [
    {
      field: "customField1",
      value: "customValue1",
    },
    {
      field: "customField2",
      value: "customValue2",
    },
  ];

  return (
    <>
      <Button accent="teal" onClick={() => setOpenAssetPicker(true)}>
        Select Assets with Extra Data
      </Button>

      <AssetPicker
        visible={openAssetPicker}
        onClose={() => setOpenAssetPicker(false)}
        onSelect={(selectedAsset) => {
          console.log("Selected asset with extra fields:", selectedAsset);
          // Handle the selected asset with added extra fields
        }}
        extraFields={extraFields}
      />
    </>
  );
}

Asset Validation

import React, { useState } from "react";
import { Button } from "@tag/tag-components-react-v4";
import AssetPicker from "@components/asset-picker/AssetPicker";

function AssetValidationExample() {
  const [openAssetPicker, setOpenAssetPicker] = useState(false);

  // Validation rules for selecting assets
  const validationRules = [
    {
      condition: (asset) =>
        asset?.assetType !== 2 || (asset?.height <= 500 && asset?.width <= 700),
      message: "Max dimensions: 500x700px",
      isError: true, // Prevents selection if validation fails
    },
    {
      condition: (asset) => asset?.assetSize < 5 * 1024 * 1024,
      message: "Max file size: 5MB",
      isError: false, // Shows warning but allows selection
    },
  ];

  return (
    <>
      <Button accent="teal" onClick={() => setOpenAssetPicker(true)}>
        Select Validated Assets
      </Button>

      <AssetPicker
        visible={openAssetPicker}
        onClose={() => setOpenAssetPicker(false)}
        onSelect={(selectedAsset) => {
          console.log("Selected validated asset:", selectedAsset);
          // Handle the selected asset
        }}
        validationRules={validationRules}
      />
    </>
  );
}