add mini-pagination

courseware
harry 5 years ago
parent 7789f2810f
commit e4c8607566

@ -0,0 +1,9 @@
import React from 'react'
import MiniPagination from './components/mini-pagination'
export default () => {
function onPageChange(page) {
console.log(page, '-----------')
}
return <MiniPagination onChange={onPageChange} current={1} total={100} pageSize={16} />
}

@ -0,0 +1,32 @@
import React, { useState } from 'react'
import './index.less'
function noop() { }
export default ({ current, defaultCurrent, total, pageSize, onChange = noop }) => {
const maxPage = Math.ceil(total / pageSize)
const [page, setPage] = useState(current || defaultCurrent)
function next() {
if (page < maxPage) {
let value = page + 1
setPage(value)
onChange(value)
}
}
function prev() {
if (page > 1) {
let value = page - 1
setPage(value)
onChange(value)
}
}
return (
<div className="mini-pagination">
<a class={page === 1 ? 'disabled' : 'normal'} onClick={prev}>上一页</a>
<a class={page === maxPage ? 'disabled' : 'normal'} onClick={next} >下一页</a>
</div>
)
}

@ -0,0 +1,60 @@
.mini-pagination {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
a {
display: block;
padding: 0 10px 0 22px;
border-width: 1px;
border-radius: 3px;
margin-right: 4px;
font-size: 12px;
line-height: 30px;
cursor: pointer;
border-style: solid;
outline: none;
border-color: #c4c6cf;
background: #fff;
color: #333;
position: relative;
&:hover {
background-color: #f2f3f7;
border-color: #a0a2ad;
text-decoration: none;
}
&:before {
position: absolute;
content: ' ';
width: 8px;
top: 10px;
left: 10px;
height: 8px;
transform: rotate(-45deg);
border-top: 1px solid #333;
border-left: 1px solid #333;
}
&:last-child {
padding: 0 22px 0 10px;
margin: 0 0 0 4px;
&:before {
left: auto;
right: 10px;
transform: rotate(135deg);
}
}
&.disabled {
cursor: not-allowed;
background-color: #f7f8fa;
border-color: #e6e7eb;
color: #e0e0e0;
}
}
}

@ -0,0 +1,117 @@
import * as monaco from 'monaco-editor'
import { union } from 'lodash'
const ifelse = {
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if (${1:condition}) {',
'\t$0',
'} else {',
'\t',
'}'
].join('\n'),
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'If-Else Statement'
}
function getWordsInString(string) {
return string.match(/[A-z]+/g)
}
const cArray = ['auto', 'break', 'case', 'char', 'const', 'continue', 'default', 'do', 'double', 'else', 'enum', 'extern',
'float', 'for', 'goto', 'if', 'int', 'long', 'register', 'return', 'short', 'signed', 'sizeof', 'static', 'struct',
'switch', 'typedef', 'union', 'unsigned', 'void', 'volatile', 'while', 'inline', 'restrict', '_Bool', '_Complex',
'_Imaginary', '_Alignas', '_Alignof', '_Atomic', '_Static_assert', '_Noreturn', '_Thread_local', '_Generic']
monaco.languages.registerCompletionItemProvider('cpp', {
provideCompletionItems: (model) => {
const currentFileWords = getWordsInString(model.getValue());
const all = union(cArray, currentFileWords)
var suggestions = all.map((item) => {
return {
label: item,
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: item,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
}
});
suggestions.push(ifelse)
return { suggestions: suggestions };
}
});
// https://www.programiz.com/python-programming/keyword-list
const pythonArray = ['False', 'None', 'True', 'and', 'as', 'assert', 'break', 'class', 'continue', 'def', 'del', 'elif',
'else', 'except', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or',
'pass', 'raise', 'return', 'try', 'while', 'with', 'yield']
monaco.languages.registerCompletionItemProvider('python', {
provideCompletionItems: (model) => {
const currentFileWords = getWordsInString(model.getValue());
const all = union(pythonArray, currentFileWords)
var suggestions = all.map((item) => {
return {
label: item,
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: item,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
}
});
suggestions.push({
label: 'print',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'print($0)',
].join('\n'),
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'print'
})
return { suggestions: suggestions };
}
});
const javaArray = ['abstract', 'assert', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const',
'continue', 'default', 'do', 'double', 'else', 'enum', 'extends', 'final', 'finally', 'float', 'for', 'goto', 'if',
'implements', 'import', 'instance of', 'int', 'interface', 'long', 'native',
'new', 'package', 'private', 'protected', 'public', 'return', 'strictfp', 'short', 'static', 'super', 'switch',
'synchronized', 'this', 'throw', 'throws', 'transient', 'try', 'void', 'volatile', 'while']
monaco.languages.registerCompletionItemProvider('java', {
provideCompletionItems: (model) => {
const currentFileWords = getWordsInString(model.getValue());
const all = _.union(javaArray, currentFileWords)
var suggestions = all.map((item) => {
return {
label: item,
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: item,
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
}
});
suggestions.push(ifelse)
suggestions.push({
label: 'main',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'public static void main(String[] args) {',
'\t$0',
'}',
].join('\n'),
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'main function'
})
suggestions.push({
label: 'System.out.print',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'System.out.print($0)',
].join('\n'),
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
documentation: 'system print'
})
return { suggestions: suggestions };
}
});

