mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-10 10:00:48 +09:00
refactoring
This commit is contained in:
parent
61b9a5b690
commit
49611afeb7
12 changed files with 68 additions and 105 deletions
|
@ -23,7 +23,7 @@
|
|||
},
|
||||
|
||||
"icon": {
|
||||
"text": "#fff",
|
||||
"text": "#252525",
|
||||
"bg": {
|
||||
"grey": "#bfbfbf",
|
||||
"black": "#252525",
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { I, UtilObject, Renderer, keyboard, sidebar, Preview } from 'Lib';
|
||||
import { detailStore, menuStore } from 'Store';
|
||||
import { I, UtilObject, Renderer, keyboard, sidebar, Preview, translate } from 'Lib';
|
||||
import { Icon } from 'Component';
|
||||
import { menuStore } from 'Store';
|
||||
|
||||
import HeaderAuthIndex from './auth';
|
||||
import HeaderMainObject from './main/object';
|
||||
|
@ -32,12 +33,14 @@ class Header extends React.Component<Props> {
|
|||
constructor (props: Props) {
|
||||
super(props);
|
||||
|
||||
this.menuOpen = this.menuOpen.bind(this);
|
||||
this.renderLeftIcons = this.renderLeftIcons.bind(this);
|
||||
this.renderTabs = this.renderTabs.bind(this);
|
||||
this.onSearch = this.onSearch.bind(this);
|
||||
this.onNavigation = this.onNavigation.bind(this);
|
||||
this.onGraph = this.onGraph.bind(this);
|
||||
this.onTooltipShow = this.onTooltipShow.bind(this);
|
||||
this.onTooltipHide = this.onTooltipHide.bind(this);
|
||||
this.menuOpen = this.menuOpen.bind(this);
|
||||
this.onDoubleClick = this.onDoubleClick.bind(this);
|
||||
};
|
||||
|
||||
|
@ -61,6 +64,8 @@ class Header extends React.Component<Props> {
|
|||
onTooltipShow={this.onTooltipShow}
|
||||
onTooltipHide={this.onTooltipHide}
|
||||
menuOpen={this.menuOpen}
|
||||
renderLeftIcons={this.renderLeftIcons}
|
||||
renderTabs={this.renderTabs}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -75,6 +80,43 @@ class Header extends React.Component<Props> {
|
|||
this.refChild.forceUpdate();
|
||||
};
|
||||
|
||||
renderLeftIcons (onOpen: () => void){
|
||||
const cmd = keyboard.cmdSymbol();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Icon
|
||||
className="toggle"
|
||||
tooltip={translate('sidebarToggle')}
|
||||
tooltipCaption={`${cmd} + \\, ${cmd} + .`}
|
||||
tooltipY={I.MenuDirection.Bottom}
|
||||
onClick={() => sidebar.toggleExpandCollapse()}
|
||||
/>
|
||||
<Icon className="expand" tooltip={translate('commonOpenObject')} onClick={onOpen} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
renderTabs () {
|
||||
const { tab, tabs, onTab } = this.props;
|
||||
|
||||
return (
|
||||
<div id="tabs" className="tabs">
|
||||
{tabs.map((item: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')}
|
||||
onClick={() => onTab(item.id)}
|
||||
onMouseOver={e => this.onTooltipShow(e, item.tooltip, item.tooltipCaption)}
|
||||
onMouseOut={this.onTooltipHide}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onSearch () {
|
||||
keyboard.onSearchPopup('Header');
|
||||
};
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, UtilObject, keyboard, sidebar, translate } from 'Lib';
|
||||
import { I, UtilObject } from 'Lib';
|
||||
import { popupStore } from 'Store';
|
||||
|
||||
interface Props extends I.HeaderComponent {
|
||||
|
@ -18,21 +17,13 @@ const HeaderMainEmpty = observer(class HeaderMainEmpty extends React.Component<P
|
|||
};
|
||||
|
||||
render () {
|
||||
const cmd = keyboard.cmdSymbol();
|
||||
const { renderLeftIcons } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon
|
||||
className="toggle"
|
||||
tooltip={translate('sidebarToggle')}
|
||||
tooltipCaption={`${cmd} + \\, ${cmd} + .`}
|
||||
tooltipY={I.MenuDirection.Bottom}
|
||||
onClick={() => sidebar.toggleExpandCollapse()}
|
||||
/>
|
||||
<Icon className="expand" tooltip={translate('commonOpenObject')} onClick={this.onOpen} />
|
||||
{renderLeftIcons(this.onOpen)}
|
||||
</div>
|
||||
|
||||
<div className="side center" />
|
||||
<div className="side right" />
|
||||
</React.Fragment>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, UtilObject, UtilData, keyboard, sidebar, translate } from 'Lib';
|
||||
import { I, UtilObject, UtilData, translate } from 'Lib';
|
||||
import { commonStore } from 'Store';
|
||||
|
||||
class HeaderMainGraph extends React.Component<I.HeaderComponent> {
|
||||
|
@ -18,36 +18,16 @@ class HeaderMainGraph extends React.Component<I.HeaderComponent> {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { tab, tabs, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
const cmd = keyboard.cmdSymbol();
|
||||
const { renderLeftIcons, renderTabs } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon
|
||||
className="toggle"
|
||||
tooltip={translate('sidebarToggle')}
|
||||
tooltipCaption={`${cmd} + \\, ${cmd} + .`}
|
||||
tooltipY={I.MenuDirection.Bottom}
|
||||
onClick={() => sidebar.toggleExpandCollapse()}
|
||||
/>
|
||||
<Icon className="expand" tooltip={translate('commonOpenObject')} onClick={this.onOpen} />
|
||||
{renderLeftIcons(this.onOpen)}
|
||||
</div>
|
||||
|
||||
<div className="side center">
|
||||
<div id="tabs" className="tabs">
|
||||
{tabs.map((item: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')}
|
||||
onClick={() => onTab(item.id)}
|
||||
onMouseOver={e => onTooltipShow(e, item.tooltip, item.tooltipCaption)}
|
||||
onMouseOut={onTooltipHide}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{renderTabs()}
|
||||
</div>
|
||||
|
||||
<div className="side right">
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, UtilObject, keyboard, sidebar, translate } from 'Lib';
|
||||
import { I, UtilObject } from 'Lib';
|
||||
|
||||
const HeaderMainNavigation = observer(class HeaderMainNavigation extends React.Component<I.HeaderComponent, object> {
|
||||
|
||||
|
@ -12,36 +11,16 @@ const HeaderMainNavigation = observer(class HeaderMainNavigation extends React.C
|
|||
};
|
||||
|
||||
render () {
|
||||
const { tabs, tab, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
const cmd = keyboard.cmdSymbol();
|
||||
const { renderLeftIcons, renderTabs } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon
|
||||
className="toggle"
|
||||
tooltip={translate('sidebarToggle')}
|
||||
tooltipCaption={`${cmd} + \\, ${cmd} + .`}
|
||||
tooltipY={I.MenuDirection.Bottom}
|
||||
onClick={() => sidebar.toggleExpandCollapse()}
|
||||
/>
|
||||
<Icon className="expand" tooltip={translate('commonOpenObject')} onClick={this.onOpen} />
|
||||
{renderLeftIcons(this.onOpen)}
|
||||
</div>
|
||||
|
||||
<div className="side center">
|
||||
<div id="tabs" className="tabs">
|
||||
{tabs.map((item: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')}
|
||||
onClick={() => onTab(item.id)}
|
||||
onMouseOver={e => onTooltipShow(e, item.tooltip, item.tooltipCaption)}
|
||||
onMouseOut={onTooltipHide}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{renderTabs()}
|
||||
</div>
|
||||
|
||||
<div className="side right" />
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon, IconObject, Sync, ObjectName } from 'Component';
|
||||
import { I, UtilObject, UtilData, keyboard, sidebar, translate } from 'Lib';
|
||||
import { I, UtilObject, UtilData, keyboard, translate } from 'Lib';
|
||||
import { blockStore, detailStore, popupStore } from 'Store';
|
||||
import HeaderBanner from 'Component/page/elements/head/banner';
|
||||
import Constant from 'json/constant.json';
|
||||
|
@ -27,7 +27,7 @@ const HeaderMainObject = observer(class HeaderMainObject extends React.Component
|
|||
};
|
||||
|
||||
render () {
|
||||
const { rootId, onSearch, onTooltipShow, onTooltipHide, isPopup } = this.props;
|
||||
const { rootId, onSearch, onTooltipShow, onTooltipHide, isPopup, renderLeftIcons } = this.props;
|
||||
const { templatesCnt } = this.state;
|
||||
const root = blockStore.getLeaf(rootId, rootId);
|
||||
const object = detailStore.get(rootId, rootId, Constant.templateRelationKeys);
|
||||
|
@ -75,14 +75,7 @@ const HeaderMainObject = observer(class HeaderMainObject extends React.Component
|
|||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon
|
||||
className="toggle"
|
||||
tooltip={translate('sidebarToggle')}
|
||||
tooltipCaption={`${cmd} + \\, ${cmd} + .`}
|
||||
tooltipY={I.MenuDirection.Bottom}
|
||||
onClick={() => sidebar.toggleExpandCollapse()}
|
||||
/>
|
||||
<Icon className="expand" tooltip={translate('commonOpenObject')} onClick={this.onOpen} />
|
||||
{renderLeftIcons(this.onOpen)}
|
||||
{canSync ? <Sync id="button-header-sync" rootId={rootId} onClick={this.onSync} /> : ''}
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Icon } from 'Component';
|
||||
import { I, UtilObject, keyboard, sidebar, translate } from 'Lib';
|
||||
import { I, UtilObject } from 'Lib';
|
||||
|
||||
const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I.HeaderComponent, object> {
|
||||
|
||||
|
@ -12,36 +11,16 @@ const HeaderMainStore = observer(class HeaderMainStore extends React.Component<I
|
|||
};
|
||||
|
||||
render () {
|
||||
const { tabs, tab, onTab, onTooltipShow, onTooltipHide } = this.props;
|
||||
const cmd = keyboard.cmdSymbol();
|
||||
const { renderLeftIcons, renderTabs } = this.props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="side left">
|
||||
<Icon
|
||||
className="toggle"
|
||||
tooltip={translate('sidebarToggle')}
|
||||
tooltipCaption={`${cmd} + \\, ${cmd} + .`}
|
||||
tooltipY={I.MenuDirection.Bottom}
|
||||
onClick={() => sidebar.toggleExpandCollapse()}
|
||||
/>
|
||||
<Icon className="expand" tooltip={translate('commonOpenObject')} onClick={this.onOpen} />
|
||||
{renderLeftIcons(this.onOpen)}
|
||||
</div>
|
||||
|
||||
<div className="side center">
|
||||
<div id="tabs" className="tabs">
|
||||
{tabs.map((item: any) => (
|
||||
<div
|
||||
key={`tab-store-${item.id}`}
|
||||
className={[ 'tab', (item.id == tab ? 'active' : '') ].join(' ')}
|
||||
onClick={() => onTab(item.id)}
|
||||
onMouseOver={e => onTooltipShow(e, item.tooltip, item.tooltipCaption)}
|
||||
onMouseOut={onTooltipHide}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{renderTabs()}
|
||||
</div>
|
||||
|
||||
<div className="side right" />
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { I, UtilCommon } from 'Lib';
|
||||
import { I } from 'Lib';
|
||||
import { commonStore } from 'Store';
|
||||
|
||||
import Constant from 'json/constant.json';
|
||||
|
|
|
@ -142,6 +142,8 @@ export interface HeaderComponent extends RouteComponentProps<any> {
|
|||
tab?: string;
|
||||
text?: string;
|
||||
layout?: I.ObjectLayout;
|
||||
renderLeftIcons?: (onOpen: () => void) => any;
|
||||
renderTabs?: () => any;
|
||||
onTab?: (id: string) => void;
|
||||
onSearch?: () => void;
|
||||
onNavigation?: () => void;
|
||||
|
|
|
@ -311,7 +311,6 @@ class CommonStore {
|
|||
this.spaceId = String(id || '');
|
||||
};
|
||||
|
||||
|
||||
previewClear () {
|
||||
this.previewObj = { type: null, target: null, element: null, range: { from: 0, to: 0 }, marks: [] };
|
||||
};
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { makeObservable, observable, action, computed } from 'mobx';
|
||||
import { makeObservable, observable, action } from 'mobx';
|
||||
|
||||
class ExtensionStore {
|
||||
|
||||
|
|
|
@ -18,8 +18,6 @@ class NotificationStore {
|
|||
return this.itemList || [];
|
||||
};
|
||||
|
||||
|
||||
|
||||
set (list: I.Notification[]): void {
|
||||
this.itemList = list.map(it => new M.Notification(it));
|
||||
this.setBadge();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue