mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-08 05:57:02 +09:00
Merge branch 'fixes' of github.com:anytypeio/js-anytype into feature/arm
This commit is contained in:
Andrew Simachev
commit
d7c1c6f88b
15 changed files with 158 additions and 56 deletions
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8072 7.1772C13.5729 6.94289 13.193 6.94289 12.9586 7.1772L8.13438 12.0015L12.9586 16.8257C13.193 17.06 13.5729 17.06 13.8072 16.8257C14.0415 16.5914 14.0415 16.2115 13.8072 15.9772L9.83144 12.0015L13.8072 8.02573C14.0415 7.79141 14.0415 7.41152 13.8072 7.1772Z" fill="#ACA996"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 1.64645C11.5489 1.84171 11.5489 2.15829 11.3536 2.35355L5.70718 8L11.3536 13.6464C11.5489 13.8417 11.5489 14.1583 11.3536 14.3536C11.1584 14.5488 10.8418 14.5488 10.6465 14.3536L4.29297 8L10.6465 1.64645C10.8418 1.45118 11.1584 1.45118 11.3536 1.64645Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 431 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8072 7.1772C13.5729 6.94289 13.193 6.94289 12.9586 7.1772L8.13438 12.0015L12.9586 16.8257C13.193 17.06 13.5729 17.06 13.8072 16.8257C14.0415 16.5914 14.0415 16.2115 13.8072 15.9772L9.83144 12.0015L13.8072 8.02573C14.0415 7.79141 14.0415 7.41152 13.8072 7.1772Z" fill="#2c2b27"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 1.64645C11.5489 1.84171 11.5489 2.15829 11.3536 2.35355L5.70718 8L11.3536 13.6464C11.5489 13.8417 11.5489 14.1583 11.3536 14.3536C11.1584 14.5488 10.8418 14.5488 10.6465 14.3536L4.29297 8L10.6465 1.64645C10.8418 1.45118 11.1584 1.45118 11.3536 1.64645Z" fill="#2c2b27"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 431 B |
4
src/img/arrow/pagerEnd0.svg
Normal file
4
src/img/arrow/pagerEnd0.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3536 1.64645C12.5489 1.84171 12.5489 2.15829 12.3536 2.35355L6.70718 8L12.3536 13.6464C12.5489 13.8417 12.5489 14.1583 12.3536 14.3536C12.1584 14.5488 11.8418 14.5488 11.6465 14.3536L5.29297 8L11.6465 1.64645C11.8418 1.45118 12.1584 1.45118 12.3536 1.64645Z" fill="#ACA996"/>
|
||||
<path d="M3.03125 1.98438C3.03125 1.71686 3.24811 1.5 3.51562 1.5C3.78314 1.5 4 1.71686 4 1.98438V14.0156C4 14.2831 3.78314 14.5 3.51562 14.5C3.24811 14.5 3.03125 14.2831 3.03125 14.0156V1.98438Z" fill="#ACA996"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
4
src/img/arrow/pagerEnd1.svg
Normal file
4
src/img/arrow/pagerEnd1.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3536 1.64645C12.5489 1.84171 12.5489 2.15829 12.3536 2.35355L6.70718 8L12.3536 13.6464C12.5489 13.8417 12.5489 14.1583 12.3536 14.3536C12.1584 14.5488 11.8418 14.5488 11.6465 14.3536L5.29297 8L11.6465 1.64645C11.8418 1.45118 12.1584 1.45118 12.3536 1.64645Z" fill="#2c2b27"/>
|
||||
<path d="M3.03125 1.98438C3.03125 1.71686 3.24811 1.5 3.51562 1.5C3.78314 1.5 4 1.71686 4 1.98438V14.0156C4 14.2831 3.78314 14.5 3.51562 14.5C3.24811 14.5 3.03125 14.2831 3.03125 14.0156V1.98438Z" fill="#2c2b27"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8072 7.1772C13.5729 6.94289 13.193 6.94289 12.9586 7.1772L8.13438 12.0015L12.9586 16.8257C13.193 17.06 13.5729 17.06 13.8072 16.8257C14.0415 16.5914 14.0415 16.2115 13.8072 15.9772L9.83144 12.0015L13.8072 8.02573C14.0415 7.79141 14.0415 7.41152 13.8072 7.1772Z" fill="#929082"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 1.64645C11.5489 1.84171 11.5489 2.15829 11.3536 2.35355L5.70718 8L11.3536 13.6464C11.5489 13.8417 11.5489 14.1583 11.3536 14.3536C11.1584 14.5488 10.8418 14.5488 10.6465 14.3536L4.29297 8L10.6465 1.64645C10.8418 1.45118 11.1584 1.45118 11.3536 1.64645Z" fill="#929082"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 431 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8072 7.1772C13.5729 6.94289 13.193 6.94289 12.9586 7.1772L8.13438 12.0015L12.9586 16.8257C13.193 17.06 13.5729 17.06 13.8072 16.8257C14.0415 16.5914 14.0415 16.2115 13.8072 15.9772L9.83144 12.0015L13.8072 8.02573C14.0415 7.79141 14.0415 7.41152 13.8072 7.1772Z" fill="#cbc9bd"/>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3536 1.64645C11.5489 1.84171 11.5489 2.15829 11.3536 2.35355L5.70718 8L11.3536 13.6464C11.5489 13.8417 11.5489 14.1583 11.3536 14.3536C11.1584 14.5488 10.8418 14.5488 10.6465 14.3536L4.29297 8L10.6465 1.64645C10.8418 1.45118 11.1584 1.45118 11.3536 1.64645Z" fill="#cbc9bd"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 431 B |
4
src/img/theme/dark/arrow/pagerEnd0.svg
Normal file
4
src/img/theme/dark/arrow/pagerEnd0.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3536 1.64645C12.5489 1.84171 12.5489 2.15829 12.3536 2.35355L6.70718 8L12.3536 13.6464C12.5489 13.8417 12.5489 14.1583 12.3536 14.3536C12.1584 14.5488 11.8418 14.5488 11.6465 14.3536L5.29297 8L11.6465 1.64645C11.8418 1.45118 12.1584 1.45118 12.3536 1.64645Z" fill="#929082"/>
|
||||
<path d="M3.03125 1.98438C3.03125 1.71686 3.24811 1.5 3.51562 1.5C3.78314 1.5 4 1.71686 4 1.98438V14.0156C4 14.2831 3.78314 14.5 3.51562 14.5C3.24811 14.5 3.03125 14.2831 3.03125 14.0156V1.98438Z" fill="#929082"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
4
src/img/theme/dark/arrow/pagerEnd1.svg
Normal file
4
src/img/theme/dark/arrow/pagerEnd1.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3536 1.64645C12.5489 1.84171 12.5489 2.15829 12.3536 2.35355L6.70718 8L12.3536 13.6464C12.5489 13.8417 12.5489 14.1583 12.3536 14.3536C12.1584 14.5488 11.8418 14.5488 11.6465 14.3536L5.29297 8L11.6465 1.64645C11.8418 1.45118 12.1584 1.45118 12.3536 1.64645Z" fill="#cbc9bd"/>
|
||||
<path d="M3.03125 1.98438C3.03125 1.71686 3.24811 1.5 3.51562 1.5C3.78314 1.5 4 1.71686 4 1.98438V14.0156C4 14.2831 3.78314 14.5 3.51562 14.5C3.24811 14.5 3.03125 14.2831 3.03125 14.0156V1.98438Z" fill="#cbc9bd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 645 B |
|
|
@ -88,10 +88,25 @@
|
|||
.icon.play:hover { background-color: rgba(255,255,255,0.9); }
|
||||
}
|
||||
|
||||
.pager { position: absolute; z-index: 1; top: 0px; left: 50%; transform: translateX(-50%); @include text-common; }
|
||||
.pdfWrapper { width: 100%; height: calc(100% - 30px); overflow: hidden; position: relative; padding-top: 30px; }
|
||||
.pdfWrapper {
|
||||
width: 100%; overflow: hidden; position: relative; padding: 12px; box-shadow: 0px 0px 0px 1px $colorBorderDark;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.pdfWrapper {
|
||||
.loaderWrapper { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
|
||||
.info { @include text-common; margin-bottom: 6px; text-align: center; }
|
||||
.info {
|
||||
.name {
|
||||
min-width: 40px; max-width: calc(100% - 180px); height: 24px; line-height: 24px; display: inline-block;
|
||||
vertical-align: top; cursor: pointer; @include text-overflow-nw;
|
||||
}
|
||||
.size {
|
||||
@include text-common; max-width: 100px; height: 24px; line-height: 24px; color: $colorMediumGrey; margin: 0px 8px;
|
||||
display: inline-block; vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.pager { margin-top: 6px; }
|
||||
.loaderWrapper { width: 100%; position: relative; }
|
||||
|
||||
.react-pdf__Document { width: 100%; display: inline-block; }
|
||||
.react-pdf__Page__svg { width: 100% !important; height: 100% !important; overflow: hidden; }
|
||||
|
|
|
|||
|
|
@ -1,20 +1,29 @@
|
|||
@import "~scss/_vars";
|
||||
|
||||
.pager { text-align: center; color: $colorMediumGrey; white-space: nowrap; @include text-common; user-select: none; }
|
||||
.pager {
|
||||
text-align: center; color: $colorMediumGrey; white-space: nowrap; @include text-common; user-select: none;
|
||||
line-height: 20px; display: flex; align-items: center; justify-content: center; gap: 0px 8px;
|
||||
}
|
||||
.pager.isShort { gap: 0px 18px; }
|
||||
.pager {
|
||||
.pageItem {
|
||||
min-width: 24px; display: inline-block; padding: 0px 2px; transition: $transitionFast; text-align: center; margin-right: 8px;
|
||||
vertical-align: top; line-height: 24px; cursor: pointer;
|
||||
min-width: 24px; display: inline-block; padding: 0px 2px; transition: $transitionFast; text-align: center;
|
||||
vertical-align: top; line-height: 20px; cursor: pointer;
|
||||
}
|
||||
.pageItem:last-child { margin: 0px; }
|
||||
.pageItem:hover, .pageItem.active { color: $colorBlack; }
|
||||
|
||||
.pageItem.list { cursor: default; }
|
||||
.pageItem.list:hover { color: $colorMediumGrey; }
|
||||
|
||||
.dots { min-width: 24px; display: inline-block; padding: 0px 2px; text-align: center; margin-right: 8px; vertical-align: top; line-height: 24px; }
|
||||
.dots { min-width: 24px; display: inline-block; padding: 0px 2px; text-align: center; vertical-align: top; line-height: 24px; }
|
||||
|
||||
.icon.arrow { width: 24px; height: 24px; vertical-align: top; background-image: url('~img/arrow/pager0.svg'); cursor: pointer; }
|
||||
.icon.arrow { width: 20px; height: 20px; background-size: 16px; vertical-align: top; background-image: url('~img/arrow/pager0.svg'); cursor: pointer; }
|
||||
.icon.arrow:hover { background-image: url('~img/arrow/pager1.svg'); }
|
||||
|
||||
.icon.arrow.disabled:hover { background-image: url('~img/arrow/pager0.svg'); }
|
||||
|
||||
.icon.arrow.right { transform: rotateZ(180deg); }
|
||||
|
||||
.icon.arrow.end { background-image: url('~img/arrow/pagerEnd0.svg'); cursor: pointer; }
|
||||
.icon.arrow.end:hover { background-image: url('~img/arrow/pagerEnd1.svg'); }
|
||||
.icon.arrow.end.disabled:hover { background-image: url('~img/arrow/pagerEnd0.svg'); }
|
||||
}
|
||||
|
|
@ -60,6 +60,8 @@
|
|||
.wrap.broken {
|
||||
img:before { background: $colorBgLight; }
|
||||
}
|
||||
|
||||
.pdfWrapper { box-shadow: 0px 0px 0px 1px $colorLinePrimary; }
|
||||
}
|
||||
.block.blockMedia.isAudio > .wrapContent { background: $colorHover; }
|
||||
|
||||
|
|
|
|||
|
|
@ -152,10 +152,15 @@ html.themeDark {
|
|||
.pager {
|
||||
.pageItem:hover { color: $colorPrimary; }
|
||||
.pageItem.active { color: $colorOrange; }
|
||||
.pageItem.list:hover { color: $colorPrimary; }
|
||||
|
||||
.icon.arrow { background-image: url('~img/theme/dark/arrow/pager0.svg'); }
|
||||
.icon.arrow:hover { background-image: url('~img/theme/dark/arrow/pager1.svg'); }
|
||||
.icon.arrow.disabled:hover { background-image: url('~img/theme/dark/arrow/pager0.svg'); }
|
||||
|
||||
.icon.arrow.end { background-image: url('~img/theme/dark/arrow/pagerEnd0.svg'); cursor: pointer; }
|
||||
.icon.arrow.end:hover { background-image: url('~img/theme/dark/arrow/pagerEnd1.svg'); }
|
||||
.icon.arrow.end.disabled:hover { background-image: url('~img/theme/dark/arrow/pagerEnd0.svg'); }
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import { InputWithFile, Icon, Loader, Error, Pager } from 'ts/component';
|
||||
import { I, C, translate, focus } from 'ts/lib';
|
||||
import { commonStore } from 'ts/store';
|
||||
import { InputWithFile, Loader, Error, Pager } from 'ts/component';
|
||||
import { I, C, translate, focus, Util } from 'ts/lib';
|
||||
import { commonStore, detailStore } from 'ts/store';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Document, Page } from 'react-pdf';
|
||||
import { pdfjs } from 'react-pdf';
|
||||
|
|
@ -11,7 +10,10 @@ pdfjs.GlobalWorkerOptions.workerSrc = 'workers/pdf.min.js';
|
|||
|
||||
interface Props extends I.BlockComponent {}
|
||||
|
||||
const $ = require('jquery');
|
||||
const { ipcRenderer } = window.require('electron');
|
||||
const { app } = window.require('@electron/remote');
|
||||
const userPath = app.getPath('userData');
|
||||
const path = window.require('path');
|
||||
const Constant = require('json/constant.json');
|
||||
|
||||
interface State {
|
||||
|
|
@ -29,6 +31,7 @@ const BlockPdf = observer(class BlockPdf extends React.Component<Props, State> {
|
|||
constructor (props: any) {
|
||||
super(props);
|
||||
|
||||
this.onOpen = this.onOpen.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
|
|
@ -37,11 +40,19 @@ const BlockPdf = observer(class BlockPdf extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { block, readonly } = this.props;
|
||||
const { rootId, block, readonly } = this.props;
|
||||
const { id, fields, content } = block;
|
||||
const { state, hash, type, mime } = content;
|
||||
const { page, pages } = this.state;
|
||||
|
||||
let object = detailStore.get(rootId, content.hash, [ 'sizeInBytes' ]);
|
||||
if (object._empty_) {
|
||||
object = Util.objectCopy(content);
|
||||
object.sizeInBytes = object.size;
|
||||
};
|
||||
|
||||
let { name, sizeInBytes } = object;
|
||||
|
||||
let { width } = fields;
|
||||
let element = null;
|
||||
let pager = null;
|
||||
|
|
@ -78,8 +89,26 @@ const BlockPdf = observer(class BlockPdf extends React.Component<Props, State> {
|
|||
break;
|
||||
|
||||
case I.FileState.Done:
|
||||
if (pages > 1) {
|
||||
pager = (
|
||||
<Pager
|
||||
offset={page - 1}
|
||||
limit={1}
|
||||
total={pages}
|
||||
pageLimit={1}
|
||||
isShort={true}
|
||||
onChange={(page: number) => { this.setState({ page }); }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
element = (
|
||||
<div className="wrap pdfWrapper" style={css}>
|
||||
<div className={[ 'wrap', 'pdfWrapper', (pager ? 'withPager' : '') ].join(' ')} style={css}>
|
||||
<div className="info" onMouseDown={this.onOpen}>
|
||||
<span className="name">{name}</span>
|
||||
<span className="size">{Util.fileSize(sizeInBytes)}</span>
|
||||
</div>
|
||||
|
||||
<Document
|
||||
file={commonStore.fileUrl(hash)}
|
||||
onLoadSuccess={({ numPages }) => { this.setState({ pages: numPages }); }}
|
||||
|
|
@ -88,17 +117,9 @@ const BlockPdf = observer(class BlockPdf extends React.Component<Props, State> {
|
|||
>
|
||||
<Page pageNumber={page} loading={<Loader />} />
|
||||
</Document>
|
||||
</div>
|
||||
);
|
||||
|
||||
pager = (
|
||||
<Pager
|
||||
offset={page - 1}
|
||||
limit={1}
|
||||
total={pages}
|
||||
pageLimit={1}
|
||||
onChange={(page: number) => { this.setState({ page }); }}
|
||||
/>
|
||||
{pager}
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
};
|
||||
|
|
@ -106,7 +127,6 @@ const BlockPdf = observer(class BlockPdf extends React.Component<Props, State> {
|
|||
return (
|
||||
<div className={[ 'focusable', 'c' + id ].join(' ')} tabIndex={0} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onFocus={this.onFocus}>
|
||||
{element}
|
||||
{pager}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -145,6 +165,18 @@ const BlockPdf = observer(class BlockPdf extends React.Component<Props, State> {
|
|||
|
||||
C.BlockUpload(rootId, id, '', path);
|
||||
};
|
||||
|
||||
onOpen (e: any) {
|
||||
const { block } = this.props;
|
||||
const { content } = block;
|
||||
const { hash } = content;
|
||||
|
||||
C.DownloadFile(hash, path.join(userPath, 'tmp'), (message: any) => {
|
||||
if (message.path) {
|
||||
ipcRenderer.send('pathOpen', message.path);
|
||||
};
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
export default BlockPdf;
|
||||
|
|
@ -1030,7 +1030,7 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
|
|||
const obj = shift ? parent : next;
|
||||
|
||||
let canTab = obj && !block.isTextTitle() && obj.canHaveChildren() && block.isIndentable();
|
||||
if (parentElement.childrenIds.length && (block.id == parentElement.childrenIds[0])) {
|
||||
if (!shift && parentElement.childrenIds.length && (block.id == parentElement.childrenIds[0])) {
|
||||
canTab = false;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ interface Props {
|
|||
offset: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
isShort?: boolean;
|
||||
pageLimit?: number;
|
||||
onChange?: (page: number) => void;
|
||||
};
|
||||
|
|
@ -20,7 +21,7 @@ class Pager extends React.Component<Props, {}> {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { pageLimit, limit } = this.props;
|
||||
const { pageLimit, limit, isShort } = this.props;
|
||||
|
||||
let offset = Number(this.props.offset) || 0;
|
||||
let total = Number(this.props.total) || 0;
|
||||
|
|
@ -46,30 +47,52 @@ class Pager extends React.Component<Props, {}> {
|
|||
</div>
|
||||
);
|
||||
|
||||
let startPage = null;
|
||||
let endPage = null;
|
||||
let list = null;
|
||||
|
||||
if (!isShort && (start > 1)) {
|
||||
startPage = (
|
||||
<React.Fragment>
|
||||
<Item id="1" />
|
||||
<div className="dots">...</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
if (!isShort && (end < pages)) {
|
||||
endPage = (
|
||||
<React.Fragment>
|
||||
<div className="dots">...</div>
|
||||
<Item id={pages} />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
if (isShort) {
|
||||
list = <div className="pageItem list">{page} of {pages}</div>;
|
||||
} else {
|
||||
list = (
|
||||
<React.Fragment>
|
||||
{items.map((item, i) => (
|
||||
<Item key={i} {...item} />
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
if (items.length > 1) {
|
||||
return (
|
||||
<div className="pager">
|
||||
<div className={[ 'pager', (isShort ? 'isShort' : '') ].join(' ')}>
|
||||
{isShort ? <Icon className={[ 'arrow', 'end', 'left', (page == 1 ? 'disabled' : '') ].join(' ')} onClick={() => { this.onChange(1); }} /> : ''}
|
||||
<Icon className={[ 'arrow', 'left', (page == 1 ? 'disabled' : '') ].join(' ')} onClick={() => { this.onChange(page - 1); }} />
|
||||
|
||||
{start > 1 ? (
|
||||
<React.Fragment>
|
||||
<Item id="1" />
|
||||
<div className="dots">...</div>
|
||||
</React.Fragment>
|
||||
) : ''}
|
||||
|
||||
{items.map((item, i) => {
|
||||
return <Item key={i} {...item} />;
|
||||
})}
|
||||
|
||||
{end < pages ? (
|
||||
<React.Fragment>
|
||||
<div className="dots">...</div>
|
||||
<Item id={pages} />
|
||||
</React.Fragment>
|
||||
) : ''}
|
||||
{startPage}
|
||||
{list}
|
||||
{endPage}
|
||||
|
||||
<Icon className={[ 'arrow', 'right', (page == pages ? 'disabled' : '') ].join(' ')} onClick={() => { this.onChange(page + 1); }} />
|
||||
{isShort ? <Icon className={[ 'arrow', 'end', 'right', (page == pages ? 'disabled' : '') ].join(' ')} onClick={() => { this.onChange(pages); }} /> : ''}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue