Merge pull request #171 from ant-design/update-history

Update history
ant-design · Nov 20, 2019 · a8c7068 · a8c7068
2 parents 64d0d4f + 259a074
commit a8c7068
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 113 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "landing",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "title": "Landing Pages",
   "description": "site of Landing Pages",
   "homepage": "http://landing.ant.design/",

diff --git a/site/edit/en-US.js b/site/edit/en-US.js
@@ -123,7 +123,7 @@ module.exports = {
     'app.login.title': 'This page is locked. Please enter your password.',
     'app.login.noPassword': 'If you don\'t know the password, please delete current page or create a new page',
     'app.login.new': 'New Page',
-    'app.layout.notification.title': '3.0 Release Notes',
-    'app.layout.notification.content': '3.0 has been officially released. As we have made some adjustments to some templates, if your previously edited templates can not be displayed, please re-edit the new page.',
+    'app.layout.notification.title': 'Editor update description',
+    'app.layout.notification.content': 'In order to improve the performance and experience of editing, the style editing is currently triggered by pressing enter or leaving the input box.',
   },
 };
diff --git a/site/edit/template/components/ListComponents/EditorComp.jsx b/site/edit/template/components/ListComponents/EditorComp.jsx
@@ -20,7 +20,7 @@ let funcData = {};
 const { ClassName, State, Layout, Font, BackGround, Border, Interface, Margin, Shadow, Transition } = EditorList;
 class EditorComp extends React.Component {
   onChange = (cb) => {
-    const { cssName, currentEditCssString } = cb;
+    const { cssName, currentEditCssString, isDrag } = cb;
     const { currentEditData, dispatch, templateData } = this.props;
     const { id } = currentEditData;
     const ids = id.split('-');
@@ -43,6 +43,7 @@ class EditorComp extends React.Component {
     };
     newTemplateData.data.style = (newTemplateData.data.style || []).filter(c => c.id !== cb.id);
     newTemplateData.data.style.push(data);
+    newTemplateData.noHistory = isDrag;
     dispatch(actions.setTemplateData(newTemplateData));
   }
 

diff --git a/site/edit/template/components/NavController/HistoryButton.jsx b/site/edit/template/components/NavController/HistoryButton.jsx
@@ -3,39 +3,33 @@ import { Tooltip, Icon } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
-
-import { objectEqual } from '../../../../utils';
-import { getHistory, getCurrentData } from '../../../../shared/localStorage';
+import { mapStateToProps } from '../../../../shared/utils';
 import * as actions from '../../../../shared/redux/actions';
 
 class HistoryButton extends React.Component {
-  getCurrentDataIndex = (data) => {
-    return data.findIndex((item) => {
-      return objectEqual(item, getCurrentData());
-    });
-  }
+  currentHistory = 0;
 
   onHistoryClick = (num, e) => {
     if (e) {
       e.target.focus();
     }
-
-    const history = getHistory();
-    const current = this.getCurrentDataIndex(history);
-    if ((!current && num === -1) || (current >= history.length - 1 && num === 1)) {
+    const { currentEditData, dispatch, historyEdit: { num: historyNum, history } } = this.props;
+    const { reRect } = currentEditData || {};
+    let currentHistory = historyNum;
+    currentHistory -= num;
+    if ((!currentHistory && num === -1) || (currentHistory >= history.length - 1 && num === 1)) {
       return;
     }
-    const currentData = history[current + num];
-
-    const { reRect, dispatch } = this.props;
+    dispatch(actions.setCurrentHistoryNum(currentHistory));
+    const currentData = history[currentHistory];
 
     dispatch(actions.setTemplateData({
       data: currentData.attributes,
       uid: currentData.id,
-      date: currentData.date,
       noHistory: 'handle',
     }));
 
+
     if (reRect) {
       reRect();
     }
@@ -62,16 +56,14 @@ class HistoryButton extends React.Component {
   }
 
   render() {
-    const history = getHistory();
-    const undoBool = history.length > 1 && this.getCurrentDataIndex(history) > 0;
+    const { historyEdit: { num: currentHistory, history } } = this.props;
+
     const undoClassName = classnames('undo', {
-      disabled: !undoBool,
+      disabled: currentHistory >= history.length - 1,
     });
-    const redoBool = history.length > 1 && history.length - 1 - this.getCurrentDataIndex(history) > 0;
     const redoClassName = classnames('redo', {
-      disabled: !redoBool,
+      disabled: !currentHistory,
     });
-
     return (
       <ul className="history-button-wrapper">
         <li className={undoClassName}>
@@ -89,4 +81,4 @@ class HistoryButton extends React.Component {
   }
 }
 
-export default connect()(HistoryButton);
+export default connect(mapStateToProps)(HistoryButton);
diff --git a/site/edit/template/components/NavController/index.jsx b/site/edit/template/components/NavController/index.jsx
@@ -161,7 +161,6 @@ class NavController extends React.PureComponent {
   }
 
   render() {
-    const { currentEditData } = this.props;
     const { saveLoad, downloadLoad, publishLoad, code, codeModalShow, publishModalShow } = this.state;
     const menuChild = [
       {
@@ -220,7 +219,6 @@ class NavController extends React.PureComponent {
         </li>
       );
     });
-
     return (
       <div className={this.props.className}>
         <a href={getNewHref('7111', null, true)}>
@@ -235,10 +233,7 @@ class NavController extends React.PureComponent {
           {menuChild}
         </ul>
         <NewFileButton />
-        <HistoryButton
-          templateData={this.props.templateData}
-          reRect={currentEditData ? currentEditData.reRect : null}
-        />
+        <HistoryButton />
         <Modal
           title={<FormattedMessage id="app.header.edit-data.header" />}
           visible={codeModalShow}

diff --git a/site/edit/template/layout.jsx b/site/edit/template/layout.jsx
@@ -31,16 +31,20 @@ class Layout extends React.PureComponent {
   }
 
   componentDidMount() {
-    notification.open({
-      placement: 'bottomRight',
-      duration: null,
-      message: this.props.intl.formatMessage({ id: 'app.layout.notification.title' }),
-      description: (
-        <div>
-          {this.props.intl.formatMessage({ id: 'app.layout.notification.content' })}
-        </div>
-      ),
-    });
+    const date = new Date();
+    const endDate = new Date('2019/11/29 23:59:59');
+    if (endDate.getTime() - date.getTime() > 0) {
+      notification.open({
+        placement: 'bottomRight',
+        duration: 10000,
+        message: this.props.intl.formatMessage({ id: 'app.layout.notification.title' }),
+        description: (
+          <div>
+            {this.props.intl.formatMessage({ id: 'app.layout.notification.content' })}
+          </div>
+        ),
+      });
+    }
   }
 
   componentDidUpdate() {

diff --git a/site/edit/zh-CN.js b/site/edit/zh-CN.js
@@ -124,7 +124,7 @@ module.exports = {
     'app.login.title': '此页面已加锁，请输入密码。',
     'app.login.noPassword': '不知道密码请删除当前面页或新建',
     'app.login.new': '新建页面',
-    'app.layout.notification.title': '3.0 发布说明',
-    'app.layout.notification.content': '3.0 已正式发布，由于我们对有些模板做了调整，如果你以前编辑的模板不能显示，请新建页面重新编辑。',
+    'app.layout.notification.title': '编辑器功能更新说明',
+    'app.layout.notification.content': '为提高编辑时的性能与体验，目前将样式编辑调整为按回车或离开输入框才触发。',
   },
 };
diff --git a/site/shared/localStorage.js b/site/shared/localStorage.js
@@ -1,10 +1,5 @@
 import store from 'store';
 
-import { objectEqual } from '../utils';
-
-export const LOCAL_STORAGE_HISTORY_KEY = 'ant-design-landing-record';
-export const LOCAL_STORAGE_CURRENT_DATA_KEY = 'ant-design-landing-current';
-
 /**
  * Auth
  */
@@ -55,46 +50,3 @@ export function saveTemplate(template) {
 export function removeTemplate(tid) {
   store.remove(tid);
 }
-
-
-/**
- * History
- */
-
-export const getHistory = () => store.get(LOCAL_STORAGE_HISTORY_KEY, []);
-
-// TODO: why 30?
-export const pushToHistory = (data) => {
-  const history = getHistory();
-  if (history.length >= 15) {
-    history.shift();
-  }
-  history.push(data);
-
-  store.set(LOCAL_STORAGE_HISTORY_KEY, history);
-};
-
-export const removeHistoryAfter = (data) => {
-  const history = getHistory();
-
-  const index = history.findIndex(c => objectEqual(c, data));
-  if (index === -1) {
-    return;
-  }
-
-  store.set(LOCAL_STORAGE_HISTORY_KEY, history.slice(0, index + 1));
-};
-
-export const resetHistory = () => {
-  store.set(LOCAL_STORAGE_HISTORY_KEY, []);
-};
-
-/**
- * CurrentData
- */
-
-export const saveCurrentData = (data) => {
-  store.set(LOCAL_STORAGE_CURRENT_DATA_KEY, data);
-};
-
-export const getCurrentData = () => store.get(LOCAL_STORAGE_CURRENT_DATA_KEY, {});
diff --git a/site/shared/redux/actionTypes.js b/site/shared/redux/actionTypes.js
@@ -3,6 +3,7 @@ export const CREATE_NEW_TEMPLATE = '[landing] CREATE_NEW_TEMPLATE';
 export const SET_TEMPLATE_DATA = '[landing] SET_TEMPLATE_DATA';
 export const CHANGE_CHILD = '[landing] CHANGE_CHILD';
 export const SET_USER_AND_TEMPLATE_DATA = '[landing] SET_USER_AND_TEMPLATE_DATA';
+export const UPDATE_HISTORY = '[landing] UPDATE_HISTORY';
 
 export const POST_TYPE = {
   POST_DEFAULT: '[landing] default',
@@ -13,5 +14,8 @@ export const POST_TYPE = {
   SET_EDIT: '[landing] setEdit',
   SET_MEDIA: '[landing] setMedia',
   SET_USER: '[landing] setUser',
+  SET_HISTORY_NUM: '[landing] setHistoryNum',
+  UPDATE_HISTORY_RE_NUM: '[landing] updateHistoryReNum',
+  SAVE_HISTORY: '[landing] saveHistory',
   SET_USERTEMPLATE: '[landing] setUserTemplate',
 };
diff --git a/site/shared/redux/actions.js b/site/shared/redux/actions.js
@@ -47,3 +47,18 @@ export const setUserData = (data) => {
     data,
   };
 };
+
+// 记录 history 步数;
+export const setCurrentHistoryNum = (data) => {
+  return {
+    type: POST_TYPE.SET_HISTORY_NUM,
+    data,
+  };
+};
+// 删除之前，保存当前的
+export const updateHistoryReNum = (data) => {
+  return {
+    type: POST_TYPE.UPDATE_HISTORY_RE_NUM,
+    data,
+  };
+};
diff --git a/site/shared/redux/reducers/historyEdit.js b/site/shared/redux/reducers/historyEdit.js
@@ -0,0 +1,24 @@
+import { POST_TYPE } from '../actionTypes';
+
+export default function historyEdit(state, action) {
+  switch (action.type) {
+    case POST_TYPE.SET_HISTORY_NUM:
+      console.log('num', action.data);
+      return {
+        ...state,
+        num: action.data,
+      };
+    case POST_TYPE.UPDATE_HISTORY_RE_NUM:
+      return {
+        num: 0,
+        history: (state.num
+          ? [action.data, ...state.history.filter((c, i) => i >= state.num && c)]
+          : [action.data, ...state.history]).filter((c, i) => i < 30 && c), // 只记录30步
+      };
+    default:
+      return state || {
+        num: 0,
+        history: [],
+      };
+  }
+}
diff --git a/site/shared/redux/reducers/index.js b/site/shared/redux/reducers/index.js
@@ -3,12 +3,14 @@ import templateData from './templateData';
 import currentEditData from './currentEditData';
 import mediaStateSelect from './mediaStateSelect';
 import userIsLogin from './userIsLogin';
+import historyEdit from './historyEdit';
 
 const reducer = combineReducers({
   templateData,
   currentEditData,
   mediaStateSelect,
   userIsLogin,
+  historyEdit,
 });
 
 export default reducer;