Skip to content

Commit

Permalink
1.4.0
Browse files Browse the repository at this point in the history
  • Loading branch information
theporchrat committed Oct 24, 2014
1 parent 0a18968 commit 9925c6c
Show file tree
Hide file tree
Showing 15 changed files with 433 additions and 224 deletions.
8 changes: 4 additions & 4 deletions browser/react-widgets.js
View file

Large diffs are not rendered by default.

18 changes: 18 additions & 0 deletions docs/docs.js
View file

Large diffs are not rendered by default.

104 changes: 48 additions & 56 deletions lib/calendar/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,35 @@ var React = require('react')
, Century = require('./century')
, cx = require('../util/cx')
, setter = require('../util/stateSetter')
, controlledInput = require('../util/controlledInput')
, SlideTransition = require('../common/slide-transition')
, dates = require('../util/dates')
, mergeIntoProps = require('../util/transferProps').mergeIntoProps
, constants = require('../util/constants')
, _ = require('lodash');

var RIGHT = 'right'
, LEFT = 'left'
, UP = 'up'
, DOWN = 'down'
var dir = constants.directions;

, MULTIPLIER = {
'year': 1,
'decade': 10,
'century': 100
},
VIEW = {
'month': Month,
'year': Year,
'decade': Decade,
'century': Century,
}
NEXT_VIEW = {
'month': 'year',
'year': 'decade',
'decade': 'century'
}
VIEW_UNIT = {
'month': 'day',
'year': 'month',
'decade': 'year',
'century': 'decade',
};
var views = constants.calendarViews
, VIEW_OPTIONS = _.values(views)
, ALT_VIEW = _.invert(constants.calendarViewHierarchy)
, NEXT_VIEW = constants.calendarViewHierarchy
, VIEW_UNIT = constants.calendarViewUnits
, VIEW = _.object([
[views.MONTH, Month],
[views.YEAR, Year],
[views.DECADE, Decade],
[views.CENTURY, Century]
]);

var VIEW_OPTIONS = ['month', 'year', 'decade', 'century'];
var MULTIPLIER = _.object([
[views.YEAR, 1],
[views.DECADE, 10],
[views.CENTURY, 100]
]);

