104 lines
5 KiB
JavaScript
104 lines
5 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Device } from '../../../../common/mobile/utils/device';
|
|
import { inject, observer } from 'mobx-react';
|
|
|
|
const viewStyle = {
|
|
height: 30
|
|
};
|
|
|
|
const StatusbarView = inject('storeAppOptions', 'sheets')(observer(props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('Statusbar', {returnObjects: true});
|
|
const isAndroid = Device.android;
|
|
const isPhone = Device.isPhone;
|
|
const {sheets, storeAppOptions} = props;
|
|
const allSheets = sheets.sheets;
|
|
const hiddenSheets = sheets.hiddenWorksheets();
|
|
const isWorkbookLocked = sheets.isWorkbookLocked;
|
|
const isEdit = storeAppOptions.isEdit;
|
|
|
|
return (
|
|
<Fragment>
|
|
<View id="idx-statusbar" className="statusbar" style={viewStyle}>
|
|
<div id="idx-box-add-tab" className={`${isWorkbookLocked ? 'disabled' : ''}`}>
|
|
<Link href={false} id="idx-btn-addtab" className={`tab${isWorkbookLocked ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
|
|
<Icon className="icon icon-plus" />
|
|
</Link>
|
|
</div>
|
|
<div className="statusbar--box-tabs">
|
|
<ul className="sheet-tabs bottom">
|
|
{allSheets.map((model,i) =>
|
|
model.hidden ? null :
|
|
<li className={`tab${model.active ? ' active' : ''} ${model.locked ? 'locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
|
|
<a>{model.name}</a>
|
|
</li>
|
|
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</View>
|
|
{isEdit ?
|
|
<Popover id="idx-tab-context-menu-popover"
|
|
className="document-menu"
|
|
backdrop={false}
|
|
closeByBackdropClick={false}
|
|
closeByOutsideClick={false}
|
|
>
|
|
{isPhone || isAndroid ? (
|
|
<List className="list-block">
|
|
<ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
|
|
<ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
|
|
<ListButton title={_t.textMore} onClick={() => props.onTabMenu('showMore')} />
|
|
</List>
|
|
) : (
|
|
<List className="list-block">
|
|
<ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
|
|
<ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
|
|
<ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
|
|
<ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
|
|
{hiddenSheets.length ? (
|
|
<ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
|
|
) : null}
|
|
</List>
|
|
)}
|
|
</Popover>
|
|
: null}
|
|
{isPhone || isAndroid ? (
|
|
<Actions id="idx-tab-menu-actions" backdrop={true} closeByBackdropClick={true}>
|
|
<ActionsGroup>
|
|
<ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton>
|
|
<ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton>
|
|
{hiddenSheets.length ? (
|
|
<ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
|
|
) : null}
|
|
</ActionsGroup>
|
|
<ActionsGroup>
|
|
<ActionsButton bold={true}>{_t.textCancel}</ActionsButton>
|
|
</ActionsGroup>
|
|
</Actions>
|
|
) : null}
|
|
{hiddenSheets.length ? (
|
|
<Popover id="idx-hidden-sheets-popover"
|
|
className="document-menu"
|
|
backdrop={false}
|
|
closeByBackdropClick={false}
|
|
closeByOutsideClick={false}
|
|
>
|
|
<List className="list-block">
|
|
{hiddenSheets.map(sheet => {
|
|
return (
|
|
<ListButton key={sheet.index} data-event={`reveal:${sheet.index}`} title={sheet.name}
|
|
onClick={() => props.onTabMenu(`reveal:${sheet.index}`)} />
|
|
)
|
|
})}
|
|
</List>
|
|
</Popover>
|
|
) : null}
|
|
</Fragment>
|
|
)
|
|
}));
|
|
|
|
export {StatusbarView};
|