276 lines
13 KiB
JavaScript
276 lines
13 KiB
JavaScript
import React, {Fragment, useEffect, useState } from 'react';
|
|
import {observer, inject} from "mobx-react";
|
|
import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup} from 'framework7-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {Device} from '../../../../../common/mobile/utils/device';
|
|
|
|
const EditTableContents = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('Edit', {returnObjects: true});
|
|
const api = Common.EditorApi.get();
|
|
const propsTableContents = api.asc_GetTableOfContentsPr();
|
|
const count = propsTableContents.get_StylesCount();
|
|
console.log(propsTableContents);
|
|
const [type, setType] = useState(0);
|
|
const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
|
|
const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
|
|
const [rightAlign, setRightAlign] = useState(propsTableContents.get_RightAlignTab());
|
|
const [leaderValue, setLeaderValue] = useState(propsTableContents.get_TabLeader() ? propsTableContents.get_TabLeader() : Asc.c_oAscTabLeader.Dot);
|
|
|
|
const arrStyles = (type === 1) ? [
|
|
{ displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOFStylesType.Current },
|
|
{ displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOFStylesType.Simple },
|
|
{ displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOFStylesType.Web },
|
|
{ displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOFStylesType.Classic },
|
|
{ displayValue: t('Edit.textDistinctive'), value: Asc.c_oAscTOFStylesType.Distinctive },
|
|
{ displayValue: t('Edit.textCentered'), value: Asc.c_oAscTOFStylesType.Centered },
|
|
{ displayValue: t('Edit.textFormal'), value: Asc.c_oAscTOFStylesType.Formal }
|
|
] : [
|
|
{ displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOCStylesType.Current },
|
|
{ displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOCStylesType.Simple },
|
|
{ displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOCStylesType.Web },
|
|
{ displayValue: t('Edit.textStandard'), value: Asc.c_oAscTOCStylesType.Standard },
|
|
{ displayValue: t('Edit.textModern'), value: Asc.c_oAscTOCStylesType.Modern },
|
|
{ displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOCStylesType.Classic }
|
|
];
|
|
|
|
const arrLeaders = [
|
|
{ value: Asc.c_oAscTabLeader.None, displayValue: t('Edit.textNone') },
|
|
{ value: Asc.c_oAscTabLeader.Dot, displayValue: '....................' },
|
|
{ value: Asc.c_oAscTabLeader.Hyphen, displayValue: '-----------------' },
|
|
{ value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
|
|
];
|
|
|
|
const activeStyle = arrStyles.find(style => style.value === styleValue);
|
|
const activeLeader = arrLeaders.find(leader => leader.value === leaderValue);
|
|
|
|
const openActionsButtonsRefresh = () => {
|
|
f7.actions.create({
|
|
buttons: [
|
|
[
|
|
{
|
|
text: t('Edit.textRefreshEntireTable'),
|
|
onClick: () => props.onTableContentsUpdate('all')
|
|
},
|
|
{
|
|
text: t('Edit.textRefreshPageNumbersOnly'),
|
|
onClick: () => props.onTableContentsUpdate('pages')
|
|
}
|
|
],
|
|
[
|
|
{
|
|
text: t('Edit.textCancel'),
|
|
bold: true
|
|
}
|
|
]
|
|
]
|
|
}).open();
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<List>
|
|
<ListItem title={t('Edit.textStyle')} link="/edit-style-table-contents/" after={activeStyle.displayValue} routeProps={{
|
|
onStyle: props.onStyle,
|
|
arrStyles,
|
|
setStyleValue,
|
|
styleValue
|
|
}}></ListItem>
|
|
</List>
|
|
<List>
|
|
<ListItem>
|
|
<span>{t('Edit.textPageNumbers')}</span>
|
|
<Toggle checked={pageNumbers} onToggleChange={() => {
|
|
setPageNumbers(!pageNumbers);
|
|
props.onPageNumbers(!pageNumbers);
|
|
}}></Toggle>
|
|
</ListItem>
|
|
{pageNumbers &&
|
|
<ListItem>
|
|
<span>{t('Edit.textRightAlign')}</span>
|
|
<Toggle checked={rightAlign} onToggleChange={() => {
|
|
setRightAlign(!rightAlign);
|
|
props.onRightAlign(!rightAlign);
|
|
}}></Toggle>
|
|
</ListItem>
|
|
}
|
|
{(pageNumbers && rightAlign) &&
|
|
<ListItem title={t('Edit.textLeader')} link="/edit-leader-table-contents/"
|
|
after={activeLeader ? activeLeader.displayValue : arrLeaders[0].displayValue} routeProps={{
|
|
onLeader: props.onLeader,
|
|
arrLeaders,
|
|
leaderValue,
|
|
setLeaderValue
|
|
}}></ListItem>
|
|
}
|
|
<ListItem title={t('Edit.textStructure')} link="/edit-structure-table-contents/" after={count ? t('Edit.textStyles') : t('Edit.textLevels')} routeProps={{
|
|
onLevelsChange: props.onLevelsChange,
|
|
fillTOCProps: props.fillTOCProps,
|
|
addStyles: props.addStyles
|
|
}}></ListItem>
|
|
</List>
|
|
<List className="buttons-list">
|
|
<ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')}
|
|
onClick={() => openActionsButtonsRefresh()} />
|
|
<ListButton className='button-red button-fill button-raised' title={t('Edit.textRemoveTableContent')} onClick={() => props.onRemoveTableContents()} />
|
|
</List>
|
|
</Fragment>
|
|
)
|
|
};
|
|
|
|
const PageEditStylesTableContents = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('Edit', {returnObjects: true});
|
|
const [styleValue, setStyleValue] = useState(props.styleValue);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={_t.textStyle} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link sheetClose='#edit-sheet'>
|
|
<Icon icon='icon-expand-down'/>
|
|
</Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{props.arrStyles.map((style, index) => {
|
|
return (
|
|
<ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {
|
|
setStyleValue(style.value);
|
|
props.setStyleValue(style.value);
|
|
props.onStyle(style.value)
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageEditLeaderTableContents = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('Edit', {returnObjects: true});
|
|
const [leaderValue, setLeaderValue] = useState(props.leaderValue);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={t('Edit.textLeader')} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link sheetClose='#edit-sheet'>
|
|
<Icon icon='icon-expand-down'/>
|
|
</Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
{props.arrLeaders.map((leader, index) => {
|
|
return (
|
|
<ListItem key={index} radio title={leader.displayValue} checked={leaderValue === leader.value} onClick={() => {
|
|
setLeaderValue(leader.value);
|
|
props.setLeaderValue(leader.value);
|
|
props.onLeader(leader.value);
|
|
}}></ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
const PageEditStructureTableContents = props => {
|
|
const { t } = useTranslation();
|
|
const _t = t('Edit', {returnObjects: true});
|
|
const isAndroid = Device.android;
|
|
const api = Common.EditorApi.get();
|
|
const propsTableContents = api.asc_GetTableOfContentsPr();
|
|
const {styles, start, end, count, disableOutlines, checkStyles} = props.fillTOCProps(propsTableContents);
|
|
console.log(styles, start, end, count, disableOutlines, checkStyles);
|
|
|
|
const [structure, setStructure] = useState(count ? 1 : 0);
|
|
const [amountLevels, setAmountLevels] = useState(end);
|
|
|
|
return (
|
|
<Page>
|
|
<Navbar title={t('Edit.textStructure')} backLink={_t.textBack}>
|
|
{Device.phone &&
|
|
<NavRight>
|
|
<Link sheetClose='#edit-sheet'>
|
|
<Icon icon='icon-expand-down'/>
|
|
</Link>
|
|
</NavRight>
|
|
}
|
|
</Navbar>
|
|
<List>
|
|
<ListItem radio checked={structure === 0} title={t('Edit.textLevels')} onClick={() => setStructure(0)}></ListItem>
|
|
<ListItem radio checked={structure === 1} title={t('Edit.textStyles')} onClick={() => setStructure(1)}></ListItem>
|
|
</List>
|
|
{structure === 0 ?
|
|
<List>
|
|
<ListItem title={t('Edit.textAmountOfLevels')}>
|
|
{!isAndroid && <div slot='after-start'>{amountLevels}</div>}
|
|
<div slot='after'>
|
|
<Segmented>
|
|
<Button outline className='decrement item-link' onClick={() => {
|
|
if(amountLevels > 1) {
|
|
setAmountLevels(amountLevels - 1);
|
|
props.onLevelsChange(amountLevels - 1);
|
|
}
|
|
}}>
|
|
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
|
</Button>
|
|
{isAndroid && <label>{amountLevels}</label>}
|
|
<Button outline className='increment item-link' onClick={() => {
|
|
if(amountLevels < 9) {
|
|
setAmountLevels(amountLevels + 1);
|
|
props.onLevelsChange(amountLevels + 1);
|
|
}
|
|
}}>
|
|
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
|
</Button>
|
|
</Segmented>
|
|
</div>
|
|
</ListItem>
|
|
</List>
|
|
:
|
|
<List>
|
|
{styles.map((style, index) => {
|
|
return (
|
|
<ListItem checkbox key={index} title={style.displayValue} checked={style.checked}>
|
|
{!isAndroid && <div slot='after-start'>{style.value}</div>}
|
|
<div slot='after'>
|
|
<Segmented>
|
|
<Button outline className='decrement item-link' onClick={() => {
|
|
if(style.value > 1) {
|
|
props.addStyles(style.name, style.value - 1);
|
|
}
|
|
}}>
|
|
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
|
</Button>
|
|
{isAndroid && <label>{style.value}</label>}
|
|
<Button outline className='increment item-link' onClick={() => {
|
|
if(style.value < 9) {
|
|
props.addStyles(style.name, style.value + 1);
|
|
}
|
|
}}>
|
|
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
|
</Button>
|
|
</Segmented>
|
|
</div>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
}
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export {
|
|
EditTableContents,
|
|
PageEditStylesTableContents,
|
|
PageEditLeaderTableContents,
|
|
PageEditStructureTableContents
|
|
}; |