Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TimePicker] Remove style-propable mixin #3188

Merged
merged 1 commit into from
Feb 5, 2016
Merged

[TimePicker] Remove style-propable mixin #3188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 29 additions & 30 deletions src/time-picker/clock-hours.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import StylePropable from '../mixins/style-propable';
import ClockNumber from './clock-number';
import ClockPointer from './clock-pointer';
import getMuiTheme from '../styles/getMuiTheme';
Expand All @@ -10,10 +9,10 @@ function rad2deg(rad) {
}

function getTouchEventOffsetValues(e) {
let el = e.target;
let boundingRect = el.getBoundingClientRect();
const el = e.target;
const boundingRect = el.getBoundingClientRect();

let offset = {
const offset = {
offsetX: e.clientX - boundingRect.left,
offsetY: e.clientY - boundingRect.top,
};
Expand All @@ -33,13 +32,10 @@ const ClockHours = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [StylePropable],

getDefaultProps() {
return {
initialHours: new Date().getHours(),
Expand All @@ -61,7 +57,7 @@ const ClockHours = React.createClass({
},

componentDidMount() {
let clockElement = ReactDOM.findDOMNode(this.refs.mask);
const clockElement = ReactDOM.findDOMNode(this.refs.mask);

this.center = {
x: clockElement.offsetWidth / 2,
Expand All @@ -74,11 +70,10 @@ const ClockHours = React.createClass({
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
this.setState({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
},

center: {x: 0, y: 0},
Expand Down Expand Up @@ -115,34 +110,34 @@ const ClockHours = React.createClass({

setClock(e, finish) {
if (typeof e.offsetX === 'undefined') {
let offset = getTouchEventOffsetValues(e);
const offset = getTouchEventOffsetValues(e);

e.offsetX = offset.offsetX;
e.offsetY = offset.offsetY;
}

let hours = this.getHours(e.offsetX, e.offsetY);
const hours = this.getHours(e.offsetX, e.offsetY);

this.props.onChange(hours, finish);
},

getHours(offsetX, offsetY) {
let step = 30;
let x = offsetX - this.center.x;
let y = offsetY - this.center.y;
let cx = this.basePoint.x - this.center.x;
let cy = this.basePoint.y - this.center.y;
const step = 30;
const x = offsetX - this.center.x;
const y = offsetY - this.center.y;
const cx = this.basePoint.x - this.center.x;
const cy = this.basePoint.y - this.center.y;

let atan = Math.atan2(cx, cy) - Math.atan2(x, y);
const atan = Math.atan2(cx, cy) - Math.atan2(x, y);

let deg = rad2deg(atan);
deg = Math.round(deg / step ) * step;
deg %= 360;

let value = Math.floor(deg / step) || 0;

let delta = Math.pow(x, 2) + Math.pow(y, 2);
let distance = Math.sqrt(delta);
const delta = Math.pow(x, 2) + Math.pow(y, 2);
const distance = Math.sqrt(delta);

value = value || 12;
if (this.props.format === '24hr') {
Expand All @@ -169,12 +164,12 @@ const ClockHours = React.createClass({
},

_getHourNumbers() {
let style = {
const style = {
pointerEvents: 'none',
};
let hourSize = this.props.format === 'ampm' ? 12 : 24;
const hourSize = this.props.format === 'ampm' ? 12 : 24;

let hours = [];
const hours = [];
for (let i = 1; i <= hourSize; i++) {
hours.push(i % 24);
}
Expand All @@ -194,7 +189,7 @@ const ClockHours = React.createClass({
},

render() {
let styles = {
const styles = {
root: {
height: '100%',
width: '100%',
Expand All @@ -211,15 +206,19 @@ const ClockHours = React.createClass({
},
};

let hours = this._getSelected();
let numbers = this._getHourNumbers();
const {
prepareStyles,
} = this.state.muiTheme;

const hours = this._getSelected();
const numbers = this._getHourNumbers();

return (
<div ref="clock" style={this.prepareStyles(styles.root)} >
<div ref="clock" style={prepareStyles(styles.root)} >
<ClockPointer hasSelected={true} value={hours} type="hour" />
{numbers}
<div
ref="mask" style={this.prepareStyles(styles.hitMask)} onTouchMove={this.handleTouchMove}
ref="mask" style={prepareStyles(styles.hitMask)} onTouchMove={this.handleTouchMove}
onTouchEnd={this.handleTouchEnd} onMouseUp={this.handleUp} onMouseMove={this.handleMove}
/>
</div>
Expand Down
58 changes: 28 additions & 30 deletions src/time-picker/clock-minutes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';
import StylePropable from '../mixins/style-propable';
import ClockNumber from './clock-number';
import ClockPointer from './clock-pointer';
import getMuiTheme from '../styles/getMuiTheme';
Expand All @@ -10,10 +8,10 @@ function rad2deg(rad) {
}

function getTouchEventOffsetValues(e) {
let el = e.target;
let boundingRect = el.getBoundingClientRect();
const el = e.target;
const boundingRect = el.getBoundingClientRect();

let offset = {
const offset = {
offsetX: e.clientX - boundingRect.left,
offsetY: e.clientY - boundingRect.top,
};
Expand All @@ -31,13 +29,10 @@ const ClockMinutes = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [StylePropable],

getDefaultProps() {
return {
initialMinutes: new Date().getMinutes(),
Expand All @@ -58,7 +53,7 @@ const ClockMinutes = React.createClass({
},

componentDidMount() {
let clockElement = ReactDOM.findDOMNode(this.refs.mask);
const clockElement = this.refs.mask;

this.center = {
x: clockElement.offsetWidth / 2,
Expand All @@ -71,11 +66,10 @@ const ClockMinutes = React.createClass({
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
this.setState({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
},

center: {x: 0, y: 0},
Expand Down Expand Up @@ -106,45 +100,45 @@ const ClockMinutes = React.createClass({

setClock(e, finish) {
if (typeof e.offsetX === 'undefined') {
let offset = getTouchEventOffsetValues(e);
const offset = getTouchEventOffsetValues(e);

e.offsetX = offset.offsetX;
e.offsetY = offset.offsetY;
}

let minutes = this.getMinutes(e.offsetX, e.offsetY);
const minutes = this.getMinutes(e.offsetX, e.offsetY);

this.props.onChange(minutes, finish);
},

getMinutes(offsetX, offsetY) {
let step = 6;
let x = offsetX - this.center.x;
let y = offsetY - this.center.y;
let cx = this.basePoint.x - this.center.x;
let cy = this.basePoint.y - this.center.y;
const step = 6;
const x = offsetX - this.center.x;
const y = offsetY - this.center.y;
const cx = this.basePoint.x - this.center.x;
const cy = this.basePoint.y - this.center.y;

let atan = Math.atan2(cx, cy) - Math.atan2(x, y);
const atan = Math.atan2(cx, cy) - Math.atan2(x, y);

let deg = rad2deg(atan);
deg = Math.round(deg / step ) * step;
deg %= 360;

let value = Math.floor(deg / step) || 0;
const value = Math.floor(deg / step) || 0;

return value;
},

_getMinuteNumbers() {
let minutes = [];
const minutes = [];
for (let i = 0; i < 12; i++) {
minutes.push(i * 5);
}
let selectedMinutes = this.props.initialMinutes;
const selectedMinutes = this.props.initialMinutes;
let hasSelected = false;

let numbers = minutes.map((minute) => {
let isSelected = selectedMinutes === minute;
const numbers = minutes.map((minute) => {
const isSelected = selectedMinutes === minute;
if (isSelected) hasSelected = true;
return (
<ClockNumber
Expand All @@ -162,7 +156,7 @@ const ClockMinutes = React.createClass({
},

render() {
let styles = {
const styles = {
root: {
height: '100%',
width: '100%',
Expand All @@ -179,13 +173,17 @@ const ClockMinutes = React.createClass({
},
};

let minutes = this._getMinuteNumbers();
const {
prepareStyles,
} = this.state.muiTheme;

const minutes = this._getMinuteNumbers();

return (
<div ref="clock" style={this.prepareStyles(styles.root)} >
<div ref="clock" style={prepareStyles(styles.root)} >
<ClockPointer value={minutes.selected} type="minute" />
{minutes.numbers}
<div ref="mask" style={this.prepareStyles(styles.hitMask)} hasSelected={minutes.hasSelected}
<div ref="mask" style={prepareStyles(styles.hitMask)} hasSelected={minutes.hasSelected}
onTouchMove={this.handleTouch} onTouchEnd={this.handleTouch}
onMouseUp={this.handleUp} onMouseMove={this.handleMove}
/>
Expand Down
26 changes: 13 additions & 13 deletions src/time-picker/clock-number.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import StylePropable from '../mixins/style-propable';
import getMuiTheme from '../styles/getMuiTheme';

const ClockNumber = React.createClass({
Expand All @@ -15,13 +14,10 @@ const ClockNumber = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [StylePropable],

getDefaultProps() {
return {
value: 0,
Expand All @@ -42,18 +38,22 @@ const ClockNumber = React.createClass({
};
},

//to update theme inside state whenever a new theme is passed down
//from the parent / owner using context
componentWillReceiveProps(nextProps, nextContext) {
let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
this.setState({muiTheme: newMuiTheme});
this.setState({
muiTheme: nextContext.muiTheme || this.state.muiTheme,
});
},

getTheme() {
return this.state.muiTheme.timePicker;
},

render() {

const {
prepareStyles,
} = this.state.muiTheme;

let pos = this.props.value;
let inner = false;

Expand All @@ -64,7 +64,7 @@ const ClockNumber = React.createClass({
pos = pos / 5;
}

let positions = [
const positions = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reason why these are instantiating with each render? I don't see any.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, indeed 😨.

[0, 5],
[54.5, 16.6],
[94.4, 59.5],
Expand All @@ -79,7 +79,7 @@ const ClockNumber = React.createClass({
[-54.5, 19.6],
];

let innerPositions = [
const innerPositions = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this too.

[0, 40],
[36.9, 49.9],
[64, 77],
Expand All @@ -94,7 +94,7 @@ const ClockNumber = React.createClass({
[-37, 50],
];

let styles = {
const styles = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can get out too if we take those position matrices out as statics.

root: {
display: 'inline-block',
position: 'absolute',
Expand Down Expand Up @@ -126,12 +126,12 @@ const ClockNumber = React.createClass({
transformPos = innerPositions[pos];
}

let [x, y] = transformPos;
const [x, y] = transformPos;

styles.root.transform = 'translate(' + x + 'px, ' + y + 'px)';

return (
<span style={this.prepareStyles(styles.root)}>{this.props.value}</span>
<span style={prepareStyles(styles.root)}>{this.props.value}</span>
);
},
});
Expand Down
Loading