jsx highlight

[crapthings]

import { observable, toJS } from 'mobx'
import { observer } from 'mobx-react'
import nanoid from 'nanoid'
import isEmpty from 'lodash.isempty'
import omit from 'lodash.omit'

let _propName = 'store'
let _initialValue = undefined
let _initialLocalValue = {}

export const initReaktor = function (initialValue, propName) {
  if (_initialValue) throw new Error('already initialized')
  if (propName) _propName = propName
  _initialValue = observable.object(initialValue)
  if (isObject(initialValue)) {
    _initialValue = observable.object(initialValue)
  } else if (isArray(initialValue)) {
    _initialValue = observable.array(initialValue)
  }
  return _initialValue
}

export const withReaktor = function (propName) {
  return function decorator(Component) {
    @observer
    class WrapperComponent extends Component {
      [propName || _propName] = _initialValue
    }
    return WrapperComponent
  }
}

export const initLocalReaktor = function (initialValue, propName) {
  if (!initialValue) throw new Error('initial value required')
  if (!propName) throw new Error('property name required')
  if (_initialLocalValue[propName]) throw new Error('already initialized')
  if (isObject(initialValue)) {
    const ref = _initialLocalValue[propName] = {
      value: observable.object(initialValue),
      __componentIds__: {},
    }
  } else if (isArray(initialValue)) {
    const ref = _initialLocalValue[propName] = {
      value: observable.array(initialValue),
      __componentIds__: {},
    }
  }
  return _initialLocalValue[propName]['value']
}

export const withLocalReaktor = function (propName) {
  if (!propName) throw new Error('property name required')
  return function decorator(Component) {
    @observer
    class WrapperComponent extends Component {
      [propName] = _initialLocalValue[propName]['value']
      __componentId__ = nanoid()
      componentDidMount() {
        if (Component.prototype.componentDidMount) {
          Component.prototype.componentDidMount.apply(this, arguments)
        }
        _initialLocalValue[propName]['__componentIds__'][this.__componentId__] = true
      }

      componentWillUnmount() {
        if (Component.prototype.componentDidMount) {
          Component.prototype.componentDidMount.apply(this, arguments)
        }
        delete _initialLocalValue[propName]['__componentIds__'][this.__componentId__]
        console.log(this.__componentId__)
        console.dir(_initialLocalValue[propName])
        if (isEmpty(omit(_initialLocalValue[propName], ['__componentIds__'])))
          console.log('is empty')
      }
    }
    return WrapperComponent
  }
}

function is(obj, type) {
  return Object.prototype.toString.call(obj) === type
}

function isObject(obj) {
  return is(obj, '[object Object]')
}

function isArray(obj) {
  return is(obj, '[object Array]')
}

[edisonthk]

different code but same situation

// @flow
import * as React from 'react';
import classNames from 'classnames';
import styled, { css } from 'styled-components';
import { MenuDown } from 'mdi-material-ui';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Collapse from '@material-ui/core/Collapse';
import { withRouter, NavLink } from 'react-router-dom';

const navItemMixin = css`
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #929292;
  padding-left: 20px;
  padding-right: 20px;
  height: 40px;
  color: #929292;
  cursor: pointer;
  transition: background-color 0.1s, opacity 0.1s;

  &:focus,
  &:hover {
    background-color: #1d1632;
  }

  &:active {
    opacity: 0.8;
  }
`;
const StyledNavLink = styled(NavLink)`
  ${navItemMixin};

  &.active {
    color: #ffffff;

    ${StyledListItemIcon} {
      color: #7f6dea;
    }
  }
`;

const StyledNestedNavLink = styled(StyledNavLink)`
  padding-left: 52px;
  font-size: 12px;
`;
const StyledNavItemBody = styled.div`
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

type Props = {
  to: string | null,
  label: string,
  iconComponent: React.Node,
  childItems?: Array<any>,
};

type State = {
  open: boolean,
};