Merge branch 'main' of github.com:anyproto/anytype-ts

src/scss/menu/dataview/file.scss

@@ -6,7 +6,7 @@
 		.content { padding-top: 12px; padding-bottom: 0px; transition: none; }
 		.wrap { height: 100%; display: flex; flex-direction: column; }
 
-		.items { height: calc(100% - 34px); }
+		.items { height: calc(100% - 28px); }
 		.item {
 			.name { @include text-overflow-nw; width: calc(100% - 26px); }
 		}
@@ -14,6 +14,7 @@
 	}
 
 	.menu.menuDataviewFileValues {
+		.titleWrapper,
 		.content { padding-bottom: 0px; }
 
 		.item { display: flex; color: var(--color-text-secondary); }

src/ts/component/block/featured.tsx

@@ -620,6 +620,11 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component<Props
 				break;
 			};
 
+			case I.RelationType.File: {
+				this.onCellFile(e, relationKey);
+				break;
+			};
+
 			case I.RelationType.Checkbox: {
 				const object = detailStore.get(rootId, rootId, [ relationKey ]);
 				const details = [
@@ -817,6 +822,46 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component<Props
 		});
 	};
 
+	onCellFile (e: React.MouseEvent, relationKey: string) {
+		const { rootId, block } = this.props;
+		const storeId = this.getStoreId();
+		const object = detailStore.get(rootId, storeId, [ relationKey ]);
+		const relation = dbStore.getRelationByKey(relationKey);
+		const value = object[relationKey] || [];
+		const elementId = Relation.cellId(PREFIX + block.id, relationKey, object.id);
+
+		menuStore.closeAll(Constant.menuIds.cell, () => {
+			menuStore.open('dataviewFileValues', {
+				element: `#${elementId}`,
+				horizontal: I.MenuDirection.Left,
+				width: 280,
+				offsetY: 4,
+				noFlipX: true,
+				title: relation.name,
+				subIds: [ 'dataviewFileList' ],
+				onClose: () => {
+					menuStore.closeAll();
+				},
+				data: {
+					rootId,
+					value,
+					relation: observable.box(relation),
+					subId: rootId,
+					onChange: (v: any, callBack?: () => void) => {
+						const details = [
+							{ key: relationKey, value: Relation.formatValue(relation, v, true) },
+						];
+						C.ObjectSetDetails(rootId, details);
+
+						if (callBack) {
+							callBack();
+						};
+					}
+				}
+			});
+		});
+	};
+
 	elementMapper (relation: any, item: any) {
 		item = UtilCommon.objectCopy(item);
 

src/ts/component/menu/dataview/file/list.tsx

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized';
 import { Filter, MenuItemVertical, Icon, Loader } from 'Component';
-import { I, UtilCommon, Relation, keyboard, UtilData, UtilObject, UtilFile, translate } from 'Lib';
+import { I, UtilCommon, Relation, keyboard, UtilData, UtilObject, UtilFile, translate, Action, C } from 'Lib';
 import { commonStore, menuStore, dbStore } from 'Store';
 import Constant from 'json/constant.json';
 
@@ -12,6 +12,7 @@ interface State {
 };
 
 const HEIGHT = 28;
+const HEIGHT_DIV = 16;
 const MENU_ID = 'dataviewFileValues';
 const LIMIT_HEIGHT = 20;
 
@@ -36,6 +37,8 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 		
 		this.loadMoreRows = this.loadMoreRows.bind(this);
 		this.onClick = this.onClick.bind(this);
+		this.onUpload = this.onUpload.bind(this);
+		this.onChange = this.onChange.bind(this);
 		this.onFilterChange = this.onFilterChange.bind(this);
 		this.onScroll = this.onScroll.bind(this);
 	};
