From fc2aff16e4cd3408cc0c128d74d27bf035c14020 Mon Sep 17 00:00:00 2001 From: harry Date: Tue, 3 Mar 2020 21:20:13 +0800 Subject: [PATCH] fix --- public/react/src/common/SnackbarHOC.js | 2 +- .../react/src/common/components/ModalHOC.js | 116 ++++++------- public/react/src/components/test-panel.jsx | 125 ++++++++++++++ public/react/src/index.js | 7 - .../react/src/modules/comment/CommentsHOC.js | 21 +-- .../courses/common/CNotificationHOC.js | 156 +++++++++--------- .../src/modules/ecs/common/ECModalHOC.js | 112 ++++++------- .../subroute/ecCourseSupportSetting/index.js | 25 +-- .../src/modules/forums/PostPaginationHOC.js | 2 +- .../page/layers/ImageLayerOfCommentHOC.js | 48 +++--- public/react/src/modules/tpm/TPMIndexHOC.js | 4 +- 11 files changed, 347 insertions(+), 271 deletions(-) create mode 100644 public/react/src/components/test-panel.jsx diff --git a/public/react/src/common/SnackbarHOC.js b/public/react/src/common/SnackbarHOC.js index 1f55bae16..a5cc39ca3 100644 --- a/public/react/src/common/SnackbarHOC.js +++ b/public/react/src/common/SnackbarHOC.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { notification, Alert } from 'antd' -export function SnackbarHOC(options = {}) { +export default function SnackbarHOC(options = {}) { return function wrap(WrappedComponent) { return class Wrapper extends Component { constructor(props) { diff --git a/public/react/src/common/components/ModalHOC.js b/public/react/src/common/components/ModalHOC.js index e0b1519ff..c675cefa2 100644 --- a/public/react/src/common/components/ModalHOC.js +++ b/public/react/src/common/components/ModalHOC.js @@ -2,21 +2,21 @@ import React, { Component } from 'react'; import { Modal } from 'antd'; -export function ModalHOC(options = {}) { +export default function ModalHOC(options = {}) { return function wrap(WrappedComponent) { - return class Wrapper extends Component { - constructor(props) { - super(props); - - this.state = { - titlemessage: '', - Modallist: false, - Modallisttype: false, - singleButton: false - } - } - - // 全局的modal this.props.showModal 调用即可 + return class Wrapper extends Component { + constructor(props) { + super(props); + + this.state = { + titlemessage: '', + Modallist: false, + Modallisttype: false, + singleButton: false + } + } + + // 全局的modal this.props.showModal 调用即可 showModal = (title, content, okCallback) => { this.okCallback = okCallback; this.setState({ @@ -39,55 +39,55 @@ export function ModalHOC(options = {}) { onCancel = () => { this.setState({ - Modallisttype:false - }) + Modallisttype: false + }) } - hidemodeldelete = () => { + hidemodeldelete = () => { if (this.okCallback) { this.okCallback() } - + this.onCancel() - } - render() { - const { titlemessage, Modallisttype, Modallist, singleButton } = this.state; - - return ( - - -
-
{Modallist}
-
- { singleButton ?
- 知道啦 -
:
- 取消 - 确定 -
} - - - - - - ) - } - } + } + render() { + const { titlemessage, Modallisttype, Modallist, singleButton } = this.state; + + return ( + + +
+
{Modallist}
+
+ {singleButton ?
+ 知道啦 +
:
+ 取消 + 确定 +
} + + + + + + ) + } + } } } diff --git a/public/react/src/components/test-panel.jsx b/public/react/src/components/test-panel.jsx new file mode 100644 index 000000000..5f81f8380 --- /dev/null +++ b/public/react/src/components/test-panel.jsx @@ -0,0 +1,125 @@ +import React, { Fragment } from 'react'; +import { getUploadActionUrl, getUrl } from 'educoder'; +import TPMMDEditor from '../modules/tpm/challengesnew/TPMMDEditor'; +import moment from 'moment' + + +moment.defineLocale('zh-cn', { + months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), + monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), + weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'), + weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'), + weekdaysMin: '日_一_二_三_四_五_六'.split('_'), + longDateFormat: { + LT: 'Ah点mm分', + LTS: 'Ah点m分s秒', + L: 'YYYY-MM-DD', + LL: 'YYYY年MMMD日', + LLL: 'YYYY年MMMD日Ah点mm分', + LLLL: 'YYYY年MMMD日ddddAh点mm分', + l: 'YYYY-MM-DD', + ll: 'YYYY年MMMD日', + lll: 'YYYY年MMMD日Ah点mm分', + llll: 'YYYY年MMMD日ddddAh点mm分' + }, + meridiemParse: /凌晨|早上|上午|中午|下午|晚上/, + meridiemHour: function (hour, meridiem) { + if (hour === 12) { + hour = 0; + } + if (meridiem === '凌晨' || meridiem === '早上' || + meridiem === '上午') { + return hour; + } else if (meridiem === '下午' || meridiem === '晚上') { + return hour + 12; + } else { + // '中午' + return hour >= 11 ? hour : hour + 12; + } + }, + meridiem: function (hour, minute, isLower) { + var hm = hour * 100 + minute; + if (hm < 600) { + return '凌晨'; + } else if (hm < 900) { + return '早上'; + } else if (hm < 1130) { + return '上午'; + } else if (hm < 1230) { + return '中午'; + } else if (hm < 1800) { + return '下午'; + } else { + return '晚上'; + } + }, + calendar: { + sameDay: function () { + return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT'; + }, + nextDay: function () { + return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT'; + }, + lastDay: function () { + return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT'; + }, + nextWeek: function () { + var startOfWeek, prefix; + startOfWeek = moment().startOf('week'); + prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]'; + return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm'; + }, + lastWeek: function () { + var startOfWeek, prefix; + startOfWeek = moment().startOf('week'); + prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]'; + return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm'; + }, + sameElse: 'LL' + }, + ordinalParse: /\d{1,2}(日|月|周)/, + ordinal: function (number, period) { + switch (period) { + case 'd': + case 'D': + case 'DDD': + return number + '日'; + case 'M': + return number + '月'; + case 'w': + case 'W': + return number + '周'; + default: + return number; + } + }, + relativeTime: { + future: '%s内', + past: '%s前', + s: '几秒', + m: '1分钟', + mm: '%d分钟', + h: '1小时', + hh: '%d小时', + d: '1天', + dd: '%d天', + M: '1个月', + MM: '%d个月', + y: '1年', + yy: '%d年' + }, + week: { + // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效 + dow: 1, // Monday is the first day of the week. + doy: 4 // The week that contains Jan 4th is the first week of the year. + } +}); +export default () => { + return ( + +

{getUrl()}

+

{getUploadActionUrl()}

+ + + ) +} \ No newline at end of file diff --git a/public/react/src/index.js b/public/react/src/index.js index e85ffdbd1..18c11c03f 100644 --- a/public/react/src/index.js +++ b/public/react/src/index.js @@ -4,14 +4,7 @@ import './index.css' import App from './App' import * as serviceWorker from './serviceWorker' -import { configureUrlQuery } from 'react-url-query' - -import history from './history' - -// link the history used in our app to url-query so it can update the URL with it. -configureUrlQuery({ history }) window.__useKindEditor = false; - ReactDOM.render(, document.getElementById('root')) // If you want your app to work offline and load faster, you can change diff --git a/public/react/src/modules/comment/CommentsHOC.js b/public/react/src/modules/comment/CommentsHOC.js index f3eb716ec..f434de921 100644 --- a/public/react/src/modules/comment/CommentsHOC.js +++ b/public/react/src/modules/comment/CommentsHOC.js @@ -23,7 +23,7 @@ const $ = window.$ 这里提供props给WrappedComponent，用于封装特定的state和功能（评论列表） 不要直接使用this.xxx调用WrappedComponent内的方法，尽量避免互相依赖，封装好后供不同场景使用（tpi、tpm） */ -export function commentHOC(WrappedComponent) { +export default function commentHOC(WrappedComponent) { // 这里如果extends WrappedComponent 会出现 WrappedComponent mount twice的问题 return class II extends React.Component { constructor(props) { @@ -604,21 +604,4 @@ export function commentHOC(WrappedComponent) { ) } } -} -/* -
-

- HOC Debugger Component -

-

- Props -

- 
{stringify(this.props)}
-

- State -

- 
{stringify(this.state)}
- {super.render()} -
- -*/ \ No newline at end of file +} \ No newline at end of file diff --git a/public/react/src/modules/courses/common/CNotificationHOC.js b/public/react/src/modules/courses/common/CNotificationHOC.js index a0374f75b..39e5093df 100644 --- a/public/react/src/modules/courses/common/CNotificationHOC.js +++ b/public/react/src/modules/courses/common/CNotificationHOC.js @@ -2,23 +2,23 @@ import React, { Component } from 'react'; import { notification } from 'antd' import Modals from '../../modals/Modals' -export function CNotificationHOC(options = {}) { - return function wrap(WrappedComponent) { +export default function CNotificationHOC(options = {}) { + return function wrap(WrappedComponent) { return class Wrapper extends Component { constructor(props) { super(props); - + notification.config({ duration: 3, }); this.state = { dialogOpen: false, - defineOpen:false + defineOpen: false } } - - showNotification = (description, message = "提示", icon) => { + + showNotification = (description, message = "提示", icon) => { // const data = { // message, // description @@ -28,22 +28,22 @@ export function CNotificationHOC(options = {}) { // } // notification.open(data); - notification.open({ - message:message, - description: description, - style: { - zIndex: 99999999 - }, - }); + notification.open({ + message: message, + description: description, + style: { + zIndex: 99999999 + }, + }); } - bytesToSize = (bytes) => { - if (bytes === 0) return '0 B'; - let k = 1024, - sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], - i = Math.floor(Math.log(bytes) / Math.log(k)); - return (bytes / Math.pow(k, i)). toFixed(2) + ' ' + sizes[i]; - } + bytesToSize = (bytes) => { + if (bytes === 0) return '0 B'; + let k = 1024, + sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], + i = Math.floor(Math.log(bytes) / Math.log(k)); + return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]; + } configNotification = (placement) => { placement && notification.config({ @@ -51,19 +51,19 @@ export function CNotificationHOC(options = {}) { }); } - getNowFormatDates=(val,type)=>{ + getNowFormatDates = (val, type) => { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; - var month ; - var setnum=0; - if(val===1){ - month= date.getMonth() + 1; - }else if(val===2){ - month= date.getMonth() + 2; - }else{ - month= date.getMonth() + 3; + var month; + var setnum = 0; + if (val === 1) { + month = date.getMonth() + 1; + } else if (val === 2) { + month = date.getMonth() + 2; + } else { + month = date.getMonth() + 3; } var strDate = date.getDate(); if (month >= 1 && month <= 9) { @@ -73,29 +73,29 @@ export function CNotificationHOC(options = {}) { strDate = "0" + strDate; } - var min=date.getMinutes(); - if(val===1){ + var min = date.getMinutes(); + if (val === 1) { if (min >= 0 && min <= 9) { min = "0" + min; } - }else{ + } else { if (min >= 0) { min = "00"; - setnum=1; + setnum = 1; } } - let hour=date.getHours()+ setnum; + let hour = date.getHours() + setnum; var currentdate; - if(type===1){ - currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate+ " " + "00" + seperator2 + "00"; - }else{ - if(val===1){ - currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate+ " " + date.getHours() + seperator2 + min; - }else{ - currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate+ " " + hour + seperator2 + min; + if (type === 1) { + currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + "00" + seperator2 + "00"; + } else { + if (val === 1) { + currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + min; + } else { + currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + hour + seperator2 + min; } } @@ -106,11 +106,11 @@ export function CNotificationHOC(options = {}) { confirm = (object) => { - const { title, content,subContent, onOk, onCancel, okText } = object; + const { title, content, subContent, onOk, onCancel, okText } = object; this.onCancel = onCancel this.onOk = onOk this.okText = okText || '确定' - this.setState({ title, content , subContent , dialogOpen: true }) + this.setState({ title, content, subContent, dialogOpen: true }) } onDialogOkBtnClick = () => { this.onOk && this.onOk(); @@ -129,11 +129,11 @@ export function CNotificationHOC(options = {}) { } // 附件太大提示框 - define = (object) =>{ + define = (object) => { const { title, content } = object; - this.setState({ title, content, defineOpen: true }) + this.setState({ title, content, defineOpen: true }) } - onDialogdefineOkBtnClick = () =>{ + onDialogdefineOkBtnClick = () => { this.onCancel && this.onCancel(); this.setState({ defineOpen: false }) @@ -141,9 +141,9 @@ export function CNotificationHOC(options = {}) { this.onOk = null } render() { - const { snackbarOpen, snackbarText, snackbarHorizontal, snackbarVertical, dialogOpen, content ,subContent ,defineOpen } = this.state; + const { snackbarOpen, snackbarText, snackbarHorizontal, snackbarVertical, dialogOpen, content, subContent, defineOpen } = this.state; + - return ( - - - - this.getNowFormatDates(value,type)} - configNotification={ this.configNotification } - confirm={ this.confirm } - define={ this.define } + className="confirmModal" + modalsType={dialogOpen} + modalsTopval={ + content + } + modalsBottomval={subContent || ""} + modalCancel={this.handleDialogClose} + modalSave={this.onDialogOkBtnClick} + okText={this.okText} + > + + + + this.getNowFormatDates(value, type)} + configNotification={this.configNotification} + confirm={this.confirm} + define={this.define} > ) } } - } + } } \ No newline at end of file diff --git a/public/react/src/modules/ecs/common/ECModalHOC.js b/public/react/src/modules/ecs/common/ECModalHOC.js index 650c10cbe..b8474d215 100644 --- a/public/react/src/modules/ecs/common/ECModalHOC.js +++ b/public/react/src/modules/ecs/common/ECModalHOC.js @@ -2,21 +2,21 @@ import React, { Component } from 'react'; import { Modal } from 'antd'; -export function ECModalHOC(options = {}) { +export default function ECModalHOC(options = {}) { return function wrap(WrappedComponent) { - return class Wrapper extends Component { - constructor(props) { - super(props); - - this.state = { - titlemessage: '', - Modallist: false, - Modallisttype: false, - singleButton: false - } - } + return class Wrapper extends Component { + constructor(props) { + super(props); - // 全局的modal this.props.showModal 调用即可 + this.state = { + titlemessage: '', + Modallist: false, + Modallisttype: false, + singleButton: false + } + } + + // 全局的modal this.props.showModal 调用即可 showModal = (title, content, okCallback) => { this.okCallback = okCallback; this.setState({ @@ -39,53 +39,53 @@ export function ECModalHOC(options = {}) { onCancel = () => { this.setState({ - Modallisttype:false - }) + Modallisttype: false + }) } - hidemodeldelete = () => { + hidemodeldelete = () => { if (this.okCallback) { this.okCallback() } - + this.onCancel() - } - render() { - const { titlemessage, Modallisttype, Modallist, singleButton } = this.state; - - return ( - - -
-
{Modallist}
-
- { singleButton ?
- 知道啦 -
:
- 取消 - 确定 -
} - - - - - - ) - } - } + } + render() { + const { titlemessage, Modallisttype, Modallist, singleButton } = this.state; + + return ( + + +
+
{Modallist}
+
+ {singleButton ?
+ 知道啦 +
:
+ 取消 + 确定 +
} + + + + + + ) + } + } } } \ No newline at end of file diff --git a/public/react/src/modules/ecs/subroute/ecCourseSupportSetting/index.js b/public/react/src/modules/ecs/subroute/ecCourseSupportSetting/index.js index 964cc66a8..e3fd8e243 100644 --- a/public/react/src/modules/ecs/subroute/ecCourseSupportSetting/index.js +++ b/public/react/src/modules/ecs/subroute/ecCourseSupportSetting/index.js @@ -1,33 +1,14 @@ import React, { Component } from 'react'; -import moment from 'moment' - import EditableCourseSupportSetting from './EditableCourseSupportSetting' import ShowTableCourseSupportSetting from './ShowTableCourseSupportSetting' -import { Form, Input, Icon, Button, Select } from 'antd'; - -// import EcTitleCourseEvaluations from '../ecTitle/ecTitle' -import { SnackbarHOC, getUrl } from 'educoder' +import { SnackbarHOC } from 'educoder' import axios from 'axios' import 'antd/dist/antd.css'; -// import '../css/ecCourseEvaluations.css' import './style.less' import { ECModalHOC } from '../../common/ECModalHOC' -const { Option } = Select; - -// TODO 公共方法 或 抽取到顶层组件 -let _url_origin = getUrl() -const $ = window.$ -// https://www.educoder.net/stylesheets/educoder/edu-all.css?1546618720 -// if (!window['EcCourseSupportSettingLoaded']) { -// $('head').append( $('') -// .attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?1525440977`) ); -// window['EcCourseSupportSettingLoaded'] = true -// } - - class EcCourseSupportSetting extends Component { constructor(props) { @@ -152,10 +133,6 @@ class EcCourseSupportSetting extends Component { console.log(error); }); - - // test data - // this.setState({ ...fake_data }) - } getNavigationData = (ec_course_id) => { return; diff --git a/public/react/src/modules/forums/PostPaginationHOC.js b/public/react/src/modules/forums/PostPaginationHOC.js index d212b51d7..3ee0537f3 100644 --- a/public/react/src/modules/forums/PostPaginationHOC.js +++ b/public/react/src/modules/forums/PostPaginationHOC.js @@ -22,7 +22,7 @@ function urlStringify(params) { paramsUrl = paramsUrl.substring(0, paramsUrl.length - 1); return paramsUrl; } -export function postPaginationHOC(options = {}) { +export default function postPaginationHOC(options = {}) { // options.isMyPublish return function wrap(WrappedComponent) { diff --git a/public/react/src/modules/page/layers/ImageLayerOfCommentHOC.js b/public/react/src/modules/page/layers/ImageLayerOfCommentHOC.js index bb55fa6c3..eb0d3aec2 100644 --- a/public/react/src/modules/page/layers/ImageLayerOfCommentHOC.js +++ b/public/react/src/modules/page/layers/ImageLayerOfCommentHOC.js @@ -2,13 +2,13 @@ import React, { Component } from 'react'; import ImageLayer from './ImageLayer' import { isImageExtension } from 'educoder' const $ = window.$; -export function ImageLayerOfCommentHOC(options = {}) { - return function wrap(WrappedComponent) { +export default function ImageLayerOfCommentHOC(options = {}) { + return function wrap(WrappedComponent) { return class Wrapper extends Component { constructor(props) { super(props); - - + + this.state = { showImage: false, imageSrc: '' @@ -21,8 +21,8 @@ export function ImageLayerOfCommentHOC(options = {}) { const fileName = event.target.innerHTML.trim() if (isImageExtension(imageSrc.trim()) || isImageExtension(fileName) || event.target.tagName == 'IMG') { // 非回复里的头像图片; 非emoticons - if (imageSrc.indexOf('/images/avatars/User') === -1 && - imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) { + if (imageSrc.indexOf('/images/avatars/User') === -1 && + imageSrc.indexOf('kindeditor/plugins/emoticons') === -1) { this.setState({ showImage: true, imageSrc, @@ -38,20 +38,20 @@ export function ImageLayerOfCommentHOC(options = {}) { } // jQuery._data( $('.newMain')[0], "events" ) - componentDidMount() { + componentDidMount() { this.props.wrappedComponentRef && this.props.wrappedComponentRef(this.refs['wrappedComponentRef']) // commentsDelegateParent #game_left_contents #tab_con_4 setTimeout(() => { $(options.parentSelector || ".commentsDelegateParent") - .delegate(options.imgSelector || ".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img","click", this.onDelegateClick); + .delegate(options.imgSelector || ".J_Comment_Reply .comment_content img, .J_Comment_Reply .childrenCommentsView img", "click", this.onDelegateClick); }, 1200) } componentWillUnmount() { $(options.parentSelector || ".commentsDelegateParent", 'click', this.onDelegateClick) } - + onImageLayerClose = () => { this.setState({ showImage: false, @@ -59,23 +59,23 @@ export function ImageLayerOfCommentHOC(options = {}) { }) } - MdifHasAnchorJustScorll=()=>{ - //mdhash滚动 - let anchor = decodeURI(this.props.location.hash).replace('#', ''); - // 对应id的话, 滚动到相应位置 - if (!!anchor) { - let anchorElement = document.getElementsByName(anchor); - if (anchorElement) { - if (anchorElement.length!=0) { - anchorElement[anchorElement.length-1].scrollIntoView(); - } - } - } - } + MdifHasAnchorJustScorll = () => { + //mdhash滚动 + let anchor = decodeURI(this.props.location.hash).replace('#', ''); + // 对应id的话, 滚动到相应位置 + if (!!anchor) { + let anchorElement = document.getElementsByName(anchor); + if (anchorElement) { + if (anchorElement.length != 0) { + anchorElement[anchorElement.length - 1].scrollIntoView(); + } + } + } + } render() { - this.MdifHasAnchorJustScorll(); + this.MdifHasAnchorJustScorll(); return ( @@ -86,5 +86,5 @@ export function ImageLayerOfCommentHOC(options = {}) { ) } } - } + } } \ No newline at end of file diff --git a/public/react/src/modules/tpm/TPMIndexHOC.js b/public/react/src/modules/tpm/TPMIndexHOC.js index 56a76854d..95318673a 100644 --- a/public/react/src/modules/tpm/TPMIndexHOC.js +++ b/public/react/src/modules/tpm/TPMIndexHOC.js @@ -11,8 +11,6 @@ import LoginDialog from '../login/LoginDialog'; import AccountProfile from '../user/AccountProfile'; import AccountPhoneemail from '../user/AccountPhoneemail'; -import { broadcastChannelOnmessage } from 'educoder'; - const $ = window.$; let _url_origin = ''; @@ -37,7 +35,7 @@ if (!window['indexHOCLoaded']) { } // TODO css加载完成后再打开页面，行为和tpm其他页面一致 -export function TPMIndexHOC(WrappedComponent) { +export default function TPMIndexHOC(WrappedComponent) { // 这里如果extends WrappedComponent 会出现 WrappedComponent mount twice的问题 return class II extends React.Component { constructor(props) {