@ -0,0 +1,438 @@
.monaco-editor .minimap-slider,
.monaco-editor .minimap-slider .minimap-slider-horizontal {
background: rgba(121, 121, 121, 0.2);
}
.monaco-editor .minimap-slider:hover,
.monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
background: rgba(100, 100, 100, 0.35);
}
.monaco-editor .minimap-slider.active,
.monaco-editor .minimap-slider.active .minimap-slider-horizontal {
background: rgba(191, 191, 191, 0.2);
}
.monaco-editor .minimap-shadow-visible {
box-shadow: #000000 -6px 0 6px -6px inset;
}
.monaco-editor .scroll-decoration {
box-shadow: #000000 0 6px 6px -6px inset;
}
.monaco-editor .focused .selected-text {
background-color: #264f78;
}
.monaco-editor .selected-text {
background-color: #3a3d41;
}
.monaco-editor,
.monaco-editor-background,
.monaco-editor .inputarea.ime-input {
background-color: #1e1e1e;
}
.monaco-editor,
.monaco-editor .inputarea.ime-input {
color: #d4d4d4;
}
.monaco-editor .margin {
background-color: #1e1e1e;
}
.monaco-editor .rangeHighlight {
background-color: rgba(255, 255, 255, 0.04);
}
.vs-whitespace {
color: rgba(227, 228, 226, 0.16) !important;
}
.monaco-editor .view-overlays .current-line {
border: 2px solid #282828;
}
.monaco-editor .margin-view-overlays .current-line-margin {
border: 2px solid #282828;
}
.monaco-editor .lines-content .cigr {
box-shadow: 1px 0 0 0 #404040 inset;
}
.monaco-editor .lines-content .cigra {
box-shadow: 1px 0 0 0 #707070 inset;
}
.monaco-editor .line-numbers {
color: #858585;
}
.monaco-editor .current-line~.line-numbers {
color: #c6c6c6;
}
.monaco-editor .view-ruler {
box-shadow: 1px 0 0 0 #5a5a5a inset;
}
.monaco-editor .cursor {
background-color: #aeafad;
border-color: #aeafad;
color: #515052;
}
.monaco-editor .squiggly-error {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23ea4646'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
}
.monaco-editor .squiggly-warning {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%234d9e4d'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
}
.monaco-editor .squiggly-info {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23008000'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
}
.monaco-editor .squiggly-hint {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%223%22%20width%3D%2212%22%3E%3Cg%20fill%3D%22rgba(238%2C%20238%2C%20238%2C%200.7)%22%3E%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat bottom left;
}
.showUnused .monaco-editor .squiggly-inline-unnecessary {
opacity: 0.667;
}
.monaco-diff-editor .diff-review-line-number {
color: #858585;
}
.monaco-diff-editor .diff-review-shadow {
box-shadow: #000000 0 -6px 6px -6px inset;
}
.monaco-editor .line-insert,
.monaco-editor .char-insert {
background-color: rgba(155, 185, 85, 0.2);
}
.monaco-diff-editor .line-insert,
.monaco-diff-editor .char-insert {
background-color: rgba(155, 185, 85, 0.2);
}
.monaco-editor .inline-added-margin-view-zone {
background-color: rgba(155, 185, 85, 0.2);
}
.monaco-editor .line-delete,
.monaco-editor .char-delete {
background-color: rgba(255, 0, 0, 0.2);
}
.monaco-diff-editor .line-delete,
.monaco-diff-editor .char-delete {
background-color: rgba(255, 0, 0, 0.2);
}
.monaco-editor .inline-deleted-margin-view-zone {
background-color: rgba(255, 0, 0, 0.2);
}
.monaco-diff-editor.side-by-side .editor.modified {
box-shadow: -6px 0 5px -5px #000000;
}
.monaco-editor .bracket-match {
background-color: rgba(0, 100, 0, 0.1);
}
.monaco-editor .bracket-match {
border: 1px solid #888888;
}
.monaco-editor .codelens-decoration {
color: #999999;
}
.monaco-editor .codelens-decoration>a:hover {
color: #4e94ce !important;
}
.monaco-editor .findOptionsWidget {
background-color: #252526;
}
.monaco-editor .findOptionsWidget {
box-shadow: 0 2px 8px #000000;
}
.monaco-editor .findMatch {
background-color: rgba(234, 92, 0, 0.33);
}
.monaco-editor .currentFindMatch {
background-color: #515c6a;
}
.monaco-editor .findScope {
background-color: rgba(58, 61, 65, 0.4);
}
.monaco-editor .find-widget {
background-color: #252526;
}
.monaco-editor .find-widget {
box-shadow: 0 2px 8px #000000;
}
.monaco-editor .find-widget.no-results .matchesCount {
color: #f48771;
}
.monaco-editor .find-widget .monaco-sash {
background-color: #454545;
width: 3px !important;
margin-left: -4px;
}
.monaco-editor .find-widget .monaco-checkbox .checkbox:checked+.label {
border: 1px solid #007acc;
}
.monaco-editor.vs .valueSetReplacement {
outline: solid 2px #888888;
}
.monaco-editor .detected-link-active {
color: #4e94ce !important;
}
.monaco-editor .monaco-editor-overlaymessage .anchor {
border-top-color: #007acc;
}
.monaco-editor .monaco-editor-overlaymessage .message {
border: 1px solid #007acc;
}
.monaco-editor .monaco-editor-overlaymessage .message {
background-color: #063b49;
}
.monaco-editor .parameter-hints-widget {
border: 1px solid #454545;
}
.monaco-editor .parameter-hints-widget.multiple .body {
border-left: 1px solid rgba(69, 69, 69, 0.5);
}
.monaco-editor .parameter-hints-widget .signature.has-docs {
border-bottom: 1px solid rgba(69, 69, 69, 0.5);
}
.monaco-editor .parameter-hints-widget {
background-color: #252526;
}
.monaco-editor .parameter-hints-widget a {
color: #3794ff;
}
.monaco-editor .parameter-hints-widget code {
background-color: rgba(10, 10, 10, 0.4);
}
.monaco-editor .snippet-placeholder {
background-color: rgba(124, 124, 124, 0.3);
outline-color: transparent;
}
.monaco-editor .finish-snippet-placeholder {
background-color: transparent;
outline-color: #525252;
}
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
color: #0097fb;
}
.monaco-editor .suggest-widget {
color: #d4d4d4;
}
.monaco-editor .suggest-widget a {
color: #3794ff;
}
.monaco-editor .suggest-widget code {
background-color: rgba(10, 10, 10, 0.4);
}
.monaco-editor .focused .selectionHighlight {
background-color: rgba(173, 214, 255, 0.15);
}
.monaco-editor .selectionHighlight {
background-color: rgba(173, 214, 255, 0.07);
}
.monaco-editor .wordHighlight {
background-color: rgba(87, 87, 87, 0.72);
}
.monaco-editor .wordHighlightStrong {
background-color: rgba(0, 73, 114, 0.72);
}
.monaco-editor .accessibilityHelpWidget {
background-color: #252526;
}
.monaco-editor .accessibilityHelpWidget {
box-shadow: 0 2px 8px #000000;
}
.monaco-editor .tokens-inspect-widget {
border: 1px solid #454545;
}
.monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
background-color: #454545;
}
.monaco-editor .tokens-inspect-widget {
background-color: #252526;
}
.monaco-editor .reference-zone-widget .ref-tree .referenceMatch {
background-color: rgba(234, 92, 0, 0.3);
}
.monaco-editor .reference-zone-widget .preview .reference-decoration {
background-color: rgba(255, 143, 0, 0.6);
}
.monaco-editor .reference-zone-widget .ref-tree {
background-color: #252526;
}
.monaco-editor .reference-zone-widget .ref-tree {
color: #bbbbbb;
}
.monaco-editor .reference-zone-widget .ref-tree .reference-file {
color: #ffffff;
}
.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows>.monaco-list-row.selected:not(.highlighted) {
background-color: rgba(51, 153, 255, 0.2);
}
.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows>.monaco-list-row.selected:not(.highlighted) {
color: #ffffff !important;
}
.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,
.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {
background-color: #001f33;
}
.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {
background-color: #001f33;
}
.monaco-editor .marker-widget a {
color: #3794ff;
}
.monaco-editor .hoverHighlight {
background-color: rgba(38, 79, 120, 0.25);
}
.monaco-editor .monaco-editor-hover {
background-color: #252526;
}
.monaco-editor .monaco-editor-hover {
border: 1px solid #454545;
}
.monaco-editor .monaco-editor-hover .hover-row:not(:first-child):not(:empty) {
border-top: 1px solid rgba(69, 69, 69, 0.5);
}
.monaco-editor .monaco-editor-hover hr {
border-top: 1px solid rgba(69, 69, 69, 0.5);
}
.monaco-editor .monaco-editor-hover hr {
border-bottom: 0px solid rgba(69, 69, 69, 0.5);
}
.monaco-editor .monaco-editor-hover a {
color: #3794ff;
}
.monaco-editor .monaco-editor-hover .hover-row .actions {
background-color: #2c2c2d;
}
.monaco-editor .monaco-editor-hover code {
background-color: rgba(10, 10, 10, 0.4);
}
.monaco-editor .goto-definition-link {
color: #4e94ce !important;
}
.mtki {
font-style: italic;
}
.mtkb {
font-weight: bold;
}
.mtku {
text-decoration: underline;
text-underline-position: under;
}
#extend-challenge-file-edit {
height: 100%;
}
/* context menu会有样式问题先给隐藏掉 */
.context-view {
display: none !important;
}
/* 去掉灰色边框 */
#extend-challenge-file-edit {
border: none !important;
}
/* 覆盖tpi样式 */
.monaco-tree .monaco-tree-rows>.monaco-tree-row>.content {
min-width: auto;
}
/* 选中行边框 */
.monaco-editor .view-overlays .current-line {
border-width: 1px !important;
}
#extend-challenge-file-edit {
width: '100%';
height: '100%';
border: '1px solid grey';
}

