Skip to content

Commit 2959cf1

Browse files
author
Piotr Siatka
committed
Ini Tiles implementation.
1 parent fee0032 commit 2959cf1

File tree

8 files changed

+217
-19
lines changed

8 files changed

+217
-19
lines changed

‎src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ import { IFile, FilesQueryResult } from '../../../../services/FileBrowserService
3131
import { OneDriveService } from '../../../../services/OneDriveService';
3232
import { GeneralHelper } from '../../../../Utilities';
3333
import { LoadingState } from './IFileBrowserState';
34+
import { FileTilesList } from '../FileTilesList';
35+
// import { TilesList, ITilesGridSegment, TilesGridMode, ITileSize, ITilesGridItem } from '../TilesList';
3436

3537
/**
3638
* Renders list of file in a list.
@@ -178,25 +180,34 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
178180
farItems={this.getFarItems()}
179181
/>
180182
</div>
181-
<div className={styles.scrollablePaneWrapper}>
182-
<ScrollablePane>
183-
<DetailsList
184-
items={this.state.items}
185-
compact={this.state.selectedView === 'compact'}
186-
columns={this.state.columns}
187-
selectionMode={SelectionMode.single}
188-
setKey="set"
189-
layoutMode={DetailsListLayoutMode.justified}
190-
isHeaderVisible={true}
191-
selection={this._selection}
192-
selectionPreservedOnEmptyClick={true}
193-
// onActiveItemChanged={(item: IFile, index: number, ev: React.FormEvent<Element>) => this._itemChangedHandler(item, index, ev)}
194-
enterModalSelectionOnTouch={true}
195-
onRenderRow={this._onRenderRow}
196-
onRenderMissingItem={this._onRenderMissingItem}
197-
/>
198-
</ScrollablePane>
199-
</div>
183+
{
184+
this.state.selectedView !== 'tiles' &&
185+
<div className={styles.scrollablePaneWrapper}>
186+
<ScrollablePane>
187+
<DetailsList
188+
items={this.state.items}
189+
compact={this.state.selectedView === 'compact'}
190+
columns={this.state.columns}
191+
selectionMode={SelectionMode.single}
192+
setKey="set"
193+
layoutMode={DetailsListLayoutMode.justified}
194+
isHeaderVisible={true}
195+
selection={this._selection}
196+
selectionPreservedOnEmptyClick={true}
197+
// onActiveItemChanged={(item: IFile, index: number, ev: React.FormEvent<Element>) => this._itemChangedHandler(item, index, ev)}
198+
enterModalSelectionOnTouch={true}
199+
onRenderRow={this._onRenderRow}
200+
onRenderMissingItem={this._onRenderMissingItem}
201+
/>
202+
</ScrollablePane>
203+
</div>
204+
}
205+
206+
{
207+
this.state.selectedView === 'tiles' &&
208+
// TODO: Pass onChange + onSave
209+
<FileTilesList items={this.state.items} />
210+
}
200211
</div>
201212
}
202213

‎src/controls/filePicker/controls/FileTile/FileTile.module.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.tile {
2+
text-align: center;
3+
outline: none;
4+
position: relative;
5+
float: left;
6+
background: rgb(243, 242, 241);
7+
// selectors: {
8+
// focus:after: {
9+
// content: ;
10+
// position: absolute;
11+
// left: 2;
12+
// right: 2;
13+
// top: 2;
14+
// bottom: 2;
15+
// box-sizing: border-box;
16+
// border: 1px solid white;
17+
// }
18+
// }
19+
}
20+
21+
.tileSizer {
22+
padding-bottom: 100%;
23+
}
24+
25+
.tilePadder {
26+
position: absolute;
27+
left: 2;
28+
top: 2;
29+
right: 2;
30+
bottom: 2
31+
}
32+
33+
.tileLabel {
34+
background: rgba(0, 0, 0, 0.3);
35+
color: #FFFFFF;
36+
position: absolute;
37+
padding: 10;
38+
bottom: 0;
39+
left: 0;
40+
width: 100%;
41+
//fontSize: fonts.small.fontSize;
42+
box-sizing: border-box;
43+
}
44+
.tileImage {
45+
position: absolute;
46+
top: 0;
47+
left: 0;
48+
width: 100%;
49+
}

‎src/controls/filePicker/controls/FileTile/FileTile.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import * as React from 'react';
2+
import * as strings from 'ControlStrings';
3+
import styles from './FileTile.module.scss';
4+
import { IFile } from '../../../../../lib/services/FileBrowserService.types';
5+
6+
export interface IFileTileProps {
7+
fileItem: IFile;
8+
width: number;
9+
}
10+
11+
export interface IFileTileState {}
12+
13+
export class FileTile extends React.Component<IFileTileProps, IFileTileState> {
14+
public render(): React.ReactElement<IFileTileProps> {
15+
//https://developer.microsoft.com/en-us/fabric#/controls/web/list
16+
return (
17+
18+
<div className={styles.tile}
19+
data-is-focusable={true}
20+
style={{
21+
width: this.props.width + '%'
22+
}}
23+
>
24+
<div className={styles.tileSizer}>
25+
<div className={styles.tilePadder}>
26+
<img src={this._getImgSrc()} className={styles.tileImage} />
27+
<span className={styles.tileLabel}>{this._getFileName()}</span>
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
}
33+
34+
private _getImgSrc = () => {
35+
const file = this.props.fileItem;
36+
37+
if (file.isFolder) {
38+
return strings.FolderBackPlate;
39+
}
40+
else if (file.absoluteRef.indexOf(".png") >= 0) {
41+
return file.absoluteRef;
42+
}
43+
else {
44+
return strings.PhotoIconUrl;
45+
}
46+
}
47+
48+
private _getFileName = () => {
49+
let fileName = "No fileName";
50+
const file = this.props.fileItem;
51+
if (file.absoluteRef) {
52+
const tokens = file.absoluteRef.split("/");
53+
fileName = tokens[tokens.length - 1];
54+
}
55+
56+
return fileName;
57+
}
58+
}

‎src/controls/filePicker/controls/FileTile/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./FileTile";

‎src/controls/filePicker/controls/FileTilesList/FileTilesList.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tilesList {
2+
position: relative;
3+
overflow: hidden;
4+
}

‎src/controls/filePicker/controls/FileTilesList/FileTilesList.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import * as React from 'react';
2+
import styles from './FileTilesList.module.scss';
3+
import { IFile } from '../../../../services/FileBrowserService.types';
4+
import { FileTile } from '../FileTile';
5+
import { Selection, SelectionZone } from 'office-ui-fabric-react/lib/Selection';
6+
import { IRectangle } from 'office-ui-fabric-react/lib/Utilities';
7+
import { List } from 'office-ui-fabric-react/lib/List';
8+
9+
export interface IFileTilesListProps {
10+
items: IFile[];
11+
}
12+
13+
export interface IFileTilesListState { }
14+
15+
const ROWS_PER_PAGE = 3;
16+
const MAX_ROW_HEIGHT = 250;
17+
18+
19+
export class FileTilesList extends React.Component<IFileTilesListProps, IFileTilesListState> {
20+
private _columnCount: number;
21+
private _columnWidth: number;
22+
private _rowHeight: number;
23+
private _selection: Selection;
24+
25+
constructor(props: IFileTilesListProps) {
26+
super(props);
27+
28+
this._selection = new Selection({ onSelectionChanged: this._onSelectionChanged });
29+
}
30+
31+
public render(): React.ReactElement<IFileTilesListProps> {
32+
return (
33+
<SelectionZone selection={this._selection}>
34+
{/* //https://developer.microsoft.com/en-us/fabric#/controls/web/focuszone
35+
//https://developer.microsoft.com/en-us/fabric#/controls/web/list */}
36+
37+
<List
38+
className={styles.tilesList}
39+
items={this.props.items}
40+
getItemCountForPage={this._getItemCountForPage}
41+
getPageHeight={this._getPageHeight}
42+
renderedWindowsAhead={4}
43+
onRenderCell={this._onRenderCell}
44+
/>
45+
</SelectionZone>
46+
);
47+
}
48+
49+
private _onRenderCell = (item: any, index: number | undefined) => {
50+
return (
51+
<FileTile fileItem={item} width={100 / this._columnCount}/>
52+
)
53+
}
54+
55+
private _onSelectionChanged = () => {
56+
console.log("Selection changed");
57+
}
58+
59+
private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
60+
if (itemIndex === 0) {
61+
this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
62+
this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
63+
this._rowHeight = this._columnWidth;
64+
}
65+
66+
return this._columnCount * ROWS_PER_PAGE;
67+
};
68+
69+
private _getPageHeight = (): number => {
70+
return this._rowHeight * ROWS_PER_PAGE;
71+
};
72+
}
73+

‎src/controls/filePicker/controls/FileTilesList/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./FileTilesList";

‎src/controls/filePicker/controls/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './FileBrowser';
22
export * from './DocumentLibraryBrowser';
3+

0 commit comments

Comments
 (0)