anyproto/anytype-ts
1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-11 02:13:48 +09:00
Code Activity

JS-4800: sort and filter menu select

Browse source
This commit is contained in:
Mike Mhlv 2024-07-25 10:28:29 +01:00
parent f534e3e6d5
commit 568f941564
4 changed files with 37 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/scss/menu/dataview/sort.scss
View file

@ -25,6 +25,9 @@
}
.txt { width: calc(100% - 74px); line-height: 20px; height: 40px; display: flex; flex-direction: column; }
.txt {
.label { @include text-common; font-weight: 400; line-height: 20px; padding: 0px; margin: 0px; color: var(--color-text-primary); }
}
}
.item.empty { margin: 8px 0px; padding: 14px 16px; }
.item.isReadonly {
@ -43,4 +46,4 @@
.line { margin-top: 0px; }
}
}
}
}

2
src/ts/component/block/dataview/controls.tsx
View file

@ -266,7 +266,7 @@ const Controls = observer(class Controls extends React.Component<Props> {
const view = getView();
const obj = $(element);
if ((component == 'dataviewSort' && !view.sorts.length) || (component == 'dataviewFilterList' && !view.filters.length)) {
if (((component == 'dataviewSort') && !view.sorts.length) || ((component == 'dataviewFilterList') && !view.filters.length)) {
this.sortOrFilterRelationSelect(component,{ element }, () => {
this.onButton(element, component);
});

3
src/ts/component/menu/dataview/filter/values.tsx
View file

@ -434,7 +434,8 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
const menuParam = {
element: `#${getId()} #item-${item.id}`,
offsetX: getSize().width,
horizontal: I.MenuDirection.Right
horizontal: I.MenuDirection.Right,
vertical: I.MenuDirection.Center
};
U.Menu.sortOrFilterRelationSelect({

40
src/ts/component/menu/dataview/sort.tsx
View file

@ -4,7 +4,7 @@ import $ from 'jquery';
import { observer } from 'mobx-react';
import { AutoSizer, CellMeasurer, InfiniteLoader, List as VList, CellMeasurerCache } from 'react-virtualized';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { Icon, IconObject, Select } from 'Component';
import { Icon, IconObject, Label, Select } from 'Component';
import { I, C, S, U, J, Relation, keyboard, analytics, translate } from 'Lib';
const HEIGHT = 48;
@ -26,6 +26,7 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
this.onSortStart = this.onSortStart.bind(this);
this.onSortEnd = this.onSortEnd.bind(this);
this.onScroll = this.onScroll.bind(this);
this.onSortNameClick = this.onSortNameClick.bind(this);
};
render () {
@ -47,8 +48,6 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
{ id: String(I.SortType.Asc), name: translate('commonAscending') },
{ id: String(I.SortType.Desc), name: translate('commonDescending') },
];
const relationOptions = this.getRelationOptions();
const Handle = SortableHandle(() => (
<Icon className="dnd" />
@ -56,6 +55,7 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
const Item = SortableElement((item: any) => {
const relation: any = S.Record.getRelationByKey(item.relationKey) || {};
return (
<div
id={'item-' + item.id}
@ -66,13 +66,7 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
{!isReadonly ? <Handle /> : ''}
<IconObject size={40} object={{ relationFormat: relation.format, layout: I.ObjectLayout.Relation }} />
<div className="txt">
<Select
id={[ 'filter', 'relation', item.id ].join('-')}
options={relationOptions}
value={item.relationKey}
onChange={v => this.onChange(item.id, 'relationKey', v)}
readonly={isReadonly}
/>
<Label id={[ 'filter', 'relation', item.id ].join('-')} text={relation.name} onClick={e => this.onSortNameClick(e, item)} />
<Select
id={[ 'filter', 'type', item.id ].join('-')}
@ -290,6 +284,32 @@ const MenuSort = observer(class MenuSort extends React.Component<I.Menu> {
});
};
onSortNameClick (e: React.MouseEvent, item: any) {
if (this.isReadonly()) {
return;
};
const { param, getId, getSize } = this.props;
const { data } = param;
const { rootId, blockId, getView } = data;
const menuParam = {
element: `#${getId()} #item-${item.id}`,
offsetX: getSize().width,
horizontal: I.MenuDirection.Right,
vertical: I.MenuDirection.Center
};
U.Menu.sortOrFilterRelationSelect({
menuParam,
rootId,
blockId,
getView,
onSelect: (v) => {
this.onChange(item.id, 'relationKey', v.relationKey ? v.relationKey : v.id);
}
});
};
onAdd () {
const { param, getId, getSize } = this.props;