Refactor PM-407: Outcome components (#245)

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