All files / packages/react-tao/src createContextHandler.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15x
 
 
 
 
15x
3x
 
18x
 
15x
 
 
3x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15x
 
 
 
 
 
import React, { Component } from 'react';
import { AppCtx } from '@tao.js/core';
 
import { getPermutations } from './helpers';
import { Context } from './Provider';
 
function cleanState(previousState, newState) {
  const keys = Object.keys(previousState);
  if (newState == null) {
    return keys.reduce((rv, key) => {
      rv[key] = void 0;
      return rv;
    }, {});
  }
  keys.push(...Object.keys(newState));
  return keys.reduce((rv, key) => {
    rv[key] = newState[key];
    return rv;
  }, {});
}
 
export default function createContextHandler(tao, handler, defaultValue) {
  Iif (handler != null && typeof handler !== 'function') {
    throw new Error('createContextHandler `handler` must be a function');
  }
  const WrappingContext = React.createContext(defaultValue);
  class Provider extends Component {
    static contextType = Context;
 
    constructor(props) {
      super(props);
      this.state =
        typeof defaultValue === 'function'
          ? defaultValue()
          : defaultValue || {};
    }
 
    componentDidMount() {
      const { TAO } = this.context;
      const permutations = getPermutations(tao);
      permutations.forEach(trigram =>
        TAO.addInlineHandler(trigram, this.contextHandler)
      );
    }
 
    componentWillUnmount() {
      const { TAO } = this.context;
      const permutations = getPermutations(tao);
      permutations.forEach(trigram =>
        TAO.removeInlineHandler(trigram, this.contextHandler)
      );
    }
 
    contextHandler = (tao, data) => {
      let usedSet = false;
      const current = this.state;
      const dataUpdate = handler
        ? handler(
            tao,
            data,
            data => {
              const update = cleanState(current, data);
              this.setState(update);
              usedSet = true;
            },
            current
          )
        : data;
      if (dataUpdate instanceof AppCtx) {
        return dataUpdate;
      }
      if (!usedSet && dataUpdate != null) {
        this.setState(dataUpdate);
      }
    };
 
    render() {
      return (
        <WrappingContext.Provider value={this.state}>
          {this.props.children}
        </WrappingContext.Provider>
      );
    }
  }
  return {
    Provider,
    Consumer: WrappingContext.Consumer
  };
}