新增右键菜单功能

README.md

@@ -1,5 +1,5 @@
 # 桌面系统
-![](https://img.shields.io/badge/react_desktops-0.2.1-green.svg)
+![](https://img.shields.io/badge/react_desktops-0.3.0-green.svg)
 ![](https://img.shields.io/badge/build-passing-yellow.svg)
 ![](https://img.shields.io/badge/language-javascript-red.svg)
 ![](https://img.shields.io/badge/license-MIT-000000.svg)

config/webpack.config.dev.js

@@ -341,7 +341,7 @@ module.exports = {
   },
   plugins: [
     //打包分析
-    new BundleAnalyzerPlugin(),
+    // new BundleAnalyzerPlugin(),
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-desktops",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": true,
   "homepage": "http://desk.qqxio.cn",
   "dependencies": {
@@ -9,8 +9,8 @@
     "react-desktop": "^0.3.7"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "start": "node scripts/start.js start",
+    "build": "node scripts/start.js build",
     "test": "node scripts/test"
   },
   "eslintConfig": {
@@ -24,9 +24,9 @@
       [
         "import",
         {
-          "libraryName": "antd",
+          "libraryName": "@alifd/next",
           "libraryDirectory": "es",
-          "style": "css"
+          "style": "scss"
         }
       ]
     ]
@@ -124,14 +124,12 @@
     "react-addons-perf": "^15.4.2",
     "react-app": "^1.1.2",
     "react-app-polyfill": "^0.1.3",
-    "react-app-rewired": "^2.0.2",
     "react-dev-utils": "^6.1.1",
     "react-dom": "^16.6.3",
     "react-loadable": "^5.5.0",
     "react-redux": "^5.1.1",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "^2.1.2",
     "react-transition-group": "^2.5.0",
     "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",

src/components/menu/RightMenuWindows/RightMenuWindows.js

@@ -0,0 +1,118 @@
+import React, {Component} from 'react'
+import { Nav,Icon } from '@alifd/next'
+
+const { Item, SubNav } = Nav
+
+const NavItem = (props) => {
+  const { openWindow,refreshCurrentPage } = require("../../../windows/common/rightMenu")
+  let logo = null
+  if(props.row.logo){
+    switch (props.row.logo.type){
+      case 'point':
+        if(props.row.logo.value){
+          logo = <p/>
+        }
+        break;
+      case 'icon':
+        logo = <Icon size="xs" type={props.row.logo.value}/>
+        break;
+      case 'image':
+        logo = <img src={props.row.logo.value} alt={props.row.logo.type}/>
+        break;
+      default:
+        logo = null;
+        break;
+    }
+  }
+  return (
+    <div
+      className={props.row.line?"right_menu_windows_li right_menu_windows_line":"right_menu_windows_li"}
+      onClick={()=>{
+        props.row.func && props.row.func.type === 'openWindow' && openWindow(props.row.func.runFunctionType, props.row.func.value)
+        props.row.func && props.row.func.type === 'refresh' &&  props.row.func.runFunctionType === 'refreshCurrentPage' && refreshCurrentPage()
+      }}
+    >
+      <div className="right_menu_windows_li_img">
+        {logo}
+      </div>
+      <div>{props.row.name}</div>
+    </div>
+  )
+}
+
+
+class RightMenuWindows extends Component {
+
+  state = {
+    contextStyle:{}
+  }
+  componentDidMount(){
+    this.init_menu(this.props.contextStyle)
+  }
+  shouldComponentUpdate(newProps, newState) {
+    if(newProps.contextStyle !== this.props.contextStyle){
+      this.init_menu(newProps.contextStyle)
+    }
+
+    return true
+  }
+  render() {
+    const {
+      mainContextMenu,
+      set_context_menu
+    } = this.props
+    const {contextStyle} = this.state
+    const navStyle={
+      width: 180
+    }
+    return (
+      <div
+        className="right_menu_windows"
+        ref={node=>this.right_menu=node}
+        style={contextStyle}
+        onMouseEnter={()=>{set_context_menu(mainContextMenu,true,this.right_menu,2,true)}}
+        onMouseLeave={()=>{set_context_menu(mainContextMenu,true,this.right_menu,2,false)}}
+      >
+        <Nav style={navStyle}  mode="popup" popupAlign="follow" triggerType="hover">
+          {this.tree(mainContextMenu)}
+        </Nav>
+      </div>
+    )
+  }
+  init_menu = (style) => {
+    if(style.left + 180 > window.innerWidth){
+      style.left -=180
+    }
+    if(style.top + this.right_menu.offsetHeight > window.innerHeight - 37){
+      style.top  -=  this.right_menu.offsetHeight
+    }
+    this.setState({
+      contextStyle:style
+    })
+  }
+  tree = (data) => {
+    return data.map((row)=>{
+      if(row.children){
+        return (
+          <SubNav
+            key={row.type}
+            label={
+              <NavItem row={row}/>
+            }
+          >
+            {this.tree(row.children)}
+          </SubNav>
+        )
+      }else{
+        return (
+          <Item key={row.type} className="right_menu_windows_sub_nav">
+            <NavItem row={row}/>
+          </Item>
+        )
+      }
+    })
+  }
+}
+
+
+export default RightMenuWindows

src/components/menu/RightMenuWindows/index.js

@@ -0,0 +1,56 @@
+import React, {Component} from 'react'
+import { Animate } from '@alifd/next'
+import RightMenuWindows from "./RightMenuWindows"
+import "../../../public/style/components/menu/right_menu_windows.scss"
+
+
+class index extends Component {
+
+  state = {}
+  render() {
+    const {
+      isOpenContextMenu
+    } = this.props
+    return (
+      <Animate animation="right_menu_expand"
+               beforeEnter={this.beforeEnter}
+               onEnter={this.onEnter}
+               afterEnter={this.afterEnter}
+               beforeLeave={this.beforeLeave}
+               onLeave={this.onLeave}
+               afterLeave={this.afterLeave}>
+        {isOpenContextMenu ?
+          <RightMenuWindows {...this.props}/>
+          : null
+        }
+      </Animate>
+    )
+  }
+  beforeEnter(node) {
+    node.style.opacity = 0
+  }
+
+  onEnter(node) {
+    node.style.opacity = 1
+  }
+
+  afterEnter(node) {
+    // node.style.height = null;
+  }
+
+  beforeLeave(node) {
+    node.style.opacity = 1
+  }
+
+  onLeave(node) {
+    node.style.opacity = 0
+  }
+
+  afterLeave(node) {
+    // node.style.height = null;
+  }
+
+}
+
+
+export default index

src/public/style/components/menu/right_menu_windows.scss

@@ -0,0 +1,82 @@
+$height:24px;
+$color:#111111;
+
+.right_menu_expand-enter {
+  overflow: hidden;
+}
+
+.right_menu_expand-enter-active {
+  transition: opacity 0.3s ease-out;
+}
+
+.right_menu_expand-leave {
+  overflow: hidden;
+}
+
+.right_menu_expand-leave-active {
+  transition: opacity 0.15s ease-out;
+}
+
+@mixin item{
+  padding: 0 5px!important;
+  height: $height;
+  line-height: $height;
+  .next-menu-item-inner{
+    color:$color;
+    height: $height;
+    i{
+      color:$color;
+    }
+    .next-menu-item-text{
+      .right_menu_windows_li{
+        height: $height;
+        .right_menu_windows_li_img{
+          margin: 2px 5px 0 0;
+          width: 18px;
+          height: 18px;
+          display: block;
+          float: left;
+          line-height: 17px;
+          i{
+            margin-left: 5px;
+          }
+          p{
+            line-height: $height;
+            margin:6px auto;
+            background-color: black;
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+          }
+          img{
+            width: 18px;
+            height: 18px;
+          }
+        }
+        >div{
+          float:left;
+        }
+      }
+    }
+    .right_menu_windows_line{
+      border-bottom: 1px solid #929292;
+    }
+  }
+}
+
+.right_menu_windows{
+  z-index: 1000;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  background-color: #F2F2F2;
+  color:$color;
+  .next-menu{
+    .next-menu-item{
+      @include item;
+    }
+  }
+}
+.right_menu_windows_sub_nav{
+  -webkit-font-smoothing: antialiased;
+  @include item;
+}

src/windows/common/rightMenu.js

@@ -0,0 +1,34 @@
+import store from "../store"
+import {actionCreators as homeActionCreators} from "../pages/Home/store";
+import {actionCreators as mainActionCreators} from "../store/main";
+
+/*
+ * 打开窗口的处理方法
+ */
+export const openWindow = (type,value) => {
+  if(type==='openDesktopSet'){
+    const openWindowList = store.getState().toJS().homeWindows.openWindowList
+    const data = value
+    console.log(data)
+    data.url += '/'+ store.getState().toJS().homeWindows.background.type
+    store.dispatch(mainActionCreators.set_context_menu_box([],false,null))  //关闭右键菜单
+    store.dispatch(homeActionCreators.setWindowOpenList(data,openWindowList)) //打开窗口
+  }
+}
+
+/*
+ * 关闭右键菜单
+ */
+export const closeContextMenu = () => {
+  if(store.getState().toJS().mainWindows.isOpenContextMenu && !store.getState().toJS().mainWindows.isEnterContextMenu){
+    store.dispatch(mainActionCreators.set_context_menu_box([],false,null))
+  }
+}
+
+/*
+ * 刷新功能
+ */
+export const refreshCurrentPage = () => {
+  window.location.reload()
+  // this.forceUpdate()
+}