Merge branch 'feature/mobile-apps-on-reactjs-fixes' into develop

This commit is contained in:
JuliaSvinareva 2021-05-13 18:09:03 +03:00
commit 861c60caff
18 changed files with 311 additions and 88 deletions

View file

@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
{row.map((effect, index) => {
return(
<a key={`tc-${rowIndex}-${index}`}
className={((curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor && curColor === effect.color)) ? 'active' : ''}
className={(curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) ? 'active' : ''}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a>

View file

@ -273,7 +273,7 @@ class SearchView extends Component {
{isIos ? <div className="searchbar-bg"></div> : null}
<div className="searchbar-inner">
<div className="buttons-row searchbar-inner__left">
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
<a id="idx-btn-search-settings" className="link icon-only no-fastclick" onClick={this.onSettingsClick}>
<i className="icon icon-settings" />
</a>
</div>
@ -305,10 +305,10 @@ class SearchView extends Component {
) : null}
</div>
<div className="buttons-row">
<a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
<a className={"link icon-only prev no-fastclick " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
<i className="icon icon-prev" />
</a>
<a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
<a className={"link icon-only next no-fastclick " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
<i className="icon icon-next" />
</a>
</div>

View file

@ -127,7 +127,7 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
}).open();
});
return (
<div id='add-comment-dialog'></div>
<div id='add-comment-dialog' className="add-comment-dialog"></div>
);
}));
@ -303,7 +303,7 @@ const EditCommentDialog = inject("storeComments")(observer(({storeComments, comm
}).open();
});
return (
<div id='edit-comment-dialog'></div>
<div id='edit-comment-dialog' className="edit-comment-dialog"></div>
);
}));
@ -428,7 +428,7 @@ const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInf
}).open();
});
return (
<div id='add-reply-dialog'></div>
<div id='add-reply-dialog' className="add-reply-dialog"></div>
);
}));
@ -559,7 +559,7 @@ const EditReplyDialog = inject("storeComments")(observer(({storeComments, commen
}).open();
});
return (
<div id='edit-reply-dialog'></div>
<div id='edit-reply-dialog' className="edit-reply-dialog"></div>
);
}));

View file

@ -12,10 +12,13 @@
}
.wrap-textarea {
margin-top: 6px;
.input {
height: 100%;
}
textarea {
font-size: 14px;
margin-top: 0;
min-height: 100px;
height: 100%;
padding: 5px 0;
}
}

View file

@ -449,7 +449,8 @@
height: 72px;
border-radius: 100px;
overflow: hidden;
border: 1px solid @gray;
// border: 1px solid @gray;
border: 0;
.new-color-hsb-preview, .current-color-hsb-preview {
width: 100%;
height: 36px;
@ -465,7 +466,8 @@
border-radius: 100px;
background-color: @white;
box-shadow: 0 4px 4px rgba(0,0,0,.25);
border-color: transparent;
// border-color: transparent;
border: 0;
margin-top: 20px;
}
}

View file

