overmind/packages/node_modules/overmind-devtools/src/components/ActionsList/index.tsx at actionContext · 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
import { createElement, SFC } from 'react'
import { useOvermind } from '../../overmind'
import { ActionsListItemType } from '../../overmind/types'
import { nameToColor } from '../../overmind/utils'
import * as textStyles from '../../styles/text'
import * as styles from './styles'

const ActionsList: SFC = () => {
  const { state, actions } = useOvermind()

  return (
    <div className={styles.list}>
      {state.currentApp.actionsList.map((item) => {
        if (item.type === ActionsListItemType.ACTION) {
          const action = state.currentApp.actions[item.id]

          return (
            <div
              className={styles.actionItem}
              key={item.id}
              onClick={() => actions.selectAction(item.id)}
            >
              <span
                className={styles.actionColor}
                style={{
                  backgroundColor: nameToColor(action.actionName),
                }}
              />
              <span className={textStyles.description}>
                {state.currentApp.currentActionId === item.id ? (
                  <b>{action.actionName}</b>
                ) : (
                  action.actionName
                )}
              </span>
              <span
                className={styles.errorIndication}
                style={{
                  visibility: action.hasError ? 'visible' : 'hidden',
                }}
              />
            </div>
          )
        }
        const mainAction = state.currentApp.actions[item.actionIds[0]]
        const groupedActionIds = item.actionIds.slice(1)

        return (
          <div key={item.id}>
            <div
              className={styles.actionItem}
              onClick={() => actions.selectAction(item.id)}
            >
              <span
                className={styles.actionColor}
                style={{ backgroundColor: nameToColor(mainAction.actionName) }}
              />
              <span className={textStyles.description}>
                {state.currentApp.currentActionId === item.id ? (
                  <b>
                    {mainAction.actionName} ( {groupedActionIds.length + 1} )
                  </b>
                ) : (
                  `${mainAction.actionName} ( ${groupedActionIds.length + 1} )`
                )}
              </span>
            </div>
            {item.isCollapsed
              ? null
              : groupedActionIds.map((actionId) => {
                  const action = state.currentApp.actions[actionId]
                  return (
                    <div
                      className={styles.actionSubItem}
                      key={actionId}
                      onClick={() => actions.selectAction(actionId)}
                    >
                      <span className={textStyles.description}>
                        {state.currentApp.currentActionId === actionId ? (
                          <b>{action.actionName}</b>
                        ) : (
                          action.actionName
                        )}
                      </span>
                    </div>
                  )
                })}
          </div>
        )
      })}
    </div>
  )
}

export default ActionsList