New dropdown

ashes/Makefile

@@ -1,7 +1,6 @@
 include ../makelib
 header = $(call baseheader, $(1), ashes)
 
-
 export PATH := $(CURDIR)/node_modules/.bin:$(PATH)
 SHELL := env PATH=$(PATH) /bin/sh
 

ashes/src/components/addresses/address-form/address-form.css

@@ -1,5 +1,3 @@
 .countryList {
-  & :global .fc-dropdown__items {
-    width: 100%;
-  }
+  width: 100%;
 }

ashes/src/components/addresses/address-form/address-form.jsx

@@ -7,13 +7,14 @@ import { autobind } from 'core-decorators';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import classNames from 'classnames';
 
 // components
 import FormField from '../../forms/formfield';
 import FoxyForm from '../../forms/foxy-form';
 import { ApiErrors } from 'components/utils/errors';
 import SaveCancel from 'components/core/save-cancel';
-import { Dropdown } from '../../dropdown';
+import { TextDropdown } from 'components/core/dropdown';
 import AutoScroll from 'components/utils/auto-scroll';
 import TextInput from 'components/core/text-input';
 
@@ -248,10 +249,9 @@ export default class AddressForm extends React.Component {
               </li>
               <li>
                 <FormField label="Country">
-                  <Dropdown
-                    id="country-dd"
+                  <TextDropdown
                     name="countryId"
-                    className={s.countryList}
+                    className={classNames(s.countryList, 'at-country-dd')}
                     value={this.state.countryId}
                     onChange={value => this.handleCountryChange(Number(value))}
                     items={this.countryItems}
@@ -275,8 +275,8 @@ export default class AddressForm extends React.Component {
               </li>
               <li>
                 <FormField label={regionName(countryCode)} required>
-                  <Dropdown
-                    id="region-dd"
+                  <TextDropdown
+                    className="at-region-dd"
                     name="regionId"
                     value={this.state.stateId}
                     onChange={value => this.handleStateChange(Number(value))}

ashes/src/components/analytics/analytics.css

@@ -19,4 +19,5 @@
   margin-top: 40px;
   width: 220px;
   max-width: 220px;
+  display: inline-block;
 }

ashes/src/components/analytics/analytics.jsx

@@ -15,7 +15,7 @@ import type { Props as QuestionBoxType } from './question-box';
 import Currency from 'components/utils/currency';
 import TrendButton, { TrendType } from './trend-button';
 import StaticColumnSelector from './static-column-selector';
-import { Dropdown } from '../dropdown';
+import { TextDropdown } from 'components/core/dropdown';
 import ProductConversionChart from './charts/product-conversion-chart';
 import TotalRevenueChart, { ChartSegmentType } from './charts/total-revenue-chart';
 import SegmentControlList from './segment-control-list';
@@ -593,17 +593,13 @@ export class Analytics extends React.Component {
 
           return (
             <div>
-              <Dropdown
+              <TextDropdown
                 styleName="comparison-period-filter-date-picker"
                 name="dateControl"
                 items={_.map(comparisonPeriodOptions, ({ id, displayText }) => [id, displayText])}
                 placeholder="Comparison Period"
-                changeable={true}
                 onChange={this.onComparisonPeriodChange}
                 value={comparisonPeriod.dateDisplay}
-                renderNullTitle={(value, placeholder) => {
-                  return _.isNil(value) ? placeholder : value;
-                }}
               />
               <ActionBlock
                 onActionClick={this.onRemoveComparison}
@@ -629,17 +625,13 @@ export class Analytics extends React.Component {
     return (
       <div>
         <div styleName="analytics-filters">
-          <Dropdown
+          <TextDropdown
             styleName="analytics-filter-date-picker"
             name="dateControl"
             items={_.map(datePickerOptions, ({ id, displayText }) => [id, displayText])}
             placeholder={`${moment().format(datePickerFormat)}`}
-            changeable={true}
             onChange={this.onDatePickerChange}
             value={dateDisplay}
-            renderNullTitle={(value, placeholder) => {
-              return _.isNull(value) ? placeholder : value;
-            }}
           />
           <StaticColumnSelector
             setColumns={null}

ashes/src/components/analytics/static-column-selector.jsx

@@ -25,11 +25,11 @@ type Props = {
   identifier: string,
   actionButtonText?: string,
   dropdownTitle?: string,
-}
+};
 
 type State = {
   selectedColumns: Array<Object>,
-}
+};
 
 export default class StaticColumnSelector extends React.Component {
 

ashes/src/components/body-portal/body-portal.jsx

@@ -1,12 +1,14 @@
 // libs
-import { Component, Children, Element } from 'react';
+import React, { Component, Element } from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 
 type Props = {
   active?: boolean,
   left: ?number,
   top: ?number,
   className: ?string,
+  getRef?: Function,
 };
 
 export default class BodyPortal extends Component {
@@ -17,6 +19,7 @@ export default class BodyPortal extends Component {
     left: 0,
     top: 0,
     className: '',
+    getRef: () => {},
   };
 
   _target: HTMLElement; // HTMLElement, a div that is appended to the body
@@ -60,6 +63,8 @@ export default class BodyPortal extends Component {
     const { className } = this.props;
 
     const container = document.createElement('div');
+
+    // @todo looks like this not working at all, because it is just a wrapper
     container.className = className;
 
     this._target = document.body.appendChild(container);
@@ -69,15 +74,27 @@ export default class BodyPortal extends Component {
 
   renderContent() {
     if (!this.props.children) {
-      return;
+      return null;
     }
 
     this.updateStyle();
 
-    ReactDOM.unstable_renderSubtreeIntoContainer(this, Children.only(this.props.children), this._target);
+    ReactDOM.unstable_renderSubtreeIntoContainer(this, <div>{this.props.children}</div>, this._target);
+
+    this.props.getRef(this._target);
   }
 
   render() {
-    return this.props.active ? null : this.props.children;
+    const { active, className, children, getRef } = this.props;
+
+    if (active) {
+      return null; // see renderContent()
+    }
+
+    return (
+      <div className={classNames(className)} ref={getRef}>
+        {children}
+      </div>
+    );
   }
 }

ashes/src/components/bulk-actions/actions-dropdown.css

@@ -1,5 +1,9 @@
-/* @todo refactor dropdown */
-.button {
-  padding: 10px !important;
-  width: auto !important;
+.actions {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: baseline;
+}
+
+.dropdown {
+  margin-right: 10px;
 }

ashes/src/components/bulk-actions/actions-dropdown.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 // components
-import { Dropdown } from '../dropdown';
+import { TextDropdown } from 'components/core/dropdown';
 
 // styles
 import s from './actions-dropdown.css';
@@ -18,20 +18,20 @@ function getActionsHandler(actions, allChecked, toggledIds) {
 
 const ActionsDropdown = ({actions, disabled, allChecked, toggledIds, total}) => {
   const totalSelected = allChecked ? total - toggledIds.length : toggledIds.length;
+  const items = actions.map(([title]) => ({ value: title }));
 
   return (
-    <div className="fc-table-actions">
-      <Dropdown
-        className="fc-table-actions__dropdown"
+    <div className={s.actions}>
+      <TextDropdown
+        className={s.dropdown}
         placeholder="Actions"
-        changeable={false}
         disabled={disabled}
         onChange={getActionsHandler(actions, allChecked, toggledIds)}
-        items={actions.map(([title]) => [title, title])}
-        buttonClassName={s.button}
+        items={items}
+        stateless
       />
       { totalSelected > 0 ? (
-        <span className="fc-table-actions__selected">
+        <span>
           {totalSelected} Selected
         </span>
       ) : null}

ashes/src/components/catalog/details.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import Content from 'components/core/content/content';
 import ContentBox from 'components/content-box/content-box';
-import { Dropdown } from 'components/dropdown';
+import { TextDropdown } from 'components/core/dropdown';
 import Alert from 'components/core/alert';
 import Form from 'components/forms/form';
 import TextInput from 'components/core/text-input';
@@ -34,7 +34,7 @@ const CatalogDetails = (props: Props) => {
   const country = _.find(countries, { id: countryId });
 
   let languages = _.get(country, 'languages', []);
-  if (_.indexOf('en') == -1) {
+  if (languages.indexOf('en') == -1) {
     languages = ['en', ...languages];
   }
 
@@ -53,16 +53,24 @@ const CatalogDetails = (props: Props) => {
             <VerticalFormField controlId="site" label="Site URL">
               <TextInput onChange={v => onChange('site', v)} value={site} />
             </VerticalFormField>
-            <VerticalFormField controlId="countryId" label="Country" required>
-              <Dropdown
+            <VerticalFormField
+              controlId="countryId"
+              label="Country"
+              required
+            >
+              <TextDropdown
                 name="countryId"
                 value={countryId}
                 items={countryItems}
                 onChange={c => onChange('countryId', c)}
               />
             </VerticalFormField>
-            <VerticalFormField controlId="defaultLanguage" label="Default Language" required>
-              <Dropdown
+            <VerticalFormField
+              controlId="defaultLanguage"
+              label="Default Language"
+              required
+            >
+              <TextDropdown
                 name="defaultLanguage"
                 value={defaultLanguage}
                 items={languageItems}

ashes/src/components/core/button-with-menu/button-with-menu.jsx

@@ -9,7 +9,7 @@ import Transition from 'react-transition-group/CSSTransitionGroup';
 
 // components
 import { PrimaryButton } from 'components/core/button';
-import { DropdownItem } from 'components/dropdown';
+import DropdownItem from 'components/dropdown/dropdownItem';
 
 // styles
 import s from './button-with-menu.css';

ashes/src/components/core/dropdown/index.js

@@ -0,0 +1,3 @@
+export SmartList from './smart-list/smart-list';
+export TextDropdown from './text-dropdown/text-dropdown';
+export SearchDropdown from './search-dropdown/search-dropdown';

ashes/src/components/core/dropdown/search-dropdown/search-dropdown.css

@@ -0,0 +1,82 @@
+@import 'variables.css';
+
+.block {
+  position: relative;
+  font: var(--font-labels);
+  text-align: left; /* in case if dropdown in centered stuff, e.g. Order State */
+
+  &.open {
+    z-index: 1;
+  }
+}
+
+.pivot {
+  display: flex;
+  padding: 10px;
+  background-color: var(--bg-grey-buttons);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--bg-grey-buttons-hover);
+  }
+
+  .block.disabled & {
+    background-color: var(--bg-grey-buttons-hover);
+    color: var(--color-additional-text);
+    cursor: default;
+  }
+}
+
+.displayText {
+  flex: 1 1 auto;
+  margin-right: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .placeholder & {
+    color: var(--color-additional-text);
+  }
+}
+
+.menu {
+  top: 40px;
+  max-height: 264px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2);
+  background-color: var(--bg-white);
+}
+
+.searchBar {
+  margin: 10px;
+}
+
+.loupeIcon {
+  position: absolute;
+  left: 15px;
+  top: 20px;
+  font-size: 20px;
+  color: var(--color-additional-text);
+}
+
+.searchBarInput {
+  width: 100%;
+  padding-left: 30px;
+}
+
+.item {
+  padding: 12px 20px;
+  background-color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font: var(--font-nav);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--bg-grey-headers);
+  }
+}
+
+.spinner {
+  margin: 0 auto 14px;
+}