KaiUI/src/lib/components/SoftKey/SoftKeyProvider.jsx at da6a9f22ce062d1fa6d4aaa7ee19e51eb7f6c44c · AdrianMachado/KaiUI · GitHub

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
91
92
93
94
95
96
97
98
99
100
101
102
import React from 'react';
import SoftKey from './SoftKey';

export const SoftKeyContext = React.createContext();

export class SoftKeyProvider extends React.PureComponent {
  state = {
    leftText: '',
    centerText: '',
    rightText: '',
    centerIcon: null,
    leftCallback: () => {},
    centerCallback: () => {},
    rightCallback: () => {},
  };

  setLeftCallback = leftCallback => {
    this.setState({ leftCallback });
  };

  setRightCallback = rightCallback => {
    this.setState({ rightCallback });
  };

  setCenterCallback = centerCallback => {
    this.setState({ centerCallback });
  };

  setLeftText = leftText => {
    this.setState({ leftText });
  };

  setRightText = rightText => {
    this.setState({ rightText });
  };

  setCenterText = centerText => {
    this.setState({ centerText, centerIcon: null });
  };

  setCenterIcon = centerIcon => {
    this.setState({ centerIcon, centerText: null });
  };

  // Shortcuts for convenience

  setSoftKeyTexts = ({ leftText = '', centerText = '', rightText = '' }) => {
    this.setState({ leftText, centerText, rightText });
  };

  setSoftKeyCallbacks = ({
    leftCallback = () => {},
    centerCallback = () => {},
    rightCallback = () => {},
  }) => {
    this.setState({ leftCallback, centerCallback, rightCallback });
  };

  unregisterSoftKeys = () => {
    this.setState({
      leftCallback: () => {},
      centerCallback: () => {},
      rightCallback: () => {},
      leftText: null,
      rightText: null,
      centerText: null,
      centerIcon: null,
    });
  };

  render() {
    const context = {
      setLeftCallback: this.setLeftCallback,
      setRightCallback: this.setRightCallback,
      setCenterCallback: this.setCenterCallback,
      setLeftText: this.setLeftText,
      setRightText: this.setRightText,
      setCenterText: this.setCenterText,
      setCenterIcon: this.setCenterIcon,
      setSoftKeyTexts: this.setSoftKeyTexts,
      setSoftKeyCallbacks: this.setSoftKeyCallbacks,
      unregisterSoftKeys: this.unregisterSoftKeys,
    };

    return (
      <SoftKeyContext.Provider value={context}>
        {this.props.children}
        <footer>
          <SoftKey
            leftText={this.state.leftText}
            centerText={this.state.centerText}
            centerIcon={this.state.centerIcon}
            rightText={this.state.rightText}
            leftCallback={this.state.leftCallback}
            centerCallback={this.state.centerCallback}
            rightCallback={this.state.rightCallback}
          />
        </footer>
      </SoftKeyContext.Provider>
    );
  }
}