How to use @artsy/reaction - 10 common examples

To help you get started, we’ve selected a few @artsy/reaction examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github artsy / positron / src / client / components / article_list / index.jsx View on Github external
{shouldLockEditing ? (
                this.currentSessionText(article)
              ) : (
                <h2>{this.publishText(article)}</h2>
              )}
            
          
          <a href="{`${forceURL}/article/${article.slug}`}">
            {shouldLockEditing ? (
              <span>
                
                <span>Locked</span>
              </span>
            ) : (
              "View"
            )}
          </a>
        
      )
    })
  }
github artsy / positron / client / apps / edit / components / message / index.jsx View on Github external
getIconForType (type) {
    switch (type) {
      case 'lock': return 
      default: return null
    }
  }
github artsy / positron / src / client / apps / edit / components / message / index.tsx View on Github external
align-items: center;
`

const ActionsContainer = styled.div`
  margin-right: 20px;
`

const ActionButton = styled.button`
  margin-right: 15px;
`
ActionButton.displayName = "ActionButton"

const RedirectText = styled.span`
  ${avantgarde("s11")};
  text-transform: uppercase;
  color: ${colors.grayMedium};
`
github artsy / positron / client / apps / edit2 / components / content / section_container / index.jsx View on Github external
data-editing={editing}
          data-layout={layout || 'column_width'}
          data-type={type}
        &gt;
          <div>
            {!isHero &amp;&amp;
              <div>
                
              </div>
            }
            
          </div>

          {this.getSectionComponent()}

          <div>
        </div>
      
    )
  }
}
github artsy / positron / client / apps / edit2 / components / message / index.jsx View on Github external
align-items: center;
`

const ActionsContainer = styled.div`
  margin-right: 20px;
`

const ActionButton = styled.button`
  margin-right: 15px;
`
ActionButton.displayName = 'ActionButton'

const RedirectText = styled.span`
  ${Fonts.avantgarde('s11')};
  text-transform: uppercase;
  color: ${colors.grayMedium};
`

export class MessageModal extends Component {
  static propTypes = {
    type: PropTypes.oneOf(['locked', 'timeout']),
    session: PropTypes.object,
    onClose: PropTypes.func,
    onTimerEnded: PropTypes.func
  }

  state = {
    timeLeft: 10
  }

  componentDidMount () {
    this.timer = setInterval(this.updateTimer, 1000)
github artsy / positron / client / components / article_list / index.jsx View on Github external
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import moment from 'moment'
import styled from 'styled-components'
import { connect } from 'react-redux'
import colors from '@artsy/reaction/dist/Assets/Colors'
import { IconLock } from '@artsy/reaction/dist/Components/Publishing/Icon/IconLock'
import Icon from '@artsy/reaction/dist/Components/Icon'

const IconCheckCircle = styled(Icon)`
  color: ${colors.grayMedium};
  font-size: 30px;

  &:hover {
    color: black;
  }
`

export class ArticleList extends Component {
  static propTypes = {
    display: PropTypes.string,
    checkable: PropTypes.bool,
    articles: PropTypes.array,
    selected: PropTypes.func,
    activeSessions: PropTypes.object,
    user: PropTypes.object,
    forceURL: PropTypes.string
github artsy / positron / src / client / components / article_list / index.jsx View on Github external
return articles.map((article, i) =&gt; {
      const attrs = this.getDisplayAttrs(article)
      const session = activeSessions[article.id]
      const isCurrentlyBeingEdited = session
      const isCurrentUserEditing =
        user &amp;&amp; session &amp;&amp; user.id === session.user.id
      const style = isCurrentlyBeingEdited ? { color: colors.grayMedium } : null
      const shouldLockEditing = isCurrentlyBeingEdited &amp;&amp; !isCurrentUserEditing
      const lockedClass = shouldLockEditing ? "locked" : ""
      const missingData = `Missing ${isArtsyChannel ? "Magazine" : "Thumbnail"}`

      return (
        <div style="{style}">
          {checkable &amp;&amp; (
            <div> this.props.selected(article)}
            &gt;</div></div>
github artsy / positron / client / components / article_list / index.jsx View on Github external
return articles.map(article =&gt; {
      const attrs = this.getDisplayAttrs(article)
      const session = activeSessions[article.id]
      const isCurrentlyBeingEdited = session
      const isCurrentUserEditing = user &amp;&amp; session &amp;&amp; user.id === session.user.id
      const style = isCurrentlyBeingEdited ? {color: colors.grayMedium} : null
      const shouldLockEditing = isCurrentlyBeingEdited &amp;&amp; !isCurrentUserEditing
      const lockedClass = shouldLockEditing ? 'locked' : ''

      return (
        <div style="{style}">
          {checkable &amp;&amp; <div> this.props.selected(article)}
              &gt;
                
          </div>}
          <a href="{`/articles/${article.id}/edit`}">
            <div style="{attrs.image"></div></a></div>
github artsy / positron / client / components / rich_text / components / input_url.jsx View on Github external
<input value="{url}"> this.setState({url: e.target.value})}
              placeholder='Paste or type a link'
              onKeyUp={(e) =&gt; {
                if (e.key === 'Enter') {
                  this.confirmLink(e)
                }
              }}
            /&gt;
            {url.length &gt; 0 &amp;&amp;
              
            }
          

          <button>
            Apply
          </button>
        
      
    )
  }
}
github artsy / positron / client / components / article_list / index.jsx View on Github external
: <h1>Missing Title</h1>
              }

              {shouldLockEditing
                ? this.currentSessionText(article)
                : <h2>{this.publishText(article)}</h2>
              }
            
          
          <a href="{`${forceURL}/article/${article.slug}`}">

            {shouldLockEditing
            ? <span>
                
                <span>Locked</span>
              </span>
              : 'View'}
          </a>
        
      )
    })
  }