@ -0,0 +1,190 @@
import React, { useEffect, useRef, useState } from 'react'
import * as monaco from 'monaco-editor'
import './TPIMonacoConfig'
import './index.css'
function processSize(size) {
return !/^\d+$/.test(size) ? size : `${size}px`
}
function noop() { }
let __prevent_trigger_change_event = false
function debounce(func, wait, immediate) {
var timeout
return function () {
var context = this, args = arguments
var later = function () {
timeout = null
if (!immediate) func.apply(context, args)
};
var callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func.apply(context, args)
}
}
const mirror2LanguageMap = {
'JFinal': 'java',
'Java': 'java',
'JavaWeb': 'java',
'Kotlin': 'java',
'Html': 'html',
'Css': 'css',
'Javascript': 'javascript',
'JavaScript': 'javascript',
'C/C++': 'cpp',
'MachineLearning': 'python',
'Python2.7': 'python',
'Python3.6': 'python',
'C#': 'csharp',
'R': 'r'
}
function getLanguageByMirrorName(mirror_name) {
let lang = 'javascript'
if (mirror_name && mirror_name.length) {
// htmlcsspythonhtmlcss
for (let i = mirror_name.length - 1; i >= 0; i--) {
let languageVal = mirror2LanguageMap[mirror_name[i]]
if (languageVal) {
lang = languageVal
break
}
}
}
return lang
}
export default ({
width = '100%',
height = '100%',
value,
language = 'javascript',
options = {},
overrideServices = {},
theme = 'vs-dark',
onChange = noop,
editorDidMount = noop
}) => {
const editorEl = useRef()
const editor = useRef({})
const [init, setInit] = useState(false)
function onLayout() {
if (window.ResizeObserver) {
const ro = new window.ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target.offsetHeight > 0) {
editor.current.instance.layout()
}
}
})
ro.observe(editorEl.current.parentElement)
} else {
setTimeout(() => {
editor.current.instance.layout()
}, 100);
}
}
useEffect(() => {
editor.current.instance = monaco.editor.create(
editorEl.current, {
value,
language: getLanguageByMirrorName(language),
theme,
...options
},
overrideServices
)
editorDidMount(editor.current.instance, monaco)
editor.current.subscription = editor.current.instance.onDidChangeModelContent(event => {
if (!__prevent_trigger_change_event) {
onChange(editor.current.instance.getValue(), event);
}
})
setInit(true)
const resizeHandler = debounce(() => { editor.current.instance.layout() }, 100)
window.addEventListener('resize', resizeHandler)
onLayout()
return () => {
const el = editor.current.instance
el.dispose()
const model = el.getModel()
if (model) {
model.dispose()
}
if (editor.current.subscription) {
editor.current.subscription.dispose()
}
window.removeEventListener('resize', resizeHandler)
}
}, [editorEl.current])
useEffect(() => {
let instance = editor.current.instance
if (instance && init) {
__prevent_trigger_change_event = true
const model = instance.getModel()
instance.pushUndoStop()
model.pushEditOperations(
[],
[
{
range: model.getFullModelRange(),
text: value
}
]
)
instance.pushUndoStop();
__prevent_trigger_change_event = false;
}
}, [value, init])
useEffect(() => {
let instance = editor.current.instance
if (instance && init) {
monaco.editor.setModelLanguage(instance.getModel(), getLanguageByMirrorName(language))
}
}, [language, init])
useEffect(() => {
let instance = editor.current.instance
if (instance && init) {
monaco.editor.setTheme(theme)
}
}, [theme, init])
useEffect(() => {
let instance = editor.current.instance
if (instance && init) {
instance.updateOptions(options)
}
}, [options, init])
useEffect(() => {
let instance = editor.current.instance
if (instance && init) {
instance.layout()
}
}, [width, height, init])
const fixedWidth = processSize(width)
const fixedHeight = processSize(height)
const style = {
width: fixedWidth,
height: fixedHeight
}
return (
<div ref={editorEl} style={style} id="extend-challenge-file-edit" name="content" ></div>
)
}
Loading…
Cancel
Save