Refactor PM-407: Outcome components

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import style from '../outcomeCategorical.scss'
+
+const cx = cn.bind(style)
+
+const TrendingOutcomeCategorical = ({
+  entryStyle, outcome, percentage, resolutionDate,
+}) => (
+  <div className="outcomes outcomes--categorical">
+    <div className={cx('outcomeWrapper')}>
+      <div className="entry__color" style={entryStyle} />
+      <div className={cx('outcome')}>{outcome}</div>
+    </div>
+    <div>{percentage}%</div>
+    <div className={cx('date')}>{resolutionDate}</div>
+  </div>
+)
+
+TrendingOutcomeCategorical.propTypes = {
+  entryStyle: PropTypes.object,
+  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,62 @@
+@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%;
+}
+
+.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;
+}

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

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

@@ -1,14 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import Decimal from 'decimal.js'
-
 import DecimalValue from 'components/DecimalValue'
-
 import { marketShape } from 'utils/shapes'
-
 import { calcLMSRMarginalPrice } from 'api'
+import TrendingOutcomeScalar from './TredingOutcomeScalar'
 
-import './outcomeScalar.scss'
+import style from './outcomeScalar.scss'
+
+const cx = cn.bind(style)
 
 const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
   let marginalPrice = calcLMSRMarginalPrice({
@@ -35,34 +36,29 @@ const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
 
   if (showOnlyTrendingOutcome) {
     return (
-      <div className="row">
-        <div className="col-md-6">
-          <DecimalValue
-            value={value}
-            decimals={market.eventDescription.decimals}
-            className="outcome__currentPrediction--value"
-          />
-          &nbsp;{market.eventDescription.unit}
-        </div>
-      </div>
+      <TrendingOutcomeScalar
+        predictedValue={value}
+        decimals={market.eventDescription.decimals}
+        unit={market.eventDescription.unit}
+      />
     )
   }
 
   return (
-    <div className="outcomes outcomes--scalar">
-      <div className="outcome">
-        <div className="outcome__bound outcome__bound--lower">
+    <div>
+      <div className={cx('scalarOutcome')}>
+        <div className={cx('outcomeBound', 'lower')}>
           <DecimalValue value={lowerBound} decimals={market.eventDescription.decimals} />
           &nbsp;{market.eventDescription.unit}
         </div>
-        <div className="outcome__currentPrediction">
-          <div className="outcome__currentPrediction--line" />
-          <div className="outcome__currentPrediction--value" style={{ left: `${marginalPrice.mul(100).toFixed(5)}%` }}>
+        <div className={cx('currentPrediction')}>
+          <div className={cx('currentPredictionLine')} />
+          <div className={cx('currentPredictionValue')} style={{ left: `${marginalPrice.mul(100).toFixed(5)}%` }}>
             <DecimalValue value={value} decimals={market.eventDescription.decimals} />
             &nbsp;{market.eventDescription.unit}
           </div>
         </div>
-        <div className="outcome__bound outcome__bound--upper">
+        <div className={cx('outcomeBound', 'upper')}>
           <DecimalValue value={upperBound} decimals={market.eventDescription.decimals} />
           &nbsp;{market.eventDescription.unit}
         </div>
@@ -73,7 +69,20 @@ const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
 
 OutcomeScalar.propTypes = {
   market: marketShape,
-  opts: PropTypes.object,
+  opts: PropTypes.shape({
+    showOnlyTrendingOutcome: PropTypes.bool,
+  }),
+}
+
+OutcomeScalar.defaultProps = {
+  market: {
+    event: {},
+    eventDescription: {},
+    oracle: {},
+  },
+  opts: {
+    showOnlyTrendingOutcome: false,
+  },
 }
 
 export default OutcomeScalar

src/components/Outcome/OutcomeScalar/outcomeScalar.scss

@@ -0,0 +1,67 @@
+@import '../../../scss/vars.scss';
+
+$expandable-arrow-size: 7px;
+
+.scalarOutcome {
+  width: 50%;
+  display: table;
+  margin-top: 40px;
+}
+
+.currentPrediction {
+  position: relative;
+  height: 30px;
+  width: 100%;
+}
+
+
+.currentPredictionLine {
+  position: absolute;
+  background-color: $bg-color-muted;
+  height: 2px;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-1px);
+}
+
+.currentPredictionValue {
+  position: absolute;
+  background-color: $link-color;
+  padding: 5px;
+  border-radius: 5px;
+  color: white;
+  top: 50%;
+  transform: translate(-50%, -38px);
+  transition: left 1s ease;
+  left: 0;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    margin-left: -$expandable-arrow-size;
+    width: 0;
+    height: 0;
+    border-left: $expandable-arrow-size solid transparent;
+    border-right: $expandable-arrow-size solid transparent;
+    border-top: $expandable-arrow-size solid $link-color;
+  }
+}
+
+.outcomeBound {
+  display: table-cell;
+  width: 15%;
+  height: 30px;
+  vertical-align: middle;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+
+  .lower {
+    text-align: left;
+  }
+
+  .upper {
+    text-align: right;
+  }
+}