Add Task and Theme Context to Components

1
import React from 'react';
2
import { withTaskContext } from '@twilio/flex-ui';
3

4
// Set text color to white
5
const TaskSIDText = {
6
  color: "#FFF"
7
};
8

9
class MyComponent extends React.Component {
10
  render() {
11
    // Retrieve Task details
12
    // (`task` will be undefined if there's no task selected in the UI)
13
    const { task } = this.props;
14
    // Render Task SID in component as a test
15
    return <div style={TaskSIDText}>
16
      <p>First, make sure we can access the current Task data.</p>
17
      <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.taskSid : 'No task selected'}</span></p>
18
    </div>;
19
  }
20
}
21

22
// The withTaskContext() helper function creates a
23
// Higher-Order Component that uses the Context API
24
// to access Task data, then adds the Task data to
25
// the wrapped component.
26
export default withTaskContext(MyComponent);

1
import React from 'react';
2
import { withTheme } from '@twilio/flex-ui';
3
import { styled } from "@twilio/flex-ui";
4

5
class MyComponent extends React.Component {
6
  constructor(props) {
7
    super(props);
8

9
    // Print the current theme object
10
    // You can have a look at at the structure of this object in the console
11
    console.log('Current theme: ', this.props.theme);
12
  }
13

14
  render() {
15
    // Return general text in the component
16
    return (
17
      <TaskSID>
18
        <p>Now, we can change the color of the component's background.</p>
19
      </TaskSID>
20
    );
21
  }
22
}
23

24
// The component that has its background color set
25
// to the same color as MainHeader background
26
const TaskSID = styled("div")`
27
  background-color: ${props => props.theme.MainHeader.Container.background};
28
`;
29

30
// Note the added withTheme() helper function
31
export default withTheme(MyComponent);

1
import React from 'react';
2
import { withTheme, withTaskContext } from '@twilio/flex-ui';
3
import { styled } from "@twilio/flex-ui";
4

5
const TaskSIDText = {
6
  color: "#FFF", 
7
  fontWeight: 'bold'
8
};
9

10
class MyComponent extends React.Component {
11
  constructor(props) {
12
    super(props);
13

14
    // Print the current theme object
15
    // You can look at the structure of this object in the console
16
    console.log('Current theme: ', this.props.theme);
17
  }
18
  render() {
19
    const { task } = this.props;
20

21
    // Print Task SID using styled component `TaskSID` defined below
22
    return (<TaskSID>
23
      <p style={TaskSIDText}>You can access the current Task data AND the current theme.   Task SID: {task ? task.taskSid: 'No task selected'}</p>
24
    </TaskSID>);
25
  }
26
}
27

28
// Styled component that has its text color set to the same color
29
// as MainHeader background (i.e., red)
30
const TaskSID = styled("div")`
31
  background-color: ${props => props.theme.MainHeader.Container.background};
32
`;
33

34
// Note the added withTheme() helper function
35
export default withTheme(withTaskContext(MyComponent));

1
import MyComponent from '<relative_path_to_component_file>';
2
...
3
async init(flex, manager) {
4
    flex.CRMContainer.Content.replace(<MyComponent key="mycrm"/>);
5

6
}