@@ -49,6 +52,7 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 
 		const rowRenderer = (param: any) => {
 			const item: any = items[param.index];
+			
 			if (!item) {
 				return null;
 			};
@@ -56,10 +60,17 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 			const type = dbStore.getTypeById(item.type);
 
 			let content = null;
-			if (item.id == 'add') {
+			if (item.isDiv) {
 				content = (
-					<div id="item-add" className="item add" onMouseEnter={e => 	this.onOver(e, item)} onClick={e => 	this.onClick(e, item)} style={param.style}>
-						<Icon className="plus" />
+					<div className="separator" style={param.style}>
+						<div className="inner" />
+					</div>
+				);
+			} else
+			if (item.id == 'upload') {
+				content = (
+					<div id="item-upload" className="item upload" onMouseEnter={e => this.onOver(e, item)} onClick={this.onUpload} style={param.style}>
+						<Icon className="upload" />
 						<div className="name">{item.name}</div>
 					</div>
 				);
@@ -118,7 +129,7 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 											height={height}
 											deferredMeasurmentCache={this.cache}
 											rowCount={items.length}
-											rowHeight={HEIGHT}
+											rowHeight={({ index }) => this.getRowHeight(items[index])}
 											rowRenderer={rowRenderer}
 											onRowsRendered={onRowsRendered}
 											overscanRowCount={LIMIT_HEIGHT}
@@ -149,16 +160,14 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 		const { filter } = data;
 
 		if (filter != this.filter) {
-			this.n = -1;
-			this.offset = 0;
 			this.filter = filter;
-			this.load(true);
+			this.reload();
 			return;
 		};
 
 		this.cache = new CellMeasurerCache({
 			fixedWidth: true,
-			defaultHeight: HEIGHT,
+			defaultHeight: i => this.getRowHeight(items[i]),
 			keyMapper: i => (items[i] || {}).id,
 		});
 
@@ -195,7 +204,20 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 		const { data } = param;
 		const value = Relation.getArrayValue(data.value);
 
-		return UtilCommon.objectCopy(this.items).filter(it => it && !it._empty_ && !it.isArchived && !it.isDeleted && !value.includes(it.id));
+		let items = UtilCommon.objectCopy(this.items).filter(it => it && !it._empty_ && !it.isArchived && !it.isDeleted && !value.includes(it.id));
+
+		items = items.concat([
+			{ isDiv: true },
+			{ id: 'upload', name: translate('commonUpload') },
+		]);
+
+		return items;
+	};
+
+	reload () {
+		this.n = -1;
+		this.offset = 0;
+		this.load(true);
 	};
 	
 	load (clear: boolean, callBack?: (message: any) => void) {
@@ -265,9 +287,7 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 	};
 	
 	onClick (e: any, item: any) {
-		const { param, close, position } = this.props;
-		const { data } = param;
-		const { onChange, maxCount } = data;
+		const { close } = this.props;
 
 		e.preventDefault();
 		e.stopPropagation();
@@ -277,8 +297,27 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 			return;
 		};
 
+		this.onChange(item.id);
+	};
+
+	onUpload () {
+		Action.openFile([], paths => {
+			C.FileUpload(commonStore.space, '', paths[0], I.FileType.None, {}, (message: any) => {
+				if (!message.error.code) {
+					this.onChange(message.objectId);
+					this.reload();
+				};
+			});
+		});
+	};
+
+	onChange (id) {
+		const { param, position } = this.props;
+		const { data } = param;
+		const { onChange, maxCount } = data;
+
 		let value = Relation.getArrayValue(data.value);
-		value.push(item.id);
+		value.push(id);
 		value = UtilCommon.arrayUnique(value);
 
 		if (maxCount) {
@@ -292,11 +331,20 @@ const MenuDataviewFileList = observer(class MenuDataviewFileList extends React.C
 		});
 	};
 
+	getRowHeight (item: any) {
+		if (item.isDiv) {
+			return HEIGHT_DIV;
+		};
+		return HEIGHT;
+	};
+
 	resize () {
 		const { getId, position } = this.props;
 		const items = this.getItems();
 		const obj = $(`#${getId()} .content`);
-		const height = Math.max(HEIGHT * 2, Math.min(360, items.length * HEIGHT + 58));
+		const offset = 58;
+		const itemsHeight = items.reduce((res: number, current: any) => { return res + this.getRowHeight(current); }, offset);
+		const height = Math.max(HEIGHT + offset, Math.min(360, itemsHeight));
 
 		obj.css({ height: height });
 		position();

src/ts/component/menu/dataview/file/values.tsx

@@ -49,9 +49,10 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 		);
 
         const Item = SortableElement((item: any) => {
-			let content = null;
 			const cn = [ 'item' ];
 
+			let content = null;
+
 			switch (item.layout) {
 				default:
 				case I.ObjectLayout.File: {
@@ -70,11 +71,11 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 			return (
 				<div id={'item-' + item.id} className={cn.join(' ')}>
 					<Handle />
-					<div className="clickable" onClick={e => 	UtilObject.openPopup(item)}>
+					<div className="clickable" onClick={() => UtilObject.openPopup(item)} onContextMenu={e => this.onMore(e, item)}>
 						{content}
 					</div>
 					<div className="buttons">
-						<Icon className="more" onClick={e => 	this.onMore(e, item)} />
+						<Icon className="more" onClick={e => this.onMore(e, item)} />
 					</div>
 				</div>
 			);
@@ -95,11 +96,6 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 				ref={node => this.node = node}
 				className="items"
 			>
-				<div className="section">
-					<MenuItemVertical id="add" icon="plus" name={translate('commonAdd')} onClick={this.onAdd} />
-					<MenuItemVertical id="upload" icon="upload" name={translate('commonUpload')} onClick={this.onUpload} />
-				</div>
-
 				{value.length ? (
 					<div className="section">
 						<List 
@@ -116,6 +112,10 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 						/>
 					</div>
 				) : ''}
+
+				<div className="section">
+					<MenuItemVertical id="add" icon="plus" name={translate('commonAdd')} onClick={this.onAdd} />
+				</div>
 			</div>
 		);
 	};
@@ -172,6 +172,13 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 				onChange: (value: string[], callBack?: () => void) => {
 					this.save(value);
 
+					if (callBack) {
+						callBack();
+					};
+				},
+				onUpload: (id: string, callBack?: () => void) => {
+					this.add(id);
+
 					if (callBack) {
 						callBack();
 					};
@@ -217,7 +224,7 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 
 		element.addClass('active');
 		menuStore.open('select', { 
-			element: element.find('.icon.more'),
+			element,
 			horizontal: I.MenuDirection.Center,
 			classNameWrap: classNameWrap,
 			onClose: () => {
@@ -226,12 +233,18 @@ const MenuDataviewFileValues = observer(class MenuDataviewFileValues extends Rea
 			data: {
 				value: '',
 				options: [
+					{ id: 'open', icon: 'expand', name: translate('commonOpen') },
 					{ id: 'download', icon: 'download', name: translate('commonDownload') },
+					{ isDiv: true },
 					{ id: 'remove', icon: 'remove', name: translate('commonDelete') },
 				],
 				onSelect: (event: any, el: any) => {
 
 					switch (el.id) {
+						case 'open': {
+							UtilObject.openPopup(item);
+							break;
+						};
 						case 'download': {
 							let url = '';
 							switch (item.layout) {