feat(Borrow): cleanup dropdown

blockchain · Jan 27, 2020 · fc7fe99 · fc7fe99
1 parent 4d2246a
commit fc7fe99
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/packages/blockchain-info-components/src/Form/SelectInput/template.js b/packages/blockchain-info-components/src/Form/SelectInput/template.js
@@ -187,6 +187,7 @@ const SelectInput = props => {
     onBlur,
     onFocus,
     onKeyDown,
+    openMenuOnClick,
     openMenuOnFocus,
     searchEnabled,
     templateDisplay,
@@ -225,6 +226,7 @@ const SelectInput = props => {
       onChange={handleChange}
       onFocus={onFocus}
       onKeyDown={onKeyDown}
+      openMenuOnClick={openMenuOnClick}
       openMenuOnFocus={openMenuOnFocus}
       options={options}
       placeholder={defaultDisplay}
@@ -236,12 +238,17 @@ const SelectInput = props => {
   )
 }
 
+SelectInput.defaultProps = {
+  openMenuOnClick: true
+}
+
 SelectInput.propTypes = {
   items: PropTypes.array.isRequired,
   selected: PropTypes.object,
   expanded: PropTypes.bool,
   searchEnabled: PropTypes.bool,
   menuIsOpen: PropTypes.bool,
+  openMenuOnClick: PropTypes.bool,
   openMenuOnFocus: PropTypes.bool,
   disabled: PropTypes.bool,
   errorState: PropTypes.string,

diff --git a/...s/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/BorrowCoinDropdown/index.tsx b/...s/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/BorrowCoinDropdown/index.tsx
@@ -22,9 +22,7 @@ export type OwnProps = {
   supportedCoins: SupportedCoinsType
 }
 
-type SuccessStateType = {
-  elements: Array<any>
-}
+type SuccessStateType = Array<AccountTypes>
 
 type LinkStatePropsType = {
   data: RemoteDataType<string | Error, SuccessStateType>
@@ -45,9 +43,6 @@ const AccountContainer = styled.div`
   flex-direction: column;
   margin-left: 12px;
   width: 100%;
-  > div {
-    min-height: 0;
-  }
   .bc__single-value {
     position: relative;
     top: 0;
@@ -72,7 +67,7 @@ const FiatContainer = styled.div`
 export class BorrowCoinDropdown extends Component<Props> {
   state = {}
 
-  renderElements = values => {
+  renderElements = (values: SuccessStateType) => {
     return [
       {
         group: '',
@@ -93,9 +88,7 @@ export class BorrowCoinDropdown extends Component<Props> {
       <DisplayContainer>
         <Icon size='32px' color={color} name={icon} />
         <AccountContainer>
-          <Text size='16px' weight={500} color='grey800'>
-            {children}
-          </Text>
+          {children}
           <AmountContainer>
             <CoinDisplay
               coin={props.value.coin}
@@ -134,6 +127,8 @@ export class BorrowCoinDropdown extends Component<Props> {
             component={SelectBox}
             elements={this.renderElements(values)}
             templateDisplay={this.renderDisplay}
+            hideIndicator={values.length <= 1}
+            openMenuOnClick={values.length > 1}
             searchEnabled={false}
             includeAll={false}
             name='collateral'