overmind/packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx at devtoolsBugFixes · hipertracker/overmind · 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
103
import * as React from 'react'
import { connect, Connect } from '../../app'
import { Operator as OperatorType } from '../../app/state'
import ValueInspector from '../ValueInspector'
import Text from '../common/Text'
import Icon from '../common/Icon'
import Path from '../ActionPath'
import { Pipe } from '../Action/elements'
import { Operator, OperatorHeader, OperatorItem } from './elements'

type Props = {
  operator: OperatorType
  value: any
} & Connect

const ActionOperator: React.SFC<Props> = ({ operator, value, app }) => (
  <React.Fragment key={operator.operatorId}>
    <Pipe>
      <Path />
      <ValueInspector value={value} small />
    </Pipe>
    <Pipe>
      <Path
        borderColor={operator.type === 'mutation' ? 'primary' : 'secondary'}
      >
        {operator.path.length ? (
          <Text variant="hint">
            <b>{operator.path.join('.')}</b>
          </Text>
        ) : null}
      </Path>
      <Operator
        borderColor={operator.type === 'mutation' ? 'primary' : 'secondary'}
        onClick={
          operator.mutations.length || operator.providers.length
            ? () => app.actions.toggleCollapsed(operator)
            : null
        }
      >
        <OperatorHeader>
          <Text
            variant="text"
            color={operator.type === 'mutation' ? 'primary' : 'secondary'}
            dense
          >
            {operator.type}
          </Text>
          <Text variant="text" dense>
            {operator.name}
          </Text>
          {operator.mutations.length || operator.providers.length ? (
            <Text variant="hint">
              {operator.isCollapsed ? (
                <Icon>chevron-up</Icon>
              ) : (
                <Icon>chevron-down</Icon>
              )}
            </Text>
          ) : null}
        </OperatorHeader>
        {operator.isCollapsed ? null : (
          <div onClick={(event) => event.stopPropagation()}>
            {operator.providers.map((provider, index) => (
              <OperatorItem key={index}>
                <Text variant="description" color="secondary" mono>
                  {provider.name + '.' + provider.method}
                </Text>
                <ValueInspector
                  small
                  value={
                    provider.args.length > 1 ? provider.args : provider.args[0]
                  }
                />
                <Text variant="description" mono>
                  =>
                </Text>
                <ValueInspector small value={provider.result} />
              </OperatorItem>
            ))}
            {operator.mutations.map((mutation, index) => (
              <OperatorItem key={index}>
                <Text variant="description" color="primary" mono>
                  {mutation.method}
                </Text>
                <Text variant="description" mono>
                  {mutation.path}
                </Text>
                <ValueInspector
                  small
                  value={
                    mutation.args.length > 1 ? mutation.args : mutation.args[0]
                  }
                />
              </OperatorItem>
            ))}
          </div>
        )}
      </Operator>
    </Pipe>
  </React.Fragment>
)

export default connect(ActionOperator)