add disableInspectFunction

package.json

@@ -14,7 +14,7 @@
   "homepage": "https://github.com/leadream/figma-handoff#readme",
   "author": "leadream",
   "repository": "https://github.com/leadream/figma-handoff.git",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "AGPL-3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/App.js

@@ -3,7 +3,6 @@ import SettingsContext from 'contexts/SettingsContext'
 import Entry from 'page/entry'
 import Main from 'page/Main'
 import Header from 'page/header'
-import { getGlobalSettings, setGlobalSettings } from 'utils/helper'
 import { DEFAULT_SETTINGS } from 'utils/const'
 import 'assets/base.scss'
 import './app.scss'
@@ -37,18 +36,12 @@ class App extends React.Component {
     }
   }
   initializeGlobalSettings = (settings) => {
-    const localSettings = getGlobalSettings()
     const combinedSettings = {...DEFAULT_SETTINGS, ...settings}
-    // TODO: language not recognize local
-    if (!localSettings) {
-      setGlobalSettings(combinedSettings)
-    }
     return combinedSettings
   }
   setSettings = (name, value) => {
-    setGlobalSettings(name, value, globalSettings => {
-      this.setState({ globalSettings })
-    })
+    const { globalSettings } = this.state
+    this.setState({ globalSettings: {...globalSettings, [name]: value} })
   }
   handleDataGot = (fileData, components, styles, exportSettings, pagedFrames) => {
     this.setState({

src/lib/index.js

@@ -12,7 +12,6 @@ function Canvas ({
   onHeaderBack,
   links,
   currentFrameId,
-  otherDisableInspectFunction,
   changeGlobalData
 }) {
 
@@ -25,8 +24,7 @@ function Canvas ({
 
   useEffect(() => {
     changeGlobalData('currentFrameId', currentFrameId)
-    changeGlobalData('otherDisableInspectFunction', otherDisableInspectFunction)
-  }, [currentFrameId, otherDisableInspectFunction])
+  }, [currentFrameId])
 
   return (
     <I18nextProvider i18n={i18n}>

src/page/canvas/canvas.scss

@@ -39,6 +39,9 @@
       &.component-inspect-disabled {
         background-color: rgba($color: $component-color, $alpha: 0.16);
       }
+      &.custom-inspect-disabled {
+        background-color: rgba($color: $primary-color, $alpha: 0.16);
+      }
       &.group{
         border-style: dotted;
       }

src/page/canvas/index.js

@@ -201,6 +201,11 @@ class Canvas extends React.Component {
   handleImgLoaded = () => {
     this.setState({ isChanging: false })
   }
+  customInspectDisabledClass = node => {
+    const { globalSettings } = this.props
+    const { disableInspectFunction } = globalSettings
+    return disableInspectFunction && disableInspectFunction(node)
+  }
   componentDidMount () {
     this.generateMark()
   }
@@ -268,6 +273,7 @@ class Canvas extends React.Component {
                       'hovered': hoveredIndex===index,
                       'closest-component': closestComponentIndex===index,
                       'component-inspect-disabled': disableInspectInComponent && isComponent,
+                      'custom-inspect-disabled': this.customInspectDisabledClass(rect.node),
                       'percentage-highlight': this.isPercentageHighlight(rect, index)
                     }
                   )}

src/page/header/Settings/index.js

@@ -3,6 +3,7 @@ import { withTranslation } from 'react-i18next'
 import Mark from './Mark'
 import './settings.scss'
 
+// TODO: get language from local
 class Settings extends Component {
   constructor (props) {
     super(props)

src/utils/mark.js

@@ -34,8 +34,7 @@ export const toFixed = (num, numberFormat=0) => {
 
 // generate box data
 export const generateRects = (nodes, docRect, globalSettings) => {
-  const { disableInspectExportInner, disableInspectInComponent, otherDisableInspectFunction } = globalSettings
-  console.log(otherDisableInspectFunction)
+  const { disableInspectExportInner, disableInspectInComponent, disableInspectFunction } = globalSettings
   let index = 0
   const rects = []
   let exportIds = []
@@ -131,7 +130,7 @@ export const generateRects = (nodes, docRect, globalSettings) => {
         node.type==='BOOLEAN_OPERATION' ||
         node.isMask ||
         (isComponent && disableInspectInComponent) ||
-        (otherDisableInspectFunction ? otherDisableInspectFunction(node) : false)
+        (disableInspectFunction ? disableInspectFunction(node) : false)
       ) {
         // eslint-disable-next-line
         return