Refactor PM-407: Outcome components

src/components/Dashboard/dashboard.scss

@@ -187,17 +187,6 @@ $dashboardmarket-left-column-value-color: black;
     border-bottom-right-radius: $market-border-radius;
   }
 
-  .outcomes {
-    &--categorical {
-      display: flex;
-      align-items: center;
-    }
-
-    .entry__color {
-      margin-bottom: 0;
-    }
-  }
-
   .outcome {
     margin-right: 10px;
     display: flex;
@@ -388,15 +377,3 @@ $dashboardmarket-left-column-value-color: black;
     }
   }
 }
-
-.entry {
-  &__color {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-bottom: -5px;
-    margin-right: 5px;
-
-    border-radius: 4px;
-  }
-}

src/components/Dashboard/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import autobind from 'autobind-decorator'
 import cn from 'classnames'
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import PageFrame from 'components/layout/PageFrame'
 import Block from 'components/layout/Block'
 import Title from 'components/layout/Title'
@@ -133,7 +134,7 @@ class Dashboard extends Component {
           <div className="dashboardMarket__title">{share.eventDescription.title}</div>
           <div className="outcome row">
             <div className="col-md-3">
-              <div className="entry__color" style={outcomeColorStyle} />
+              <OutcomeColorBox style={outcomeColorStyle} />
               <div className="dashboardMarket--highlight">{getOutcomeName(share, share.outcomeToken.index)}</div>
             </div>
             <div className="col-md-2 dashboardMarket--highlight">
@@ -187,7 +188,7 @@ class Dashboard extends Component {
           <div className="dashboardMarket__title">{market.eventDescription.title}</div>
           <div className="outcome row">
             <div className="col-md-3">
-              <div className="entry__color" style={outcomeColorStyle} />
+              <OutcomeColorBox style={outcomeColorStyle} />
               <div className="dashboardMarket--highlight">{getOutcomeName(market, trade.outcomeToken.index)}</div>
             </div>
             <div className="col-md-3 dashboardMarket--highlight">

src/components/MarketMySharesForm/index.js

@@ -7,6 +7,7 @@ import { calcLMSRMarginalPrice, calcLMSRProfit } from 'api'
 
 import InteractionButton from 'containers/InteractionButton'
 
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import DecimalValue from 'components/DecimalValue'
 import CurrencyName from 'components/CurrencyName'
 import FormSlider from 'components/FormSlider'
@@ -154,7 +155,7 @@ class MarketMySharesForm extends Component {
 
       tableRows.push(<tr className="marketMyShares__share" key={share.id}>
         <td>
-          <div className="shareOutcome__color" style={outcomeColorStyle} />
+          <OutcomeColorBox style={outcomeColorStyle} />
         </td>
         <td className="">{getOutcomeName(market, share.outcomeToken.index)}</td>
         <td>

src/components/MarketMySharesForm/marketMySharesForm.scss

@@ -94,18 +94,6 @@ $groupWidth: 33%;
   }
 }
 
-.shareOutcome {
-  &__color {
-    display: inline-block;
-    vertical-align: middle;
-
-    width: 20px;
-    height: 20px;
-
-    border-radius: 4px;
-  }
-}
-
 .marketMySharesSellAmount {
   &__input {
     font-size: 14px;

src/components/MarketMyTrades/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Decimal from 'decimal.js'
 import moment from 'moment'
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import { decimalToText } from 'components/DecimalValue'
 import CurrencyName from 'components/CurrencyName'
 import { RESOLUTION_TIME, COLOR_SCHEME_SCALAR, COLOR_SCHEME_DEFAULT, OUTCOME_TYPES } from 'utils/constants'
@@ -47,7 +48,7 @@ class MarketMyTrades extends Component {
       return (
         <tr className="marketMyTrades__share" key={trade.id}>
           <td>
-            <div className="shareOutcome__color" style={outcomeColorStyle} />
+            <OutcomeColorBox style={outcomeColorStyle} />
           </td>
           <td>{trade.orderType}</td>
           <td>{getOutcomeName(market, trade.outcomeToken.index)}</td>

src/components/MarketMyTrades/marketMyTrades.scss

@@ -66,18 +66,6 @@ $groupWidth: 20%;
   }
 }
 
-.shareOutcome {
-  &__color {
-    display: inline-block;
-    vertical-align: middle;
-
-    width: 20px;
-    height: 20px;
-
-    border-radius: 4px;
-  }
-}
-
 .marketMyTradesSellAmount {
   &__input {
     font-size: 14px;

src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+
+import OutcomeColorBox from 'components/OutcomeColorBox'
+import style from '../outcomeCategorical.scss'
+
+const cx = cn.bind(style)
+
+const TrendingOutcomeCategorical = ({
+  entryStyle, outcome, percentage, resolutionDate,
+}) => (
+  <div className={cx('trendingOutcomeCategoricalContainer')}>
+    <div className={cx('outcomeWrapper')}>
+      <OutcomeColorBox style={entryStyle} />
+      <div className={cx('outcome')}>{outcome}</div>
+    </div>
+    <div>{percentage}%</div>
+    <div className={cx('date')}>{resolutionDate}</div>
+  </div>
+)
+
+TrendingOutcomeCategorical.propTypes = {
+  entryStyle: PropTypes.shape({
+    backgroundColor: PropTypes.string,
+  }),
+  outcome: PropTypes.string,
+  percentage: PropTypes.string,
+  resolutionDate: PropTypes.string,
+}
+
+TrendingOutcomeCategorical.defaultProps = {
+  entryStyle: {},
+  outcome: '',
+  percentage: '',
+  resolutionDate: '',
+}
+
+export default TrendingOutcomeCategorical

src/components/OutcomeCategorical/index.js → src/components/Outcome/OutcomeCategorical/index.js

@@ -1,13 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import cn from 'classnames'
+import moment from 'moment'
+import { calcLMSRMarginalPrice } from 'api'
 import { COLOR_SCHEME_DEFAULT } from 'utils/constants'
 import { marketShape } from 'utils/shapes'
-import moment from 'moment'
+import TrendingOutcomeCategorical from './TrendingOutcomeCategorical'
 
-import { calcLMSRMarginalPrice } from 'api'
+import style from './outcomeCategorical.scss'
 
-import './outcomeCategorical.scss'
+const cx = cn.bind(style)
 
 const OutcomeCategorical = ({ market, opts = {} }) => {
   const renderOutcomes = market.eventDescription.outcomes
@@ -37,39 +39,32 @@ const OutcomeCategorical = ({ market, opts = {} }) => {
     const resolutionDateFormatted = showDate ? moment(market.eventDescription.resolutionDate).format(dateFormat) : ''
 
     return (
-      <div className="outcomes outcomes--categorical">
-        <div className="outcome__wrapper">
-          <div className="entry__color" style={outcomeEntryStyle} />
-          <div className="outcome">
-            {renderOutcomes[trendingOutcomeIndex]}
-          </div>
-        </div>
-        <div>{trendingMarginalPricePercent}%</div>
-        <div className="date">{resolutionDateFormatted}</div>
-      </div>
+      <TrendingOutcomeCategorical
+        entryStyle={outcomeEntryStyle}
+        outcome={renderOutcomes[trendingOutcomeIndex]}
+        percentage={trendingMarginalPricePercent}
+        resolutionDate={resolutionDateFormatted}
+      />
     )
   }
 
   // show all outcomes
   return (
-    <div className={`${className} outcomes outcomes--categorical`}>
+    <div className={className}>
       {renderOutcomes.map((outcome, outcomeIndex) => {
-        if (market.oracle.isOutcomeSet && market.oracle.outcome !== outcomeIndex) {
-          return <div key={outcomeIndex} className="outcome" />
-        }
         const outcomeBarStyle = {
           width: `${tokenDistribution[outcomeIndex] * 100}%`,
           backgroundColor: COLOR_SCHEME_DEFAULT[outcomeIndex],
         }
         const tokenDistributionPercent = `${Math.round(tokenDistribution[outcomeIndex] * 100).toFixed(0)}%`
 
         return (
-          <div key={outcomeIndex} className="outcome">
-            <div className="outcome__bar">
-              <div className="outcome__bar--inner" style={outcomeBarStyle}>
-                <div className="outcome__bar--label">
+          <div key={outcome} className={cx('outcome')}>
+            <div className={cx('outcomeBar')}>
+              <div className={cx('outcomeBarInner')} style={outcomeBarStyle}>
+                <div className={cx('outcomeBarLabel')}>
                   {renderOutcomes[outcomeIndex]}
-                  <div className="outcome__bar--value">{tokenDistributionPercent}</div>
+                  <div className={cx('outcomeBarValue')}>{tokenDistributionPercent}</div>
                 </div>
               </div>
             </div>
@@ -90,4 +85,18 @@ OutcomeCategorical.propTypes = {
   }),
 }
 
+OutcomeCategorical.defaultProps = {
+  market: {
+    event: {},
+    oracle: {},
+    eventDescription: {},
+  },
+  opts: {
+    className: '',
+    showOnlyTrendingOutcome: false,
+    showDate: false,
+    dateFormat: '',
+  },
+}
+
 export default OutcomeCategorical

src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss

@@ -0,0 +1,69 @@
+@import '../../../scss/vars.scss';
+
+$outcome-bar-height: 15px;
+$outcome-bar-height-leading: 30px;
+
+.outcome {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.outcomeWrapper {
+  max-width: 75%;
+  display: flex;
+  align-items: center;
+}
+
+.outcomeBar {
+  display: inline-block;
+  position: relative;
+  width: 30%;
+  margin: 5px 0;
+}
+
+.outcomeBarInner {
+  height: $outcome-bar-height;
+  position: relative;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  transition: width 1s ease;
+}
+
+.outcomeBarValue {
+  line-height: $outcome-bar-height;
+  vertical-align: middle;
+  padding-left: 5px;
+  display: inline;
+  min-width: 30px;
+  color: $font-color-muted;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.outcomeBarLabel {
+  margin-left: 100%;
+  padding-left: 5px;
+  line-height: $outcome-bar-height;
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+}
+
+.outcomeLabel {
+  display: inline-block;
+}
+
+.date {
+  margin-left: 7px;
+}
+
+.trendingOutcomeCategoricalContainer {
+  display: flex;
+  align-items: center;
+}

src/components/Outcome/OutcomeScalar/TredingOutcomeScalar/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DecimalValue from 'components/DecimalValue'
+
+const TrendingOutcomeScalar = ({ predictedValue, unit, decimals }) => (
+  <div className="row">
+    <div className="col-md-6">
+      <DecimalValue value={predictedValue} decimals={decimals} className="outcome__currentPrediction--value" />
+      &nbsp;{unit}
+    </div>
+  </div>
+)
+
+TrendingOutcomeScalar.propTypes = {
+  predictedValue: PropTypes.string,
+  unit: PropTypes.string,
+  decimals: PropTypes.string,
+}
+
+TrendingOutcomeScalar.defaultProps = {
+  predictedValue: '0',
+  unit: '',
+  decimals: '0',
+}
+
+export default TrendingOutcomeScalar