Merge pull request #3332 from Vizzuality/feature/new-selector

Feature/new selector

Author: edbrett

README.md

@@ -84,7 +84,7 @@ $ npm install
 Almost there! Final steps are to copy the `.env.sample` to `.env`, and start the server:
 
 ```bash
-$ ./bin/server
+$ npm start
 ```
 The app should now be accessible on [http://0.0.0.0:5000](http://0.0.0.0:5000).
 

app/javascript/assets/icons/arrow-down.svg

@@ -78,6 +78,7 @@ const Button = props => {
         arrow
         disabled={isDeviceTouch}
         html={<Tip text={tooltip.text} />}
+        hideOnClick
         {...tooltip}
       >
         {button}

app/javascript/assets/icons/close.svg

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from 'components/icon';
+import Button from 'components/button';
+
+import arrowDownIcon from 'assets/icons/arrow-down.svg';
+import infoIcon from 'assets/icons/info.svg';
+
+const Item = props => {
+  const {
+    index,
+    item,
+    showGroup,
+    highlightedIndex,
+    getItemProps,
+    handleSelectGroup,
+    optionsAction,
+    optionsActionKey,
+    activeValue,
+    activeLabel
+  } = props;
+  const { group, groupParent, label, metaKey } = item;
+
+  const isActive =
+    (!showGroup && !group) ||
+    (group === showGroup || groupParent === showGroup);
+  const isGroupParentActive = groupParent && showGroup === groupParent;
+  const isHighlighted =
+    highlightedIndex === index ||
+    activeLabel === label ||
+    (groupParent && groupParent === showGroup) ||
+    (groupParent && activeValue && groupParent === activeValue.group);
+
+  return (
+    <div
+      className={`item-wrapper
+        ${isActive ? 'show' : ''}
+        ${!group ? 'base' : ''}
+      `}
+    >
+      {isGroupParentActive && (
+        <Icon
+          icon={arrowDownIcon}
+          className={`group-icon ${
+            showGroup === groupParent ? 'selected' : ''
+          }`}
+        />
+      )}
+      <div
+        {...getItemProps({
+          item,
+          index,
+          className: `item ${isHighlighted ? 'highlight' : ''}`
+        })}
+        {...!!groupParent && {
+          onClick: () => handleSelectGroup(item)
+        }}
+      >
+        {label}
+      </div>
+      {metaKey && (
+        <Button
+          className="theme-button-small square info-button"
+          onClick={() => optionsAction(item[optionsActionKey])}
+        >
+          <Icon icon={infoIcon} className="info-icon" />
+        </Button>
+      )}
+      {groupParent &&
+        showGroup !== groupParent && (
+          <Icon
+            icon={arrowDownIcon}
+            className={`group-icon ${
+              showGroup === groupParent ? 'selected' : ''
+            }`}
+          />
+        )}
+    </div>
+  );
+};
+
+Item.propTypes = {
+  index: PropTypes.number,
+  item: PropTypes.object,
+  showGroup: PropTypes.string,
+  highlightedIndex: PropTypes.number,
+  getItemProps: PropTypes.func,
+  handleSelectGroup: PropTypes.func,
+  optionsAction: PropTypes.func,
+  optionsActionKey: PropTypes.string,
+  activeValue: PropTypes.object,
+  activeLabel: PropTypes.string
+};
+
+export default Item;

app/javascript/assets/icons/download.svg

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Item from './item';
+
+const Menu = props => {
+  const {
+    isOpen,
+    activeValue,
+    activeLabel,
+    items,
+    showGroup,
+    getItemProps,
+    highlightedIndex,
+    optionsAction,
+    optionsActionKey,
+    noItemsFound,
+    handleSelectGroup
+  } = props;
+
+  return !isOpen ? null : (
+    <div className="menu">
+      {items && items.length ? (
+        items.map((item, index) => (
+          <Item
+            key={item.value}
+            index={index}
+            item={item}
+            showGroup={showGroup}
+            highlightedIndex={highlightedIndex}
+            getItemProps={getItemProps}
+            handleSelectGroup={handleSelectGroup}
+            optionsAction={optionsAction}
+            optionsActionKey={optionsActionKey}
+            activeValue={activeValue}
+            activeLabel={activeLabel}
+          />
+        ))
+      ) : (
+        <div className="item not-found">
+          {noItemsFound || 'No results found'}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Menu.propTypes = {
+  isOpen: PropTypes.bool,
+  activeValue: PropTypes.object,
+  activeLabel: PropTypes.string,
+  items: PropTypes.array,
+  showGroup: PropTypes.string,
+  getItemProps: PropTypes.func,
+  highlightedIndex: PropTypes.number,
+  optionsAction: PropTypes.func,
+  optionsActionKey: PropTypes.string,
+  noItemsFound: PropTypes.string,
+  handleSelectGroup: PropTypes.func
+};
+
+export default Menu;

app/javascript/assets/icons/facebook.svg

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Icon from 'components/icon';
+
+import arrowDownIcon from 'assets/icons/arrow-down.svg';
+import closeIcon from 'assets/icons/close.svg';
+
+const Selector = props => {
+  const {
+    isOpen,
+    arrowPosition,
+    onSelectorClick,
+    clearable,
+    activeValue,
+    activeLabel,
+    searchable,
+    inputProps,
+    handleClearSelection,
+    children,
+    innerRef
+  } = props;
+
+  return (
+    <div ref={innerRef} className={`container ${isOpen ? 'is-open' : ''}`}>
+      <div className={`selector ${arrowPosition ? 'align-left' : ''}`}>
+        {arrowPosition === 'left' && (
+          <button className="arrow-btn" onClick={onSelectorClick}>
+            <Icon className="arrow" icon={arrowDownIcon} />
+          </button>
+        )}
+        <span
+          className={`value ${!activeValue ? 'no-value' : ''} ${
+            clearable && activeValue ? 'clearable' : ''
+          }`}
+        >
+          {(isOpen && !searchable) || !isOpen ? activeLabel : ''}
+        </span>
+        <input {...inputProps()} />
+        {clearable &&
+          activeValue && (
+            <button className="clear-btn" onClick={handleClearSelection}>
+              <Icon icon={closeIcon} className="clear-icon" />
+            </button>
+          )}
+        {arrowPosition !== 'left' && (
+          <button className="arrow-btn" onClick={onSelectorClick}>
+            <Icon className="arrow" icon={arrowDownIcon} />
+          </button>
+        )}
+      </div>
+      <div className="menu-arrow" />
+      {children}
+    </div>
+  );
+};
+
+Selector.propTypes = {
+  children: PropTypes.node,
+  isOpen: PropTypes.bool,
+  arrowPosition: PropTypes.string,
+  onSelectorClick: PropTypes.func,
+  clearable: PropTypes.bool,
+  activeValue: PropTypes.object,
+  activeLabel: PropTypes.string,
+  searchable: PropTypes.bool,
+  inputProps: PropTypes.func,
+  handleClearSelection: PropTypes.func,
+  innerRef: PropTypes.func
+};
+
+export default Selector;