{this.renderIcon(icon)}
{this.renderTitle(title, this.isLast(message, children, buttons))}
{this.renderMessage(message, this.isLast(children, buttons))}
{this.renderChildren(children, this.isLast(buttons))}
{this.renderButtons(buttons)}
this.handleChange(e, i)}
onBlur={e => this.handleBlur(e, i)}
onKeyDown={this.handleKeyDown}
onKeyPress={this.handleKeyPress}
style={{
fontSize: '32px',
lineHeight: '32px',
textAlign: 'center',
paddingTop: '3px',
paddingBottom: '4px',
color: '#464646'
}}
{...removeMarginProps(props)}
/>
);
}
return {children}
;
}
}
export default Pin;
================================================
FILE: src/Pin/macOs/style/10.11.js
================================================
================================================
FILE: src/ProgressCircle/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { hiddenPropTypes } from '../../style/hidden';
import styles from './styles/10.11';
import { startAnimation, stopAnimation } from './progressCircleAnimation';
class ProgressCircle extends Component {
static propTypes = {
...hiddenPropTypes,
absolute: PropTypes.bool,
color: PropTypes.string,
size: PropTypes.number
};
componentDidMount() {
let elements = [];
for (let prop in this.refs) {
if (this.refs.hasOwnProperty(prop) && prop.match(/\d/g)) elements.push(this.refs[prop]);
}
this.animation = startAnimation(...elements);
}
componentWillUnmount() {
stopAnimation(this.animation);
}
render() {
const { size, color, style, absolute, hidden, ...props } = this.props;
let containerStyle = { ...styles.container };
let componentStyle = {
...styles.progress,
...style,
visibility: !hidden ? 'visible' : 'hidden',
display: !hidden ? 'block' : 'none'
};
if (absolute) {
componentStyle = { ...componentStyle, ...styles.absolute };
}
let componentColor = color;
if (!componentColor) {
componentColor = '#000000';
}
if (size) {
componentStyle = {
...componentStyle,
width: size + 'px',
height: size + 'px'
};
containerStyle = {
...containerStyle,
height: size + 'px'
};
}
const svg = (
);
let content = svg;
if (absolute) {
content = (
{svg}
);
}
return content;
}
}
export default ProgressCircle;
================================================
FILE: src/ProgressCircle/macOs/progressCircleAnimation.js
================================================
let ids = [];
let animations = {};
const framerate = 60;
const duration = 1900;
function animate(elements) {
this.currentStep = 0;
this.steps = duration / framerate;
this.increment = 1 / this.steps;
animateStep.apply(this, [elements]);
animations[this.id] = setInterval(() => animateStep.apply(this, [elements]), 1000 / framerate);
}
function animateStep(elements) {
this.currentStep++;
if (this.currentStep > this.steps) {
this.currentStep = 1;
}
for (let i = 0, len = 12; i < len; ++i) {
elements[11-i].style.opacity = this.increment * findStep.apply(this, [i]);
}
}
function findStep(index) {
let step = this.currentStep + (this.steps / 12 * index);
if (step > this.steps) {
step = -this.steps + step;
}
return this.steps - step;
}
export function startAnimation(...elements) {
let id = 0;
if (ids.length) id = ids[ids.length - 1] + 1;
ids.push(id);
animate.apply({ id }, [elements]);
return id;
}
export function stopAnimation(animation) {
window.clearInterval(animations[animation]);
}
================================================
FILE: src/ProgressCircle/macOs/styles/10.11.js
================================================
export default {
progress: {
width: '16px',
height: '16px'
},
container: {
position: 'relative',
height: '16px'
},
absolute: {
position: 'absolute',
top: 0,
left: 0
}
};
================================================
FILE: src/ProgressCircle/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { hiddenPropTypes } from '../../style/hidden';
import { ColorContext, colorPropTypes, colorContextTypes } from '../../style/color/windows';
import { startAnimation, stopAnimation } from './progressCircleAnimation';
import styles from './styles/windows10';
@ColorContext()
class ProgressCircle extends Component {
static propTypes = {
...hiddenPropTypes,
...colorPropTypes,
absolute: PropTypes.bool,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
static contextTypes = {
...colorContextTypes
};
componentDidMount() {
this.animation = startAnimation(
this.refs[0],
this.refs[1],
this.refs[2],
this.refs[3],
this.refs[4],
this.refs[5]
);
}
componentWillUnmount() {
stopAnimation(this.animation);
}
render() {
const { size, style, absolute, hidden, ...props } = this.props;
let containerStyle = { ...styles.container };
let componentStyle = {
...styles.progress,
...style,
visibility: !hidden ? 'visible' : 'hidden',
display: !hidden ? 'block' : 'none'
};
if (absolute) {
componentStyle = { ...componentStyle, ...styles.absolute };
}
let componentColor = this.context.color;
if (size) {
componentStyle = {
...componentStyle,
width: size + 'px',
height: size + 'px'
};
containerStyle = {
...containerStyle,
height: size + 'px'
};
}
const svg = (
);
let content = svg;
if (absolute) {
content = (
{svg}
);
}
return content;
}
}
export default ProgressCircle;
================================================
FILE: src/ProgressCircle/windows/progressCircleAnimation.js
================================================
import BezierEasing from '../../animation/bezierEasing';
let requestAnimationFrame;
if (typeof window !== 'undefined') {
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
}
const totalIterations = 95;
const circlesInterval = 14;
const restartInterval = 250;
const stopRotationAt = totalIterations * 2 / 1.02;
const easing = BezierEasing(0, 0.47, 0.9, .25);
const bounding = 68;
let ids = [];
let animations = {};
function rotateCircle(circles) {
let lastFrame = false;
for (var i = 0, len = circles.length; i < len; ++i) {
if (this.iteration >= circlesInterval * i) {
let iteration = this.iteration - circlesInterval * i;
const revolution = Math.floor(iteration / totalIterations);
iteration = iteration - (revolution * totalIterations);
if (iteration < 0) {
iteration = totalIterations - iteration;
} else if (iteration > totalIterations) {
iteration = iteration - totalIterations;
}
if (iteration + (revolution * totalIterations) > stopRotationAt) {
circles[i].setAttributeNS('', 'fill-opacity', '0');
if (i === circles.length-1) {
lastFrame = true;
}
} else {
const value = easing.get(1 / totalIterations * iteration) * 2 * Math.PI * -1;
circles[i].setAttributeNS('', 'fill-opacity', '1');
circles[i].setAttributeNS('', 'cx', 75 + (bounding * Math.sin(value)) + '');
circles[i].setAttributeNS('', 'cy', 75 + (bounding * Math.cos(value)) + '');
}
}
}
this.iteration++;
if (!lastFrame) {
animations[this.id] = ['animationFrame', requestAnimationFrame(rotateCircle.bind(this, circles))];
} else {
animations[this.id] = ['timeout', window.setTimeout(startAnimation.bind(null, ...circles), restartInterval)];
}
}
export function startAnimation(...elements) {
let id = 0;
if (ids.length) id = ids[ids.length - 1] + 1;
ids.push(id);
if (requestAnimationFrame) {
rotateCircle.apply({ iteration: 0, currentIteration: 0, id }, [elements]);
}
return id;
}
export function stopAnimation(animation) {
if (animations[animation][0] === 'timeout') {
window.clearTimeout(animations[animation][1]);
} else {
window.cancelAnimationFrame(animations[animation][1]);
}
}
================================================
FILE: src/ProgressCircle/windows/styles/windows10.js
================================================
export default {
progress: {
width: '20px',
height: '20px',
position: 'relative'
},
container: {
position: 'relative',
height: '20px'
},
absolute: {
position: 'absolute',
top: 0,
left: 0
}
};
================================================
FILE: src/Radio/macOs/Circle.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Radium from 'radium';
import styles from './styles/10.11';
@Radium
class Circle extends Component {
static propTypes = {
show: PropTypes.bool,
color: PropTypes.string,
shadowColor: PropTypes.string
};
static defaultProps = {
color: '#FFFFFF'
};
render() {
const { color, shadowColor } = this.props;
let style = { ...styles.checkmark };
style.opacity = '0';
style.transform = 'scale(2)';
style.transition = 'opacity 0s, transform 0.2s';
if (this.props.show) {
style.opacity = '1';
style.transform = 'scale(1)';
}
return (
);
}
}
export default Circle;
================================================
FILE: src/Radio/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Radium, { getState } from 'radium';
import styles from './styles/10.11';
import Text from '../../Text/macOs';
import Circle from './Circle';
import ValueRef from '../../ValueRef';
import WindowFocus from '../../windowFocus';
@ValueRef()
@WindowFocus()
@Hidden()
@Radium
class Radio extends Component {
static propTypes = {
...hiddenPropTypes,
label: PropTypes.string,
onChange: PropTypes.func
};
constructor(props) {
super();
this.state = {
checked: !!props.defaultChecked === true,
transition: true
};
}
componentDidMount() {
document.addEventListener('change', this.onSiblingChange);
}
componentWillUnmount() {
document.removeEventListener('change', this.onSiblingChange);
}
componentWillReceiveProps(nextProps) {
if (nextProps.isWindowFocused !== this.props.isWindowFocused) {
this.setState({ transition: false });
}
}
componentDidUpdate() {
if (!this.state.transition) {
setTimeout(() => this.setState({ transition: true }), 0);
}
}
onSiblingChange = () => {
if (this.refs.element.checked !== this.state.checked) {
this.setState({ checked: this.refs.element.checked });
}
};
handleChange = event => {
this.setState({ checked: event.target.checked });
if (this.props.onChange) {
this.props.onChange(event);
}
};
render() {
let { style, label, isWindowFocused, ...props } = this.props;
const { transition } = this.state;
let componentStyle = { ...styles.radio, ...style };
let labelStyle = styles.label;
let circleColor = '#FFFFFF';
let shadowColor = '#0050a5';
if (this.state.checked) {
if (isWindowFocused) {
componentStyle = {
...componentStyle,
...styles['radio:checked']
};
if (!transition) componentStyle.transition = 'none';
} else {
componentStyle = {
...componentStyle,
...styles['radio:checked:unfocused']
};
circleColor = '#404040';
shadowColor = '#FFFFFF';
}
}
if (getState(this.state, null, ':active')) {
if (this.state.checked) {
componentStyle = {
...componentStyle,
...styles['radio:checked:active']
};
shadowColor = '#001d99';
} else {
componentStyle = {
...componentStyle,
...styles['radio:active']
};
}
}
return (
);
}
}
export default Radio;
================================================
FILE: src/Radio/macOs/styles/10.11.js
================================================
export default {
container: {
display: 'flex'
},
label: {
display: 'flex',
height: '20px',
position: 'relative',
':hover': {},
':active': {}
},
inputWrapper: {
position: 'relative',
marginRight: '3px',
paddingTop: '2px'
},
radio: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppearance: 'none',
appearance: 'none',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '#b8b8b8',
borderRadius: '50%',
backgroundColor: '#ffffff',
padding: '7px',
margin: '0px',
boxShadow: 'inset 0 1px 0 0 rgba(224, 224, 224, .4)',
transition: 'all 0.4s',
':focus': {
outline: 'none'
}
},
'radio:active': {
borderColor: '#a4a4a4',
backgroundColor: '#f0f0f0',
boxShadow: 'inset 0 0 0 1px rgba(117, 117, 117, .35)',
transition: 'all 0.4s'
},
'radio:checked': {
backgroundColor: '#3b99fc',
boxShadow: 'none',
borderColor: '#2c91fc',
transition: 'all 0s'
},
'radio:checked:unfocused': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
borderColor: '#b8b8b8',
transition: 'none'
},
'radio:checked:active': {
backgroundColor: '#0080f6',
borderColor: '#006adc',
boxShadow: 'inset 0 0 0 1px rgba(19, 68, 119, .22)',
transition: 'all 0.4s'
},
checkmark: {
position: 'absolute',
top: '7px',
left: '5px',
width: '6px',
height: '6px'
},
svg: {
zIndex: '2',
position: 'absolute',
top: '0px',
left: '0px',
height: '6px'
},
svgShadow: {
zIndex: '1',
position: 'absolute',
top: '1.5px',
left: '0px',
opacity: '.37',
height: '6px',
filter: 'blur(.5px)'
}
};
================================================
FILE: src/Radio/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Radium, { getState } from 'radium';
import styles from './styles/windows';
import Text from '../../Text/windows';
import {
ThemeContext,
themePropTypes,
themeContextTypes
} from '../../style/theme/windows';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import {
ColorContext,
colorPropTypes,
colorContextTypes
} from '../../style/color/windows';
import ValueRef from '../../ValueRef';
@ValueRef()
@Hidden()
@ColorContext()
@ThemeContext()
@Radium
class Radio extends Component {
static propTypes = {
...hiddenPropTypes,
...colorPropTypes,
...themePropTypes,
label: PropTypes.string,
onChange: PropTypes.func
};
static contextTypes = {
...themeContextTypes,
...colorContextTypes
};
constructor(props) {
super();
this.state = {
checked: !!props.defaultChecked === true
};
}
componentDidMount() {
document.addEventListener('change', this.onSiblingChange);
}
componentWillUnmount() {
document.removeEventListener('change', this.onSiblingChange);
}
onSiblingChange = () => {
if (this.refs.element.checked !== this.state.checked) {
this.setState({ checked: this.refs.element.checked });
}
};
handleChange = event => {
this.setState({ checked: event.target.checked });
if (this.props.onChange) {
this.props.onChange(event);
}
};
render() {
let { style, label, color, ...props } = this.props;
let componentStyle = {
...styles.radio,
...(this.context.theme === 'dark' ? styles['radioDark'] : {})
};
let labelStyle = styles.label;
let circleStyle = {
...styles.circle,
...(this.context.theme === 'dark' ? styles['circleDark'] : {})
};
if (this.state.checked) {
componentStyle = {
...componentStyle,
borderColor: color || this.context.color
};
}
if (getState(this.state, null, ':active')) {
if (this.state.checked) {
componentStyle = {
...componentStyle,
...styles['radio:checked:active'],
...(this.context.theme === 'dark'
? styles['radioDark:checked:active']
: {})
};
circleStyle = {
...circleStyle,
...styles['circle:active'],
...(this.context.theme === 'dark' ? styles['circleDark:active'] : {})
};
} else {
componentStyle = {
...componentStyle,
...styles['radio:active'],
...(this.context.theme === 'dark' ? styles['radioDark:active'] : {})
};
}
} else if (getState(this.state, null, ':hover')) {
if (this.state.checked) {
circleStyle = {
...circleStyle,
...styles['circle:hover'],
...(this.context.theme === 'dark' ? styles['circleDark:hover'] : {})
};
} else {
componentStyle = {
...componentStyle,
...styles['radio:hover'],
...(this.context.theme === 'dark' ? styles['radioDark:hover'] : {})
};
}
}
componentStyle = { ...componentStyle, ...style };
return (
{this.state.checked ?
: null}
{label}
);
}
}
export default Radio;
================================================
FILE: src/Radio/windows/styles/windows.js
================================================
export default {
container: {
display: 'flex',
marginBottom: '21px'
},
label: {
display: 'flex',
position: 'relative',
':hover': {},
':active': {}
},
text: {
fontFamily: '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif',
fontSize: '15px',
color: '#000000',
display: 'inline'
},
textDark: {
color: '#ffffff'
},
inputWrapper: {
position: 'relative',
marginRight: '7px',
paddingTop: '2px'
},
radio: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppearance: 'none',
appearance: 'none',
borderWidth: '2px',
borderStyle: 'solid',
borderColor: '#333333',
borderRadius: '50%',
backgroundColor: 'transparent',
padding: '8px',
margin: '0px',
':focus': {
outline: 'none'
}
},
'radio:hover': {
borderColor: '#000000'
},
'radio:active': {
borderColor: '#666666'
},
'radio:checked:active': {
borderColor: '#666666'
},
radioDark: {
borderColor: '#cccccc'
},
'radioDark:hover': {
borderColor: '#ffffff'
},
'radioDark:active': {
borderColor: '#999999'
},
'radioDark:checked:active': {
borderColor: '#999999'
},
circle: {
position: 'absolute',
top: '7px',
left: '5px',
width: '10px',
height: '10px',
borderRadius: '50%',
background: '#333333'
},
'circle:hover': {
background: '#000000'
},
'circle:active': {
background: '#666666'
},
circleDark: {
background: '#cccccc'
},
'circleDark:hover': {
background: '#ffffff'
},
'circleDark:active': {
background: '#999999'
}
};
================================================
FILE: src/SearchField/macOs/cancelAnimation.js
================================================
let requestAnimationFrame;
if (typeof window !== 'undefined') {
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
}
let startTimestamp;
const duration = 150;
function animateCancelIcon(timestamp, element) {
if (!startTimestamp) startTimestamp = timestamp;
let progress = (timestamp - startTimestamp) / duration;
if (progress > 1) progress = 1;
element.style.height = (14 * progress) + 'px';
element.style.width = (14 * progress) + 'px';
element.style.opacity = progress;
if (progress !== 1) {
requestAnimationFrame(timestamp => animateCancelIcon(timestamp, element));
}
}
export default function(element) {
if (requestAnimationFrame) {
startTimestamp = null;
const icon = element.getElementsByTagName('svg')[0];
requestAnimationFrame(timestamp => animateCancelIcon(timestamp, icon));
}
}
================================================
FILE: src/SearchField/macOs/icons.js
================================================
import React from 'react';
export const searchIcon1x = (
);
export const searchIcon2x = (
);
export const cancelIcon1x = (
);
export const cancelIcon2x = (
);
================================================
FILE: src/SearchField/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import TextInput from '../../TextInput/macOs';
import * as icon from './icons';
import styles from './styles/10.11';
import cancelAnimation from './cancelAnimation';
import ValueRef from '../../ValueRef';
@ValueRef()
class SearchInput extends Component {
static propTypes = {
onCancel: PropTypes.func,
cancel: PropTypes.bool
};
static defaultProps = {
cancel: true
};
constructor() {
super();
this.state = {
showCancel: false
};
}
get searchIcon() {
return window && window.devicePixelRatio > 1.5
? icon.searchIcon2x
: icon.searchIcon1x;
}
get cancelIcon() {
return window && window.devicePixelRatio > 1.5
? icon.cancelIcon2x
: icon.cancelIcon1x;
}
handleCancelMouseDown = e => {
e.preventDefault();
e.stopPropagation();
};
handleCancelClick = () => {
const element = ReactDOM.findDOMNode(this.refs.input).getElementsByTagName(
'INPUT'
)[0];
element.setSelectionRange(0, element.value.length);
setTimeout(() => {
element.value = '';
let event = document.createEvent('HTMLEvents');
event.initEvent('change', false, true);
element.dispatchEvent(event);
event = new Event('input', { bubbles: true });
element.dispatchEvent(event);
element.blur();
if (this.props.onCancel) {
this.props.onCancel();
}
}, 200);
};
handleChange = e => {
if (this.props.cancel) {
if (e.target.value && !this.state.showCancel) {
this.setState({ showCancel: true });
} else if (!e.target.value && this.state.showCancel) {
this.setState({ showCancel: false });
}
}
if (typeof this.props.onChange === 'function') this.props.onChange(e);
};
handleKeyDown = e => {
if (e.keyCode === 27) {
const element = ReactDOM.findDOMNode(
this.refs.input
).getElementsByTagName('INPUT')[0];
element.value = '';
let event = document.createEvent('HTMLEvents');
event.initEvent('change', false, true);
element.dispatchEvent(event);
event = new Event('input', { bubbles: true });
element.dispatchEvent(event);
setTimeout(() => element.blur(), 10);
}
if (typeof this.props.onKeyDown === 'function') this.props.onKeyDown(e);
};
componentDidUpdate(prevProps, prevState) {
if (!prevState.showCancel && this.state.showCancel) {
cancelAnimation(ReactDOM.findDOMNode(this.refs.cancel));
}
}
render() {
const { cancel, ...props } = this.props;
delete props.onCancel;
return (
);
}
}
export default SearchInput;
================================================
FILE: src/SearchField/macOs/styles/10.11.js
================================================
export default {
container: {
position: 'relative'
},
cancel: {
position: 'absolute',
zIndex: 4,
top: '0px',
right: '0px',
width: '14px',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginRight: '4px',
marginLeft: '4px'
}
};
================================================
FILE: src/SegmentedControl/macOs/Item/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Item extends Component {
static propTypes = {
title: PropTypes.string,
selected: PropTypes.bool,
onSelect: PropTypes.func
};
render() {
let { children, ...props } = this.props;
delete props.title;
delete props.selected;
delete props.onSelect;
return (
{children}
);
}
}
export default Item;
================================================
FILE: src/SegmentedControl/macOs/Tabs/Tab.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from '../style/10.11';
import WindowFocus from '../../../windowFocus';
import Radium from 'radium';
@WindowFocus()
@Radium
class Tab extends Component {
static propTypes = {
selected: PropTypes.bool,
prevSelected: PropTypes.bool,
afterSelected: PropTypes.bool,
firstChild: PropTypes.bool,
lastChild: PropTypes.bool,
onSelect: PropTypes.func
};
render() {
let { children, style, onSelect, afterSelected, prevSelected, lastChild, firstChild, isWindowFocused } = this.props;
let componentStyle = { ...styles.tab, ...style };
if (firstChild) componentStyle = { ...componentStyle, ...styles.firstChild };
if (lastChild) componentStyle = { ...componentStyle, ...styles.lastChild };
if (prevSelected) componentStyle = { ...componentStyle, ...styles.prevSelected };
if (afterSelected) componentStyle = { ...componentStyle, ...styles.afterSelected };
if (this.props.selected) {
componentStyle = { ...componentStyle, ...styles.selected };
if (!isWindowFocused) componentStyle = { ...componentStyle, ...styles.selectedUnfocused };
if (firstChild) componentStyle = { ...componentStyle, ...styles.firstChildSelected };
if (lastChild) componentStyle = { ...componentStyle, ...styles.lastChildSelected };
}
return (
{children}
);
}
}
export default Tab;
================================================
FILE: src/SegmentedControl/macOs/Tabs/index.js
================================================
import React, { Component } from 'react';
import Tab from './Tab';
import styles from '../style/10.11';
class Tabs extends Component {
select(item) {
this.refs[item.props.tabId].setState({ selected: true });
}
unselect(item) {
this.refs[item.props.tabId].setState({ selected: false });
}
render() {
const { style } = this.props;
let children;
// todo: use Children.map
if (!this.props.children) {
return null;
} else if (
Object.prototype.toString.call(this.props.children) !== '[object Array]'
) {
children = [this.props.children];
} else {
children = [...this.props.children];
}
let tabs = [];
let hasSelected = false;
for (let i = 0, len = children.length; i < len; ++i) {
let props = children[i].props;
if (props.selected) hasSelected = true;
if (i === 0) props = { ...props, firstChild: true };
if (i === len - 1) props = { ...props, lastChild: true };
if (
children[i + 1] &&
children[i + 1].props &&
children[i + 1].props.selected
) {
props = { ...props, nextSelected: true };
}
tabs = [...tabs, props];
}
if (!hasSelected && tabs[0]) tabs[0].selected = true;
let prevSelectedIndex = null;
let afterSelected = false;
for (let i = 0, len = tabs.length; i < len; ++i) {
if (afterSelected) {
tabs[i] = { ...tabs[i], afterSelected: true };
afterSelected = false;
}
if (tabs[i].selected) {
afterSelected = true;
prevSelectedIndex = i - 1;
}
}
if (prevSelectedIndex >= 0 && tabs[prevSelectedIndex])
tabs[prevSelectedIndex] = {
...tabs[prevSelectedIndex],
prevSelected: true
};
return (
{this.renderTabs(tabs)}
);
}
renderTabs(tabs) {
const children = [];
for (let i = 0, len = tabs.length; i < len; ++i) {
children.push(
{tabs[i].title}
);
}
return children;
}
}
export default Tabs;
================================================
FILE: src/SegmentedControl/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import Margin, { marginPropTypes } from '../../style/margin';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Item from './Item';
import Tabs from './Tabs';
import styles from './style/10.11';
import Box from '../../Box/macOs';
let warnOnce = false;
function applyItem() {
return function(ComposedComponent) {
const nextItem = Item;
ComposedComponent.prototype.Item = ComposedComponent.Item = function(
...args
) {
if (!warnOnce) {
warnOnce = true;
console.warn(
'React Desktop: Using SegmentedControl.Item is deprecated, import SegmentedControlItem instead.'
);
}
return new nextItem(...args);
};
return ComposedComponent;
};
}
@applyItem()
@Dimension()
@Margin()
@Hidden()
class SegmentedControl extends Component {
static propTypes = {
...dimensionPropTypes,
...marginPropTypes,
...hiddenPropTypes,
box: PropTypes.bool
};
select(item) {
this.refs.tabs.select(item);
}
unselect(item) {
this.refs.tabs.unselect(item);
}
render() {
let { children, box, ...props } = this.props;
let content;
if (box) {
content = (
{this.renderItem()}
);
} else {
content = {this.renderItem()}
;
}
return (
{children}
{content}
);
}
renderItem() {
let child = null;
let children;
// todo: use Children.map
if (!this.props.children) {
return null;
} else if (
Object.prototype.toString.call(this.props.children) !== '[object Array]'
) {
children = [this.props.children];
} else {
children = [...this.props.children];
}
for (let i = 0, len = children.length; i < len; ++i) {
if (children[i].props.selected) child = children[i];
}
return child;
}
}
export default SegmentedControl;
================================================
FILE: src/SegmentedControl/macOs/style/10.11.js
================================================
export default {
sergmentedControl: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
flex: '1'
},
tabs: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
width: '100%',
display: 'flex',
justifyContent: 'center'
},
tab: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
background: '#ffffff',
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderTopColor: '#c7c7c7',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderBottomColor: '#a6a6a6',
borderRightWidth: '1px',
borderRightStyle: 'solid',
borderRightColor: '#d8d8d8',
paddingTop: '1px',
paddingBottom: '2px',
paddingLeft: '12px',
paddingRight: '12px',
lineHeight: '16px',
fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
fontSize: '13px',
boxShadow: '0 1px rgba(0, 0, 0, .039), 0 0 .5px rgba(0, 0, 0, .1)',
':active': {
background: '#f0f0f0'
}
},
firstChild: {
borderLeftWidth: '1px',
borderLeftStyle: 'solid',
borderLeftColor: '#b8b8b8',
borderTopLeftRadius: '4px',
borderBottomLeftRadius: '4px'
},
lastChild: {
borderRightColor: '#b8b8b8',
borderTopRightRadius: '4px',
borderBottomRightRadius: '4px'
},
selected: {
background: '-webkit-linear-gradient(top, #5ab2f6 0%, #0082fa 100%)',
borderTopColor: '#30a0f5',
borderBottomColor: '#0060fa',
borderLeftColor: '#0080f7',
borderRightColor: '#0080f7',
color: 'white',
borderRightWidth: '0px',
paddingRight: '13px',
paddingLeft: '13px',
':active': {
background: '-webkit-linear-gradient(top, #3397f9 0%, #0068df 100%)',
borderTopColor: '#007ff9',
borderBottomColor: '#0040d8',
borderLeftColor: '#0061e9',
borderRightColor: '#0061e9',
color: 'white'
}
},
firstChildSelected: {
paddingLeft: '12px'
},
lastChildSelected: {
borderRightWidth: '1px',
paddingRight: '12px'
},
prevSelected: {
borderRightWidth: '0px',
paddingRight: '12px'
},
afterSelected: {
},
selectedUnfocused: {
background: '#e5e5e5',
borderTopColor: '#c7c7c7',
borderBottomColor: '#a6a6a6',
borderLeftColor: '#b7b7b7',
borderRightColor: '#b7b7b7',
color: '#000000'
}
};
================================================
FILE: src/Text/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Margin, { marginPropTypes } from '../../style/margin';
import Padding, { paddingPropTypes } from '../../style/padding';
import FontSize, { fontSizePropTypes } from '../../style/fontSize';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import TextAlign, { textAlignPropTypes } from '../../style/textAlign';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
import Background, { backgroundPropTypes } from '../../style/background/macOs';
import styles from './styles/10.11';
@Background()
@Alignment()
@Margin()
@Padding()
@FontSize()
@Dimension()
@TextAlign()
@Hidden()
class Text extends Component {
static propTypes = {
...paddingPropTypes,
...alignmentPropTypes,
...backgroundPropTypes,
...hiddenPropTypes,
...textAlignPropTypes,
...marginPropTypes,
...fontSizePropTypes,
...dimensionPropTypes,
color: PropTypes.string,
bold: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
};
static defaultProps = {
color: '#000000'
};
render() {
const { color, children, style, bold, ...props } = this.props;
let componentStyle = { ...styles.text, color };
if (bold && bold === true) {
componentStyle = { ...componentStyle, fontWeight: 'bold' };
} else if (bold) {
componentStyle = { ...componentStyle, fontWeight: bold };
}
return (
{children}
);
}
}
export default Text;
================================================
FILE: src/Text/macOs/styles/10.11.js
================================================
export default {
text: {
display: 'block',
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
fontSize: '13px'
}
};
================================================
FILE: src/Text/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Margin, { marginPropTypes } from '../../style/margin';
import Padding, { paddingPropTypes } from '../../style/padding';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Background, { backgroundPropTypes } from '../../style/background/windows';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import { colorContextTypes } from '../../style/color/windows';
import { ThemeContext, themePropTypes, themeContextTypes } from '../../style/theme/windows';
import styles from './styles/windows10';
@Margin()
@Padding()
@Alignment()
@Hidden()
@Background()
@Dimension()
@ThemeContext()
class Text extends Component {
static propTypes = {
...themePropTypes,
...marginPropTypes,
...paddingPropTypes,
...alignmentPropTypes,
...hiddenPropTypes,
...backgroundPropTypes,
...dimensionPropTypes,
color: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
};
static contextTypes = {
...colorContextTypes,
...themeContextTypes
};
render() {
let { children, style, color, ...props } = this.props;
let componentStyle = { ...styles.text };
color = color === true ? this.context.color : color ? color : '#000000';
if (color) componentStyle = { ...componentStyle, color: color };
else if (this.context.theme === 'dark') componentStyle = { ...componentStyle, color: '#ffffff' };
if (props.horizontalAlignment) {
componentStyle.textAlign = props.horizontalAlignment;
}
componentStyle = { ...componentStyle, ...style };
return (
{children}
);
}
}
export default Text;
================================================
FILE: src/Text/windows/styles/windows10.js
================================================
export default {
text: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
lineHeight: '25.96px',
fontFamily: '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif',
fontSize: '14px',
display: 'flex'
}
};
================================================
FILE: src/TextArea/macOs/centerPlaceholderAnimation.js
================================================
import BezierEasing from '../../animation/bezierEasing';
let requestAnimationFrame;
if (typeof window !== 'undefined') {
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
}
let startTimestamp;
const duration = 350;
const easing = BezierEasing(.3,.14,0,1);
function moveLabel(timestamp, label, start, current, end, cb) {
if (start === end) return null;
if (!startTimestamp) startTimestamp = timestamp;
let progress = 1 - (timestamp - startTimestamp) / duration;
if (progress < 0) progress = 0;
progress = 1 - (easing.get(1 - progress));
if (start > end) {
current = progress * start;
} else {
current = (1 - progress) * end + start;
}
label.style.left = current + 'px';
if (start > end && current > end || start < end && current < end) {
requestAnimationFrame(timestamp => moveLabel(timestamp, label, start, current, end));
} else {
label.style.left = end + 'px';
if (cb) cb();
}
}
function animateLabel(label, start, end) {
return new Promise(resolve => {
if (requestAnimationFrame) {
requestAnimationFrame(timestamp => moveLabel(timestamp, label, start, start, end, resolve));
}
});
}
export function pullLeft(input, label) {
startTimestamp = null;
const start = label.offsetLeft;
input.style.color = 'transparent';
label.style.position = 'absolute';
setTimeout(() => {
animateLabel(label, start, 2);
setTimeout(() => input.style.color = null, 300);
}, 10);
}
export function pushCenter(input, label) {
startTimestamp = null;
label.style.position = 'relative';
const end = label.offsetLeft;
label.style.position = 'absolute';
setTimeout(() => {
animateLabel(label, 2, end)
.then(() => label.style.position = 'relative');
}, 10);
}
================================================
FILE: src/TextArea/macOs/focusRingAnimation.js
================================================
import { keyframes } from 'radium';
export default function (borderRadius) {
return keyframes(
{
'0%': {
opacity: '0',
borderWidth: '34px',
top: '-34px',
left: '-34px'
},
'32%': {
opacity: '0',
borderRadius: '10px',
borderWidth: '30px',
top: '-30px',
left: '-30px'
},
'50%': {
opacity: '.2',
borderWidth: '15px',
top: '-15px',
left: '-15px'
},
'80%': {
opacity: '.4',
borderWidth: '9px',
top: '-9px',
left: '-9px'
},
'90%': {
opacity: '.9',
borderWidth: '6px',
top: '-6px',
left: '-6px'
},
'100%': {
opacity: '1',
...(
borderRadius ? {
top: '-2px',
left: '-2px',
borderRadius: (parseInt(borderRadius) + 2) + 'px',
borderWidth: '2px',
boxShadow: '0 0 1px 0px rgba(125, 195, 242, .7)'
} : {
top: '-3px',
left: '-3px',
borderRadius: '4px',
borderWidth: '3px'
}
)
}
},
'text-input-focus'
);
}
================================================
FILE: src/TextArea/macOs/index.js
================================================
import React, { Component, cloneElement } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import Radium, { StyleRoot } from 'radium';
import styles from './styles/10.11';
import Text from '../../Text/macOs';
import Label from '../../Label/macOs';
import Hidden, { hiddenPropTypes, removeHiddenProps } from '../../style/hidden';
import Margin, { marginPropTypes, removeMarginProps } from '../../style/margin';
import Dimension, {
dimensionPropTypes,
removeDimensionProps
} from '../../style/dimension';
import FontSize, {
fontSizePropTypes,
removeFontSizeProps
} from '../../style/fontSize';
import PlaceholderStyle from '../../placeholderStyle';
import mapStyles from '../../utils/mapStyles';
import { parseDimension } from '../../styleHelper';
import focusRingAnimation from './focusRingAnimation';
import { pullLeft, pushCenter } from './centerPlaceholderAnimation';
import ValueRef from '../../ValueRef';
@ValueRef()
@Hidden()
@Dimension()
@Radium
class TextAreaOSX extends Component {
static propTypes = {
...hiddenPropTypes,
...marginPropTypes,
...dimensionPropTypes,
...fontSizePropTypes,
label: PropTypes.string,
rounded: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.string
]),
rows: PropTypes.number,
cols: PropTypes.number,
focusRing: PropTypes.bool,
onEnter: PropTypes.func,
centerPlaceholder: PropTypes.bool,
icon: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
placeholder: PropTypes.string
};
static defaultProps = {
focusRing: true
};
static mapStyles = {
container: ['margin', 'width', 'height', 'display']
};
static contextTypes = {
titlebarChild: PropTypes.bool
};
constructor() {
super();
this.state = {
isFocused: false,
showPlaceholder: true,
iconPadding: null
};
}
componentDidMount() {
const el = ReactDOM.findDOMNode(this).getElementsByTagName('TEXTAREA')[0];
el.addEventListener('blur', this.handleBlur);
el.addEventListener('focus', this.handleFocus);
el.addEventListener('keypress', this.handleKeypress);
el.addEventListener('keydown', this.handleKeydown);
el.addEventListener('keyup', this.handleChange);
el.addEventListener('change', this.handleChange);
if (this.props.icon) {
setTimeout(() =>
this.setState({
iconPadding: ReactDOM.findDOMNode(
this.refs.icon
).getBoundingClientRect().width
})
);
}
}
componentWillUnmount() {
const el = ReactDOM.findDOMNode(this).getElementsByTagName('TEXTAREA')[0];
el.removeEventListener('blur', this.handleBlur);
el.removeEventListener('focus', this.handleFocus);
el.removeEventListener('keypress', this.handleKeypress);
el.removeEventListener('keydown', this.handleKeydown);
el.removeEventListener('keyup', this.handleChange);
el.removeEventListener('change', this.handleChange);
}
handleKeydown = e => {
if (e.keyCode === 8 && e.target.value.length === 1) {
this.setState({ showPlaceholder: true });
}
};
handleKeypress = e => {
const noEffect = [0, 13];
if (e.which === 13 && this.props.onEnter) {
this.props.onEnter(e);
}
if (!e.which || noEffect.indexOf(e.which) !== -1) return null;
if (String.fromCharCode(e.which)) {
if (this.state.showPlaceholder) {
this.setState({ showPlaceholder: false });
}
}
};
handleChange = e => {
if (e.target.value && this.state.showPlaceholder) {
this.setState({ showPlaceholder: false });
} else if (!e.target.value && !this.state.showPlaceholder) {
this.setState({ showPlaceholder: true });
}
};
handleBlur = e => {
if (this.props.centerPlaceholder) {
if (!e.target.value) {
pushCenter(e.target, ReactDOM.findDOMNode(this.refs.label));
}
}
this.setState({ isFocused: false });
};
handleFocus = e => {
if (this.props.centerPlaceholder) {
if (!e.target.value) {
pullLeft(e.target, ReactDOM.findDOMNode(this.refs.label));
}
}
setTimeout(() => this.setState({ isFocused: true }));
};
/**
* Remove the focus programmatically
* @public
* */
blur() {
const inputEl = ReactDOM.findDOMNode(this.refs.element);
inputEl.blur();
}
/**
* Focus the input programmatically
* @public
*/
focus() {
const inputEl = ReactDOM.findDOMNode(this.refs.element);
inputEl.focus();
}
render() {
let {
style,
label,
size,
rounded,
focusRing,
placeholder,
centerPlaceholder,
icon,
...props
} = this.props;
delete props.onEnter;
let [inputStyle, containerStyle] = mapStyles(style, TextAreaOSX.mapStyles);
let componentStyle = { ...styles.textField };
if (rounded) rounded = rounded === true ? '4px' : parseDimension(rounded);
let focusElement;
if (this.state.isFocused && focusRing) {
componentStyle = {
...componentStyle,
...(rounded ? styles.textFieldRoundedFocus : styles.textFieldFocus)
};
let focusElementStyle = {
...styles.focusElement,
animation: 'x .25s linear forwards',
animationName: focusRingAnimation(rounded)
};
focusElement =
;
}
let labelComponent = label ? (
{label}
) : null;
props = removeFontSizeProps(
removeDimensionProps(removeMarginProps(removeHiddenProps(props)))
);
if (rounded) {
componentStyle.borderRadius = parseDimension(rounded);
}
if (size && parseInt(size) !== 13) {
const ratio = size / 13;
componentStyle.lineHeight = parseDimension(size * 1.4);
componentStyle.paddingLeft = parseDimension(3.5 * ratio);
componentStyle.paddingRight = parseDimension(3.5 * ratio);
}
let input = FontSize(
,
this.props
);
if (this.state.iconPadding) {
inputStyle.paddingLeft = parseDimension(this.state.iconPadding + 12);
}
if (this.context.titlebarChild) {
inputStyle = { ...inputStyle, ...styles.titleBarTextArea };
if (this.state.isFocused && focusRing) {
inputStyle = { ...inputStyle, ...styles.titleBarTextAreaFocus };
}
}
input = cloneElement(input, {
...input.props,
style: { ...input.props.style, ...inputStyle }
});
let placeholderElement;
if (centerPlaceholder) {
placeholderElement = (
{icon}
{this.state.showPlaceholder ? (
{placeholder}
) : null}
);
} else if (placeholder) {
input = (
{cloneElement(input, {
...input.props,
style: { ...input.props.style, ...inputStyle },
placeholder
})}
);
}
return Margin(
{labelComponent}
{focusElement}
{placeholderElement}
{input}
{Background(
,
this.props
)}
);
if (label) {
return (
{label}
{input}
);
}
return input;
}
}
export default TextArea;
================================================
FILE: src/TextArea/windows/styles/windows10.js
================================================
export default {
textBox: {
WebkitUserSelect: 'none',
userSelect: 'none',
borderWidth: '2px',
borderStyle: 'solid',
borderColor: 'rgba(148, 148, 148, 1)',
padding: '2px 10px 3px 10px',
lineHeight: '23px',
fontFamily: '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif',
fontSize: '15px',
fontWeight: '100',
color: '#000000',
marginBottom: '-4px',
background: 'rgba(255, 255, 255, .35)',
':hover': {
borderColor: 'rgba(100, 100, 100, 1)',
background: 'rgba(255, 255, 255, .5)'
},
':focus': {
outline: 'none',
borderColor: 'rgba(0, 120, 215, 1)',
background: 'rgba(255, 255, 255, 1)'
}
},
textBoxDarkTheme: {
borderColor: 'rgba(255, 255, 255, .41)',
background: 'rgba(0, 0, 0, .4)',
color: '#ffffff',
':hover': {
borderColor: 'rgba(255, 255, 255, .94)',
background: 'rgba(0, 0, 0, .6)'
},
':focus': {
outline: 'none',
borderColor: 'rgba(0, 120, 215, 1)',
background: 'rgba(255, 255, 255, 1)',
color: '#000000'
}
},
':placeholder': {
color: '#636363'
},
':placeholderDarkTheme': {
color: 'rgba(255, 255, 255, .64)',
':focus': {
color: 'rgba(0, 0, 0, .41)'
}
},
labalDarkTheme: {
}
};
================================================
FILE: src/TextInput/macOs/centerPlaceholderAnimation.js
================================================
import BezierEasing from '../../animation/bezierEasing';
let requestAnimationFrame;
if (typeof window !== 'undefined') {
requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
}
let startTimestamp;
const duration = 350;
const easing = BezierEasing(.3,.14,0,1);
function moveLabel(timestamp, label, start, current, end, cb) {
if (start === end) return null;
if (!startTimestamp) startTimestamp = timestamp;
let progress = 1 - (timestamp - startTimestamp) / duration;
if (progress < 0) progress = 0;
progress = 1 - (easing.get(1 - progress));
if (start > end) {
current = progress * start;
} else {
current = (1 - progress) * end + start;
}
label.style.left = current + 'px';
if (start > end && current > end || start < end && current < end) {
requestAnimationFrame(timestamp => moveLabel(timestamp, label, start, current, end));
} else {
label.style.left = end + 'px';
if (cb) cb();
}
}
function animateLabel(label, start, end) {
return new Promise(resolve => {
if (requestAnimationFrame) {
requestAnimationFrame(timestamp => moveLabel(timestamp, label, start, start, end, resolve));
}
});
}
export function pullLeft(input, label) {
startTimestamp = null;
const start = label.offsetLeft;
input.style.color = 'transparent';
label.style.position = 'absolute';
setTimeout(() => {
animateLabel(label, start, 2);
setTimeout(() => input.style.color = null, 300);
}, 10);
}
export function pushCenter(input, label) {
startTimestamp = null;
label.style.position = 'relative';
const end = label.offsetLeft;
label.style.position = 'absolute';
setTimeout(() => {
animateLabel(label, 2, end)
.then(() => label.style.position = 'relative');
}, 10);
}
================================================
FILE: src/TextInput/macOs/focusRingAnimation.js
================================================
import { keyframes } from 'radium';
export default function (borderRadius) {
return keyframes(
{
'0%': {
opacity: '0',
borderWidth: '34px',
top: '-34px',
left: '-34px'
},
'32%': {
opacity: '0',
borderRadius: '10px',
borderWidth: '30px',
top: '-30px',
left: '-30px'
},
'50%': {
opacity: '.2',
borderWidth: '15px',
top: '-15px',
left: '-15px'
},
'80%': {
opacity: '.4',
borderWidth: '9px',
top: '-9px',
left: '-9px'
},
'90%': {
opacity: '.9',
borderWidth: '6px',
top: '-6px',
left: '-6px'
},
'100%': {
opacity: '1',
...(
borderRadius ? {
top: '-2px',
left: '-2px',
borderRadius: (parseInt(borderRadius) + 2) + 'px',
borderWidth: '2px',
boxShadow: '0 0 1px 0px rgba(125, 195, 242, .7)'
} : {
top: '-3px',
left: '-3px',
borderRadius: '4px',
borderWidth: '3px'
}
)
}
},
'text-input-focus'
);
}
================================================
FILE: src/TextInput/macOs/index.js
================================================
import React, { Component, cloneElement } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import Radium, { StyleRoot } from 'radium';
import styles from './styles/10.11';
import Text from '../../Text/macOs';
import Label from '../../Label/macOs';
import Hidden, { hiddenPropTypes, removeHiddenProps } from '../../style/hidden';
import Margin, { marginPropTypes, removeMarginProps } from '../../style/margin';
import Dimension, {
dimensionPropTypes,
removeDimensionProps
} from '../../style/dimension';
import FontSize, {
fontSizePropTypes,
removeFontSizeProps
} from '../../style/fontSize';
import PlaceholderStyle from '../../placeholderStyle';
import mapStyles from '../../utils/mapStyles';
import { parseDimension } from '../../styleHelper';
import focusRingAnimation from './focusRingAnimation';
import { pullLeft, pushCenter } from './centerPlaceholderAnimation';
import ValueRef from '../../ValueRef';
@ValueRef()
@Hidden()
@Dimension()
@Radium
class TextFieldOSX extends Component {
static propTypes = {
...hiddenPropTypes,
...marginPropTypes,
...dimensionPropTypes,
...fontSizePropTypes,
label: PropTypes.string,
rounded: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.string
]),
focusRing: PropTypes.bool,
onEnter: PropTypes.func,
centerPlaceholder: PropTypes.bool,
icon: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
placeholder: PropTypes.string,
password: PropTypes.bool
};
static defaultProps = {
focusRing: true
};
static mapStyles = {
container: ['margin', 'width', 'height', 'display']
};
static contextTypes = {
titlebarChild: PropTypes.bool
};
constructor() {
super();
this.state = {
isFocused: false,
showPlaceholder: true,
iconPadding: null
};
}
componentDidMount() {
const el = ReactDOM.findDOMNode(this).getElementsByTagName('INPUT')[0];
el.addEventListener('blur', this.handleBlur);
el.addEventListener('focus', this.handleFocus);
el.addEventListener('keypress', this.handleKeypress);
el.addEventListener('keydown', this.handleKeydown);
el.addEventListener('keyup', this.handleChange);
el.addEventListener('change', this.handleChange);
if (this.props.icon) {
setTimeout(() =>
this.setState({
iconPadding: ReactDOM.findDOMNode(
this.refs.icon
).getBoundingClientRect().width
})
);
}
}
componentWillUnmount() {
const el = ReactDOM.findDOMNode(this).getElementsByTagName('INPUT')[0];
el.removeEventListener('blur', this.handleBlur);
el.removeEventListener('focus', this.handleFocus);
el.removeEventListener('keypress', this.handleKeypress);
el.removeEventListener('keydown', this.handleKeydown);
el.removeEventListener('keyup', this.handleChange);
el.removeEventListener('change', this.handleChange);
}
handleKeydown = e => {
if (e.keyCode === 8 && e.target.value.length === 1) {
this.setState({ showPlaceholder: true });
}
};
handleKeypress = e => {
const noEffect = [0, 13];
if (e.which === 13 && this.props.onEnter) {
this.props.onEnter(e);
}
if (!e.which || noEffect.indexOf(e.which) !== -1) return null;
if (String.fromCharCode(e.which)) {
if (this.state.showPlaceholder) {
this.setState({ showPlaceholder: false });
}
}
};
handleChange = e => {
if (e.target.value && this.state.showPlaceholder) {
this.setState({ showPlaceholder: false });
} else if (!e.target.value && !this.state.showPlaceholder) {
this.setState({ showPlaceholder: true });
}
};
handleBlur = e => {
if (this.props.centerPlaceholder) {
if (!e.target.value) {
pushCenter(e.target, ReactDOM.findDOMNode(this.refs.label));
}
}
this.setState({ isFocused: false });
};
handleFocus = e => {
if (this.props.centerPlaceholder) {
if (!e.target.value) {
pullLeft(e.target, ReactDOM.findDOMNode(this.refs.label));
}
}
setTimeout(() => this.setState({ isFocused: true }));
};
/**
* Remove the focus programmatically
* @public
* */
blur() {
const inputEl = ReactDOM.findDOMNode(this.refs.element);
inputEl.blur();
}
/**
* Focus the input programmatically
* @public
*/
focus() {
const inputEl = ReactDOM.findDOMNode(this.refs.element);
inputEl.focus();
}
render() {
let {
style,
label,
size,
rounded,
focusRing,
placeholder,
centerPlaceholder,
icon,
password,
...props
} = this.props;
delete props.onEnter;
let [inputStyle, containerStyle] = mapStyles(style, TextFieldOSX.mapStyles);
let componentStyle = { ...styles.textField };
if (rounded) rounded = rounded === true ? '4px' : parseDimension(rounded);
let focusElement;
if (this.state.isFocused && focusRing) {
componentStyle = {
...componentStyle,
...(rounded ? styles.textFieldRoundedFocus : styles.textFieldFocus)
};
let focusElementStyle = {
...styles.focusElement,
animation: 'x .25s linear forwards',
animationName: focusRingAnimation(rounded)
};
focusElement =
;
}
let labelComponent = label ? (
{label}
) : null;
props = removeFontSizeProps(
removeDimensionProps(removeMarginProps(removeHiddenProps(props)))
);
if (rounded) {
componentStyle.borderRadius = parseDimension(rounded);
}
if (size && parseInt(size) !== 13) {
const ratio = size / 13;
componentStyle.lineHeight = parseDimension(size * 1.4);
componentStyle.paddingLeft = parseDimension(3.5 * ratio);
componentStyle.paddingRight = parseDimension(3.5 * ratio);
}
let input = FontSize(
{icon}
{this.state.showPlaceholder ? (
{placeholder}
) : null}
);
} else if (placeholder) {
input = (
{cloneElement(input, {
...input.props,
style: { ...input.props.style, ...inputStyle },
placeholder
})}
);
}
return Margin(
{labelComponent}
{focusElement}
{placeholderElement}
{input}
{Background(
);
if (label) {
return (
{label}
{input}
);
}
return input;
}
}
export default TextInput;
================================================
FILE: src/TextInput/windows/styles/windows10.js
================================================
export default {
textBox: {
WebkitUserSelect: 'none',
userSelect: 'none',
borderWidth: '2px',
borderStyle: 'solid',
borderColor: 'rgba(148, 148, 148, 1)',
padding: '2px 10px 3px 10px',
lineHeight: '23px',
fontFamily: '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif',
fontSize: '15px',
fontWeight: '100',
color: '#000000',
marginBottom: '18px',
background: 'rgba(255, 255, 255, .35)',
':hover': {
borderColor: 'rgba(100, 100, 100, 1)',
background: 'rgba(255, 255, 255, .5)'
},
':focus': {
outline: 'none',
borderColor: 'rgba(0, 120, 215, 1)',
background: 'rgba(255, 255, 255, 1)'
}
},
textBoxDarkTheme: {
borderColor: 'rgba(255, 255, 255, .41)',
background: 'rgba(0, 0, 0, .4)',
color: '#ffffff',
':hover': {
borderColor: 'rgba(255, 255, 255, .94)',
background: 'rgba(0, 0, 0, .6)'
},
':focus': {
outline: 'none',
borderColor: 'rgba(0, 120, 215, 1)',
background: 'rgba(255, 255, 255, 1)',
color: '#000000'
}
},
':placeholder': {
color: '#636363'
},
':placeholderDarkTheme': {
color: 'rgba(255, 255, 255, .64)',
':focus': {
color: 'rgba(0, 0, 0, .41)'
}
},
labalDarkTheme: {
}
};
================================================
FILE: src/TitleBar/macOs/Controls/Close.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WindowFocus from '../../../windowFocus';
import styles from './styles/10.11';
import Radium from 'radium';
@WindowFocus()
@Radium
class Close extends Component {
static propTypes = {
style: PropTypes.object,
showIcon: PropTypes.bool,
disabled: PropTypes.bool
};
render() {
const { style, isWindowFocused, showIcon, disabled, ...props } = this.props;
delete props.isFullscreen;
const iconStyle = {
...styles.close.icon,
opacity: showIcon && !disabled ? 1 : 0
};
let componentStyle = { ...styles.close.button, ...style };
if (!isWindowFocused && !showIcon) {
componentStyle = { ...componentStyle, ...styles.close.unfocused };
}
if (disabled) {
componentStyle = { ...componentStyle, ...styles.close.disabled };
}
return (
{window && window.devicePixelRatio > 1.5 ? (
) : (
)}
);
}
}
export default Close;
================================================
FILE: src/TitleBar/macOs/Controls/Minimize.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WindowFocus from '../../../windowFocus';
import styles from './styles/10.11';
import Radium from 'radium';
@WindowFocus()
@Radium
class Minimize extends Component {
static propTypes = {
style: PropTypes.object,
showIcon: PropTypes.bool,
disabled: PropTypes.bool
};
render() {
const { style, isWindowFocused, showIcon, disabled, ...props } = this.props;
delete props.isFullscreen;
const iconStyle = {
...styles.minimize.icon,
opacity: showIcon && !disabled ? 1 : 0
};
let componentStyle = { ...styles.minimize.button, ...style };
if (!isWindowFocused && !showIcon) {
componentStyle = { ...componentStyle, ...styles.minimize.unfocused };
}
if (disabled) {
componentStyle = { ...componentStyle, ...styles.minimize.disabled };
}
return (
{window && window.devicePixelRatio > 1.5 ? (
) : (
)}
);
}
}
export default Minimize;
================================================
FILE: src/TitleBar/macOs/Controls/Resize.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WindowFocus from '../../../windowFocus';
import styles from './styles/10.11';
import Radium from 'radium';
@WindowFocus()
@Radium
class Resize extends Component {
static propTypes = {
isFullscreen: PropTypes.bool,
showIcon: PropTypes.bool,
disabled: PropTypes.bool,
disableFullscreen: PropTypes.bool,
};
componentDidMount() {
document.addEventListener('keydown', this.handleKeydown);
document.addEventListener('keyup', this.handleKeyup);
}
handleKeydown = e => {
if (e.altKey) this.setState({ altKey: true });
};
handleKeyup = () => {
if (this.state.altKey) this.setState({ altKey: false });
};
render() {
let {
style,
onClick,
onMaximizeClick,
isWindowFocused,
showIcon,
disabled,
disableFullscreen,
...props
} = this.props;
delete props.isFullscreen;
let iconStyle = {
...styles.resize.icon,
opacity: showIcon && !disabled ? 1 : 0
};
let componentStyle = { ...styles.resize.button, ...style };
if (!isWindowFocused && !showIcon) {
componentStyle = { ...componentStyle, ...styles.resize.unfocused };
}
if (disabled) {
componentStyle = { ...componentStyle, ...styles.resize.disabled };
}
let icon;
if (this.props.isFullscreen && !disableFullscreen) {
icon = window && window.devicePixelRatio > 1.5 ? (
) : (
);
} else if (this.state.altKey || disableFullscreen) {
onClick = onMaximizeClick;
icon = window && window.devicePixelRatio > 1.5 ? (
) : (
);
} else {
icon = window && window.devicePixelRatio > 1.5 ? (
) : (
);
}
return (
{icon}
);
}
}
export default Resize;
================================================
FILE: src/TitleBar/macOs/Controls/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Close from './Close';
import Minimize from './Minimize';
import Resize from './Resize';
var styles = {
controls: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
display: 'flex',
width: '61px'
},
inset: {
marginLeft: '5px'
}
};
class Controls extends Component {
static propTypes = {
inset: PropTypes.bool,
isFullscreen: PropTypes.bool,
onCloseClick: PropTypes.func,
onMinimizeClick: PropTypes.func,
onMaximizeClick: PropTypes.func,
onResizeClick: PropTypes.func,
disableClose: PropTypes.bool,
disableMinimize: PropTypes.bool,
disableResize: PropTypes.bool,
disableFullscreen: PropTypes.bool
};
constructor() {
super();
this.state = {
isOver: false
};
}
render() {
return (
this.setState({ isOver: true })}
onMouseLeave={() => this.setState({ isOver: false })}
>
);
}
}
export default Controls;
================================================
FILE: src/TitleBar/macOs/Controls/styles/10.11.js
================================================
export default {
close: {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
cursor: 'default',
boxSizing: 'border-box',
width: '12px',
height: '12px',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '50%',
marginTop: '1px',
marginLeft: '5px',
marginRight: '4px',
lineHeight: 0,
backgroundColor: '#ff5f57',
borderColor: '#e2463f',
':active': {
backgroundColor: '#bf4943',
borderColor: '#ad3934'
}
},
unfocused: {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0',
},
disabled: {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0',
':active': {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0'
}
},
icon: {
width: '10px',
height: '10px'
}
},
minimize: {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
cursor: 'default',
boxSizing: 'border-box',
width: '12px',
height: '12px',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '50%',
marginTop: '1px',
marginLeft: '4px',
marginRight: '4px',
lineHeight: 0,
backgroundColor: '#ffbd2e',
borderColor: '#e1a116',
':active': {
backgroundColor: '#bf9123',
borderColor: '#ad7d15'
}
},
unfocused: {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0',
},
disabled: {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0',
':active': {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0'
}
},
icon: {
width: '10px',
height: '10px'
}
},
resize: {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
cursor: 'default',
width: '12px',
height: '12px',
boxSizing: 'border-box',
borderWidth: '1px',
borderStyle: 'solid',
borderRadius: '50%',
marginTop: '1px',
marginLeft: '4px',
marginRight: '4px',
lineHeight: 0,
backgroundColor: '#28c940',
borderColor: '#12ac28',
':active': {
backgroundColor: '#1f9a31',
borderColor: '#128622'
}
},
unfocused: {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0'
},
disabled: {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0',
':active': {
backgroundColor: '#dddddd',
borderColor: '#d0d0d0'
}
},
icon: {
width: '10px',
height: '10px'
}
}
};
================================================
FILE: src/TitleBar/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Controls from './Controls';
import styles from './styles/10.11';
import WindowFocus from '../../windowFocus';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
@Dimension({ width: '100%' })
@WindowFocus()
class TitleBar extends Component {
static propTypes = {
...dimensionPropTypes,
title: PropTypes.node,
inset: PropTypes.bool,
controls: PropTypes.bool,
transparent: PropTypes.bool,
isFullscreen: PropTypes.bool,
onCloseClick: PropTypes.func,
onMinimizeClick: PropTypes.func,
onMaximizeClick: PropTypes.func,
onResizeClick: PropTypes.func,
disableClose: PropTypes.bool,
disableMinimize: PropTypes.bool,
disableResize: PropTypes.bool,
disableFullscreen: PropTypes.bool
};
static childContextTypes = {
titlebarChild: PropTypes.bool
};
getChildContext() {
return {
titlebarChild: true
};
}
componentDidMount() {
window.addEventListener('resize', this.resize);
this.resize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
componentDidUpdate() {
this.resize();
}
resize = () => {
if (this.refs.title) {
const barRect = this.refs.element.getBoundingClientRect();
this.refs.title.style.overflow = 'visible';
this.refs.title.style.paddingRight = 0;
this.refs.title.style.flexGrow = 0;
const titleRect = this.refs.title.getBoundingClientRect();
this.refs.title.style.overflow = 'hidden';
this.refs.title.style.flexGrow = 1;
const barWidth = barRect.width - 6;
const contentWidth = titleRect.width + (this.props.controls ? 60 : 0);
let padding = barWidth - contentWidth;
if (padding > 60) padding = 60;
this.refs.title.style.paddingRight = padding + 'px';
}
};
render() {
let {
children,
inset,
controls,
title,
transparent,
isWindowFocused,
style,
...props
} = this.props;
delete props.isFullscreen;
delete props.onCloseClick;
delete props.onMinimizeClick;
delete props.onMaximizeClick;
delete props.onResizeClick;
delete props.disableClose;
delete props.disableMinimize;
delete props.disableResize;
delete props.disableFullscreen;
let componentStyle = { ...styles.titleBar };
let titleStyle = styles.title;
if (inset) {
componentStyle = { ...componentStyle, ...styles.titleBarInset };
}
if (!isWindowFocused) {
componentStyle = { ...componentStyle, ...styles.unfocusedTitleBar };
titleStyle = { ...titleStyle, ...styles.unfocusedTitle };
}
controls = !controls || (
{title}
);
if (transparent) {
delete componentStyle.backgroundImage;
delete componentStyle.borderBottomWidth;
delete componentStyle.borderBottomStyle;
delete componentStyle.borderBottomColor;
delete componentStyle.borderTopWidth;
delete componentStyle.borderTopStyle;
delete componentStyle.borderTopColor;
delete componentStyle.borderTopLeftRadius;
delete componentStyle.borderTopRightRadius;
}
return (
{controls}
{title}
{children}
);
}
}
export default TitleBar;
================================================
FILE: src/TitleBar/macOs/styles/10.11.js
================================================
export default {
titleBar: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'drag',
cursor: 'default',
width: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
minHeight: '22px',
backgroundImage:
'-webkit-linear-gradient(top, #ededed 0, #ededed 1px, #e7e7e7 2px, #d1d1d1 100%)',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
borderBottomColor: '#afafaf',
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderTopColor: '#f6f6f6',
borderTopLeftRadius: '5px',
borderTopRightRadius: '5px',
paddingLeft: '3px',
paddingRight: '3px'
},
titleBarInset: {
paddingTop: '11px',
paddingBottom: '11px',
paddingLeft: '8px',
paddingRight: '8px'
},
unfocusedTitleBar: {
backgroundImage:
'-webkit-linear-gradient(top, #fafafa 0px, #f6f6f6 2px, #f6f6f6 100%)',
borderBottomColor: '#d1d1d1'
},
title: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
fontFamily:
'-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif',
fontSize: '13px',
letterSpacing: '0px',
color: '#4d4d4d',
flexGrow: '1',
flexShrink: '1',
textAlign: 'center',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
},
unfocusedTitle: {
color: '#d3d3d3'
}
};
================================================
FILE: src/TitleBar/windows/Controls/Close.js
================================================
import React, { Component } from 'react';
import Radium, { getState } from 'radium';
import WindowFocus from '../../../windowFocus';
import { themeContextTypes } from '../../../style/theme/windows';
import { backgroundContextTypes } from '../../../style/background/windows';
import { isDarkColor } from '../../../color';
const styles = {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
cursor: 'default',
width: '46px',
height: '100%',
lineHeight: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
':hover': {
transition: 'background-color 0.1s',
backgroundColor: '#e81123',
},
':active': {
backgroundColor: '#f1707a',
}
},
icon: {
width: '10px',
height: '10px'
}
};
@WindowFocus()
@Radium
class Close extends Component {
static contextTypes = {
...themeContextTypes,
...backgroundContextTypes
};
render() {
const { style, isWindowFocused, ...props } = this.props;
let svgFill = '#000000';
if (!isWindowFocused && this.context.theme !== 'dark') {
svgFill = 'rgba(0, 0, 0, .4)';
}
let componentStyle = { ...styles.button, ...style };
if (this.context.theme === 'dark' || this.context.background && isDarkColor(this.context.background)) {
svgFill = '#ffffff';
componentStyle = { ...componentStyle, ...styles.buttonColorBackground };
}
if (getState(this.state, null, ':active')) {
svgFill = '#000000';
} else if (getState(this.state, null, ':hover')) {
svgFill = '#ffffff';
}
return (
);
}
}
export default Close;
================================================
FILE: src/TitleBar/windows/Controls/Maximize.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import WindowFocus from '../../../windowFocus';
import { themeContextTypes } from '../../../style/theme/windows';
import { backgroundContextTypes } from '../../../style/background/windows';
import { isDarkColor } from '../../../color';
import Radium from 'radium'
var styles = {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
cursor: 'default',
width: '46px',
height: '100%',
lineHeight: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
':hover': {
transition: 'background-color 0.1s',
backgroundColor: '#e5e5e5'
},
':active': {
backgroundColor: '#cccccc'
}
},
buttonColorBackground: {
':hover': {
transition: 'background-color 0.1s',
backgroundColor: 'rgba(255, 255, 255, .13)'
},
':active': {
backgroundColor: 'rgba(255, 255, 255, .23)'
}
},
icon: {
width: '10px',
height: '10px'
}
};
@WindowFocus()
@Radium
class Maximize extends Component {
static contextTypes = {
...themeContextTypes,
...backgroundContextTypes,
isMaximized: PropTypes.bool
};
render() {
const { style, isWindowFocused, ...props } = this.props;
delete props.onMaximizeClick;
delete props.onRestoreDownClick;
let svgFill = '#000000';
if (!isWindowFocused && this.context.theme !== 'dark') {
svgFill = 'rgba(0, 0, 0, .4)';
}
let componentStyle = { ...styles.button, ...style };
if (this.context.theme === 'dark' || this.context.background && isDarkColor(this.context.background)) {
svgFill = '#ffffff';
componentStyle = { ...componentStyle, ...styles.buttonColorBackground };
}
let title = 'Maximize';
let icon = (
);
let onClick = this.props.onMaximizeClick;
if (this.context.isMaximized) {
title = 'Restore Down';
icon = (
);
onClick = this.props.onRestoreDownClick;
}
return (
{icon}
);
}
}
export default Maximize;
================================================
FILE: src/TitleBar/windows/Controls/Minimize.js
================================================
import React, { Component } from 'react';
import WindowFocus from '../../../windowFocus';
import { themeContextTypes } from '../../../style/theme/windows';
import { backgroundContextTypes } from '../../../style/background/windows';
import { isDarkColor } from '../../../color';
import Radium from 'radium'
var styles = {
button: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
appRegion: 'no-drag',
cursor: 'default',
width: '46px',
height: '100%',
lineHeight: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
':hover': {
transition: 'background-color 0.1s',
backgroundColor: '#e5e5e5'
},
':active': {
backgroundColor: '#cccccc'
}
},
buttonColorBackground: {
':hover': {
transition: 'background-color 0.1s',
backgroundColor: 'rgba(255, 255, 255, .13)'
},
':active': {
backgroundColor: 'rgba(255, 255, 255, .23)'
}
},
icon: {
width: '10px',
height: '1px'
}
};
@WindowFocus()
@Radium
class Minimize extends Component {
static contextTypes = {
...themeContextTypes,
...backgroundContextTypes
};
render() {
const { style, isWindowFocused, ...props } = this.props;
let svgFill = '#000000';
if (!isWindowFocused && this.context.theme !== 'dark') {
svgFill = 'rgba(0, 0, 0, .4)';
}
let componentStyle = { ...styles.button, ...style };
if (this.context.theme === 'dark' || this.context.background && isDarkColor(this.context.background)) {
svgFill = '#ffffff';
componentStyle = { ...componentStyle, ...styles.buttonColorBackground };
}
return (
);
}
}
export default Minimize;
================================================
FILE: src/TitleBar/windows/Controls/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Close from './Close';
import Minimize from './Minimize';
import Maximize from './Maximize';
var styles = {
controls: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
display: 'flex',
height: '32px'
}
};
class Controls extends Component {
static propTypes = {
onCloseClick: PropTypes.func,
onMinimizeClick: PropTypes.func,
onRestoreDownClick: PropTypes.func,
onMaximizeClick: PropTypes.func
};
render() {
return (
);
}
}
export default Controls;
================================================
FILE: src/TitleBar/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Background, {
backgroundPropTypes
} from '../../style/background/windows';
import { hiddenPropTypes } from '../../style/hidden';
import { ColorContext, colorPropTypes } from '../../style/color/windows';
import {
ThemeContext,
themePropTypes,
themeContextTypes
} from '../../style/theme/windows';
import WindowFocus from '../../windowFocus';
import Controls from './Controls';
import styles from './styles/windows10';
@Background((nextProps, prevProps, background) => ({
...nextProps,
hasBackground: background
}))
@WindowFocus()
@ThemeContext()
@ColorContext()
class TitleBar extends Component {
static propTypes = {
...hiddenPropTypes,
...themePropTypes,
...colorPropTypes,
...backgroundPropTypes,
title: PropTypes.node,
controls: PropTypes.bool,
isMaximized: PropTypes.bool,
onCloseClick: PropTypes.func,
onMinimizeClick: PropTypes.func,
onMaximizeClick: PropTypes.func,
onRestoreDownClick: PropTypes.func
};
static childContextTypes = {
isMaximized: PropTypes.bool
};
static contextTypes = {
...themeContextTypes
};
getChildContext() {
return {
isMaximized: this.props.isMaximized
};
}
render() {
const {
children,
style,
controls,
title,
isWindowFocused,
hasBackground,
hidden,
...props
} = this.props;
delete props.isMaximized;
delete props.onCloseClick;
delete props.onMinimizeClick;
delete props.onMaximizeClick;
delete props.onRestoreDownClick;
let componentStyle = { ...styles.titleBar, ...style };
let titleStyle = styles.title;
if (!isWindowFocused && this.context.theme !== 'dark') {
titleStyle = { ...titleStyle, ...styles.unfocusedTitle };
}
if (this.context.theme === 'dark') {
titleStyle = { ...titleStyle, ...styles.titleDark };
}
componentStyle = {
...componentStyle,
visibility: !hidden ? 'visible' : 'hidden',
display: !hidden ? 'flex' : 'none'
};
if (this.context.theme === 'dark') {
componentStyle = { ...componentStyle, ...styles.titleBarDark };
}
const controlsComponent = !controls || {this.props.title}
);
if (hasBackground) delete componentStyle.backgroundColor;
return (
{titleComponent}
{controlsComponent}
{children}
);
}
}
export default TitleBar;
================================================
FILE: src/TitleBar/windows/styles/windows10.js
================================================
export default {
titleBar: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'drag',
appRegion: 'drag',
cursor: 'default',
display: 'flex',
alignItems: 'center',
width: '100%',
height: '31px',
backgroundColor: '#ffffff'
},
titleBarDark: {
backgroundColor: '#171717'
},
title: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
paddingLeft: '12px',
fontFamily: '"Segoe UI", "Arial"',
fontSize: '12px',
color: '#000000',
flex: 1
},
titleDark: {
color: '#ffffff'
},
unfocusedTitle: {
color: '#a9a9a9'
}
};
================================================
FILE: src/Toolbar/macOs/Nav/Item/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Text from '../../../../Text/macOs';
const styles = {
container: {
WebkitUserSelect: 'none',
userSelect: 'none',
WebkitAppRegion: 'no-drag',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '1px',
marginLeft: '5px',
marginRight: '5px',
width: '64px'
},
iconContainer: {
height: '25px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
marginBottom: '1px'
}
};
class Item extends Component {
static propTypes = {
titel: PropTypes.string,
icon: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
selected: PropTypes.bool,
onClick: PropTypes.func
};
render() {
const { title, icon, style, selected, ...props } = this.props;
return (
);
}
}
export default Item;
================================================
FILE: src/Toolbar/macOs/Nav/index.js
================================================
import React, { Component } from 'react';
import { Style } from 'radium';
import Dimension, { dimensionPropTypes } from '../../../style/dimension';
import WindowFocus from '../../../windowFocus';
const styles = {
nav: {
display: 'flex',
alignItems: 'center'
}
};
@Dimension({ height: '54px' })
@WindowFocus()
class Nav extends Component {
static propTypes = {
...dimensionPropTypes
};
render() {
const { children, style, isWindowFocused, ...props } = this.props;
let componentStyle = { ...styles.nav };
let fillOpacity = '.8';
if (!isWindowFocused) {
componentStyle.opacity = '.5';
fillOpacity = '.3';
}
return (
{children}
);
}
}
export default Nav;
================================================
FILE: src/Toolbar/macOs/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
var styles = {
toolbar: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}
};
@Alignment()
@Dimension({ width: '100%' })
class Toolbar extends Component {
static propTypes = {
...alignmentPropTypes,
...dimensionPropTypes
};
static childContextTypes = {
titlebarChild: PropTypes.bool
};
getChildContext() {
return {
titlebarChild: true
};
}
render() {
const { style, ...props } = this.props;
return (
{this.props.children}
);
}
}
export default Toolbar;
================================================
FILE: src/ValueRef.js
================================================
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
function ValueRef(ComposedComponent) {
return class extends Component {
get value() {
return findDOMNode(this).getElementsByTagName('input')[0].value;
}
set value(value) {
findDOMNode(this).getElementsByTagName('input')[0].value = value;
}
render() {
return
{children}
);
}
}
export default View;
================================================
FILE: src/View/windows/index.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Width, { widthPropTypes } from '../../style/width';
import Margin, { marginPropTypes } from '../../style/margin';
import Padding, { paddingPropTypes } from '../../style/padding';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
import Background, { backgroundContextTypes } from '../../style/background/windows';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import { ColorContext } from '../../style/color/windows';
import { ThemeContext } from '../../style/theme/windows';
var styles = {
display: 'flex',
position: 'relative'
};
@Width()
@Dimension()
@Alignment()
@Margin()
@Padding()
@Background()
@Hidden()
@ColorContext()
@ThemeContext()
class View extends Component {
static propTypes = {
...alignmentPropTypes,
...widthPropTypes,
...marginPropTypes,
...paddingPropTypes,
...backgroundContextTypes,
...hiddenPropTypes,
...dimensionPropTypes,
direction: PropTypes.string,
layout: PropTypes.string
};
static defaultProps = {
layout: 'horizontal'
};
render() {
let { horizontalAlignment, children, style, direction, layout, ...props } = this.props;
let componentStyle = { ...styles, ...style };
if (direction) {
// direction will be deprecated on v0.3 and a warning will be shown
layout = direction === 'column' ? 'vertical' : 'horizontal';
}
if (layout === 'vertical') {
componentStyle.flexDirection = 'column';
if (horizontalAlignment) {
switch(horizontalAlignment) {
case 'center': componentStyle.alignItems = 'center'; break;
case 'left': componentStyle.alignItems = 'flex-start'; break;
case 'right': componentStyle.alignItems = 'flex-end'; break;
}
}
} else {
if (horizontalAlignment) {
switch(horizontalAlignment) {
case 'center': componentStyle.justifyContent = 'center'; break;
case 'left': componentStyle.justifyContent = 'flex-start'; break;
case 'right': componentStyle.justifyContent = 'flex-end'; break;
}
}
}
return (
{children}
);
}
}
export default View;
================================================
FILE: src/Window/macOs/index.js
================================================
import React, { Component, Children } from 'react';
import PropTypes from 'prop-types';
import TitleBar from '../../TitleBar/macOs';
import View from '../../View/macOs';
import styles from './styles/10.11';
import WindowFocus from '../../windowFocus';
import Padding, {
paddingPropTypes,
removePaddingProps
} from '../../style/padding';
import Background, {
backgroundPropTypes,
removeBackgroundProps
} from '../../style/background/macOs';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
@WindowFocus()
@Alignment()
@Hidden()
@Dimension({ width: '100vw', height: '100vh' })
class Window extends Component {
static propTypes = {
...paddingPropTypes,
...backgroundPropTypes,
...alignmentPropTypes,
...hiddenPropTypes,
...dimensionPropTypes,
chrome: PropTypes.bool
};
filterChildren() {
let titleBar = '';
let otherChildren = [];
Children.map(this.props.children, element => {
const TitleBarEl = {children} , props),
props
);
props = removePaddingProps(props);
props = removeBackgroundProps(props);
return (
{titleBar}
{content}
);
}
}
export default Window;
================================================
FILE: src/Window/macOs/styles/10.11.js
================================================
export default {
window: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
backgroundColor: '#ececec',
display: 'flex',
flexDirection: 'column',
boxSizing: 'border-box'
},
chrome: {
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px',
borderBottomLeftRadius: '4px',
borderBottomRightRadius: '4px',
boxShadow:
'0 0 1px rgba(0, 0, 0, .26), ' + // Border
'0 0 5px rgba(0, 0, 0, .16), ' + // Small Glow
'0 8px 10px rgba(0, 0, 0, .06), ' + // Bottom Glow
'0 25px 65px rgba(0, 0, 0, .48) ' // Big shadow
},
unfocused: {
boxShadow:
'0 0 1px rgba(0, 0, 0, .31), ' + // Border
'0 0 5px rgba(0, 0, 0, .18), ' + // Small Glow
'0 8px 50px rgba(0, 0, 0, .3) ' // Big shadow
},
content: {
flex: 1,
padding: '24px 20px 20px 20px'
}
};
================================================
FILE: src/Window/windows/index.js
================================================
import React, { Component, Children } from 'react';
import PropTypes from 'prop-types';
import TitleBar from '../../TitleBar/windows';
import View from '../../View/windows';
import styles from './styles/windows10';
import WindowFocus from '../../windowFocus';
import Padding, {
paddingPropTypes,
removePaddingProps
} from '../../style/padding';
import Alignment, { alignmentPropTypes } from '../../style/alignment';
import Hidden, { hiddenPropTypes } from '../../style/hidden';
import Dimension, { dimensionPropTypes } from '../../style/dimension';
import {
ColorContext,
colorPropTypes,
colorContextTypes
} from '../../style/color/windows';
import {
ThemeContext,
themePropTypes,
themeContextTypes
} from '../../style/theme/windows';
@WindowFocus()
@Alignment()
@Hidden()
@Dimension({ width: '100vw', height: '100vh' })
@ColorContext()
@ThemeContext()
class Window extends Component {
static propTypes = {
...colorPropTypes,
...themePropTypes,
...paddingPropTypes,
...alignmentPropTypes,
...hiddenPropTypes,
...dimensionPropTypes,
chrome: PropTypes.bool
};
static contextTypes = {
...colorContextTypes,
...themeContextTypes
};
filterChildren() {
let titleBar = '';
let otherChildren = [];
Children.map(this.props.children, element => {
const TitleBarEl =
{children}
,
this.props
);
props = removePaddingProps(props);
return (
{titleBar}
{content}
);
}
}
export default Window;
================================================
FILE: src/Window/windows/styles/windows10.js
================================================
export default {
window: {
WebkitUserSelect: 'none',
userSelect: 'none',
cursor: 'default',
backgroundColor: '#ffffff',
display: 'flex',
flexDirection: 'column',
padding: 'none',
boxSizing: 'border-box'
},
windowDark: {
backgroundColor: '#171717'
},
chrome: {
borderWidth: '1px',
borderStyle: 'solid',
boxShadow: '0 2px 11px 3px rgba(0, 0, 0, .2)'
},
unfocused: {
borderColor: '#aaaaaa'
},
content: {
flexGrow: '1',
display: 'flex'
}
};
================================================
FILE: src/animation/bezierEasing.js
================================================
/**
* BezierEasing - use bezier curve for transition easing function
* by Gaëtan Renaudeau 2014 - 2015 – MIT License
*
* Credits: is based on Firefox's nsSMILKeySpline.cpp
* Usage:
* var spline = BezierEasing([ 0.25, 0.1, 0.25, 1.0 ])
* spline.get(x) => returns the easing value | x must be in [0, 1] range
*
*/
// These values are established by empiricism with tests (tradeoff: performance VS precision)
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var float32ArraySupported = typeof Float32Array === 'function';
function A(aA1, aA2) {
return 1.0 - 3.0 * aA2 + 3.0 * aA1;
}
function B(aA1, aA2) {
return 3.0 * aA2 - 6.0 * aA1;
}
function C(aA1) {
return 3.0 * aA1;
}
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier(aT, aA1, aA2) {
return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
}
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope(aT, aA1, aA2) {
return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
}
function binarySubdivide(aX, aA, aB, mX1, mX2) {
var currentX, currentT, i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}
function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) return aGuessT;
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
/**
* points is an array of [ mX1, mY1, mX2, mY2 ]
*/
function BezierEasing(points, b, c, d) {
if (arguments.length === 4) {
return new BezierEasing([points, b, c, d]);
}
if (!(this instanceof BezierEasing)) return new BezierEasing(points);
if (!points || points.length !== 4) {
throw new Error('BezierEasing: points must contains 4 values');
}
for (var i = 0; i < 4; ++i) {
if (typeof points[i] !== 'number' || isNaN(points[i]) || !isFinite(points[i])) {
throw new Error('BezierEasing: points should be integers.');
}
}
if (points[0] < 0 || points[0] > 1 || points[2] < 0 || points[2] > 1) {
throw new Error('BezierEasing x values must be in [0, 1] range.');
}
this._str = 'BezierEasing(' + points + ')';
this._css = 'cubic-bezier(' + points + ')';
this._p = points;
this._mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
this._precomputed = false;
this.get = this.get.bind(this);
}
BezierEasing.prototype = {
get: function (x) {
var mX1 = this._p[0],
mY1 = this._p[1],
mX2 = this._p[2],
mY2 = this._p[3];
if (!this._precomputed) this._precompute();
if (mX1 === mY1 && mX2 === mY2) return x; // linear
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0) return 0;
if (x === 1) return 1;
return calcBezier(this._getTForX(x), mY1, mY2);
},
getPoints: function () {
return this._p;
},
toString: function () {
return this._str;
},
toCSS: function () {
return this._css;
},
// Private part
_precompute: function () {
var mX1 = this._p[0],
mY1 = this._p[1],
mX2 = this._p[2],
mY2 = this._p[3];
this._precomputed = true;
if (mX1 !== mY1 || mX2 !== mY2)
this._calcSampleValues();
},
_calcSampleValues: function () {
var mX1 = this._p[0],
mX2 = this._p[2];
for (var i = 0; i < kSplineTableSize; ++i) {
this._mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
},
/**
* getTForX chose the fastest heuristic to determine the percentage value precisely from a given X projection.
*/
_getTForX: function (aX) {
var mX1 = this._p[0],
mX2 = this._p[2],
mSampleValues = this._mSampleValues;
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;
for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;
// Interpolate to provide an initial guess for t
var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;
var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope === 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}
}
};
// CSS mapping
BezierEasing.css = {
'ease': BezierEasing.ease = BezierEasing(0.25, 0.1, 0.25, 1.0),
'linear': BezierEasing.linear = BezierEasing(0.00, 0.0, 1.00, 1.0),
'ease-in': BezierEasing.easeIn = BezierEasing(0.42, 0.0, 1.00, 1.0),
'ease-out': BezierEasing.easeOut = BezierEasing(0.00, 0.0, 0.58, 1.0),
'ease-in-out': BezierEasing.easeInOut = BezierEasing(0.42, 0.0, 0.58, 1.0)
};
module.exports = BezierEasing;
================================================
FILE: src/color.js
================================================
function colorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = '#', c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += (`00${c}`).substr(c.length);
}
return rgb;
}
export function hexToRgb(hex) {
let result;
if (hex.match(/^#.{3}$/)) {
result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex);
result[1] += result[1];
result[2] += result[2];
result[3] += result[3];
} else {
result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
}
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
export function transparentize(color, amount) {
const c = hexToRgb(color);
return `rgba(${c.r}, ${c.g}, ${c.b}, ${Math.round((1 - amount) * 1000) / 1000})`;
}
export function darkenColor(color, percent) {
return colorLuminance(color, -percent);
}
export function ligthenColor(color) {
return color;
}
export function convertColor(color) {
var colors = {
'aliceblue':'#f0f8ff','antiquewhite':'#faebd7','aqua':'#00ffff','aquamarine':'#7fffd4','azure':'#f0ffff',
'beige':'#f5f5dc','bisque':'#ffe4c4','black':'#000000','blanchedalmond':'#ffebcd','blue':'#0000ff','blueviolet':'#8a2be2','brown':'#a52a2a','burlywood':'#deb887',
'cadetblue':'#5f9ea0','chartreuse':'#7fff00','chocolate':'#d2691e','coral':'#ff7f50','cornflowerblue':'#6495ed','cornsilk':'#fff8dc','crimson':'#dc143c','cyan':'#00ffff',
'darkblue':'#00008b','darkcyan':'#008b8b','darkgoldenrod':'#b8860b','darkgray':'#a9a9a9','darkgreen':'#006400','darkkhaki':'#bdb76b','darkmagenta':'#8b008b','darkolivegreen':'#556b2f',
'darkorange':'#ff8c00','darkorchid':'#9932cc','darkred':'#8b0000','darksalmon':'#e9967a','darkseagreen':'#8fbc8f','darkslateblue':'#483d8b','darkslategray':'#2f4f4f','darkturquoise':'#00ced1',
'darkviolet':'#9400d3','deeppink':'#ff1493','deepskyblue':'#00bfff','dimgray':'#696969','dodgerblue':'#1e90ff',
'firebrick':'#b22222','floralwhite':'#fffaf0','forestgreen':'#228b22','fuchsia':'#ff00ff',
'gainsboro':'#dcdcdc','ghostwhite':'#f8f8ff','gold':'#ffd700','goldenrod':'#daa520','gray':'#808080','green':'#008000','greenyellow':'#adff2f',
'honeydew':'#f0fff0','hotpink':'#ff69b4',
'indianred ':'#cd5c5c','indigo':'#4b0082','ivory':'#fffff0','khaki':'#f0e68c',
'lavender':'#e6e6fa','lavenderblush':'#fff0f5','lawngreen':'#7cfc00','lemonchiffon':'#fffacd','lightblue':'#add8e6','lightcoral':'#f08080','lightcyan':'#e0ffff','lightgoldenrodyellow':'#fafad2',
'lightgrey':'#d3d3d3','lightgreen':'#90ee90','lightpink':'#ffb6c1','lightsalmon':'#ffa07a','lightseagreen':'#20b2aa','lightskyblue':'#87cefa','lightslategray':'#778899','lightsteelblue':'#b0c4de',
'lightyellow':'#ffffe0','lime':'#00ff00','limegreen':'#32cd32','linen':'#faf0e6',
'magenta':'#ff00ff','maroon':'#800000','mediumaquamarine':'#66cdaa','mediumblue':'#0000cd','mediumorchid':'#ba55d3','mediumpurple':'#9370d8','mediumseagreen':'#3cb371','mediumslateblue':'#7b68ee',
'mediumspringgreen':'#00fa9a','mediumturquoise':'#48d1cc','mediumvioletred':'#c71585','midnightblue':'#191970','mintcream':'#f5fffa','mistyrose':'#ffe4e1','moccasin':'#ffe4b5',
'navajowhite':'#ffdead','navy':'#000080',
'oldlace':'#fdf5e6','olive':'#808000','olivedrab':'#6b8e23','orange':'#ffa500','orangered':'#ff4500','orchid':'#da70d6',
'palegoldenrod':'#eee8aa','palegreen':'#98fb98','paleturquoise':'#afeeee','palevioletred':'#d87093','papayawhip':'#ffefd5','peachpuff':'#ffdab9','peru':'#cd853f','pink':'#ffc0cb','plum':'#dda0dd','powderblue':'#b0e0e6','purple':'#800080',
'red':'#ff0000','rosybrown':'#bc8f8f','royalblue':'#4169e1',
'saddlebrown':'#8b4513','salmon':'#fa8072','sandybrown':'#f4a460','seagreen':'#2e8b57','seashell':'#fff5ee','sienna':'#a0522d','silver':'#c0c0c0','skyblue':'#87ceeb','slateblue':'#6a5acd','slategray':'#708090','snow':'#fffafa','springgreen':'#00ff7f','steelblue':'#4682b4',
'tan':'#d2b48c','teal':'#008080','thistle':'#d8bfd8','tomato':'#ff6347','turquoise':'#40e0d0',
'violet':'#ee82ee',
'wheat':'#f5deb3','white':'#ffffff','whitesmoke':'#f5f5f5',
'yellow':'#ffff00','yellowgreen':'#9acd32'
};
if (typeof color === 'string' && typeof colors[color.toLowerCase()] != 'undefined') {
return colors[color.toLowerCase()];
}
return color;
}
export function isDarkColor(color) {
const c = convertColor(color).substring(1); // strip #
const rgb = parseInt(c, 16); // convert rrggbb to decimal
const r = (rgb >> 16) & 0xff; // extract red
const g = (rgb >> 8) & 0xff; // extract green
const b = (rgb >> 0) & 0xff; // extract blue
const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
return luma < 40;
}
================================================
FILE: src/monitor.js
================================================
if (typeof window !== 'undefined') {
window.addEventListener('focus', windowFocus);
window.addEventListener('blur', windowBlur);
}
let isWindowFocused = true;
if (typeof document === 'object' && typeof document.hasFocus === 'function') {
isWindowFocused = document.hasFocus();
}
function windowFocus() {
isWindowFocused = true;
}
function windowBlur() {
isWindowFocused = false;
}
export function windowIsFocused() {
return isWindowFocused;
}
================================================
FILE: src/os.js
================================================
export const MACOS = 'macOs';
export const WINDOWS = 'windows';
export default function os() {
// explicitly set these to avoid issues
const w = window || null;
const n = navigator || null;
const p = process || (w && w.process) || null;
// via node
if (p && p.platform) {
if (p.platform === 'darwin') {
return MACOS;
}
if (p.platform.includes('win')) {
return WINDOWS;
}
}
// via user agent
if (n && n.userAgent) {
if (n.userAgent.includes('Macintosh')) {
return MACOS;
}
if (n.userAgent.includes('Windows')) {
return WINDOWS;
}
}
// default to macOs
return MACOS;
}
================================================
FILE: src/placeholderStyle.js
================================================
import React, { Component } from 'react';
import { Style } from 'radium';
function generateUniqueId() {
return Math.floor((Math.random() * 10000) + 1) + '-' + +Math.floor((Math.random() * 10000) + 1) + '-' + +Math.floor((Math.random() * 10000) + 1) + '-' + +Math.floor((Math.random() * 10000) + 1) + '-' + +Math.floor((Math.random() * 10000) + 1) + '-' + +Math.floor((Math.random() * 10000) + 1) + '-' + +Math.floor((Math.random() * 10000) + 1) + '-' +
Math.floor((Math.random() * 100000000000000));
}
function mapRules(selector, style) {
let styles = { 0: style };
if (style[':hover']) {
styles = { ...styles, ':hover': style[':hover'] };
delete styles[0][':hover'];
}
if (style[':active']) {
styles = { ...styles, ':active': style[':active'] };
delete styles[0][':active'];
}
if (style[':focus']) {
styles = { ...styles, ':focus': style[':focus'] };
delete styles[0][':focus'];
}
let rules = {};
for (var prop in styles) {
if (styles.hasOwnProperty(prop)) {
rules[`${selector} input${prop !== '0' ? prop : ''}::-webkit-input-placeholder`] = styles[prop];
rules[`${selector} input${prop !== '0' ? prop : ''}::-moz-placeholder`] = styles[prop];
rules[`${selector} input${prop !== '0' ? prop : ''}:-ms-input-placeholder`] = styles[prop];
rules[`${selector} input${prop !== '0' ? prop : ''}:placeholder`] = styles[prop];
}
}
return rules;
}
export default class extends Component {
constructor() {
super();
this._id = generateUniqueId();
}
render() {
const { children, placeholderStyle, ...props } = this.props;
return (
{children}
);
}
}
================================================
FILE: src/style/alignment.js
================================================
import PropTypes from 'prop-types';
import styleHelper, { extractProps } from '../styleHelper';
const allowedValues = ['left', 'right', 'center'];
export const alignmentPropTypes = {
horizontalAlignment: PropTypes.string,
verticalAlignment: PropTypes.string
};
export function removeAlignmentProps(props) {
return extractProps(props, alignmentPropTypes)[0];
}
function mapAlignmentStyle(key, value, props) {
let finalKey, finalValue;
if (allowedValues.indexOf(value) === -1) {
console.error('Unknown value for ' + key + ': ' + value);
} else {
let layout = 'horizontal';
if (props !== undefined && typeof props.layout !== 'undefined') {
layout = props.layout;
}
if (key === 'horizontalAlignment' && layout === 'horizontal' || key === 'verticalAlignment' && layout === 'vertical') {
finalKey = 'justifyContent';
switch (value) {
case 'center':
finalValue = 'center';
break;
case 'left':
finalValue = 'flex-start';
break;
case 'right':
finalValue = 'flex-end';
break;
}
} else if (key === 'verticalAlignment' && layout === 'horizontal' || key === 'horizontalAlignment' && layout === 'vertical') {
finalKey = 'alignItems';
switch (value) {
case 'center':
finalValue = 'center';
break;
case 'left':
finalValue = 'flex-start';
break;
case 'right':
finalValue = 'flex-end';
break;
}
}
}
return [finalKey, finalValue];
}
export default function(...options) {
return styleHelper(options, alignmentPropTypes, mapAlignmentStyle);
}
================================================
FILE: src/style/background/macOs.js
================================================
import PropTypes from 'prop-types';
import styleHelper, { extractProps } from '../../styleHelper';
export const backgroundPropTypes = {
background: PropTypes.string
};
export function removeBackgroundProps(props) {
return extractProps(props, backgroundPropTypes)[0];
}
export default function(...options) {
return styleHelper(options, backgroundPropTypes);
}
================================================
FILE: src/style/background/windows.js
================================================
import React, { Component, isValidElement } from 'react';
import PropTypes from 'prop-types';
import styleHelper, { extractProps } from '../../styleHelper';
import { ColorContext, colorContextTypes } from '../../style/color/windows';
import Radium from 'radium';
export const backgroundPropTypes = {
background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
};
export const backgroundContextTypes = {
background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
};
export function removeBackgroundProps(props) {
return extractProps(props, backgroundPropTypes)[0];
}
export default function(...options) {
if (options[0] && isValidElement(options[0])) {
@ColorContext(true)
@Radium
class BackgroundElement extends Component {
static contextTypes = { ...colorContextTypes };
render () {
const props = { ...options[1] };
if (typeof props.background === 'boolean') {
if (!props.background) delete props.background;
else if (this.context.color) props.background = this.context.color;
else delete props.background;
}
options[1] = { ...props };
return styleHelper(options, backgroundPropTypes);
}
}
return Hello );
expect(string).to.match(/Hello/);
});
it('create button component with one node', () => {
const string = renderToString(
Hello
);
expect(string).to.match(/Hello/);
});
it('create button component with multiple nodes', () => {
const string = renderToString(
Hello
World
);
expect(string).to.match(/Hello/);
expect(string).to.match(/World/);
});
});
================================================
FILE: test/tests/checkbox.js
================================================
import { expect } from 'chai';
import React from 'react';
import { renderToString } from 'react-dom/server';
import CheckboxOSX from '../../src/Checkbox/macOs';
import CheckboxWindows from '../../src/Checkbox/windows';
describe('Checkbox', () => {
it('create osx checkbox', () => {
const string = renderToString(Hello );
expect(string).to.match(/Hello/);
});
it('create label component with one node', () => {
const string = renderToString(
Hello
);
expect(string).to.match(/Hello/);
});
it('create label component with multiple nodes', () => {
const string = renderToString(
Hello
World
);
expect(string).to.match(/Hello/);
expect(string).to.match(/World/);
});
});
================================================
FILE: test/tests/link.js
================================================
import { expect } from 'chai';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Link from '../../src/Link/macOs';
describe('Link', () => {
it('create osx link', () => {
const string = renderToString( {
const string = renderToString( {
const string = renderToString( {
const string = renderToString( {
const string = renderToString( {
const string = renderToString(