diff --git a/package.json b/package.json index 94089e3..d02c7d4 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index c572997..3844275 100644 --- a/src/App.js +++ b/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({ diff --git a/src/lib/index.js b/src/lib/index.js index 0681a00..fa23d22 100644 --- a/src/lib/index.js +++ b/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 ( diff --git a/src/page/canvas/canvas.scss b/src/page/canvas/canvas.scss index 86c004e..e337261 100644 --- a/src/page/canvas/canvas.scss +++ b/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; } diff --git a/src/page/canvas/index.js b/src/page/canvas/index.js index 530233e..6c00cc3 100644 --- a/src/page/canvas/index.js +++ b/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) } )} diff --git a/src/page/header/Settings/index.js b/src/page/header/Settings/index.js index cc9b33f..161104a 100644 --- a/src/page/header/Settings/index.js +++ b/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) diff --git a/src/utils/mark.js b/src/utils/mark.js index 724b6c4..307eecf 100644 --- a/src/utils/mark.js +++ b/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