module.exports = React.createClass({

var Calendar = React.createClass({

displayName: 'Calendar',

Expand Down Expand Up @@ -86,19 +79,17 @@ module.exports = React.createClass({
getInitialState: function(){
return {
selectedIndex: 0,
open: false,
view: this.props.initialView || 'month',

//determines the position of views
currentDate: this.inRangeValue(new Date(this.props.value))
}
},

getDefaultProps: function(){
return {
open: false,
value: new Date,
min: new Date(1900,0, 1),
max: new Date(2099,11, 31),
min: new Date(1900,0, 1),
max: new Date(2099,11, 31),

initialView: 'month',
finalView: 'century',
Expand Down Expand Up @@ -134,7 +125,6 @@ module.exports = React.createClass({
, key = this.state.view + '_' + dates[this.state.view](date)
, id = this._id('_view');

//console.log(key)
return mergeIntoProps(_.omit(this.props, 'value', 'min', 'max'),
React.DOM.div({className: cx({
'rw-calendar': true,
Expand All @@ -148,11 +138,11 @@ module.exports = React.createClass({
labelId: labelId,
messages: this.props.messages,
upDisabled: disabled || this.state.view === this.props.finalView,
prevDisabled: disabled || !dates.inRange(this.nextDate(LEFT), this.props.min, this.props.max),
nextDisabled: disabled || !dates.inRange(this.nextDate(RIGHT), this.props.min, this.props.max),
onViewChange: this._maybeHandle(_.partial(this.navigate, UP, null)),
onMoveLeft: this._maybeHandle(_.partial(this.navigate, LEFT, null)),
onMoveRight: this._maybeHandle(_.partial(this.navigate, RIGHT, null))}),
prevDisabled: disabled || !dates.inRange(this.nextDate(dir.LEFT), this.props.min, this.props.max),
nextDisabled: disabled || !dates.inRange(this.nextDate(dir.RIGHT), this.props.min, this.props.max),
onViewChange: this._maybeHandle(_.partial(this.navigate, dir.UP, null)),
onMoveLeft: this._maybeHandle(_.partial(this.navigate, dir.LEFT, null)),
onMoveRight: this._maybeHandle(_.partial(this.navigate, dir.RIGHT, null))}),

SlideTransition({
ref: "animation",
Expand All @@ -168,8 +158,8 @@ module.exports = React.createClass({
onChange: this._maybeHandle(this.change),
onKeyDown: this._maybeHandle(this._keyDown),
onFocus: this._maybeHandle(_.partial(this._focus, true), true),
onMoveLeft: this._maybeHandle(_.partial(this.navigate, LEFT)),
onMoveRight: this._maybeHandle(_.partial(this.navigate, RIGHT)),
onMoveLeft: this._maybeHandle(_.partial(this.navigate, dir.LEFT)),
onMoveRight: this._maybeHandle(_.partial(this.navigate, dir.RIGHT)),
disabled: this.props.disabled,
readOnly: this.props.readOnly,
min: this.props.min,
Expand All @@ -184,21 +174,20 @@ module.exports = React.createClass({
},

navigate: function(direction, date){
var alts = _.invert(NEXT_VIEW)
, view = this.state.view
, slideDir = (direction === LEFT || direction === UP)
var view = this.state.view
, slideDir = (direction === dir.LEFT || direction === dir.UP)
? 'right'
: 'left';

if ( !date )
date = _.contains([ LEFT, RIGHT ], direction)
date = _.contains([ dir.LEFT, dir.RIGHT ], direction)
? this.nextDate(direction)
: this.state.currentDate

if (direction === DOWN )
view = alts[view] || view
if (direction === dir.DOWN )
view = ALT_VIEW[view] || view

if (direction === UP )
if (direction === dir.UP )
view = NEXT_VIEW[view] || view

if ( this.isValidView(view) && dates.inRange(date, this.props.min, this.props.max, view)) {
Expand All @@ -221,15 +210,15 @@ module.exports = React.createClass({

change: function(date){
if ( this.props.onChange && this.state.view === this.props.initialView)
return this.props.onChange(date)
return this.notify('onChange', date)

this.navigate(DOWN, date)
this.navigate(dir.DOWN, date)
},

nextDate: function(direction){
var method = direction === LEFT ? 'subtract' : 'add'
var method = direction === dir.LEFT ? 'subtract' : 'add'
, view = this.state.view
, unit = view === 'month' ? view : 'year'
, unit = view === views.MONTH ? view : views.YEAR
, multi = MULTIPLIER[view] || 1;

return dates[method](this.state.currentDate, 1 * multi, unit)
Expand All @@ -242,19 +231,19 @@ module.exports = React.createClass({
if ( ctrl ) {
if ( key === 'ArrowDown' ) {
e.preventDefault()
this.navigate(DOWN)
this.navigate(dir.DOWN)
}
if ( key === 'ArrowUp' ) {
e.preventDefault()
this.navigate(UP)
this.navigate(dir.UP)
}
if ( key === 'ArrowLeft' ) {
e.preventDefault()
this.navigate(LEFT)
this.navigate(dir.LEFT)
}
if ( key === 'ArrowRight' ) {
e.preventDefault()
this.navigate(RIGHT)
this.navigate(dir.RIGHT)
}
} else {
this.refs.currentView._keyDown
Expand Down Expand Up @@ -299,3 +288,6 @@ module.exports = React.createClass({
return current >= bottom && current <= top
}
});

module.exports = controlledInput.createControlledClass(
'Calendar', Calendar, { value: 'onChange' });
3 changes: 2 additions & 1 deletion lib/common/slide-transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,11 @@ var SlideChildGroup = React.createClass({displayName: 'SlideChildGroup',
width = direction === 'left' ? width : -width

this.ORGINAL_POSITION = node.style.position;

$.css(node, { position: 'absolute', left: width + 'px' , top: 0 })

$.animate(node, { left: 0 }, self.props.duration, function(){

$.css(node, {
position: self.ORGINAL_POSITION,
overflow: 'hidden'
Expand Down
51 changes: 29 additions & 22 deletions lib/dropdowns/combobox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ var React = require('react')
, _ = require('lodash')
, caretPos = require('../util/caret')
, filter = require('../util/filter')
, controlledInput = require('../util/controlledInput')
, mergeIntoProps = require('../util/transferProps').mergeIntoProps
, directions = require('../util/constants').directions
, Input = require('./combo-input')
Expand All @@ -13,8 +14,12 @@ var React = require('react')

var btn = require('../common/btn')
, propTypes = {
//-- controlled props -----------
value: React.PropTypes.any,
onChange: React.PropTypes.func,
open: React.PropTypes.bool,
onToggle: React.PropTypes.func,
//------------------------------------

itemComponent: React.PropTypes.func,

Expand Down Expand Up @@ -45,7 +50,7 @@ var btn = require('../common/btn')
})
};

module.exports = React.createClass({
var ComboBox = React.createClass({

displayName: 'ComboBox',

Expand All @@ -62,11 +67,8 @@ module.exports = React.createClass({
propTypes: propTypes,

getInitialState: function(){
var items = this.process(
this.props.data
, this.props.value)
, idx = this._dataIndexOf(items, this.props.value);

var items = this.process(this.props.data, this.props.value)
, idx = this._dataIndexOf(items, this.props.value);

return {
selectedIndex: idx,
Expand All @@ -79,6 +81,8 @@ module.exports = React.createClass({
getDefaultProps: function(){
return {
data: [],
value: '',
open: false,
suggest: false,
filter: false,
delay: 500,
Expand Down Expand Up @@ -143,7 +147,7 @@ module.exports = React.createClass({
'rw-combobox': true,
'rw-widget': true,
'rw-state-focus': this.state.focused,
'rw-open': this.state.open,
'rw-open': this.props.open,
'rw-state-disabled': this.props.disabled,
'rw-state-readonly': this.props.readOnly,
'rw-rtl': this.isRtl()
Expand All @@ -165,8 +169,8 @@ module.exports = React.createClass({
'aria-owns': listID,
'aria-busy': !!this.props.busy,
'aria-autocomplete': completeType,
'aria-activedescendent': this.state.open ? optID : undefined,
'aria-expanded': this.state.open,
'aria-activedescendent': this.props.open ? optID : undefined,
'aria-expanded': this.props.open,
'aria-haspopup': true,
placeholder: this.props.placeholder,
disabled: this.props.disabled,
Expand All @@ -176,12 +180,12 @@ module.exports = React.createClass({
onChange: this._inputTyping,
onKeyDown: this._inputKeyDown}),

Popup({open: this.state.open, onRequestClose: this.close, duration: this.props.duration},
Popup({open: this.props.open, onRequestClose: this.close, duration: this.props.duration},
React.DOM.div(null,
List({ref: "list",
id: listID,
optID: optID,
'aria-hidden': !this.state.open,
'aria-hidden': !this.props.open,
'aria-live': completeType && 'polite',
style: { maxHeight: 200, height: 'auto'},
data: items,
Expand Down Expand Up @@ -266,7 +270,7 @@ module.exports = React.createClass({
, character = String.fromCharCode(e.keyCode)
, selectedIdx = this.state.selectedIndex
, focusedIdx = this.state.focusedIndex
, isOpen = this.state.open
, isOpen = this.props.open
, noselection = selectedIdx == null || selectedIdx === -1;

if ( key === 'End' )
Expand Down Expand Up @@ -310,28 +314,24 @@ module.exports = React.createClass({
},

change: function(data, typing){
var change = this.props.onChange

this._typedChange = !!typing

if ( change ) change(data)
this.notify('onChange', data)
},

open: function(){

if ( !this.state.open )
this.setState({ open: true })
if ( !this.props.open )
this.notify('onToggle', true)
},

close: function(){
if ( this.state.open )
this.setState({ open: false })
if ( this.props.open )
this.notify('onToggle', true)
},

toggle: function(e){
this._focus(true)

this.state.open
this.props.open
? this.close()
: this.open()
},
Expand Down Expand Up @@ -367,6 +367,13 @@ module.exports = React.createClass({
}
})


module.exports = controlledInput.createControlledClass(
'ComboBox', ComboBox
, { open: 'onToggle', value: 'onChange' });



function shallowEqual(objA, objB) {
var key;

Expand Down
Loading

0 comments on commit 9925c6c

Please sign in to comment.