Компонент списка файлов в Microsoft Graph Toolkit

Статья
11/07/2024

В компоненте Список файлов отображается список из нескольких папок и файлов с помощью имени файла или папки, значка и других указанных свойств. Этот компонент использует компонент mgt-file . Вы можете указать конкретный диск или сайт, отобразить список файлов в зависимости от типа аналитики (трендовый, используемый или общий) или предоставить запросы к пользовательскому списку файлов. Компонент также позволяет пользователям отправлять файлы в указанное расположение в One Drive или SharePoint.

Пример

В следующем примере показан файл с помощью mgt-file-list компонента . Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.

HTML
React;

[Открыть этот пример в mgt.dev] (https://mgt.dev/?path=/story/components-mgt-file-list-html--file-list&source=docs).

Свойства

Для настройки компонента можно использовать несколько свойств.

Атрибут	Свойство	Описание
file-list-query	fileListQuery	Полный запрос или путь к диску или сайту, который содержит список файлов для отрисовки.
file-запросы	fileQueries	Массив запросов к файлам, отображаемых компонентом.
-	files	Массив файлов для получения или задания списка файлов, отображаемых компонентом. Используйте это свойство для доступа к файлам, загруженным компонентом. Задайте это значение, чтобы загрузить собственные файлы.
тип аналитики	insightType	Задайте для отображения популярных, используемых или общих файлов пользователя.
идентификатор диска	driveId	Идентификатор диска, к которому принадлежит папка. Также необходимо указать или `item-iditem-path`.
group-id	groupId	Идентификатор группы, к которой принадлежит папка. Также необходимо указать или `item-iditem-path`.
идентификатор сайта	siteId	Идентификатор сайта, к которому принадлежит папка. Также необходимо указать или `item-iditem-path`. Укажите `list-id` , если вы ссылаетесь на файл из определенного списка.
user-id	userId	Идентификатор пользователя, которому принадлежат файлы. Также необходимо указать или `item-iditem-path`. Укажите `list-id` , если вы ссылаетесь на файл из определенного списка.
item-id	itemId	Идентификатор папки. Запрос по умолчанию — `/me/drive/items`. Укажите `drive-id`, `group-id`, `site-id`или `user-id` для запроса определенного расположения.
путь к элементу	itemPath	Путь к элементу папки (относительно корня). Запрос по умолчанию — `/me/drive/root`. Укажите `drive-id`, `group-id`, `site-id`или `user-id` для запроса определенного расположения.
представление элемента	itemView	Задает данные для отрисовки (только значок файла, oneLine, twoLines threeLines). Значение по умолчанию — threeLines.
размер страницы	pageSize	Числовое значение, указывающее максимальное количество файлов для отображения на каждой странице. Заметка:`page-size` не поддерживается с `insight-type`.
расширения файлов	fileExtensions	Массив расширений файлов, используемых для фильтрации файлов для отображения.
кнопка hide-more-files	hideMoreFilesButton	Логическое значение, указывающее, следует ли отображать кнопку для отрисовки дополнительных файлов.
enable-file-upload	enableFileUpload	Логическое значение для включения или отключения функции отправки файлов. Значение по умолчанию — `false`.
excluded-file-extensions	excludedFileExtensions	Массив строк расширений файлов, которые должны быть исключены из отправки файлов. Необходимо также задать атрибуту `enable-file-upload` значение `true`.
max-file-size	maxFileSize	Число, представляющее максимальный размер отправляемого файла (КБ). Необходимо также задать атрибуту `enable-file-upload` значение `true`.
max-upload-file	maxUploadFile	Число, представляющее максимальное число файлов, разрешенных для отправки. Значение по умолчанию — `10` files. Необходимо также задать атрибуту `enable-file-upload` значение `true`.
disable-open-on-click	disableOpenOnClick	Логическое значение, чтобы включить или отключить поведение по умолчанию при открытии файла на отдельной вкладке браузера при щелчке.

В следующем примере изменяется поведение компонента, чтобы получить список файлов из определенного запроса.

<mgt-file-list
  file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"
></mgt-file-list>

В следующем примере изменяется поведение компонента, чтобы получить список файлов из папки, указав идентификатор папки.

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

В следующем примере изменяется поведение компонента, чтобы получить список файлов из группы, указав идентификатор группы и путь к папке.

<mgt-file-list
  group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3"
  item-path="/Design"
></mgt-file-list>

В следующем примере изменяется поведение компонента, чтобы получить список файлов от пользователя, указав идентификатор пользователя и идентификатор папки.

<mgt-file-list
  user-id="48d31887-5fad-4d73-a9f5-3c356e68a038"
  item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"
></mgt-file-list>

В следующем примере изменяется поведение компонента для получения списка файлов путем предоставления типа аналитики.

<mgt-file-list insight-type="shared"></mgt-file-list>

В следующем примере включается функция отправки файлов.

<mgt-file-list enable-file-upload></mgt-file-list>

В следующем примере максимальное количество файлов, которые можно отправить, ограничивается до 5.

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

В следующем примере максимальный размер файла, который можно отправить, ограничивается 10 000 КБ.

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

В следующем примере исключается отправка файлов с расширениями файлов ".doc, .pdf".

<mgt-file-list
  excluded-file-extensions=".doc,.pdf"
  enable-file-upload
></mgt-file-list>

Настраиваемые свойства CSS

Компонент mgt-file-list определяет следующие настраиваемые свойства CSS.

<mgt-file-list class="file-list" insight-type="shared"></mgt-file-list>

.file-list {
  /** mgt-file-upload custom styling */
  --file-upload-background-color-drag: rgb(255, 0, 0, 0.5);
  --file-upload-border-drag: 2px groove black;
  --file-upload-button-background-color: orange;
  --file-upload-button-background-color-hover: green;
  --file-upload-button-text-color: whitesmoke;
  --file-upload-dialog-background-color: azure;
  --file-upload-dialog-text-color: yellow;
  --file-upload-dialog-replace-button-background-color: white;
  --file-upload-dialog-replace-button-background-color-hover: gray;
  --file-upload-dialog-replace-button-text-color: black;
  --file-upload-dialog-keep-both-button-background-color: black;
  --file-upload-dialog-keep-both-button-background-color-hover: gray;
  --file-upload-dialog-keep-both-button-text-color: white;
  --file-upload-button-border: 2px dotted yellow;
  --file-upload-dialog-replace-button-border: 2px dotted;
  --file-upload-dialog-keep-both-button-border: 2px dashed;
  --file-upload-dialog-border: 2px solid blue;
  --file-upload-dialog-width: 300px;
  --file-upload-dialog-height: 100px;
  --file-upload-dialog-padding: 36px;

  /** mgt-file custom styling */
  --file-type-icon-height: 30px;
  --file-border: 4px dotted #ffbdc3;
  --file-border-radius: 8px;
  --file-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --file-background-color: #e0f8db;
  --file-background-color-focus: yellow;
  --file-background-color-hover: green;
  --file-padding: 8px;
  --file-padding-inline-start: 12px;
  --file-margin: 3px 4px;
  --file-line1-font-size: 15px;
  --file-line1-font-weight: 500;
  --file-line1-color: gray;
  --file-line1-text-transform: capitalize;
  --file-line2-font-size: 14px;
  --file-line2-font-weight: 300;
  --file-line2-color: #e50000;
  --file-line2-text-transform: lowercase;
  --file-line3-font-size: 13px;
  --file-line3-font-weight: 500;
  --file-line3-color: purple;
  --file-line3-text-transform: capitalize;

  /** mgt-file-list CSS tokens */
  --file-list-background-color: #e0f8db;
  --file-list-box-shadow: none;
  --file-list-border: 4px dotted #ffbdc3;
  --file-list-border-radius: 10px;
  --file-list-padding: 0;
  --file-list-margin: 0;
  --show-more-button-background-color: #fef8dd;
  --show-more-button-background-color--hover: #ffe7c7;
  --show-more-button-font-size: 14px;
  --show-more-button-padding: 16px;
  --show-more-button-border-bottom-right-radius: 12px;
  --show-more-button-border-bottom-left-radius: 12px;
}

Дополнительные сведения см. в статье Компоненты стиля.

Методы

Метод	Описание
reload(clearCache = false)	Вызывает метод для перезагрузки компонента с потенциальными новыми данными на основе его свойств. Перед перезагрузкой перед перезагрузкой перед перезагрузкой перейдите `true` к очистке кэша.

Пример перезагрузки

Вы можете использовать reload() метод, который предоставляется mgt-file-list в , получив ссылку mgt-file-list из DOM и активировав метод в кнопке с помощью click события.

<mgt-file-list insight-type="shared"></mgt-file-list>

<button id="reload-btn">Reload Files</button>

const fileList = document.querySelector("mgt-file-list");
document.getElementById("reload-btn").addEventListener("click", () => {
  // passing true will clear file cache before reloading
  fileList.reload(true);
});

События

Событие	Когда он генерируется	Пользовательские данные	Отменяемым	Пузыри	Работает с пользовательским шаблоном
`itemClick`	Срабатывает, когда пользователь выбирает файл.	Выбранный файл	Нет	Нет	Да, с пользовательским шаблоном файла .

Дополнительные сведения об обработке событий см. в разделе События.

Шаблоны

Компонент mgt-file-list поддерживает множество шаблонов , позволяющих заменить определенные части компонента. Чтобы указать шаблон, добавьте <template> элемент внутри компонента и задайте data-type для него значение одного из типов данных, перечисленных в следующей таблице.

Тип данных	Контекст данных	Описание
default	`files`: список объектов файлов	Шаблон по умолчанию заменяет весь компонент вашим собственным компонентом.
file	`file`: объект file	Шаблон, используемый для отрисовки каждого файла.
no-data	Контекст данных не передан	Шаблон, используемый, если данные недоступны.
loading	Контекст данных не передан	Шаблон, используемый при загрузке состояния компонента.

Пример использования шаблона

<mgt-file-list insight-type="shared">
  <template data-type="loading">
    <p>Getting files</p>
  </template>
  <template data-type="no-data">
    <p>No files found</p>
  </template>
  <template data-type="file">
    <p>File name{{file.name}}</p>
  </template>
</mgt-file-list>

Разрешения Microsoft Graph

Этот компонент использует следующие API Microsoft Graph. Для каждого вызова API требуется одно из перечисленных разрешений.

Конфигурация	Разрешения	API
По умолчанию (идентификаторы или запросы не предоставляются)	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /me/drive/root/children`
Укажите `{drive-id}` И `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /drives/{drive-id}/items/{item-id}/children`
Укажите `{group-id}` И `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /groups/{group-id}/drive/items/{item-id}/children`
Укажите ТОЛЬКО `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /me/drive/items/{item-id}/children`
Укажите `{site-id}` И `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /sites/{site-id}/drive/items/{item-id}/children`
Укажите `{user-id}` И `{item-id}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /users/{user-id}/drive/items/{item-id}/children`
Укажите `{drive-id}` И `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /drives/{drive-id}/root:/{item-path}:/children`
Укажите `{group-id}` И `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /groups/{group-id}/root:/{item-path}:/children`
Укажите `{site-id}` И `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /sites/{site-id}/root:/{item-path}:/children`
Укажите `{user-id}` И `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /users/{user-id}/root:/{item-path}:/children`
Предоставьте только `{item-path}`	Files.Read, Files.ReadWrite, Files.Read.All, Files.ReadWrite.All, Group.Read.All, Group.ReadWrite.All, Sites.Read.All, Sites.ReadWrite.All	`GET /me/drive/root:/{item-path}:/children`
`insight-type` для задано значение `trending`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/trending`
`insight-type` для задано значение `used`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/used`
`insight-type` для задано значение `shared`	Sites.Read.All, Sites.ReadWrite.All	`GET /me/insights/shared`
Дополнительно требуется предоставление `enable-file-upload`	Files.ReadWrite, Files.ReadWrite.All, Sites.ReadWrite.All	`PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`

Подкомпоненты

Компонент mgt-file-list состоит из одного или нескольких подкомпонентов, для которых могут потребоваться разрешения, отличные от перечисленных ранее. Дополнительные сведения см. в документации по каждому подкомпоненту: mgt-file.

Проверка подлинности

Для получения требуемых данных в средстве управления используется глобальный поставщик проверки подлинности, указанный в документации по проверке подлинности.

Кэш

Хранилище объектов	Кэшированные данные	Замечания
`fileLists`	Список списков файлов	Список кэша по умолчанию для хранения списков файлов.
`insightfileLists`	Список списков файлов аналитических сведений	Используется при `insightType` указании.

Примечание.

Компонент mgt-file-list также использует fileQueries хранилище объектов в mgt-file IndexedDB для кэширования файлов при fileQueries предоставлении.

Дополнительные сведения о настройке кэша см. в разделе Кэширование.

Локализация

Элемент управления предоставляет следующие переменные, которые можно локализовать. Дополнительные сведения о настройке локализации см. в разделе Локализация компонентов.

Имя строки	Значение по умолчанию
showMoreSubtitle	`Show more items`
filesSectionTitle	`Files`
sharedTextSubtitle	`Shared`

Поделиться через