Project initial

initializer-page/src/components/common/builder/quick-search/Result.js

@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {CSSTransition, TransitionGroup} from 'react-transition-group'
+
+import {IconPlus} from '../../icons'
+
+function Result({ list, selected, select, add }) {
+  return (
+    <TransitionGroup component='ul' className='dependencies-list'>
+      {list.map((item, index) => {
+        return (
+          <CSSTransition timeout={500} classNames='fade' key={`f${item.id}`}>
+            <li>
+              <span className='dependency-item-span'>
+                <a
+                  href='/'
+                  className={`dependency-item dependency-item-gray ${
+                    !item.valid ? 'invalid' : ''
+                  }  ${selected === index ? 'selected' : ''}`}
+                  key={`item${item.id}`}
+                  selected={selected === index}
+                  disabled={!item.valid}
+                  onClick={e => {
+                    e.preventDefault()
+                    if (item.valid) {
+                      add(item)
+                    }
+                  }}
+                  onMouseEnter={() => {
+                    if (item.valid) {
+                      select(index)
+                    }
+                  }}
+                  onMouseLeave={() => {
+                    if (item.valid) {
+                      select(-1)
+                    }
+                  }}
+                >
+                  <div>
+                    <strong className='title' key={`item${item.id}`}>
+                      {item.name}
+                    </strong>
+                    <br />
+                    {item.valid && (
+                      <span key={`d1${item.id}`}>
+                        <span className='description' key={`d2${item.id}`}>
+                          {item.description}
+                        </span>
+                        <span key={`d3${item.id}`} className='icon'>
+                          <IconPlus key={`d4${item.id}`} />
+                        </span>
+                      </span>
+                    )}
+                    {!item.valid && (
+                      <span className='warning' key={`warning${item.id}`}>
+                        {item.message}
+                      </span>
+                    )}
+                  </div>
+                </a>
+              </span>
+            </li>
+          </CSSTransition>
+        )
+      })}
+    </TransitionGroup>
+  )
+  // }
+}
+
+Result.defaultProps = {
+  list: [],
+  selected: null,
+}
+
+Result.propTypes = {
+  list: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      group: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      versionRange: PropTypes.string,
+      versionRequirement: PropTypes.string,
+    })
+  ),
+  add: PropTypes.func.isRequired,
+  selected: PropTypes.number,
+  select: PropTypes.func.isRequired,
+}
+
+export default Result