fix: null type

src/components/editor/PropertyForm.tsx

@@ -4,8 +4,7 @@ import { connect } from 'react-redux'
 import Mock from 'mockjs'
 import SmartTextarea from '../utils/SmartTextarea'
 import { Button } from '@material-ui/core'
-
-export const TYPES = ['String', 'Number', 'Boolean', 'Object', 'Array', 'Function', 'RegExp']
+import { TYPES } from '../../utils/consts'
 
 // 模拟数据
 export const mockProperty = process.env.NODE_ENV === 'development'
@@ -80,7 +79,13 @@ class PropertyForm extends Component<any, any> {
                   name="type"
                   tabIndex={2}
                   value={this.state.type}
-                  onChange={e => this.setState({ type: e.target.value })}
+                  onChange={e => {
+                    const type = e.target.value
+                    if (type === 'Null') {
+                      this.setState({ value: '' })
+                    }
+                    this.setState({ type })
+                  }}
                   className="form-control"
                 >
                   {TYPES.map(type =>

src/components/editor/PropertyList.tsx

@@ -7,6 +7,7 @@ import {
   RSortable,
   CopyToClipboard
 } from '../utils'
+import { TYPES } from '../../utils/consts'
 import PropertyForm from './PropertyForm'
 import Importer from './Importer'
 import Previewer from './InterfacePreviewer'
@@ -54,6 +55,11 @@ export const ResponsePropertyListPreviewer = (props: any) => (
   <Previewer {...props} />
 )
 
+/** Object Array Null 不需要 value */
+function isNoValueType(type: string) {
+  return ['Object', 'Array', 'Null'].indexOf(type) > -1
+}
+
 // DONE 2.2 请求属性有什么用？有必要吗？有，用于订制响应数据。
 // DONE 2.2 如何过滤模拟 URL 中额外的请求属性？解析 URL 中的参数到请求属性列表吗？可以在响应数据中引用 配置的请求参数 和 URL 中的额外参数。
 // DONE 2.2 支持对属性排序
@@ -206,6 +212,7 @@ class SortableTreeTableRow extends Component<
       handleClickCreateChildPropertyButton,
       highlightId,
       handleDeleteMemoryProperty,
+      handleChangeProperty,
       handleChangePropertyField,
       handleSortProperties,
     } = this.props
@@ -354,24 +361,26 @@ class SortableTreeTableRow extends Component<
                         ) : (
                           <select
                             value={item.type}
-                            onChange={e =>
-                              handleChangePropertyField(
-                                item.id,
-                                'type',
-                                e.target.value
-                              )
-                            }
+                            onChange={e => {
+                              const type = e.target.value
+                              if (isNoValueType(type)) {
+                                handleChangeProperty(
+                                  item.id,
+                                  {
+                                    value: '',
+                                    type,
+                                  }
+                                )
+                              } else {
+                                handleChangeProperty(
+                                  item.id,
+                                  {type}
+                                )
+                              }
+                            }}
                             className="form-control editable"
                           >
-                            {[
-                              'String',
-                              'Number',
-                              'Boolean',
-                              'Object',
-                              'Array',
-                              'Function',
-                              'RegExp',
-                            ].map(type => (
+                            {TYPES.map(type => (
                               <option key={type} value={type}>
                                 {type}
                               </option>
@@ -415,6 +424,7 @@ class SortableTreeTableRow extends Component<
                                 e.target.value
                               )
                             }
+                            disabled={isNoValueType(item.type) && !item.value}
                             rows="1"
                             className="form-control editable"
                             spellCheck={false}
@@ -563,6 +573,7 @@ class PropertyList extends Component<any, any> {
             }
             handleDeleteMemoryProperty={this.handleDeleteMemoryProperty}
             handleChangePropertyField={this.handleChangePropertyField}
+            handleChangeProperty={this.handleChangeProperty}
             handleSortProperties={this.handleSortProperties}
             handleClickCreatePropertyButton={
               this.handleClickCreatePropertyButton
@@ -661,6 +672,12 @@ class PropertyList extends Component<any, any> {
     const property = properties.find((property: any) => property.id === id)
     handleChangeProperty({ ...property, [key]: value })
   };
+  handleChangeProperty = (id: any, value: any) => {
+    const { handleChangeProperty } = this.props
+    const { properties } = this.props
+    const property = properties.find((property: any) => property.id === id)
+    handleChangeProperty({ ...property, ...value })
+  };
   handleCreatePropertySucceeded = () => {
     /** empty */
   };

src/components/home/Home.tsx

@@ -11,7 +11,6 @@ import { RootState } from 'actions/types'
 import Button from '@material-ui/core/Button'
 import RepositoryForm from 'components/repository/RepositoryForm'
 
-
 const Maiden = () => {
   const [creating, setCreating] = useState(false)
   const dispatch = useDispatch()

src/components/layout/MainMenu.tsx

@@ -3,14 +3,14 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Button from '@material-ui/core/Button'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Grow from '@material-ui/core/Grow';
-import Divider from '@material-ui/core/Divider';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import Divider from '@material-ui/core/Divider'
+import Paper from '@material-ui/core/Paper'
+import Popper from '@material-ui/core/Popper'
+import MenuItem from '@material-ui/core/MenuItem'
+import MenuList from '@material-ui/core/MenuList'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import { Link } from 'react-router-dom'
 import { User } from 'actions/types'
 import Logo from './Logo'
@@ -21,41 +21,41 @@ const useAccountButtonStyles = makeStyles(({ spacing }: Theme) => ({
   accountName: {
     padding: spacing(1),
     textAlign: 'center',
-    fontSize: '1.3714285714285714rem'
-  }
+    fontSize: '1.3714285714285714rem',
+  },
 }))
 
 const options = [{
   key: 'logout',
-  text: '注销'
-}];
+  text: '注销',
+}]
 
 function AccountButton({ user }: { user: User }) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false)
   const dispatch = useDispatch()
   const classes = useAccountButtonStyles()
 
-  const anchorRef = React.useRef<HTMLButtonElement>(null);
+  const anchorRef = React.useRef<HTMLButtonElement>(null)
 
   const handleMenuItemClick = (_event: React.MouseEvent<HTMLLIElement, MouseEvent>, key: string) => {
     if (key === 'logout') {
       dispatch(logout())
     }
-    setOpen(false);
-  };
+    setOpen(false)
+  }
 
   const handleToggle = () => {
-    setOpen(prevOpen => !prevOpen);
-  };
+    setOpen(prevOpen => !prevOpen)
+  }
 
   const handleClose = (event: React.MouseEvent<Document, MouseEvent>) => {
 
     if (anchorRef && anchorRef.current && event.target instanceof Node && anchorRef.current.contains(event.target)) {
-      return;
+      return
     }
 
-    setOpen(false);
-  };
+    setOpen(false)
+  }
 
   return (
     <div>
@@ -71,7 +71,7 @@ function AccountButton({ user }: { user: User }) {
         </span>
         <ExpandMoreIcon fontSize="small" />
       </Button>
-      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition={true}>
         {({ TransitionProps, placement }) => (
           <Grow
             {...TransitionProps}
@@ -103,7 +103,7 @@ function AccountButton({ user }: { user: User }) {
         )}
       </Popper>
     </div>
-  );
+  )
 }
 
 const useStyles = makeStyles((theme: Theme) =>

src/components/utils/PropertyEditor.tsx

@@ -15,9 +15,9 @@
 
 import React, { Component } from 'react'
 import { mock } from 'mockjs'
+import { TYPES } from '../../utils/consts'
 import './PropertyEditor.css'
 
-const TYPES = ['String', 'Number', 'Boolean', 'Object', 'Array', 'Function', 'RegExp']
 const fixValue = ({ type, value }: Readonly<any>) => {
   switch (type) {
     case 'String':
@@ -46,6 +46,8 @@ const fixValue = ({ type, value }: Readonly<any>) => {
       return {}
     case 'Array':
       return []
+    case 'Null':
+      return null
     default:
       return value
   }
@@ -272,7 +274,18 @@ class PropertyEditor extends Component<any, any> {
           </div>
           <div className="form-group">
             <label className="control-label">类型：</label>
-            <select name="type" value={this.state.type} onChange={e => this.setState({ type: e.target.value })} className="form-control">
+            <select
+              name="type"
+              value={this.state.type}
+              onChange={e => {
+                const type = e.target.value
+                if (type === 'Null') {
+                  this.setState({ value: '' })
+                }
+                this.setState({ type })
+              }}
+              className="form-control"
+            >
               {TYPES.map(type =>
                 <option key={type} value={type}>{type}</option>
               )}

src/components/utils/Tree.ts

@@ -93,6 +93,9 @@ const treeToJson = (tree: any) => {
           })
         }
         break
+      case 'Null':
+          result[item.name + rule] = null
+          break
       default:
         result[item.name + rule] = item.value
     }

src/utils/consts.ts

@@ -0,0 +1,10 @@
+export const TYPES = [
+  'String',
+  'Number',
+  'Boolean',
+  'Object',
+  'Array',
+  'Function',
+  'RegExp',
+  'Null',
+]