diff --git a/package.json b/package.json index d7c42985a37a6cf0bfabdc10fa1c3b3a25c88f03..90fe131662d245c3fb22fca12a6a501515dd40f6 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ }, "dependencies": { "@ant-design/icons": "^4.3.0", + "@monaco-editor/react": "^4.3.1", "@types/react-router-dom": "^5.1.5", "antd": "^4.14.1", "axios": "^0.20.0", @@ -82,4 +83,4 @@ "react": "^16.13.1", "react-dom": "^16.13.1" } -} \ No newline at end of file +} diff --git a/src/components/formFields/code/index.less b/src/components/formFields/code/index.less new file mode 100644 index 0000000000000000000000000000000000000000..7e94f30cedb908f16594688c26a2f6858d5ca362 --- /dev/null +++ b/src/components/formFields/code/index.less @@ -0,0 +1,89 @@ +.editor-page { + .header-wrapper { + padding: 5px 20px 5px 0; + text-align: right; + } + .header-wrapper-black { + color: #fff; + background-color: #474747; + } + .header-wrapper-white { + color: #000; + background-color: #f3f3f3; + } + .editor-fullscreen { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100000; + } + + .sp-cube-wrapper { + position: absolute; + left:50%; + top:50%; + -webkit-animation: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 4; + border-radius: 4px; + } + .sp-cube { + transform: scale(.3); + } + .sp-cube * { + position: absolute; + width: 96px; + height: 96px; + box-sizing: border-box; + } + .sp-cube .sp-sides * { + border: 10px solid #757678; + border-radius: 8px; + } + .sp-cube .sp-sides { + -webkit-animation: sp-cube-rotate 2s linear infinite; + animation: sp-cube-rotate 2s linear infinite; + animation-fill-mode: forwards; + transform-style: preserve-3d; + } + @-webkit-keyframes sp-cube-rotate { + from { + -webkit-transform: rotateX(-25.5deg) rotateY(45deg); + transform: rotateX(-25.5deg) rotateY(45deg); + } + to { + -webkit-transform: rotateX(-25.5deg) rotateY(405deg); + transform: rotateX(-25.5deg) rotateY(405deg); + } + } + .sp-cube .sp-sides .sp-top { + transform: rotateX(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-right { + transform: rotateY(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-bottom { + transform: rotateX(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-left { + transform: rotateY(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-front { + transform: rotateY(0deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-back { + transform: rotateY(-180deg) translateZ(44px); + transform-origin: 50% 50%; + } +} \ No newline at end of file diff --git a/src/components/formFields/code/index.tsx b/src/components/formFields/code/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..5ee7afa82e4d389c54f0a4b6186fbd17347835db --- /dev/null +++ b/src/components/formFields/code/index.tsx @@ -0,0 +1,111 @@ +import React from 'react' +import { Tooltip, Space } from 'antd' +import { CodeField } from 'ccms' +import { FullscreenOutlined, FullscreenExitOutlined, UndoOutlined } from '@ant-design/icons' +import Editor, { loader } from '@monaco-editor/react' +import { ICodeFieldContainer, ICodeField } from 'ccms/dist/src/components/formFields/code' +import styles from './index.less' + +loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1/min/vs' } }) +declare global { + interface Window { + define: unknown + codeEditorDefine: unknown + } +} +export default class CodeFieldComponent extends CodeField { + state= { + fullScreenStatus: false + } + editorInstance: any + + componentWillUnmount () { + window.codeEditorDefine = window.define + window.define = undefined + } + handleEditorbeforeMount = () => { + if (window.codeEditorDefine) window.define = window.codeEditorDefine + } + + handleEditorDidMount = (editor, monaco) => { + this.editorInstance = editor + this.editorInstance.defaultCodeValue = editor.getValue() + } + + renderContainer = (props: ICodeFieldContainer) => { + const { + fullScreen, + fullScreenStatus, + theme, + children, + onResetValue, + keydownCallback, + enterFull, + exitFull + } = props + + return ( +
+
{ keydownCallback(e) }}> +
+ + ele.parentElement || document.body}> + { onResetValue(this.editorInstance.defaultCodeValue) } }/> + + { fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + { exitFull() }}/> + + : null + } + { !fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + { enterFull() }}/> + + : null + } + +
+ {children} +
+
+ ) + } + + renderComponent = (props: ICodeField) => { + const { + value, + codeType, + fullScreenStatus, + theme, + height, + onChange + } = props + + const editorTheme = theme === 'white' ? 'light' : 'vs-dark' + const editorExpectValue = Object.prototype.toString.call(value) === '[object Object]' ? '' : value + return ( + +
+
+
+ } + height= { fullScreenStatus ? document.body.clientHeight : Number(height) } + theme={editorTheme} + defaultLanguage={codeType} + language={codeType} + value={ editorExpectValue } + onMount={this.handleEditorDidMount} + beforeMount = {this.handleEditorbeforeMount} + onChange={ (v) => { + if (v === undefined) { + v = '' + } + onChange(v) + }} + /> + ) + } +} diff --git a/src/components/formFields/diffCode/index.less b/src/components/formFields/diffCode/index.less new file mode 100644 index 0000000000000000000000000000000000000000..22bb5650f18fa0574e973469e2768e44b4365abb --- /dev/null +++ b/src/components/formFields/diffCode/index.less @@ -0,0 +1,88 @@ +.editor-page { + .header-wrapper { + padding: 5px 20px 5px 0; + text-align: right; + } + .header-wrapper-black { + color: #fff; + background-color: #474747; + } + .header-wrapper-white { + color: #000; + background-color: #f3f3f3; + } + .editor-fullscreen { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100000; + } + .sp-cube-wrapper { + position: absolute; + left:50%; + top:50%; + -webkit-animation: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 4; + border-radius: 4px; + } + .sp-cube { + transform: scale(.3); + } + .sp-cube * { + position: absolute; + width: 96px; + height: 96px; + box-sizing: border-box; + } + .sp-cube .sp-sides * { + border: 10px solid #757678; + border-radius: 8px; + } + .sp-cube .sp-sides { + -webkit-animation: sp-cube-rotate 2s linear infinite; + animation: sp-cube-rotate 2s linear infinite; + animation-fill-mode: forwards; + transform-style: preserve-3d; + } + @-webkit-keyframes sp-cube-rotate { + from { + -webkit-transform: rotateX(-25.5deg) rotateY(45deg); + transform: rotateX(-25.5deg) rotateY(45deg); + } + to { + -webkit-transform: rotateX(-25.5deg) rotateY(405deg); + transform: rotateX(-25.5deg) rotateY(405deg); + } + } + .sp-cube .sp-sides .sp-top { + transform: rotateX(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-right { + transform: rotateY(90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-bottom { + transform: rotateX(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-left { + transform: rotateY(-90deg) translateZ(44px); + transform-origin: 50% 50%; + } + + .sp-cube .sp-sides .sp-front { + transform: rotateY(0deg) translateZ(44px); + transform-origin: 50% 50%; + } + .sp-cube .sp-sides .sp-back { + transform: rotateY(-180deg) translateZ(44px); + transform-origin: 50% 50%; + } +} \ No newline at end of file diff --git a/src/components/formFields/diffCode/index.tsx b/src/components/formFields/diffCode/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d183947ef58a45e808e01742393288a20f481d8c --- /dev/null +++ b/src/components/formFields/diffCode/index.tsx @@ -0,0 +1,97 @@ +import React from 'react' +import { Tooltip, Space } from 'antd' +import { DiffCodeField } from 'ccms' +import { FullscreenOutlined, FullscreenExitOutlined, UndoOutlined } from '@ant-design/icons' +import { loader, DiffEditor } from '@monaco-editor/react' +import { IDiffCodeFieldContainer, IDiffCodeField } from 'ccms/dist/src/components/formFields/diffCode' +import styles from './index.less' + +loader.config({ paths: { vs: 'https://storage.360buyimg.com/swm-plus/monaco-editor-0.28.1/min/vs' } }) +declare global { + interface Window { + define: unknown + diffCodeEditorDefine: unknown + } +} + +export default class DiffCodeFieldComponent extends DiffCodeField { + state= { + fullScreenStatus: false + } + + componentWillUnmount () { + window.diffCodeEditorDefine = window.define + window.define = undefined + } + + handleEditorbeforeMount = () => { + if (window.diffCodeEditorDefine) window.define = window.diffCodeEditorDefine + } + + renderContainer = (props: IDiffCodeFieldContainer) => { + const { + fullScreen, + fullScreenStatus, + theme, + children, + keydownCallback, + enterFull, + exitFull + } = props + + return ( +
+
{ keydownCallback(e) }}> +
+ + { fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + { exitFull() }}/> + + : null + } + { !fullScreenStatus && fullScreen + ? ele.parentElement || document.body}> + { enterFull() }}/> + + : null + } + +
+ {children} +
+
+ ) + } + + renderComponent = (props: IDiffCodeField) => { + const { + codeType, + fullScreenStatus, + theme, + height, + originalCode, + modifiedCode + } = props + + const editorTheme = theme === 'white' ? 'light' : 'vs-dark' + + return ( + +
+
+
+ } + height= { fullScreenStatus ? document.body.clientHeight : Number(height) } + theme={editorTheme} + language={codeType} + original={originalCode} + modified={modifiedCode} + options={{readOnly: true}} + beforeMount = {this.handleEditorbeforeMount} + /> + ) + } +} diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx index c756b3cac3822dfe9b7bded71cef924fd5119029..5a848cc063c57d6ce99e0531e28c924b01a46a6c 100644 --- a/src/components/formFields/index.tsx +++ b/src/components/formFields/index.tsx @@ -20,6 +20,8 @@ import MultipleTextField from './multipleText' import CustomField from './custom' import ImportSubformField from './importSubform' import AnyField from './any' +import CodeField from './code' +import DiffCodeField from './diffCode' import TextDisplayComponent from './text/display' import LongTextDisplayComponent from './longtext/display' @@ -55,7 +57,9 @@ export default { multiple_text: MultipleTextField, custom: CustomField, import_subform: ImportSubformField, - any: AnyField + any: AnyField, + code: CodeField, + diffcode: DiffCodeField } export const display = { diff --git a/src/components/tableColumns/custom/index.tsx b/src/components/tableColumns/custom/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..350f10fd9103544fde3b7f23400122316dbd1678 --- /dev/null +++ b/src/components/tableColumns/custom/index.tsx @@ -0,0 +1,4 @@ +import { CustomColumn } from 'ccms' + +export default class CustomColumnComponent extends CustomColumn { +} diff --git a/src/components/tableColumns/index.tsx b/src/components/tableColumns/index.tsx index 1afffa951d9ef1035da7f8fa2aa2d2417e944f9e..7f8b9428cf14d92cedd43c02a9cf520b9a7c026d 100644 --- a/src/components/tableColumns/index.tsx +++ b/src/components/tableColumns/index.tsx @@ -6,6 +6,7 @@ import NumberRangeColumn from './numberRange' import MultirowColumn from './multirowText' import EnumColumn from './enum' import ImageColumn from './image' +import CustomColumn from './custom' export default { text: TextColumns, @@ -15,5 +16,6 @@ export default { numberRange: NumberRangeColumn, multirowText: MultirowColumn, Aenum: EnumColumn, - image: ImageColumn + image: ImageColumn, + custom: CustomColumn }