mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-09-23 21:16:44 +08:00
db687e584e
Summary: Loads the current user to pre-populate the Salesforce field in the creators add tabindex to tokenizing text fields Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://review.inboxapp.com/D1468
90 lines
3.1 KiB
CoffeeScript
90 lines
3.1 KiB
CoffeeScript
_ = require 'underscore-plus'
|
|
React = require 'react'
|
|
{Utils} = require "inbox-exports"
|
|
|
|
StylesImpactedByZoom = [
|
|
'top',
|
|
'left',
|
|
'right',
|
|
'bottom',
|
|
'paddingTop',
|
|
'paddingLeft',
|
|
'paddingRight',
|
|
'paddingBottom',
|
|
'marginTop',
|
|
'marginBottom',
|
|
'marginLeft',
|
|
'marginRight'
|
|
]
|
|
|
|
# We don't want to call `getLoadSettings` for each and every RetinaImg
|
|
# instance because it's a fairly expensive operation. Since the
|
|
# resourcePath can't change once the app has booted, it's safe to set the
|
|
# constant at require-time
|
|
DEFAULT_RESOURCE_PATH = atom.getLoadSettings().resourcePath
|
|
|
|
###
|
|
Public: RetinaImg wraps the DOM's standard `<img`> tag and implements a `UIImage` style
|
|
interface. Rather than specifying an image `src`, RetinaImg allows you to provide
|
|
an image name. Like UIImage on iOS, it automatically finds the best image for the current
|
|
display based on pixel density. Given `image.png`, on a Retina screen, it looks for
|
|
`image@2x.png`, `image.png`, `image@1x.png` in that order. It uses a lookup table and caches
|
|
image names, so images generally resolve immediately.
|
|
###
|
|
class RetinaImg extends React.Component
|
|
@displayName: 'RetinaImg'
|
|
|
|
###
|
|
Public: React `props` supported by RetinaImg:
|
|
|
|
- `name` (optional) A {String} image name to display.
|
|
- `fallback` (optional) A {String} image name to use when `name` cannot be found.
|
|
- `selected` (optional) Appends "-selected" to the end of the image name when when true
|
|
- `active` (optional) Appends "-active" to the end of the image name when when true
|
|
- `colorfill` (optional) Adds -webkit-mask-image and other styles, and the .colorfill CSS
|
|
class, so that setting a CSS background color will colorfill the image.
|
|
- `style` (optional) An {Object} with additional styles to apply to the image.
|
|
- `resourcePath` (options) Changes the default lookup location used to find the images.
|
|
###
|
|
@propTypes:
|
|
name: React.PropTypes.string
|
|
style: React.PropTypes.object
|
|
fallback: React.PropTypes.string
|
|
selected: React.PropTypes.bool
|
|
active: React.PropTypes.bool
|
|
colorfill: React.PropTypes.bool
|
|
resourcePath: React.PropTypes.string
|
|
|
|
render: ->
|
|
path = @_pathFor(@props.name) ? @_pathFor(@props.fallback) ? ''
|
|
pathIsRetina = path.indexOf('@2x') > 0
|
|
className = undefined
|
|
|
|
style = @props.style ? {}
|
|
style.WebkitUserDrag = 'none'
|
|
style.zoom = if pathIsRetina then 0.5 else 1
|
|
|
|
if @props.colorfill
|
|
style.WebkitMaskImage = "url('#{path}')"
|
|
style.objectPosition = "10000px"
|
|
className = "colorfill"
|
|
|
|
for key, val of style
|
|
val = "#{val}"
|
|
if key in StylesImpactedByZoom and val.indexOf('%') is -1
|
|
style[key] = val.replace('px','') / style.zoom
|
|
|
|
otherProps = _.omit(@props, _.keys(@constructor.propTypes))
|
|
<img className={className} src={path} style={style} {...otherProps} />
|
|
|
|
_pathFor: (name) ->
|
|
[basename, ext] = name.split('.')
|
|
if @props.active is true
|
|
name = "#{basename}-active.#{ext}"
|
|
if @props.selected is true
|
|
name = "#{basename}-selected.#{ext}"
|
|
resourcePath = @props.resourcePath ? DEFAULT_RESOURCE_PATH
|
|
Utils.imageNamed(resourcePath, name)
|
|
|
|
|
|
module.exports = RetinaImg
|