@ -1,4 +1,17 @@
.device-ios {
.wrap-comment {
height: calc(100% - 60px);
}
.add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog {
.wrap-textarea {
height: calc(100% - 34px);
}
}
.edit-comment-popup, .edit-reply-popup, .edit-comment-dialog, .edit-reply-dialog {
.wrap-textarea {
height: calc(100% - 52px);
}
}
.comment-list {
.reply-item {
.item-inner:after {

View file

@ -1,4 +1,17 @@
.device-android {
.wrap-comment {
height: calc(100% - 72px);
}
.add-comment-popup, .add-reply-popup, .add-comment-dialog, .add-reply-dialog {
.wrap-textarea {
height: calc(100% - 41px);
}
}
.edit-comment-popup, .edit-reply-popup, .edit-comment-dialog, .edit-reply-dialog {
.wrap-textarea {
height: calc(100% - 56px);
}
}
.wrap-comment, .comment-list, .reply-list {
.comment-header, .reply-header {
display: flex;

View file

@ -168,14 +168,22 @@ export class storeTextSettings {
resetBackgroundColor (color) {
let value;
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
effectValue: color.get_value()
if(color) {
if (color.get_auto()) {
value = 'transparent'
} else {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
value = {
color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
effectValue: color.get_value()
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
}
} else {
value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
this.backgroundColor = value;
}
}

View file

@ -122,6 +122,9 @@ const PageStyle = props => {
const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
const types = storeChartSettings.types;
const curType = chartProperties ? chartProperties.getType() : null;
const chartStyles = storeChartSettings.chartStyles;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
const styles = storeChartSettings.styles;
@ -154,7 +157,7 @@ const PageStyle = props => {
<Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar">
<Link key={"de-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
<Link key={"de-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link>
{chartStyles ? <Link key={"de-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"de-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"de-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div>
@ -181,26 +184,28 @@ const PageStyle = props => {
})}
</div>
</Tab>
<Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={()=>{props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
{chartStyles ?
<Tab key={"de-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={()=>{props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
: null}
<Tab key={"de-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab>
@ -372,6 +377,7 @@ const PageReorder = props => {
const EditChart = props => {
const { t } = useTranslation();
const _t = t('Edit', {returnObjects: true});
return (
<Fragment>
<List>

View file

@ -170,7 +170,7 @@ const PageDocumentColorSchemes = props => {
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
<ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => {
if(index !== curScheme) {
setScheme(index);

View file

@ -4,6 +4,7 @@ import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle,
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
import { f7 } from 'framework7-react';
const PageCustomFillColor = props => {
const { t } = useTranslation();
@ -133,6 +134,9 @@ const PageStyle = props => {
const curType = chartProperties ? chartProperties.getType() : null;
const styles = storeChartSettings.styles;
const shapeObject = props.storeFocusObjects.shapeObject;
const chartStyles = storeChartSettings.chartStyles;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
let borderSize, borderType, borderColor;
@ -164,10 +168,10 @@ const PageStyle = props => {
<Page>
<Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar">
<Link key={"pe-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
<Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link>
<Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
<Link key={"pe-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
{chartStyles ? <Link key={"pe-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"pe-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"pe-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div>
</Navbar>
<Tabs animated>
@ -192,26 +196,28 @@ const PageStyle = props => {
})}
</div>
</Tab>
<Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={()=>{props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
{chartStyles ?
<Tab key={"pe-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={()=>{props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
: null}
<Tab key={"pe-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab>

View file

@ -46,7 +46,7 @@ const PagePresentationColorSchemes = props => {
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
<ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => {
if(index !== curScheme) {
setScheme(index);

View file

@ -59,7 +59,26 @@
"errorProcessSaveResult": "Saving is failed.",
"criticalErrorTitle": "Error",
"warnProcessRightsChange": "You have been denied the right to edit the file.",
"errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator."
"errorAccessDeny": "You are trying to perform an action you do not have rights for.<br>Please contact your Document Server administrator.",
"confirmMoveCellRange": "The destination cell`s range can contain data. Continue the operation?",
"textOk": "Ok",
"confirmPutMergeRange": "The source data contains merged cells.<br>They will be unmerged before they are pasted into the table.",
"openTitleText": "Opening Document",
"saveTitleText": "Saving Document",
"loadFontsTitleText": "Loading Data",
"loadImagesTitleText": "Loading Images",
"loadFontTitleText": "Loading Data",
"loadImageTitleText": "Loading Image",
"downloadTitleText": "Downloading Document",
"printTitleText": "Printing Document",
"uploadImageTitleText": "Uploading Image",
"titleRecalcFormulas": "Calculating formulas...",
"textPleaseWait": "It`s working hard. Please wait...",
"savePreparingText": "Preparing to save",
"waitText": "Please, wait...",
"txtEditingMode": "Set editing mode...",
"loadingDocumentTitleText": "Loading spreadsheet"
}
},
"LongActions": {
@ -294,6 +313,7 @@
"textRotateTextDown": "Rotate Text Down",
"textNoBorder": "No Border",
"textAllBorders": "All Borders",
"textOutsideBorders": "Outside Borders",
"textBottomBorder": "Bottom Border",
"textTopBorder": "Top Border",
"textLeftBorder": "Left Border",

View file

@ -35,6 +35,9 @@ class MainController extends Component {
window.editorType = 'sse';
this.LoadingDocument = -256;
this.ApplyEditRights = -255;
this.InitApplication = -254;
this.isShowOpenDialog = false;
this._state = {
licenseType: false,
@ -295,6 +298,8 @@ class MainController extends Component {
this.api.asc_registerCallback('asc_onPrint', this.onPrint.bind(this));
this.api.asc_registerCallback('asc_onDocumentName', this.onDocumentName.bind(this));
this.api.asc_registerCallback('asc_onEndAction', this._onLongActionEnd.bind(this));
// this.api.asc_registerCallback('asc_onStartAction', this.onLongActionBegin.bind(this));
this.api.asc_registerCallback('asc_onConfirmAction', this.onConfirmAction.bind(this));
EditorUIController.initCellInfo && EditorUIController.initCellInfo(this.props);
@ -321,6 +326,131 @@ class MainController extends Component {
}
// onLongActionBegin(type, id) {
// let action = {id: id, type: type};
// this.setLongActionView(action);
// }
// setLongActionView(action) {
// const _t = this._t;
// let title = '';
// switch (action.id) {
// case Asc.c_oAscAsyncAction.Open:
// title = _t.openTitleText;
// break;
// case Asc.c_oAscAsyncAction.Save:
// title = _t.saveTitleText;
// break;
// case Asc.c_oAscAsyncAction.ForceSaveTimeout:
// break;
// case Asc.c_oAscAsyncAction.ForceSaveButton:
// break;
// case Asc.c_oAscAsyncAction.LoadDocumentFonts:
// title = _t.loadFontsTitleText;
// break;
// case Asc.c_oAscAsyncAction.LoadDocumentImages:
// title = _t.loadImagesTitleText;
// break;
// case Asc.c_oAscAsyncAction.LoadFont:
// title = _t.loadFontTitleText;
// break;
// case Asc.c_oAscAsyncAction.LoadImage:
// title = _t.loadImageTitleText;
// break;
// case Asc.c_oAscAsyncAction.DownloadAs:
// title = _t.downloadTitleText;
// break;
// case Asc.c_oAscAsyncAction.Print:
// title = _t.printTitleText;
// break;
// case Asc.c_oAscAsyncAction.UploadImage:
// title = _t.uploadImageTitleText;
// break;
// case Asc.c_oAscAsyncAction.Recalc:
// title = _t.titleRecalcFormulas;
// break;
// case Asc.c_oAscAsyncAction.SlowOperation:
// title = _t.textPleaseWait;
// break;
// case Asc.c_oAscAsyncAction['PrepareToSave']:
// title = _t.savePreparingText;
// break;
// case Asc.c_oAscAsyncAction['Waiting']:
// title = _t.waitText;
// break;
// case this.ApplyEditRights:
// title = _t.txtEditingMode;
// break;
// case this.LoadingDocument:
// title = _t.loadingDocumentTitleText;
// break;
// default:
// if (typeof action.id == 'string'){
// title = action.id;
// }
// break;
// }
// if (action.type == Asc.c_oAscAsyncActionType.BlockInteraction) {
// // !this.loadMask && (this.loadMask = new Common.UI.LoadMask({owner: $$('#viewport')}));
// // this.loadMask.setTitle(title);
// if (!this.isShowOpenDialog) {
// this.api.asc_enableKeyEvents(false);
// // this.loadMask.show();
// }
// }
// }
onConfirmAction(id, apiCallback) {
const _t = this._t;
if (id == Asc.c_oAscConfirm.ConfirmReplaceRange) {
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: _t.confirmMoveCellRange,
buttons: [
{text: _t.textYes,
onClick: () => {
if (apiCallback) apiCallback(true);
}},
{text: _t.textNo,
onClick: () => {
if (apiCallback) apiCallback(false);
}}
],
}).open();
} else if (id == Asc.c_oAscConfirm.ConfirmPutMergeRange) {
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: _t.confirmPutMergeRange,
buttons: [
{text: _t.textOk,
onClick: () => {
if (apiCallback) apiCallback();
}},
],
}).open();
}
}
_onLongActionEnd(type, id) {
if ( type === Asc.c_oAscAsyncActionType.BlockInteraction && id == Asc.c_oAscAsyncAction.Open ) {
Common.Gateway.internalMessage('documentReady', {});

View file

@ -29,6 +29,17 @@ class EditChartController extends Component {
this.onHorAxisTickMajor = this.onHorAxisTickMajor.bind(this);
this.onHorAxisTickMinor = this.onHorAxisTickMinor.bind(this);
this.onHorAxisLabelPos = this.onHorAxisLabelPos.bind(this);
const type = props.storeFocusObjects.chartObject.get_ChartProperties().getType();
if (type==Asc.c_oAscChartTypeSettings.comboBarLine ||
type==Asc.c_oAscChartTypeSettings.comboBarLineSecondary ||
type==Asc.c_oAscChartTypeSettings.comboAreaBar ||
type==Asc.c_oAscChartTypeSettings.comboCustom) {
props.storeChartSettings.clearChartStyles();
} else {
const api = Common.EditorApi.get();
props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(type));
}
}
closeModal() {

View file

@ -513,6 +513,12 @@ const PageBorderStyleCell = props => {
}}>
<Icon slot="media" icon="icon-table-borders-all"></Icon>
</ListItem>
<ListItem title={_t.textOutsideBorders} onClick={() => {
storeCellSettings.changeBorderStyle('outer');
props.onBorderStyle('outer', borderInfo);
}}>
<Icon slot="media" icon="icon-table-borders-outer"></Icon>
</ListItem>
<ListItem title={_t.textBottomBorder} onClick={() => {
storeCellSettings.changeBorderStyle('2');
props.onBorderStyle('2', borderInfo);

View file

@ -137,6 +137,9 @@ const PageStyle = props => {
const styles = storeChartSettings.styles;
const types = storeChartSettings.types;
const curType = chartProperties && chartProperties.getType();
const chartStyles = storeChartSettings.chartStyles;
// console.log(chartStyles, curType);
// console.log(Asc.c_oAscChartTypeSettings.comboBarLine, Asc.c_oAscChartTypeSettings.comboBarLineSecondary, Asc.c_oAscChartTypeSettings.comboAreaBar, Asc.c_oAscChartTypeSettings.comboCustom);
// Init border size
@ -171,7 +174,7 @@ const PageStyle = props => {
<Navbar backLink={_t.textBack}>
<div className="tab-buttons tabbar">
<Link key={"sse-link-chart-type"} tabLink={"#edit-chart-type"} tabLinkActive={true}>{_t.textType}</Link>
<Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link>
{chartStyles ? <Link key={"sse-link-chart-style"} tabLink={"#edit-chart-style"}>{_t.textStyle}</Link> : null}
<Link key={"sse-link-chart-fill"} tabLink={"#edit-chart-fill"}>{_t.textFill}</Link>
<Link key={"sse-link-chart-border"} tabLink={"#edit-chart-border"}>{_t.textBorder}</Link>
</div>
@ -196,26 +199,28 @@ const PageStyle = props => {
})}
</div>
</Tab>
<Tab key={"sse-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={() => {props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
{chartStyles ?
<Tab key={"sse-tab-chart-style"} id={"edit-chart-style"} className="page-content no-padding-top dataview">
<div className={'chart-styles'}>
{styles ? styles.map((row, rowIndex) => {
return (
<ul className="row" key={`row-${rowIndex}`}>
{row.map((style, index)=>{
return(
<li key={`${rowIndex}-${index}`}
onClick={() => {props.onStyle(style.asc_getName())}}>
<img src={`${style.asc_getImage()}`}/>
</li>
)
})}
</ul>
)
}) :
<div className={'text-content'}>{_t.textNoStyles}</div>
}
</div>
</Tab>
: null}
<Tab key={"sse-tab-chart-fill"} id={"edit-chart-fill"} className="page-content no-padding-top">
<PaletteFill onFillColor={props.onFillColor} f7router={props.f7router}/>
</Tab>

View file

@ -19,7 +19,7 @@ const PageSpreadsheetColorSchemes = props => {
{
allSchemes ? allSchemes.map((scheme, index) => {
return (
<ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index}
<ListItem radio={true} className="color-schemes-menu no-fastclick" key={index} title={scheme.get_name()} checked={stateScheme === index}
onChange={() => {
if(index !== curScheme) {
setScheme(index);