overmind/packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx at constructorCheck · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import * as React from 'react'
import { connect, Connect } from '../../app'
import { Operator as OperatorType } from '../../app/types'
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 = {
  prevOperator: OperatorType
  operator: OperatorType
  value: any
} & Connect

const ActionOperator: React.SFC<Props> = ({
  prevOperator,
  operator,
  value,
  app,
}) => {
  const isExpanded = app.state.expandAllActionDetails || !operator.isCollapsed

  return (
    <React.Fragment key={operator.operatorId}>
      {value === undefined ? null : (
        <Pipe>
          <Path />
          <ValueInspector value={value} small />
        </Pipe>
      )}
      <Pipe>
        <Path
          visible={
            prevOperator &&
            prevOperator.path.join('.') !== operator.path.join('.')
          }
          borderColor={operator.type === 'mutate' ? 'red' : 'primary'}
        >
          {operator.path.length ? (
            <Text variant="hint">
              <b>{operator.path.join('.')}</b>
            </Text>
          ) : null}
        </Path>
        <Operator
          borderColor={operator.type === 'mutate' ? 'red' : 'primary'}
          onClick={
            operator.mutations.length || operator.effects.length
              ? () => app.actions.toggleCollapsed(operator)
              : null
          }
        >
          <OperatorHeader>
            <Text
              variant="text"
              color={operator.type === 'mutate' ? 'red' : 'primary'}
              dense
            >
              {operator.type}
            </Text>
            <Text variant="text" dense>
              {operator.name}
            </Text>
            {operator.mutations.length || operator.effects.length ? (
              <Text variant="hint">
                {isExpanded ? (
                  <Icon>chevron-down</Icon>
                ) : (
                  <Icon>chevron-up</Icon>
                )}
              </Text>
            ) : null}
          </OperatorHeader>
          {isExpanded ? (
            <div onClick={(event) => event.stopPropagation()}>
              {operator.effects.map((effect, index) => (
                <OperatorItem key={index}>
                  <Text variant="description" color="primary" mono>
                    {effect.name + '.' + effect.method}
                  </Text>
                  <ValueInspector
                    small
                    value={
                      effect.args.length > 1 ? effect.args : effect.args[0]
                    }
                  />
                  <Text variant="description" mono>
                    =>
                  </Text>
                  <ValueInspector small value={effect.result} />
                </OperatorItem>
              ))}
              {operator.mutations.map((mutation, index) => (
                <OperatorItem key={index}>
                  <Text variant="description" color="red" 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>
          ) : null}
        </Operator>
      </Pipe>
    </React.Fragment>
  )
}

export default connect(ActionOperator)