@jswork/harmony-events NPM

harmony-events

Harmony events(nx).

installation

npm install @jswork/harmony-events

implements

usage

import HarmonyEvents from '@jswork/harmony-events';

class MyComponent extends React.Component {
  // 1. private harmonyEvents
  private harmonyEvents:HarmonyEvents | null = null;
  constructor(props) {
    super(props);
    // 2. init harmonyEvents
    this.harmonyEvents = new HarmonyEvents({
      harmony: props.harmony,
      name: props.name,
      context: this,
      ns: '$rc',
      items: ['add', 'remove', 'clear']
    });
  }

  componentWillUnmount() {
    // 3. destroy harmonyEvents
    this.harmonyEvents?.destroy();
  }

  // add/remove/clear methods
  add = (item) => {};
  remove = (item) => {};
  clear = () => {};
}

// 4. add typings
interface NxStatic {
  $rc: {
    event: import('@jswork/event-mitt').EventMittNamespace.EventMitt;
  }
}

// 5.  when use in React component
<MyComponent name="t1" />
<MyComponent name="t2" />

// 6. call methods
nx.$rc.event.emit('t1:add', { name: 't1', item: 'hello' });
nx.$rc.event.emit('t2:add', { name: 't2', item: 'world' });

nx.$rc.event.emit('t1:remove', 0);
nx.$rc.event.emit('t2:remove', 1);

nx.$rc.event.emit('t1:clear');
nx.$rc.event.emit('t2:clear');

// ------------ use ReactHarmonyEvents ------------
import { ReactHarmonyEvents } from '@jswork/harmony-events';
import type { EventMittNamespace } from '@jswork/event-mitt';

interface MyComponentProps {
  /**
   * The identity name.
   */
  name?: string;
}

class MyComponent extends React.Component {
  // 1. public events
  static events = ['add', 'remove', 'clear'];
  static event: EventMittNamespace.EventMitt;
  
  // 2. private harmonyEvents
  private harmonyEvents:ReactHarmonyEvents | null = null;
  
  constructor(props) {
    super(props);
    // 3.1. init harmonyEvents
    this.harmonyEvents = ReactHarmonyEvents.create(this);
  }

  // OR use componentDidMount
  componentDidMount(): void {
    // 3.2. init harmonyEvents
    this.harmonyEvents = ReactHarmonyEvents.create(this);
  }


  componentWillUnmount() {
    // 3. destroy harmonyEvents
    this.harmonyEvents?.destroy();
  }

  // add/remove/clear methods
  add = (item) => {};
  remove = (item) => {};
  clear = () => {};
}

// 3.  when use in React component
<MyComponent name="t1" />
<MyComponent name="t2" />

// 4. call methods
MyComponent.event.emit('t1:add', { name: 't1', item: 'hello' });
MyComponent.event.emit('t2:add', { name: 't2', item: 'world' });

MyComponent.event.emit('t1:remove', 0);
MyComponent.event.emit('t2:remove', 1);

MyComponent.event.emit('t1:clear');
MyComponent.event.emit('t2:clear');

// 5. useCommand
import RcComponent from '.';

const useCommand = (inName?: string) => {
  const name = inName || '@';
  const execute = (command: string, ...args: any[]) =>
    RcComponent.event?.emit(`${name}:${command}`, ...args);

  const listen = (cmd: string, callback: any) => RcComponent.event?.on(`${name}:${cmd}`, callback);

  // the command repository:
  const bottom = (index: number) => execute('bottom', index);

  return {
    listen,
    bottom,
  };
};

export default useCommand;