From 1ac723bd556637ea136ae87ddf857bf400a71082 Mon Sep 17 00:00:00 2001 From: jquense Date: Fri, 4 Dec 2015 13:53:09 -0500 Subject: [PATCH] rebuild --- dist/css/react-widgets.css | 2 +- dist/react-widgets.js | 647 ++++++++++++++++++-------------- lib/Combobox.js | 11 +- lib/DateTimePicker.js | 15 +- lib/DropdownList.js | 46 ++- lib/List.js | 27 +- lib/ListGroupable.js | 20 +- lib/ListOption.js | 14 +- lib/Multiselect.js | 5 +- lib/NumberPicker.js | 4 +- lib/Popup.js | 1 - lib/SelectList.js | 66 ++-- lib/TimeList.js | 19 +- lib/less/core.less | 16 +- lib/less/selectlist.less | 9 +- lib/mixins/ListMovementMixin.js | 94 ++--- lib/util/dataHelpers.js | 5 + 17 files changed, 572 insertions(+), 429 deletions(-) diff --git a/dist/css/react-widgets.css b/dist/css/react-widgets.css index dd70b6066..2916a51cf 100644 --- a/dist/css/react-widgets.css +++ b/dist/css/react-widgets.css @@ -1 +1 @@ -.rw-btn,.rw-input{color:inherit;font:inherit;margin:0}button.rw-input{overflow:visible}button.rw-input,select.rw-input{text-transform:none}button.rw-input,html input[type="button"].rw-input,input[type="reset"].rw-input,input[type="submit"].rw-input{-webkit-appearance:button;cursor:pointer}button[disabled].rw-input,html input[disabled].rw-input{cursor:not-allowed}button.rw-input::-moz-focus-inner,input.rw-input::-moz-focus-inner{border:0;padding:0}@font-face{font-family:'RwWidgets';src:url('../fonts/rw-widgets.eot?v=4.1.0');src:url('../fonts/rw-widgets.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('../fonts/rw-widgets.woff?v=4.1.0') format('woff'),url('../fonts/rw-widgets.ttf?v=4.1.0') format('truetype'),url('../fonts/rw-widgets.svg?v=4.1.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.rw-i{display:inline-block;font-family:RwWidgets;font-style:normal;font-weight:normal;line-height:1em;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.rw-i-caret-down:before{content:'\e803'}.rw-i-caret-up:before{content:'\e800'}.rw-i-caret-left:before{content:'\e801'}.rw-i-caret-right:before{content:'\e802'}.rw-i-clock-o:before{content:'\e805'}.rw-i-calendar:before{content:'\e804'}.rw-i-search:before{content:'\e806'}.rw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.rw-widget,.rw-widget *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rw-widget:before,.rw-widget *:before,.rw-widget:after,.rw-widget *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rw-widget{outline:0;-moz-background-clip:border-box;-webkit-background-clip:border-box;background-clip:border-box}.rw-btn{color:#333;line-height:2.286em;display:inline-block;margin:0;text-align:center;vertical-align:middle;background:none;background-image:none;border:1px solid transparent;padding:0;white-space:nowrap}.rw-rtl{direction:rtl}.rw-input{color:#555;height:2.286em;padding:.429em .857em;background-color:#fff}.rw-input[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:1;background-color:#eee;border-color:#ccc}.rw-input[readonly]{cursor:not-allowed}.rw-filter-input{position:relative;width:100%;padding-right:1.9em;border:#ccc 1px solid;border-radius:4px;margin-bottom:2px}.rw-rtl .rw-filter-input{padding-left:1.9em;padding-right:0}.rw-filter-input>.rw-input{width:100%;border:none;outline:none}.rw-filter-input>span{margin-top:-2px}.rw-i.rw-loading{background:url("../img/loading.gif") no-repeat center;width:16px;height:100%}.rw-i.rw-loading:before{content:""}.rw-loading-mask{border-radius:4px;position:relative}.rw-loading-mask:after{content:'';background:url("../img/loader-big.gif") no-repeat center;position:absolute;background-color:#fff;opacity:.7;top:0;left:0;height:100%;width:100%}.rw-now{font-weight:600}.rw-state-focus{background-color:#fff;border:#66afe9 1px solid;color:#333}.rw-state-selected{background-color:#adadad;border:#adadad 1px solid;color:#333}.rw-state-disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:1}.rw-btn,.rw-dropdownlist{cursor:pointer}.rw-btn[disabled],.rw-state-disabled .rw-btn,.rw-state-readonly .rw-btn{-webkit-box-shadow:none;box-shadow:none;pointer-events:none;cursor:not-allowed;filter:alpha(opacity=65);opacity:.65}ul.rw-list,.rw-selectlist{margin:0;padding-left:0;list-style:none;padding:5px 0;overflow:auto;outline:0;height:100%}ul.rw-list>li,.rw-selectlist>li{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul.rw-list>li.rw-list-optgroup,.rw-selectlist>li.rw-list-optgroup{font-weight:bold}ul.rw-list>li.rw-list-option,ul.rw-list>li.rw-list-empty,.rw-selectlist>li.rw-list-option,.rw-selectlist>li.rw-list-empty{padding-left:10px;padding-right:10px}ul.rw-list>li.rw-list-option,.rw-selectlist>li.rw-list-option{cursor:pointer;border:1px solid transparent;border-radius:3px}ul.rw-list>li.rw-list-option:hover,.rw-selectlist>li.rw-list-option:hover{background-color:#e6e6e6;border-color:#adadad}ul.rw-list>li.rw-list-option.rw-state-focus,.rw-selectlist>li.rw-list-option.rw-state-focus{background-color:#fff;border:#66afe9 1px solid;color:#333}ul.rw-list>li.rw-list-option.rw-state-selected,.rw-selectlist>li.rw-list-option.rw-state-selected{background-color:#adadad;border:#adadad 1px solid;color:#333}ul.rw-list.rw-list-grouped>li.rw-list-optgroup,.rw-selectlist.rw-list-grouped>li.rw-list-optgroup{padding-left:10px}ul.rw-list.rw-list-grouped>li.rw-list-option,.rw-selectlist.rw-list-grouped>li.rw-list-option{padding-left:20px}.rw-widget{position:relative}.rw-open.rw-widget,.rw-open>.rw-multiselect-wrapper{border-bottom-right-radius:0;border-bottom-left-radius:0}.rw-open-up.rw-widget,.rw-open-up>.rw-multiselect-wrapper{border-top-right-radius:0;border-top-left-radius:0}.rw-combobox .rw-list,.rw-datetimepicker .rw-list,.rw-numberpicker .rw-list,.rw-dropdownlist .rw-list,.rw-multiselect .rw-list{max-height:200px;height:auto}.rw-widget{background-color:#fff;border:#ccc 1px solid;border-radius:4px}.rw-widget .rw-input{border-bottom-left-radius:4px;border-top-left-radius:4px}.rw-rtl.rw-widget .rw-input{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px}.rw-widget>.rw-select{border-left:#ccc 1px solid}.rw-rtl.rw-widget>.rw-select{border-right:#ccc 1px solid;border-left:none}.rw-widget.rw-state-focus,.rw-widget.rw-state-focus:hover{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);border-color:#66afe9;outline:0}.rw-widget.rw-state-readonly,.rw-widget.rw-state-readonly>.rw-multiselect-wrapper{cursor:not-allowed}.rw-widget.rw-state-disabled,.rw-widget.rw-state-disabled:hover,.rw-widget.rw-state-disabled:active{-webkit-box-shadow:none;box-shadow:none;background-color:#eee;border-color:#ccc}.rw-combobox,.rw-datetimepicker,.rw-numberpicker,.rw-dropdownlist{padding-right:1.9em}.rw-combobox.rw-rtl,.rw-datetimepicker.rw-rtl,.rw-numberpicker.rw-rtl,.rw-dropdownlist.rw-rtl{padding-right:0;padding-left:1.9em}.rw-combobox>.rw-input,.rw-datetimepicker>.rw-input,.rw-numberpicker>.rw-input,.rw-dropdownlist>.rw-input{width:100%;border:none;outline:0}.rw-combobox>.rw-input::-moz-placeholder,.rw-datetimepicker>.rw-input::-moz-placeholder,.rw-numberpicker>.rw-input::-moz-placeholder,.rw-dropdownlist>.rw-input::-moz-placeholder{color:#999;opacity:1}.rw-combobox>.rw-input:-ms-input-placeholder,.rw-datetimepicker>.rw-input:-ms-input-placeholder,.rw-numberpicker>.rw-input:-ms-input-placeholder,.rw-dropdownlist>.rw-input:-ms-input-placeholder{color:#999}.rw-combobox>.rw-input::-webkit-input-placeholder,.rw-datetimepicker>.rw-input::-webkit-input-placeholder,.rw-numberpicker>.rw-input::-webkit-input-placeholder,.rw-dropdownlist>.rw-input::-webkit-input-placeholder{color:#999}.rw-placeholder{color:#999}.rw-select{position:absolute;width:1.9em;height:100%;right:0;top:0}.rw-select.rw-btn,.rw-select>.rw-btn{height:100%;vertical-align:middle;outline:0}.rw-rtl .rw-select{left:0;right:auto}.rw-multiselect,.rw-combobox input.rw-input,.rw-datetimepicker input.rw-input,.rw-numberpicker input.rw-input{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.rw-combobox:active,.rw-datetimepicker:active,.rw-dropdownlist:active,.rw-header>.rw-btn:active,.rw-numberpicker .rw-btn.rw-state-active,.rw-combobox:active.rw-state-focus,.rw-datetimepicker:active.rw-state-focus,.rw-dropdownlist:active.rw-state-focus,.rw-header>.rw-btn:active.rw-state-focus,.rw-numberpicker .rw-btn.rw-state-active.rw-state-focus{background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.rw-combobox:hover,.rw-datetimepicker:hover,.rw-numberpicker:hover,.rw-dropdownlist:hover{background-color:#e6e6e6;border-color:#adadad}.rw-dropdownlist.rw-state-disabled,.rw-dropdownlist.rw-state-readonly{cursor:not-allowed}.rw-dropdownlist>.rw-input{line-height:2.286em;background-color:transparent;padding-top:0;padding-bottom:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rw-dropdownlist.rw-rtl>.rw-input{padding:.429em .857em;padding-top:0;padding-bottom:0;padding-left:0}.rw-dropdownlist>.rw-select,.rw-dropdownlist.rw-rtl>.rw-select{border-width:0}.rw-numberpicker .rw-btn{display:block;height:1.143em;line-height:1.143em;width:100%;border-width:0}.rw-popup{position:absolute;-webkit-box-shadow:0 5px 6px rgba(0,0,0,0.2);box-shadow:0 5px 6px rgba(0,0,0,0.2);border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:#ccc 1px solid;background:#fff;padding:2px;overflow:auto;margin-bottom:10px;left:10px;right:10px}.rw-dropup>.rw-popup{margin-bottom:0;margin-top:10px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom-right-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 6px rgba(0,0,0,0.2);box-shadow:0 0 6px rgba(0,0,0,0.2)}.rw-popup-container{position:absolute;top:100%;margin-top:1px;z-index:1005;left:-11px;right:-11px}.rw-popup-container.rw-dropup{top:auto;bottom:100%}.rw-popup-container.rw-calendar-popup{right:auto;width:18em}.rw-datetimepicker .rw-btn{width:1.8em}.rw-datetimepicker.rw-has-neither{padding-left:0;padding-right:0}.rw-datetimepicker.rw-has-neither .rw-input{border-radius:4px}.rw-datetimepicker.rw-has-both{padding-right:3.8em}.rw-datetimepicker.rw-has-both.rw-rtl{padding-right:0;padding-left:3.8em}.rw-datetimepicker.rw-has-both>.rw-select{width:3.8em;height:100%}.rw-calendar{background-color:#fff}.rw-calendar thead>tr{border-bottom:2px solid #ccc}.rw-calendar .rw-header{padding-bottom:5px}.rw-calendar .rw-header .rw-btn-left,.rw-calendar .rw-header .rw-btn-right{width:12.5%}.rw-calendar .rw-header .rw-btn-view{width:75%;background-color:#eee;border-radius:4px}.rw-calendar .rw-header .rw-btn-view[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed}.rw-calendar .rw-footer{border-top:1px solid #ccc}.rw-calendar .rw-footer .rw-btn{width:100%;white-space:normal}.rw-calendar .rw-footer .rw-btn:hover{background-color:#e6e6e6}.rw-calendar .rw-footer .rw-btn[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed}.rw-calendar-grid{height:14.28571429em;table-layout:fixed;width:100%}.rw-calendar-grid th{text-align:right;padding:0 .4em 0 .1em}.rw-calendar-grid .rw-btn{width:100%;text-align:right}.rw-calendar-grid td .rw-btn{border-radius:4px;padding:0 .4em 0 .1em;outline:0}.rw-calendar-grid td .rw-btn:hover{background-color:#e6e6e6}.rw-calendar-grid td .rw-btn.rw-off-range{color:#b3b3b3}.rw-calendar-grid.rw-nav-view .rw-btn{padding:.25em 0 .3em;display:block;overflow:hidden;text-align:center;white-space:normal}.rw-selectlist{padding:2px}.rw-selectlist>ul{height:100%;overflow:auto}.rw-selectlist>ul>li.rw-list-option{position:relative;min-height:27px;cursor:auto;padding-left:5px}.rw-selectlist>ul>li.rw-list-option>label>input{position:absolute;margin:4px 0 0 -20px}.rw-selectlist>ul>li.rw-list-option>label{padding-left:20px;line-height:1.423em;display:inline-block}.rw-selectlist.rw-rtl>ul>li.rw-list-option{padding-left:0;padding-right:5px}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label>input{margin:4px -20px 0 0}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label{padding-left:0;padding-right:20px}.rw-selectlist.rw-rtl>ul>li.rw-list-option{padding-left:0;padding-right:5px}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label>input{margin:4px -20px 0 0}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label{padding-left:0;padding-right:20px}.rw-selectlist.rw-state-disabled>ul>li:hover,.rw-selectlist.rw-state-readonly>ul>li:hover{background:none;border-color:transparent}.rw-multiselect{background-color:#fff}.rw-multiselect:hover{border-color:#adadad}.rw-multiselect-wrapper{border-radius:4px;position:relative;cursor:text}.rw-multiselect-wrapper:before,.rw-multiselect-wrapper:after{content:" ";display:table}.rw-multiselect-wrapper:after{clear:both}.rw-multiselect-wrapper i.rw-loading{position:absolute;right:3px}.rw-multiselect-wrapper>.rw-input{float:left;outline:0;border-width:0;line-height:normal;width:auto;max-width:100%}.rw-multiselect-wrapper>.rw-input::-moz-placeholder{color:#999;opacity:1}.rw-multiselect-wrapper>.rw-input:-ms-input-placeholder{color:#999}.rw-multiselect-wrapper>.rw-input::-webkit-input-placeholder{color:#999}.rw-state-readonly>.rw-multiselect-wrapper,.rw-state-disabled>.rw-multiselect-wrapper{cursor:not-allowed}.rw-rtl .rw-multiselect-wrapper>.rw-input{float:right}.rw-multiselect-create-tag{border-top:1px #ccc solid;padding-top:5px;margin-top:5px}.rw-multiselect-taglist{margin:0;padding-left:0;list-style:none;padding-right:0}.rw-multiselect-taglist>li{display:inline-block;padding-left:5px;padding-right:5px}.rw-multiselect-taglist>li{float:left;display:inline-block;margin:1px;padding:.214em .15em .214em .4em;line-height:1.4em;text-align:center;vertical-align:middle;white-space:nowrap;border-radius:3px;border:1px solid #ccc;background-color:#ccc;cursor:pointer}.rw-multiselect-taglist>li.rw-state-focus{background-color:#fff;border:#66afe9 1px solid;color:#333}.rw-multiselect-taglist>li.rw-state-readonly,.rw-multiselect-taglist>li.rw-state-disabled,.rw-multiselect.rw-state-readonly .rw-multiselect-taglist>li,.rw-multiselect.rw-state-disabled .rw-multiselect-taglist>li{cursor:not-allowed;filter:alpha(opacity=65);opacity:.65}.rw-multiselect-taglist>li .rw-btn{outline:0;font-size:115%;line-height:normal}.rw-rtl .rw-multiselect-taglist>li{float:right} \ No newline at end of file +.rw-btn,.rw-input{color:inherit;font:inherit;margin:0}button.rw-input{overflow:visible}button.rw-input,select.rw-input{text-transform:none}button.rw-input,html input[type="button"].rw-input,input[type="reset"].rw-input,input[type="submit"].rw-input{-webkit-appearance:button;cursor:pointer}button[disabled].rw-input,html input[disabled].rw-input{cursor:not-allowed}button.rw-input::-moz-focus-inner,input.rw-input::-moz-focus-inner{border:0;padding:0}@font-face{font-family:'RwWidgets';src:url('../fonts/rw-widgets.eot?v=4.1.0');src:url('../fonts/rw-widgets.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('../fonts/rw-widgets.woff?v=4.1.0') format('woff'),url('../fonts/rw-widgets.ttf?v=4.1.0') format('truetype'),url('../fonts/rw-widgets.svg?v=4.1.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.rw-i{display:inline-block;font-family:RwWidgets;font-style:normal;font-weight:normal;line-height:1em;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.rw-i-caret-down:before{content:'\e803'}.rw-i-caret-up:before{content:'\e800'}.rw-i-caret-left:before{content:'\e801'}.rw-i-caret-right:before{content:'\e802'}.rw-i-clock-o:before{content:'\e805'}.rw-i-calendar:before{content:'\e804'}.rw-i-search:before{content:'\e806'}.rw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.rw-widget,.rw-widget *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rw-widget:before,.rw-widget *:before,.rw-widget:after,.rw-widget *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rw-widget{outline:0;-moz-background-clip:border-box;-webkit-background-clip:border-box;background-clip:border-box}.rw-btn{color:#333;line-height:2.286em;display:inline-block;margin:0;text-align:center;vertical-align:middle;background:none;background-image:none;border:1px solid transparent;padding:0;white-space:nowrap}.rw-rtl{direction:rtl}.rw-input{color:#555;height:2.286em;padding:.429em .857em;background-color:#fff}.rw-input[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:1;background-color:#eee;border-color:#ccc}.rw-input[readonly]{cursor:not-allowed}.rw-filter-input{position:relative;width:100%;padding-right:1.9em;border:#ccc 1px solid;border-radius:4px;margin-bottom:2px}.rw-rtl .rw-filter-input{padding-left:1.9em;padding-right:0}.rw-filter-input>.rw-input{width:100%;border:none;outline:none}.rw-filter-input>span{margin-top:-2px}.rw-i.rw-loading{background:url("../img/loading.gif") no-repeat center;width:16px;height:100%}.rw-i.rw-loading:before{content:""}.rw-loading-mask{border-radius:4px;position:relative}.rw-loading-mask:after{content:'';background:url("../img/loader-big.gif") no-repeat center;position:absolute;background-color:#fff;opacity:.7;top:0;left:0;height:100%;width:100%}.rw-now{font-weight:600}.rw-state-focus{background-color:#fff;border:#66afe9 1px solid;color:#333}.rw-state-selected{background-color:#adadad;border:#adadad 1px solid;color:#333}.rw-state-disabled{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed;opacity:1}.rw-btn,.rw-dropdownlist{cursor:pointer}.rw-btn[disabled],.rw-state-disabled .rw-btn,.rw-state-readonly .rw-btn{-webkit-box-shadow:none;box-shadow:none;pointer-events:none;cursor:not-allowed;filter:alpha(opacity=65);opacity:.65}ul.rw-list,.rw-selectlist{margin:0;padding-left:0;list-style:none;padding:5px 0;overflow:auto;outline:0;height:100%}ul.rw-list>li,.rw-selectlist>li{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul.rw-list>li.rw-list-optgroup,.rw-selectlist>li.rw-list-optgroup{font-weight:bold}ul.rw-list>li.rw-list-option,ul.rw-list>li.rw-list-empty,.rw-selectlist>li.rw-list-option,.rw-selectlist>li.rw-list-empty{padding-left:10px;padding-right:10px}ul.rw-list>li.rw-list-option,.rw-selectlist>li.rw-list-option{cursor:pointer;border:1px solid transparent;border-radius:3px}ul.rw-list>li.rw-list-option:hover,.rw-selectlist>li.rw-list-option:hover{background-color:#e6e6e6;border-color:#adadad}ul.rw-list>li.rw-list-option.rw-state-focus,.rw-selectlist>li.rw-list-option.rw-state-focus{background-color:#fff;border:#66afe9 1px solid;color:#333}ul.rw-list>li.rw-list-option.rw-state-selected,.rw-selectlist>li.rw-list-option.rw-state-selected{background-color:#adadad;border:#adadad 1px solid;color:#333}ul.rw-list>li.rw-list-option.rw-state-disabled,ul.rw-list>li.rw-list-option.rw-state-readonly,.rw-selectlist>li.rw-list-option.rw-state-disabled,.rw-selectlist>li.rw-list-option.rw-state-readonly{color:#777;cursor:not-allowed}ul.rw-list>li.rw-list-option.rw-state-disabled:hover,ul.rw-list>li.rw-list-option.rw-state-readonly:hover,.rw-selectlist>li.rw-list-option.rw-state-disabled:hover,.rw-selectlist>li.rw-list-option.rw-state-readonly:hover{background:none;border-color:transparent}ul.rw-list.rw-list-grouped>li.rw-list-optgroup,.rw-selectlist.rw-list-grouped>li.rw-list-optgroup{padding-left:10px}ul.rw-list.rw-list-grouped>li.rw-list-option,.rw-selectlist.rw-list-grouped>li.rw-list-option{padding-left:20px}.rw-widget{position:relative}.rw-open.rw-widget,.rw-open>.rw-multiselect-wrapper{border-bottom-right-radius:0;border-bottom-left-radius:0}.rw-open-up.rw-widget,.rw-open-up>.rw-multiselect-wrapper{border-top-right-radius:0;border-top-left-radius:0}.rw-combobox .rw-list,.rw-datetimepicker .rw-list,.rw-numberpicker .rw-list,.rw-dropdownlist .rw-list,.rw-multiselect .rw-list{max-height:200px;height:auto}.rw-widget{background-color:#fff;border:#ccc 1px solid;border-radius:4px}.rw-widget .rw-input{border-bottom-left-radius:4px;border-top-left-radius:4px}.rw-rtl.rw-widget .rw-input{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px}.rw-widget>.rw-select{border-left:#ccc 1px solid}.rw-rtl.rw-widget>.rw-select{border-right:#ccc 1px solid;border-left:none}.rw-widget.rw-state-focus,.rw-widget.rw-state-focus:hover{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);border-color:#66afe9;outline:0}.rw-widget.rw-state-readonly,.rw-widget.rw-state-readonly>.rw-multiselect-wrapper{cursor:not-allowed}.rw-widget.rw-state-disabled,.rw-widget.rw-state-disabled:hover,.rw-widget.rw-state-disabled:active{-webkit-box-shadow:none;box-shadow:none;background-color:#eee;border-color:#ccc}.rw-combobox,.rw-datetimepicker,.rw-numberpicker,.rw-dropdownlist{padding-right:1.9em}.rw-combobox.rw-rtl,.rw-datetimepicker.rw-rtl,.rw-numberpicker.rw-rtl,.rw-dropdownlist.rw-rtl{padding-right:0;padding-left:1.9em}.rw-combobox>.rw-input,.rw-datetimepicker>.rw-input,.rw-numberpicker>.rw-input,.rw-dropdownlist>.rw-input{width:100%;border:none;outline:0}.rw-combobox>.rw-input::-moz-placeholder,.rw-datetimepicker>.rw-input::-moz-placeholder,.rw-numberpicker>.rw-input::-moz-placeholder,.rw-dropdownlist>.rw-input::-moz-placeholder{color:#999;opacity:1}.rw-combobox>.rw-input:-ms-input-placeholder,.rw-datetimepicker>.rw-input:-ms-input-placeholder,.rw-numberpicker>.rw-input:-ms-input-placeholder,.rw-dropdownlist>.rw-input:-ms-input-placeholder{color:#999}.rw-combobox>.rw-input::-webkit-input-placeholder,.rw-datetimepicker>.rw-input::-webkit-input-placeholder,.rw-numberpicker>.rw-input::-webkit-input-placeholder,.rw-dropdownlist>.rw-input::-webkit-input-placeholder{color:#999}.rw-placeholder{color:#999}.rw-select{position:absolute;width:1.9em;height:100%;right:0;top:0}.rw-select.rw-btn,.rw-select>.rw-btn{height:100%;vertical-align:middle;outline:0}.rw-rtl .rw-select{left:0;right:auto}.rw-multiselect,.rw-combobox input.rw-input,.rw-datetimepicker input.rw-input,.rw-numberpicker input.rw-input{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.rw-combobox:active,.rw-datetimepicker:active,.rw-dropdownlist:active,.rw-header>.rw-btn:active,.rw-numberpicker .rw-btn.rw-state-active,.rw-combobox:active.rw-state-focus,.rw-datetimepicker:active.rw-state-focus,.rw-dropdownlist:active.rw-state-focus,.rw-header>.rw-btn:active.rw-state-focus,.rw-numberpicker .rw-btn.rw-state-active.rw-state-focus{background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.rw-combobox:hover,.rw-datetimepicker:hover,.rw-numberpicker:hover,.rw-dropdownlist:hover{background-color:#e6e6e6;border-color:#adadad}.rw-dropdownlist.rw-state-disabled,.rw-dropdownlist.rw-state-readonly{cursor:not-allowed}.rw-dropdownlist>.rw-input{line-height:2.286em;background-color:transparent;padding-top:0;padding-bottom:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rw-dropdownlist.rw-rtl>.rw-input{padding:.429em .857em;padding-top:0;padding-bottom:0;padding-left:0}.rw-dropdownlist>.rw-select,.rw-dropdownlist.rw-rtl>.rw-select{border-width:0}.rw-numberpicker .rw-btn{display:block;height:1.143em;line-height:1.143em;width:100%;border-width:0}.rw-popup{position:absolute;-webkit-box-shadow:0 5px 6px rgba(0,0,0,0.2);box-shadow:0 5px 6px rgba(0,0,0,0.2);border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border:#ccc 1px solid;background:#fff;padding:2px;overflow:auto;margin-bottom:10px;left:10px;right:10px}.rw-dropup>.rw-popup{margin-bottom:0;margin-top:10px;border-top-right-radius:3px;border-top-left-radius:3px;border-bottom-right-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 6px rgba(0,0,0,0.2);box-shadow:0 0 6px rgba(0,0,0,0.2)}.rw-popup-container{position:absolute;top:100%;margin-top:1px;z-index:1005;left:-11px;right:-11px}.rw-popup-container.rw-dropup{top:auto;bottom:100%}.rw-popup-container.rw-calendar-popup{right:auto;width:18em}.rw-datetimepicker .rw-btn{width:1.8em}.rw-datetimepicker.rw-has-neither{padding-left:0;padding-right:0}.rw-datetimepicker.rw-has-neither .rw-input{border-radius:4px}.rw-datetimepicker.rw-has-both{padding-right:3.8em}.rw-datetimepicker.rw-has-both.rw-rtl{padding-right:0;padding-left:3.8em}.rw-datetimepicker.rw-has-both>.rw-select{width:3.8em;height:100%}.rw-calendar{background-color:#fff}.rw-calendar thead>tr{border-bottom:2px solid #ccc}.rw-calendar .rw-header{padding-bottom:5px}.rw-calendar .rw-header .rw-btn-left,.rw-calendar .rw-header .rw-btn-right{width:12.5%}.rw-calendar .rw-header .rw-btn-view{width:75%;background-color:#eee;border-radius:4px}.rw-calendar .rw-header .rw-btn-view[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed}.rw-calendar .rw-footer{border-top:1px solid #ccc}.rw-calendar .rw-footer .rw-btn{width:100%;white-space:normal}.rw-calendar .rw-footer .rw-btn:hover{background-color:#e6e6e6}.rw-calendar .rw-footer .rw-btn[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed}.rw-calendar-grid{height:14.28571429em;table-layout:fixed;width:100%}.rw-calendar-grid th{text-align:right;padding:0 .4em 0 .1em}.rw-calendar-grid .rw-btn{width:100%;text-align:right}.rw-calendar-grid td .rw-btn{border-radius:4px;padding:0 .4em 0 .1em;outline:0}.rw-calendar-grid td .rw-btn:hover{background-color:#e6e6e6}.rw-calendar-grid td .rw-btn.rw-off-range{color:#b3b3b3}.rw-calendar-grid.rw-nav-view .rw-btn{padding:.25em 0 .3em;display:block;overflow:hidden;text-align:center;white-space:normal}.rw-selectlist{padding:2px}.rw-selectlist>ul{height:100%;overflow:auto}.rw-selectlist>ul>li.rw-list-option{position:relative;min-height:27px;cursor:auto;padding-left:5px}.rw-selectlist>ul>li.rw-list-option>label>input{position:absolute;margin:4px 0 0 -20px}.rw-selectlist>ul>li.rw-list-option>label{padding-left:20px;line-height:1.423em;display:inline-block}.rw-selectlist.rw-rtl>ul>li.rw-list-option{padding-left:0;padding-right:5px}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label>input{margin:4px -20px 0 0}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label{padding-left:0;padding-right:20px}.rw-selectlist.rw-rtl>ul>li.rw-list-option{padding-left:0;padding-right:5px}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label>input{margin:4px -20px 0 0}.rw-selectlist.rw-rtl>ul>li.rw-list-option>label{padding-left:0;padding-right:20px}.rw-selectlist.rw-state-disabled>ul>li:hover,.rw-selectlist.rw-state-readonly>ul>li:hover{background:none;border-color:transparent}.rw-multiselect{background-color:#fff}.rw-multiselect:hover{border-color:#adadad}.rw-multiselect-wrapper{border-radius:4px;position:relative;cursor:text}.rw-multiselect-wrapper:before,.rw-multiselect-wrapper:after{content:" ";display:table}.rw-multiselect-wrapper:after{clear:both}.rw-multiselect-wrapper i.rw-loading{position:absolute;right:3px}.rw-multiselect-wrapper>.rw-input{float:left;outline:0;border-width:0;line-height:normal;width:auto;max-width:100%}.rw-multiselect-wrapper>.rw-input::-moz-placeholder{color:#999;opacity:1}.rw-multiselect-wrapper>.rw-input:-ms-input-placeholder{color:#999}.rw-multiselect-wrapper>.rw-input::-webkit-input-placeholder{color:#999}.rw-state-readonly>.rw-multiselect-wrapper,.rw-state-disabled>.rw-multiselect-wrapper{cursor:not-allowed}.rw-rtl .rw-multiselect-wrapper>.rw-input{float:right}.rw-multiselect-create-tag{border-top:1px #ccc solid;padding-top:5px;margin-top:5px}.rw-multiselect-taglist{margin:0;padding-left:0;list-style:none;padding-right:0}.rw-multiselect-taglist>li{display:inline-block;padding-left:5px;padding-right:5px}.rw-multiselect-taglist>li{float:left;display:inline-block;margin:1px;padding:.214em .15em .214em .4em;line-height:1.4em;text-align:center;vertical-align:middle;white-space:nowrap;border-radius:3px;border:1px solid #ccc;background-color:#ccc;cursor:pointer}.rw-multiselect-taglist>li.rw-state-focus{background-color:#fff;border:#66afe9 1px solid;color:#333}.rw-multiselect-taglist>li.rw-state-readonly,.rw-multiselect-taglist>li.rw-state-disabled,.rw-multiselect.rw-state-readonly .rw-multiselect-taglist>li,.rw-multiselect.rw-state-disabled .rw-multiselect-taglist>li{cursor:not-allowed;filter:alpha(opacity=65);opacity:.65}.rw-multiselect-taglist>li .rw-btn{outline:0;font-size:115%;line-height:normal}.rw-rtl .rw-multiselect-taglist>li{float:right} \ No newline at end of file diff --git a/dist/react-widgets.js b/dist/react-widgets.js index fcd049c90..1f8028835 100644 --- a/dist/react-widgets.js +++ b/dist/react-widgets.js @@ -1138,21 +1138,21 @@ return /******/ (function(modules) { // webpackBootstrap var _List2 = babelHelpers.interopRequireDefault(_List); - var _ListGroupable = __webpack_require__(41); + var _ListGroupable = __webpack_require__(42); var _ListGroupable2 = babelHelpers.interopRequireDefault(_ListGroupable); - var _utilValidateListInterface = __webpack_require__(43); + var _utilValidateListInterface = __webpack_require__(44); var _utilValidateListInterface2 = babelHelpers.interopRequireDefault(_utilValidateListInterface); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); var _utilDataHelpers = __webpack_require__(37); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var _utilWidgetHelpers = __webpack_require__(38); @@ -1191,9 +1191,8 @@ return /******/ (function(modules) { // webpackBootstrap dropUp: _react2['default'].PropTypes.bool, duration: _react2['default'].PropTypes.number, //popup - disabled: _utilPropTypes2['default'].disabled, - - readOnly: _utilPropTypes2['default'].readOnly, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, messages: _react2['default'].PropTypes.shape({ open: _utilPropTypes2['default'].message, @@ -1211,7 +1210,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'mixins', initializer: function initializer() { - return [__webpack_require__(48), __webpack_require__(49), __webpack_require__(50), __webpack_require__(51), __webpack_require__(56), __webpack_require__(40)()]; + return [__webpack_require__(48), __webpack_require__(49), __webpack_require__(50), __webpack_require__(51), __webpack_require__(56), __webpack_require__(41)()]; } }, { key: 'propTypes', @@ -1295,8 +1294,6 @@ return /******/ (function(modules) { // webpackBootstrap var placeholder = _props2.placeholder; var value = _props2.value; var open = _props2.open; - var disabled = _props2.disabled; - var readOnly = _props2.readOnly; var ValueComponent = _props2.valueComponent; var List = _props2.listComponent; @@ -1312,6 +1309,8 @@ return /******/ (function(modules) { // webpackBootstrap var focused = _state.focused; var items = this._data(), + disabled = _utilInteraction.isDisabled(this.props), + readOnly = _utilInteraction.isReadOnly(this.props), valueItem = _utilDataHelpers.dataItem(data, value, valueField), // take value from the raw data listID = _utilWidgetHelpers.instanceId(this, '__listbox'); @@ -1331,11 +1330,11 @@ return /******/ (function(modules) { // webpackBootstrap 'aria-owns': listID, 'aria-busy': !!busy, 'aria-live': !open && 'polite', - //aria-activedescendant={activeID} 'aria-autocomplete': 'list', 'aria-disabled': disabled, 'aria-readonly': readOnly, onKeyDown: this._keyDown, + onKeyPress: this._keyPress, onClick: this._click, onFocus: this._focus.bind(null, true), onBlur: this._focus.bind(null, false), @@ -1378,8 +1377,7 @@ return /******/ (function(modules) { // webpackBootstrap }, onOpening: function () { return _this.refs.list.forceUpdate(); - }, - onRequestClose: this.close + } }), _react2['default'].createElement( 'div', @@ -1496,19 +1494,31 @@ return /******/ (function(modules) { // webpackBootstrap } else if (key === 'ArrowUp') { if (alt) closeWithFocus();else if (isOpen) this.setState({ focusedItem: list.prev(focusedItem) });else change(list.prev(selectedItem)); e.preventDefault(); - } else if (!(this.props.filter && isOpen)) this.search(String.fromCharCode(e.keyCode), function (item) { - isOpen ? _this4.setState({ focusedItem: item }) : change(item); - }); + } function change(item, fromList) { if (!item) return; fromList ? self._onSelect(item) : self.change(item); } } + }, { + key: '_keyPress', + decorators: [_utilInteraction.widgetEditable], + value: function _keyPress(e) { + var _this5 = this; + + _utilWidgetHelpers.notify(this.props.onKeyPress, [e]); + + if (e.defaultPrevented) return; + + if (!(this.props.filter && this.props.open)) this.search(String.fromCharCode(e.which), function (item) { + _this5.isMounted() && _this5.props.open ? _this5.setState({ focusedItem: item }) : item && _this5.change(item); + }); + } }, { key: 'change', value: function change(data) { - if (!_util_2['default'].isShallowEqual(data, this.props.value)) { + if (!_utilDataHelpers.valueMatcher(data, this.props.value, this.props.valueField)) { _utilWidgetHelpers.notify(this.props.onChange, data); _utilWidgetHelpers.notify(this.props.onSearch, ''); this.close(); @@ -1529,18 +1539,20 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'search', value: function search(character, cb) { - var _this5 = this; + var _this6 = this; var word = ((this._searchTerm || '') + character).toLowerCase(); + if (!character) return; + this._searchTerm = word; this.setTimeout('search', function () { - var list = _this5.refs.list, - key = _this5.props.open ? 'focusedItem' : 'selectedItem', - item = list.next(_this5.state[key], word); + var list = _this6.refs.list, + key = _this6.props.open ? 'focusedItem' : 'selectedItem', + item = list.next(_this6.state[key], word); - _this5._searchTerm = ''; + _this6._searchTerm = ''; if (item) cb(item); }, this.props.delay); } @@ -1646,17 +1658,19 @@ return /******/ (function(modules) { // webpackBootstrap /* 26 */ /***/ function(module, exports, __webpack_require__) { - var __WEBPACK_AMD_DEFINE_RESULT__;/*! + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! Copyright (c) 2015 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ + /* global define */ (function () { 'use strict'; - function classNames () { + var hasOwn = {}.hasOwnProperty; + function classNames () { var classes = ''; for (var i = 0; i < arguments.length; i++) { @@ -1665,15 +1679,13 @@ return /******/ (function(modules) { // webpackBootstrap var argType = typeof arg; - if ('string' === argType || 'number' === argType) { + if (argType === 'string' || argType === 'number') { classes += ' ' + arg; - } else if (Array.isArray(arg)) { classes += ' ' + classNames.apply(null, arg); - - } else if ('object' === argType) { + } else if (argType === 'object') { for (var key in arg) { - if (arg.hasOwnProperty(key) && arg[key]) { + if (hasOwn.call(arg, key) && arg[key]) { classes += ' ' + key; } } @@ -1685,15 +1697,14 @@ return /******/ (function(modules) { // webpackBootstrap if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; - } else if (true){ - // AMD. Register as an anonymous module. - !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { + } else if (true) { + // register as 'classnames', consistent with npm package name + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () { return classNames; - }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else { window.classNames = classNames; } - }()); @@ -1766,7 +1777,6 @@ return /******/ (function(modules) { // webpackBootstrap dropUp: _react2['default'].PropTypes.bool, duration: _react2['default'].PropTypes.number, - onRequestClose: _react2['default'].PropTypes.func.isRequired, onClosing: _react2['default'].PropTypes.func, onOpening: _react2['default'].PropTypes.func, onClose: _react2['default'].PropTypes.func, @@ -2191,6 +2201,8 @@ return /******/ (function(modules) { // webpackBootstrap var _utilWidgetHelpers = __webpack_require__(38); + var _utilInteraction = __webpack_require__(39); + var optionId = function optionId(id, idx) { return id + '__option__' + idx; }; @@ -2199,7 +2211,7 @@ return /******/ (function(modules) { // webpackBootstrap displayName: 'List', - mixins: [__webpack_require__(39), __webpack_require__(40)()], + mixins: [__webpack_require__(40), __webpack_require__(41)()], propTypes: { data: _react2['default'].PropTypes.array, @@ -2209,12 +2221,13 @@ return /******/ (function(modules) { // webpackBootstrap optionComponent: _utilPropTypes2['default'].elementType, itemComponent: _utilPropTypes2['default'].elementType, - selectedIndex: _react2['default'].PropTypes.number, - focusedIndex: _react2['default'].PropTypes.number, - valueField: _react2['default'].PropTypes.string, + selected: _react2['default'].PropTypes.any, + focused: _react2['default'].PropTypes.any, + valueField: _utilPropTypes2['default'].accessor, textField: _utilPropTypes2['default'].accessor, - optionID: _react2['default'].PropTypes.func, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, messages: _react2['default'].PropTypes.shape({ emptyList: _utilPropTypes2['default'].message @@ -2223,7 +2236,6 @@ return /******/ (function(modules) { // webpackBootstrap getDefaultProps: function getDefaultProps() { return { - optID: '', onSelect: function onSelect() {}, optionComponent: _ListOption2['default'], ariaActiveDescendantKey: 'list', @@ -2263,8 +2275,7 @@ return /******/ (function(modules) { // webpackBootstrap var onSelect = _props2.onSelect; var ItemComponent = _props2.itemComponent; var Option = _props2.optionComponent; - var optionID = _props2.optionID; - var props = babelHelpers.objectWithoutProperties(_props2, ['className', 'role', 'data', 'textField', 'valueField', 'focused', 'selected', 'messages', 'onSelect', 'itemComponent', 'optionComponent', 'optionID']); + var props = babelHelpers.objectWithoutProperties(_props2, ['className', 'role', 'data', 'textField', 'valueField', 'focused', 'selected', 'messages', 'onSelect', 'itemComponent', 'optionComponent']); var id = _utilWidgetHelpers.instanceId(this); var items; @@ -2273,7 +2284,9 @@ return /******/ (function(modules) { // webpackBootstrap { className: 'rw-list-empty' }, _util_2['default'].result(messages.emptyList, this.props) ) : data.map(function (item, idx) { - var currentId = optionId(id, idx); + var currentId = optionId(id, idx), + isDisabled = _utilInteraction.isDisabledItem(item, props), + isReadOnly = _utilInteraction.isReadOnlyItem(item, props); return _react2['default'].createElement( Option, @@ -2281,14 +2294,18 @@ return /******/ (function(modules) { // webpackBootstrap key: 'item_' + idx, id: currentId, dataItem: item, + disabled: isDisabled, + readOnly: isReadOnly, focused: focused === item, selected: selected === item, - onClick: onSelect.bind(null, item) + onClick: isDisabled || isReadOnly ? undefined : onSelect.bind(null, item) }, ItemComponent ? _react2['default'].createElement(ItemComponent, { item: item, value: _utilDataHelpers.dataValue(item, valueField), - text: _utilDataHelpers.dataText(item, textField) + text: _utilDataHelpers.dataText(item, textField), + disabled: isDisabled, + readOnly: isReadOnly }) : _utilDataHelpers.dataText(item, textField) ); }); @@ -2346,7 +2363,9 @@ return /******/ (function(modules) { // webpackBootstrap propTypes: { dataItem: _react2['default'].PropTypes.any, focused: _react2['default'].PropTypes.bool, - selected: _react2['default'].PropTypes.bool + selected: _react2['default'].PropTypes.bool, + disabled: _react2['default'].PropTypes.bool, + readOnly: _react2['default'].PropTypes.bool }, render: function render() { @@ -2355,18 +2374,22 @@ return /******/ (function(modules) { // webpackBootstrap var children = _props.children; var focused = _props.focused; var selected = _props.selected; - var props = babelHelpers.objectWithoutProperties(_props, ['className', 'children', 'focused', 'selected']); + var disabled = _props.disabled; + var readOnly = _props.readOnly; + var props = babelHelpers.objectWithoutProperties(_props, ['className', 'children', 'focused', 'selected', 'disabled', 'readOnly']); var classes = { 'rw-state-focus': focused, - 'rw-state-selected': selected + 'rw-state-selected': selected, + 'rw-state-disabled': disabled, + 'rw-state-readonly': readOnly }; return _react2['default'].createElement( 'li', babelHelpers._extends({ role: 'option', - tabIndex: '-1', + tabIndex: !(disabled || readOnly) ? '-1' : undefined, 'aria-selected': !!selected, className: _classnames2['default']('rw-list-option', className, classes) }, props), @@ -2422,6 +2445,11 @@ return /******/ (function(modules) { // webpackBootstrap return -1; } + /** + * I don't know that the shallow equal makes sense here but am too afraid to + * remove it. + */ + function valueMatcher(a, b, valueField) { return _.isShallowEqual(dataValue(a, valueField), dataValue(b, valueField)); } @@ -2476,11 +2504,89 @@ return /******/ (function(modules) { // webpackBootstrap 'use strict'; - var babelHelpers = __webpack_require__(2); + exports.__esModule = true; + exports.isDisabled = isDisabled; + exports.isReadOnly = isReadOnly; + exports.isDisabledItem = isDisabledItem; + exports.isReadOnlyItem = isReadOnlyItem; + exports.contains = contains; + exports.move = move; - var _react = __webpack_require__(21); + var _dataHelpers = __webpack_require__(37); - var _react2 = babelHelpers.interopRequireDefault(_react); + function isDisabled(props) { + return props.disabled === true || props.disabled === 'disabled'; + } + + function isReadOnly(props) { + return props.readOnly === true || props.readOnly === 'readOnly'; + } + + function isDisabledItem(item, props) { + return isDisabled(props) || contains(item, props.disabled, props.valueField); + } + + function isReadOnlyItem(item, props) { + return isReadOnly(props) || contains(item, props.readOnly, props.valueField); + } + + function contains(item, values, valueField) { + return Array.isArray(values) ? values.some(function (value) { + return _dataHelpers.valueMatcher(item, value, valueField); + }) : _dataHelpers.valueMatcher(item, values, valueField); + } + + function move(dir, item, props, list) { + var isDisabledOrReadonly = function isDisabledOrReadonly(item) { + return isDisabledItem(item, props) || isReadOnlyItem(item, props); + }, + stop = dir === 'next' ? list.last() : list.first(), + next = list[dir](item); + + while (next !== stop && isDisabledOrReadonly(next)) next = list[dir](next); + + return isDisabledOrReadonly(next) ? item : next; + } + + var widgetEnabled = interactionDecorator(true); + + exports.widgetEnabled = widgetEnabled; + var widgetEditable = interactionDecorator(false); + + exports.widgetEditable = widgetEditable; + function interactionDecorator(disabledOnly) { + function wrap(method) { + return function decoratedMethod() { + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + if (!(isDisabled(this.props) || !disabledOnly && isReadOnly(this.props))) return method.apply(this, args); + }; + } + + return function decorate(target, key, desc) { + if (desc.initializer) { + (function () { + var init = desc.initializer; + desc.initializer = function () { + return wrap(init()); + }; + })(); + } else desc.value = wrap(desc.value); + return desc; + }; + } + +/***/ }, +/* 40 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var babelHelpers = __webpack_require__(2); + + exports.__esModule = true; var _utilFilter = __webpack_require__(34); @@ -2488,76 +2594,78 @@ return /******/ (function(modules) { // webpackBootstrap var _utilDataHelpers = __webpack_require__(37); - module.exports = { + var _utilPropTypes = __webpack_require__(33); + + var _utilPropTypes2 = babelHelpers.interopRequireDefault(_utilPropTypes); + + var _utilInteraction = __webpack_require__(39); + + var EMPTY_VALUE = {}; + + var isDisabledOrReadonly = function isDisabledOrReadonly(item, props) { + return _utilInteraction.isDisabledItem(item, props) || _utilInteraction.isReadOnlyItem(item, props); + }; + + exports['default'] = { propTypes: { - textField: _react2['default'].PropTypes.string + textField: _utilPropTypes2['default'].accessor, + valueField: _utilPropTypes2['default'].accessor, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray }, first: function first() { - return this._data()[0]; + return this.next(EMPTY_VALUE); }, last: function last() { - var data = this._data(); - return data[data.length - 1]; + var data = this._data(), + item = data[data.length - 1]; + + return isDisabledOrReadonly(item, this.props) ? this.prev(item) : item; }, prev: function prev(item, word) { - var textField = this.props.textField, - data = this._data(), - idx = data.indexOf(item); - - if (idx === -1) idx = data.length; + var data = this._data(), + nextIdx = data.indexOf(item), + matches = matcher(word, item, this.props.textField); - return word ? findPrevInstance(textField, data, word, idx) : --idx < 0 ? data[0] : data[idx]; - }, - - next: function next(item, word) { - var textField = this.props.textField, - data = this._data(), - idx = data.indexOf(item); + if (nextIdx < 0 || nextIdx == null) nextIdx = 0; - return word ? findNextInstance(textField, data, word, idx) : ++idx === data.length ? data[data.length - 1] : data[idx]; - } + nextIdx--; - }; + while (nextIdx > -1 && (isDisabledOrReadonly(data[nextIdx], this.props) || !matches(data[nextIdx]))) nextIdx--; - function findNextInstance(textField, data, word, startIndex) { - var matches = _utilFilter2['default'].startsWith, - idx = -1, - len = data.length, - foundStart, - itemText; + return nextIdx >= 0 ? data[nextIdx] : item; + }, - word = word.toLowerCase(); + next: function next(item, word) { + var data = this._data(), + nextIdx = data.indexOf(item) + 1, + len = data.length, + matches = matcher(word, item, this.props.textField); - while (++idx < len) { - foundStart = foundStart || idx > startIndex; - itemText = foundStart && _utilDataHelpers.dataText(data[idx], textField).toLowerCase(); + while (nextIdx < len && (isDisabledOrReadonly(data[nextIdx], this.props) || !matches(data[nextIdx]))) nextIdx++; - if (foundStart && matches(itemText, word)) return data[idx]; + return nextIdx < len ? data[nextIdx] : item; } - } + }; - function findPrevInstance(textField, data, word, startIndex) { - var matches = _utilFilter2['default'].startsWith, - idx = data.length, - foundStart, - itemText; + function matcher(word, item, textField) { + if (!word) return function () { + return true; + }; word = word.toLowerCase(); - - while (--idx >= 0) { - foundStart = foundStart || idx < startIndex; - itemText = foundStart && _utilDataHelpers.dataText(data[idx], textField).toLowerCase(); - - if (foundStart && matches(itemText, word)) return data[idx]; - } + return function (item) { + return _utilFilter2['default'].startsWith(_utilDataHelpers.dataText(item, textField).toLowerCase(), word); + }; } + module.exports = exports['default']; /***/ }, -/* 40 */ +/* 41 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -2642,7 +2750,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 41 */ +/* 42 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -2675,7 +2783,7 @@ return /******/ (function(modules) { // webpackBootstrap var _util_2 = babelHelpers.interopRequireDefault(_util_); - var _warning = __webpack_require__(42); + var _warning = __webpack_require__(43); var _warning2 = babelHelpers.interopRequireDefault(_warning); @@ -2683,6 +2791,8 @@ return /******/ (function(modules) { // webpackBootstrap var _utilWidgetHelpers = __webpack_require__(38); + var _utilInteraction = __webpack_require__(39); + var optionId = function optionId(id, idx) { return id + '__option__' + idx; }; @@ -2691,7 +2801,7 @@ return /******/ (function(modules) { // webpackBootstrap displayName: 'List', - mixins: [__webpack_require__(39), __webpack_require__(40)()], + mixins: [__webpack_require__(40), __webpack_require__(41)()], propTypes: { data: _react2['default'].PropTypes.array, @@ -2705,10 +2815,11 @@ return /******/ (function(modules) { // webpackBootstrap selected: _react2['default'].PropTypes.any, focused: _react2['default'].PropTypes.any, - valueField: _react2['default'].PropTypes.string, + valueField: _utilPropTypes2['default'].accessor, textField: _utilPropTypes2['default'].accessor, - optID: _react2['default'].PropTypes.string, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, groupBy: _utilPropTypes2['default'].accessor, @@ -2719,7 +2830,6 @@ return /******/ (function(modules) { // webpackBootstrap getDefaultProps: function getDefaultProps() { return { - optID: '', onSelect: function onSelect() {}, data: [], optionComponent: _ListOption2['default'], @@ -2834,7 +2944,9 @@ return /******/ (function(modules) { // webpackBootstrap var ItemComponent = _props2.itemComponent; var Option = _props2.optionComponent; - var currentID = optionId(_utilWidgetHelpers.instanceId(this), idx); + var currentID = optionId(_utilWidgetHelpers.instanceId(this), idx), + isDisabled = _utilInteraction.isDisabledItem(item, this.props), + isReadOnly = _utilInteraction.isReadOnlyItem(item, this.props); if (focused === item) this._currentActiveID = currentID; @@ -2846,12 +2958,16 @@ return /******/ (function(modules) { // webpackBootstrap dataItem: item, focused: focused === item, selected: selected === item, - onClick: onSelect.bind(null, item) + disabled: isDisabled, + readOnly: isReadOnly, + onClick: isDisabled || isReadOnly ? undefined : onSelect.bind(null, item) }, ItemComponent ? _react2['default'].createElement(ItemComponent, { item: item, value: _utilDataHelpers.dataValue(item, valueField), - text: _utilDataHelpers.dataText(item, textField) + text: _utilDataHelpers.dataText(item, textField), + disabled: isDisabled, + readOnly: isReadOnly }) : _utilDataHelpers.dataText(item, textField) ); }, @@ -2920,7 +3036,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 42 */ +/* 43 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {/** @@ -2987,7 +3103,7 @@ return /******/ (function(modules) { // webpackBootstrap /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1))) /***/ }, -/* 43 */ +/* 44 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; @@ -3015,7 +3131,7 @@ return /******/ (function(modules) { // webpackBootstrap /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1))) /***/ }, -/* 44 */ +/* 45 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -3024,13 +3140,13 @@ return /******/ (function(modules) { // webpackBootstrap function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - var _createUncontrollable = __webpack_require__(45); + var _createUncontrollable = __webpack_require__(46); var _createUncontrollable2 = _interopRequireDefault(_createUncontrollable); var mixin = { shouldComponentUpdate: function shouldComponentUpdate() { - //let the setState trigger the update + //let the forceUpdate trigger the update return !this._notifying; } }; @@ -3050,7 +3166,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 45 */ +/* 46 */ /***/ function(module, exports, __webpack_require__) { 'use strict'; @@ -3071,7 +3187,7 @@ return /******/ (function(modules) { // webpackBootstrap var _react2 = _interopRequireDefault(_react); - var _utils = __webpack_require__(46); + var _utils = __webpack_require__(47); var utils = _interopRequireWildcard(_utils); @@ -3115,9 +3231,26 @@ return /******/ (function(modules) { // webpackBootstrap }, {}); }, - render: function render() { + /** + * If a prop switches from controlled to Uncontrolled + * reset its value to the defaultValue + */ + componentWillReceiveProps: function componentWillReceiveProps(nextProps) { var _this = this; + var props = this.props, + keys = Object.keys(controlledValues); + + keys.forEach(function (key) { + if (utils.getValue(nextProps, key) === undefined && utils.getValue(props, key) !== undefined) { + _this._values[key] = nextProps[utils.defaultKey(key)]; + } + }); + }, + + render: function render() { + var _this2 = this; + var newProps = {}; var _props = this.props; var valueLink = _props.valueLink; @@ -3127,21 +3260,22 @@ return /******/ (function(modules) { // webpackBootstrap utils.each(controlledValues, function (handle, propName) { var linkPropName = utils.getLinkName(propName), - prop = _this.props[propName]; + prop = _this2.props[propName]; - if (linkPropName && !isProp(_this.props, propName) && isProp(_this.props, linkPropName)) { - prop = _this.props[linkPropName].value; + if (linkPropName && !isProp(_this2.props, propName) && isProp(_this2.props, linkPropName)) { + prop = _this2.props[linkPropName].value; } - newProps[propName] = prop !== undefined ? prop : _this._values[propName]; + newProps[propName] = prop !== undefined ? prop : _this2._values[propName]; - newProps[handle] = setAndNotify.bind(_this, propName); + newProps[handle] = setAndNotify.bind(_this2, propName); }); newProps = _extends({}, props, newProps, { ref: 'inner' }); return _react2['default'].createElement(Component, newProps); } + })); component.ControlledComponent = Component; @@ -3172,7 +3306,7 @@ return /******/ (function(modules) { // webpackBootstrap module.exports = exports['default']; /***/ }, -/* 46 */ +/* 47 */ /***/ function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(process) {'use strict'; @@ -3181,6 +3315,7 @@ return /******/ (function(modules) { // webpackBootstrap exports.customPropType = customPropType; exports.uncontrolledPropTypes = uncontrolledPropTypes; exports.getType = getType; + exports.getValue = getValue; exports.getLinkName = getLinkName; exports.defaultKey = defaultKey; exports.chain = chain; @@ -3200,7 +3335,7 @@ return /******/ (function(modules) { // webpackBootstrap function customPropType(handler, propType, name) { - return function (props, propName, componentName) { + return function (props, propName) { if (props[propName] !== undefined) { if (!props[handler]) { @@ -3240,6 +3375,18 @@ return /******/ (function(modules) { // webpackBootstrap return component.type; } + function getValue(props, name) { + var linkPropName = getLinkName(name); + + if (linkPropName && !isProp(props, name) && isProp(props, linkPropName)) return props[linkPropName].value; + + return props[name]; + } + + function isProp(props, prop) { + return props[prop] !== undefined; + } + function getLinkName(name) { return name === 'value' ? 'valueLink' : name === 'checked' ? 'checkedLink' : null; } @@ -3275,86 +3422,6 @@ return /******/ (function(modules) { // webpackBootstrap } /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1))) -/***/ }, -/* 47 */ -/***/ function(module, exports, __webpack_require__) { - - 'use strict'; - - exports.__esModule = true; - exports.isDisabled = isDisabled; - exports.isReadOnly = isReadOnly; - exports.isDisabledItem = isDisabledItem; - exports.isReadOnlyItem = isReadOnlyItem; - exports.contains = contains; - exports.move = move; - - var _dataHelpers = __webpack_require__(37); - - function isDisabled(props) { - return props.disabled === true || props.disabled === 'disabled'; - } - - function isReadOnly(props) { - return props.readOnly === true || props.readOnly === 'readOnly'; - } - - function isDisabledItem(item, props) { - return isDisabled(props) || contains(item, props.disabled, props.valueField); - } - - function isReadOnlyItem(item, props) { - return isReadOnly(props) || contains(item, props.readOnly, props.valueField); - } - - function contains(item, values, valueField) { - return Array.isArray(values) ? values.some(function (value) { - return _dataHelpers.valueMatcher(item, value, valueField); - }) : _dataHelpers.valueMatcher(item, values, valueField); - } - - function move(dir, item, props, list) { - var isDisabledOrReadonly = function isDisabledOrReadonly(item) { - return isDisabledItem(item, props) || isReadOnlyItem(item, props); - }, - stop = dir === 'next' ? list.last() : list.first(), - next = list[dir](item); - - while (next !== stop && isDisabledOrReadonly(next)) next = list[dir](next); - - return isDisabledOrReadonly(next) ? item : next; - } - - var widgetEnabled = interactionDecorator(true); - - exports.widgetEnabled = widgetEnabled; - var widgetEditable = interactionDecorator(false); - - exports.widgetEditable = widgetEditable; - function interactionDecorator(disabledOnly) { - function wrap(method) { - return function decoratedMethod() { - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - if (!(isDisabled(this.props) || !disabledOnly && isReadOnly(this.props))) return method.apply(this, args); - }; - } - - return function decorate(target, key, desc) { - if (desc.initializer) { - (function () { - var init = desc.initializer; - desc.initializer = function () { - return wrap(init()); - }; - })(); - } else desc.value = wrap(desc.value); - return desc; - }; - } - /***/ }, /* 48 */ /***/ function(module, exports, __webpack_require__) { @@ -3756,21 +3823,21 @@ return /******/ (function(modules) { // webpackBootstrap var _List2 = babelHelpers.interopRequireDefault(_List); - var _ListGroupable = __webpack_require__(41); + var _ListGroupable = __webpack_require__(42); var _ListGroupable2 = babelHelpers.interopRequireDefault(_ListGroupable); - var _utilValidateListInterface = __webpack_require__(43); + var _utilValidateListInterface = __webpack_require__(44); var _utilValidateListInterface2 = babelHelpers.interopRequireDefault(_utilValidateListInterface); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); var _utilDataHelpers = __webpack_require__(37); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var _utilWidgetHelpers = __webpack_require__(38); @@ -3803,8 +3870,8 @@ return /******/ (function(modules) { // webpackBootstrap onSelect: _react2['default'].PropTypes.func, autoFocus: _react2['default'].PropTypes.bool, - disabled: _utilPropTypes2['default'].disabled, - readOnly: _utilPropTypes2['default'].readOnly, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, suggest: _utilPropTypes2['default'].filter, filter: _utilPropTypes2['default'].filter, @@ -3831,7 +3898,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'mixins', initializer: function initializer() { - return [__webpack_require__(48), __webpack_require__(50), __webpack_require__(51), __webpack_require__(56), __webpack_require__(40)('input')]; + return [__webpack_require__(48), __webpack_require__(50), __webpack_require__(51), __webpack_require__(56), __webpack_require__(41)('input')]; } }, { key: 'propTypes', @@ -3931,8 +3998,6 @@ return /******/ (function(modules) { // webpackBootstrap var placeholder = _props2.placeholder; var value = _props2.value; var open = _props2.open; - var disabled = _props2.disabled; - var readOnly = _props2.readOnly; var List = _props2.listComponent; List = List || groupBy && _ListGroupable2['default'] || _List2['default']; @@ -3947,6 +4012,8 @@ return /******/ (function(modules) { // webpackBootstrap var focused = _state.focused; var items = this._data(), + disabled = _utilInteraction.isDisabled(this.props), + readOnly = _utilInteraction.isReadOnly(this.props), valueItem = _utilDataHelpers.dataItem(data, value, valueField), // take value from the raw data inputID = _utilWidgetHelpers.instanceId(this, '_input'), @@ -4017,8 +4084,7 @@ return /******/ (function(modules) { // webpackBootstrap babelHelpers._extends({}, popupProps, { onOpening: function () { return _this.refs.list.forceUpdate(); - }, - onRequestClose: this.close + } }), _react2['default'].createElement( 'div', @@ -4462,7 +4528,7 @@ return /******/ (function(modules) { // webpackBootstrap var _utilPropTypes2 = babelHelpers.interopRequireDefault(_utilPropTypes); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); @@ -4486,7 +4552,7 @@ return /******/ (function(modules) { // webpackBootstrap var _utilWidgetHelpers = __webpack_require__(38); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var dir = _utilConstants2['default'].directions, values = function values(obj) { @@ -4571,7 +4637,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'mixins', initializer: function initializer() { - return [__webpack_require__(48), __webpack_require__(49), __webpack_require__(56), __webpack_require__(40)()]; + return [__webpack_require__(48), __webpack_require__(49), __webpack_require__(56), __webpack_require__(41)()]; } }, { key: 'propTypes', @@ -5158,7 +5224,7 @@ return /******/ (function(modules) { // webpackBootstrap isEqual: isEqual }, - mixins: [__webpack_require__(63), __webpack_require__(40)()], + mixins: [__webpack_require__(63), __webpack_require__(41)()], propTypes: propTypes, @@ -5660,7 +5726,7 @@ return /******/ (function(modules) { // webpackBootstrap displayName: 'YearView', - mixins: [__webpack_require__(63), __webpack_require__(40)()], + mixins: [__webpack_require__(63), __webpack_require__(41)()], propTypes: propTypes, @@ -5814,7 +5880,7 @@ return /******/ (function(modules) { // webpackBootstrap displayName: 'DecadeView', - mixins: [__webpack_require__(49), __webpack_require__(63), __webpack_require__(40)()], + mixins: [__webpack_require__(49), __webpack_require__(63), __webpack_require__(41)()], propTypes: propTypes, @@ -5980,7 +6046,7 @@ return /******/ (function(modules) { // webpackBootstrap displayName: 'CenturyView', - mixins: [__webpack_require__(49), __webpack_require__(63), __webpack_require__(40)()], + mixins: [__webpack_require__(49), __webpack_require__(63), __webpack_require__(41)()], propTypes: propTypes, @@ -6500,11 +6566,11 @@ return /******/ (function(modules) { // webpackBootstrap var _utilPropTypes2 = babelHelpers.interopRequireDefault(_utilPropTypes); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var _utilWidgetHelpers = __webpack_require__(38); @@ -6576,7 +6642,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'mixins', initializer: function initializer() { - return [__webpack_require__(48), __webpack_require__(49), __webpack_require__(51), __webpack_require__(56), __webpack_require__(40)('valueInput', function (key, id) { + return [__webpack_require__(48), __webpack_require__(49), __webpack_require__(51), __webpack_require__(56), __webpack_require__(41)('valueInput', function (key, id) { var open = this.props.open; var current = this.ariaActiveDescendant(); var calIsActive = open === popups.CALENDAR && key === 'calendar'; @@ -6678,6 +6744,7 @@ return /******/ (function(modules) { // webpackBootstrap ref: 'element', tabIndex: '-1', onKeyDown: this._keyDown, + onKeyPress: this._keyPress, onFocus: this._focus.bind(null, true), onBlur: this._focus.bind(null, false), className: _classnames2['default'](className, 'rw-datetimepicker', 'rw-widget', (_cx = { @@ -6751,7 +6818,6 @@ return /******/ (function(modules) { // webpackBootstrap { dropUp: dropUp, open: timeIsOpen, - onRequestClose: this.close, duration: duration, onOpening: function () { return _this.refs.timePopup.forceUpdate(); @@ -6785,8 +6851,7 @@ return /******/ (function(modules) { // webpackBootstrap className: 'rw-calendar-popup', dropUp: dropUp, open: calendarIsOpen, - duration: duration, - onRequestClose: this.close + duration: duration }, shouldRenderList && _react2['default'].createElement(Calendar, babelHelpers._extends({}, calProps, { ref: 'calPopup', @@ -6847,6 +6912,16 @@ return /******/ (function(modules) { // webpackBootstrap if (open === popups.TIME) this.refs.timePopup._keyDown(e); } } + }, { + key: '_keyPress', + decorators: [_utilInteraction.widgetEditable], + value: function _keyPress(e) { + _utilWidgetHelpers.notify(this.props.onKeyPress, [e]); + + if (e.defaultPrevented) return; + + if (this.props.open === popups.TIME) this.refs.timePopup._keyPress(e); + } }, { key: '_focus', decorators: [_utilInteraction.widgetEnabled], @@ -7152,10 +7227,7 @@ return /******/ (function(modules) { // webpackBootstrap }, _keyDown: function _keyDown(e) { - var _this = this; - var key = e.key, - character = String.fromCharCode(e.keyCode), focusedItem = this.state.focusedItem, list = this.refs.list; @@ -7165,15 +7237,19 @@ return /******/ (function(modules) { // webpackBootstrap } else if (key === 'ArrowUp') { e.preventDefault(); this.setState({ focusedItem: list.prev(focusedItem) }); - } else { - e.preventDefault(); - - this.search(character, function (item) { - _this.setState({ focusedItem: item }); - }); } }, + _keyPress: function _keyPress(e) { + var _this = this; + + e.preventDefault(); + + this.search(String.fromCharCode(e.which), function (item) { + _this.isMounted() && _this.setState({ focusedItem: item }); + }); + }, + scrollTo: function scrollTo() { this.refs.list.move && this.refs.list.move(); }, @@ -7353,7 +7429,7 @@ return /******/ (function(modules) { // webpackBootstrap var _utilPropTypes2 = babelHelpers.interopRequireDefault(_utilPropTypes); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); @@ -7375,7 +7451,7 @@ return /******/ (function(modules) { // webpackBootstrap var _WidgetButton2 = babelHelpers.interopRequireDefault(_WidgetButton); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var _utilWidgetHelpers = __webpack_require__(38); @@ -7494,7 +7570,7 @@ return /******/ (function(modules) { // webpackBootstrap className: _classnames2['default']({ 'rw-state-active': this.state.active === directions.UP }), onMouseDown: this._mouseDown.bind(null, directions.UP), onMouseUp: this._mouseUp.bind(null, directions.UP), - onMouseOut: this._mouseUp.bind(null, directions.UP), + onMouseLeave: this._mouseUp.bind(null, directions.UP), onClick: this._focus.bind(null, true), disabled: val === this.props.max || this.props.disabled, 'aria-disabled': val === this.props.max || this.props.disabled }, @@ -7515,7 +7591,7 @@ return /******/ (function(modules) { // webpackBootstrap className: _classnames2['default']({ 'rw-state-active': this.state.active === directions.DOWN }), onMouseDown: this._mouseDown.bind(null, directions.DOWN), onMouseUp: this._mouseUp.bind(null, directions.DOWN), - onMouseOut: this._mouseUp.bind(null, directions.DOWN), + onMouseLeave: this._mouseUp.bind(null, directions.DOWN), onClick: this._focus.bind(null, true), disabled: val === this.props.min || this.props.disabled, 'aria-disabled': val === this.props.min || this.props.disabled }, @@ -7882,28 +7958,28 @@ return /******/ (function(modules) { // webpackBootstrap var _List2 = babelHelpers.interopRequireDefault(_List); - var _ListGroupable = __webpack_require__(41); + var _ListGroupable = __webpack_require__(42); var _ListGroupable2 = babelHelpers.interopRequireDefault(_ListGroupable); - var _utilValidateListInterface = __webpack_require__(43); + var _utilValidateListInterface = __webpack_require__(44); var _utilValidateListInterface2 = babelHelpers.interopRequireDefault(_utilValidateListInterface); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); var _utilDataHelpers = __webpack_require__(37); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var _utilWidgetHelpers = __webpack_require__(38); var compatCreate = function compatCreate(props, msgs) { return typeof msgs.createNew === 'function' ? msgs.createNew(props) : [_react2['default'].createElement( 'strong', - null, + { key: 'dumb' }, '"' + props.searchTerm + '"' ), ' ' + msgs.createNew]; }; @@ -7965,7 +8041,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'mixins', initializer: function initializer() { - return [__webpack_require__(48), __webpack_require__(50), __webpack_require__(51), __webpack_require__(56), __webpack_require__(40)('input', function (key, id) { + return [__webpack_require__(48), __webpack_require__(50), __webpack_require__(51), __webpack_require__(56), __webpack_require__(41)('input', function (key, id) { var myKey = this.props.ariaActiveDescendantKey; var createIsActive = (!this._data().length || this.state.focusedItem === null) && key === myKey; @@ -8175,8 +8251,7 @@ return /******/ (function(modules) { // webpackBootstrap babelHelpers._extends({}, popupProps, { onOpening: function () { return _this.refs.list.forceUpdate(); - }, - onRequestClose: this.close + } }), _react2['default'].createElement( 'div', @@ -8513,7 +8588,7 @@ return /******/ (function(modules) { // webpackBootstrap var _utilDataHelpers = __webpack_require__(37); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var optionId = function optionId(id, idx) { return id + '__option__' + idx; @@ -8523,7 +8598,7 @@ return /******/ (function(modules) { // webpackBootstrap displayName: 'MultiselectTagList', - mixins: [__webpack_require__(49), __webpack_require__(40)()], + mixins: [__webpack_require__(49), __webpack_require__(41)()], propTypes: { value: _react2['default'].PropTypes.array, @@ -8698,7 +8773,7 @@ return /******/ (function(modules) { // webpackBootstrap var _classnames2 = babelHelpers.interopRequireDefault(_classnames); - var _uncontrollable = __webpack_require__(44); + var _uncontrollable = __webpack_require__(45); var _uncontrollable2 = babelHelpers.interopRequireDefault(_uncontrollable); @@ -8714,7 +8789,15 @@ return /******/ (function(modules) { // webpackBootstrap var _List2 = babelHelpers.interopRequireDefault(_List); - var _utilValidateListInterface = __webpack_require__(43); + var _ListGroupable = __webpack_require__(42); + + var _ListGroupable2 = babelHelpers.interopRequireDefault(_ListGroupable); + + var _ListOption = __webpack_require__(36); + + var _ListOption2 = babelHelpers.interopRequireDefault(_ListOption); + + var _utilValidateListInterface = __webpack_require__(44); var _utilValidateListInterface2 = babelHelpers.interopRequireDefault(_utilValidateListInterface); @@ -8724,7 +8807,7 @@ return /******/ (function(modules) { // webpackBootstrap var _utilDataHelpers = __webpack_require__(37); - var _utilInteraction = __webpack_require__(47); + var _utilInteraction = __webpack_require__(39); var _utilWidgetHelpers = __webpack_require__(38); @@ -8772,7 +8855,7 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: 'mixins', initializer: function initializer() { - return [__webpack_require__(48), __webpack_require__(56), __webpack_require__(40)()]; + return [__webpack_require__(48), __webpack_require__(56), __webpack_require__(41)()]; } }, { key: 'getDefaultProps', @@ -8833,9 +8916,10 @@ return /******/ (function(modules) { // webpackBootstrap var className = _props.className; var tabIndex = _props.tabIndex; var busy = _props.busy; + var groupBy = _props.groupBy; var List = _props.listComponent; - List = List || _List2['default']; + List = List || groupBy && _ListGroupable2['default'] || _List2['default']; var elementProps = omit(this.props, Object.keys(propTypes)); var listProps = pick(this.props, Object.keys(List.propTypes)); @@ -8854,6 +8938,7 @@ return /******/ (function(modules) { // webpackBootstrap 'div', babelHelpers._extends({}, elementProps, { onKeyDown: this._keyDown, + onKeyPress: this._keyPress, onFocus: this._focus.bind(null, true), onBlur: this._focus.bind(null, false), role: 'radiogroup', @@ -8905,11 +8990,7 @@ return /******/ (function(modules) { // webpackBootstrap var multiple = _props2.multiple; var list = this.refs.list; var focusedItem = this.state.focusedItem; - var props = this.props; - var moveItem = function moveItem(dir, item) { - return _utilInteraction.move(dir, item, props, list); - }; var change = function change(item) { if (item) _this._change(item, multiple ? !_utilInteraction.contains(item, _this._values(), valueField) // toggle value : true); @@ -8922,26 +9003,36 @@ return /******/ (function(modules) { // webpackBootstrap if (key === 'End') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('prev', null) });else change(moveItem('prev', null)); + if (multiple) this.setState({ focusedItem: list.last() });else change(list.last()); } else if (key === 'Home') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('next', null) });else change(moveItem('next', null)); + if (multiple) this.setState({ focusedItem: list.first() });else change(list.first()); } else if (key === 'Enter' || key === ' ') { e.preventDefault(); change(focusedItem); } else if (key === 'ArrowDown' || key === 'ArrowRight') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('next', focusedItem) });else change(moveItem('next', focusedItem)); + if (multiple) this.setState({ focusedItem: list.next(focusedItem) });else change(list.next(focusedItem)); } else if (key === 'ArrowUp' || key === 'ArrowLeft') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('prev', focusedItem) });else change(moveItem('prev', focusedItem)); + if (multiple) this.setState({ focusedItem: list.prev(focusedItem) });else change(list.prev(focusedItem)); } else if (multiple && e.keyCode === 65 && e.ctrlKey) { e.preventDefault(); this.selectAll(); - } else this.search(String.fromCharCode(e.keyCode)); + } + } + }, { + key: '_keyPress', + decorators: [_utilInteraction.widgetEditable], + value: function _keyPress(e) { + _utilWidgetHelpers.notify(this.props.onKeyPress, [e]); + + if (e.defaultPrevented) return; + + this.search(String.fromCharCode(e.which)); } }, { key: 'selectAll', @@ -9014,7 +9105,10 @@ return /******/ (function(modules) { // webpackBootstrap var _this4 = this; var word = ((this._searchTerm || '') + character).toLowerCase(), - list = this.refs.list; + list = this.refs.list, + multiple = this.props.multiple; + + if (!character) return; this._searchTerm = word; @@ -9023,7 +9117,9 @@ return /******/ (function(modules) { // webpackBootstrap _this4._searchTerm = ''; - if (focusedItem) _this4.setState({ focusedItem: focusedItem }); + if (focusedItem) { + !multiple ? _this4._change(focusedItem, true) : _this4.setState({ focusedItem: focusedItem }); + } }, this.props.delay); } }, { @@ -9047,10 +9143,9 @@ return /******/ (function(modules) { // webpackBootstrap render: function render() { var _props4 = this.props; var children = _props4.children; - var focused = _props4.focused; - var selected = _props4.selected; + var disabled = _props4.disabled; + var readonly = _props4.readonly; var item = _props4.dataItem; - var props = babelHelpers.objectWithoutProperties(_props4, ['children', 'focused', 'selected', 'dataItem']); var _parent$props = parent.props; var multiple = _parent$props.multiple; var _parent$props$name = _parent$props.name; @@ -9058,23 +9153,13 @@ return /******/ (function(modules) { // webpackBootstrap var checked = _utilInteraction.contains(item, parent._values(), parent.props.valueField), change = parent._change.bind(null, item), - disabled = _utilInteraction.isDisabledItem(item, parent.props), - readonly = _utilInteraction.isReadOnlyItem(item, parent.props), type = multiple ? 'checkbox' : 'radio'; return _react2['default'].createElement( - 'li', - babelHelpers._extends({}, props, { - tabIndex: '-1', + _ListOption2['default'], + babelHelpers._extends({}, this.props, { role: type, - 'aria-checked': !!checked, - 'aria-disabled': disabled || readonly, - className: _classnames2['default']('rw-list-option', { - 'rw-state-focus': focused, - 'rw-state-selected': selected, - 'rw-state-disabled': disabled, - 'rw-state-readonly': readonly - }) + 'aria-checked': !!checked }), _react2['default'].createElement( 'label', diff --git a/lib/Combobox.js b/lib/Combobox.js index 8fbb0f8e4..12bb8ce3d 100644 --- a/lib/Combobox.js +++ b/lib/Combobox.js @@ -91,8 +91,8 @@ var propTypes = { onSelect: _react2['default'].PropTypes.func, autoFocus: _react2['default'].PropTypes.bool, - disabled: _utilPropTypes2['default'].disabled, - readOnly: _utilPropTypes2['default'].readOnly, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, suggest: _utilPropTypes2['default'].filter, filter: _utilPropTypes2['default'].filter, @@ -219,8 +219,6 @@ var ComboBox = _react2['default'].createClass(babelHelpers.createDecoratedObject var placeholder = _props2.placeholder; var value = _props2.value; var open = _props2.open; - var disabled = _props2.disabled; - var readOnly = _props2.readOnly; var List = _props2.listComponent; List = List || groupBy && _ListGroupable2['default'] || _List2['default']; @@ -235,6 +233,8 @@ var ComboBox = _react2['default'].createClass(babelHelpers.createDecoratedObject var focused = _state.focused; var items = this._data(), + disabled = _utilInteraction.isDisabled(this.props), + readOnly = _utilInteraction.isReadOnly(this.props), valueItem = _utilDataHelpers.dataItem(data, value, valueField), // take value from the raw data inputID = _utilWidgetHelpers.instanceId(this, '_input'), @@ -305,8 +305,7 @@ var ComboBox = _react2['default'].createClass(babelHelpers.createDecoratedObject babelHelpers._extends({}, popupProps, { onOpening: function () { return _this.refs.list.forceUpdate(); - }, - onRequestClose: this.close + } }), _react2['default'].createElement( 'div', diff --git a/lib/DateTimePicker.js b/lib/DateTimePicker.js index 83a4a42d6..99f264175 100644 --- a/lib/DateTimePicker.js +++ b/lib/DateTimePicker.js @@ -242,6 +242,7 @@ var DateTimePicker = _react2['default'].createClass(babelHelpers.createDecorated ref: 'element', tabIndex: '-1', onKeyDown: this._keyDown, + onKeyPress: this._keyPress, onFocus: this._focus.bind(null, true), onBlur: this._focus.bind(null, false), className: _classnames2['default'](className, 'rw-datetimepicker', 'rw-widget', (_cx = { @@ -315,7 +316,6 @@ var DateTimePicker = _react2['default'].createClass(babelHelpers.createDecorated { dropUp: dropUp, open: timeIsOpen, - onRequestClose: this.close, duration: duration, onOpening: function () { return _this.refs.timePopup.forceUpdate(); @@ -349,8 +349,7 @@ var DateTimePicker = _react2['default'].createClass(babelHelpers.createDecorated className: 'rw-calendar-popup', dropUp: dropUp, open: calendarIsOpen, - duration: duration, - onRequestClose: this.close + duration: duration }, shouldRenderList && _react2['default'].createElement(Calendar, babelHelpers._extends({}, calProps, { ref: 'calPopup', @@ -411,6 +410,16 @@ var DateTimePicker = _react2['default'].createClass(babelHelpers.createDecorated if (open === popups.TIME) this.refs.timePopup._keyDown(e); } } +}, { + key: '_keyPress', + decorators: [_utilInteraction.widgetEditable], + value: function _keyPress(e) { + _utilWidgetHelpers.notify(this.props.onKeyPress, [e]); + + if (e.defaultPrevented) return; + + if (this.props.open === popups.TIME) this.refs.timePopup._keyPress(e); + } }, { key: '_focus', decorators: [_utilInteraction.widgetEnabled], diff --git a/lib/DropdownList.js b/lib/DropdownList.js index 12650d0a0..029dd12b0 100644 --- a/lib/DropdownList.js +++ b/lib/DropdownList.js @@ -93,9 +93,8 @@ var propTypes = { dropUp: _react2['default'].PropTypes.bool, duration: _react2['default'].PropTypes.number, //popup - disabled: _utilPropTypes2['default'].disabled, - - readOnly: _utilPropTypes2['default'].readOnly, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, messages: _react2['default'].PropTypes.shape({ open: _utilPropTypes2['default'].message, @@ -197,8 +196,6 @@ var DropdownList = _react2['default'].createClass(babelHelpers.createDecoratedOb var placeholder = _props2.placeholder; var value = _props2.value; var open = _props2.open; - var disabled = _props2.disabled; - var readOnly = _props2.readOnly; var ValueComponent = _props2.valueComponent; var List = _props2.listComponent; @@ -214,6 +211,8 @@ var DropdownList = _react2['default'].createClass(babelHelpers.createDecoratedOb var focused = _state.focused; var items = this._data(), + disabled = _utilInteraction.isDisabled(this.props), + readOnly = _utilInteraction.isReadOnly(this.props), valueItem = _utilDataHelpers.dataItem(data, value, valueField), // take value from the raw data listID = _utilWidgetHelpers.instanceId(this, '__listbox'); @@ -233,11 +232,11 @@ var DropdownList = _react2['default'].createClass(babelHelpers.createDecoratedOb 'aria-owns': listID, 'aria-busy': !!busy, 'aria-live': !open && 'polite', - //aria-activedescendant={activeID} 'aria-autocomplete': 'list', 'aria-disabled': disabled, 'aria-readonly': readOnly, onKeyDown: this._keyDown, + onKeyPress: this._keyPress, onClick: this._click, onFocus: this._focus.bind(null, true), onBlur: this._focus.bind(null, false), @@ -280,8 +279,7 @@ var DropdownList = _react2['default'].createClass(babelHelpers.createDecoratedOb }, onOpening: function () { return _this.refs.list.forceUpdate(); - }, - onRequestClose: this.close + } }), _react2['default'].createElement( 'div', @@ -398,19 +396,31 @@ var DropdownList = _react2['default'].createClass(babelHelpers.createDecoratedOb } else if (key === 'ArrowUp') { if (alt) closeWithFocus();else if (isOpen) this.setState({ focusedItem: list.prev(focusedItem) });else change(list.prev(selectedItem)); e.preventDefault(); - } else if (!(this.props.filter && isOpen)) this.search(String.fromCharCode(e.keyCode), function (item) { - isOpen ? _this4.setState({ focusedItem: item }) : change(item); - }); + } function change(item, fromList) { if (!item) return; fromList ? self._onSelect(item) : self.change(item); } } +}, { + key: '_keyPress', + decorators: [_utilInteraction.widgetEditable], + value: function _keyPress(e) { + var _this5 = this; + + _utilWidgetHelpers.notify(this.props.onKeyPress, [e]); + + if (e.defaultPrevented) return; + + if (!(this.props.filter && this.props.open)) this.search(String.fromCharCode(e.which), function (item) { + _this5.isMounted() && _this5.props.open ? _this5.setState({ focusedItem: item }) : item && _this5.change(item); + }); + } }, { key: 'change', value: function change(data) { - if (!_util_2['default'].isShallowEqual(data, this.props.value)) { + if (!_utilDataHelpers.valueMatcher(data, this.props.value, this.props.valueField)) { _utilWidgetHelpers.notify(this.props.onChange, data); _utilWidgetHelpers.notify(this.props.onSearch, ''); this.close(); @@ -431,18 +441,20 @@ var DropdownList = _react2['default'].createClass(babelHelpers.createDecoratedOb }, { key: 'search', value: function search(character, cb) { - var _this5 = this; + var _this6 = this; var word = ((this._searchTerm || '') + character).toLowerCase(); + if (!character) return; + this._searchTerm = word; this.setTimeout('search', function () { - var list = _this5.refs.list, - key = _this5.props.open ? 'focusedItem' : 'selectedItem', - item = list.next(_this5.state[key], word); + var list = _this6.refs.list, + key = _this6.props.open ? 'focusedItem' : 'selectedItem', + item = list.next(_this6.state[key], word); - _this5._searchTerm = ''; + _this6._searchTerm = ''; if (item) cb(item); }, this.props.delay); } diff --git a/lib/List.js b/lib/List.js index 6a1ad6378..72b709837 100644 --- a/lib/List.js +++ b/lib/List.js @@ -32,6 +32,8 @@ var _utilDataHelpers = require('./util/dataHelpers'); var _utilWidgetHelpers = require('./util/widgetHelpers'); +var _utilInteraction = require('./util/interaction'); + var optionId = function optionId(id, idx) { return id + '__option__' + idx; }; @@ -50,12 +52,13 @@ exports['default'] = _react2['default'].createClass({ optionComponent: _utilPropTypes2['default'].elementType, itemComponent: _utilPropTypes2['default'].elementType, - selectedIndex: _react2['default'].PropTypes.number, - focusedIndex: _react2['default'].PropTypes.number, - valueField: _react2['default'].PropTypes.string, + selected: _react2['default'].PropTypes.any, + focused: _react2['default'].PropTypes.any, + valueField: _utilPropTypes2['default'].accessor, textField: _utilPropTypes2['default'].accessor, - optionID: _react2['default'].PropTypes.func, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, messages: _react2['default'].PropTypes.shape({ emptyList: _utilPropTypes2['default'].message @@ -64,7 +67,6 @@ exports['default'] = _react2['default'].createClass({ getDefaultProps: function getDefaultProps() { return { - optID: '', onSelect: function onSelect() {}, optionComponent: _ListOption2['default'], ariaActiveDescendantKey: 'list', @@ -104,8 +106,7 @@ exports['default'] = _react2['default'].createClass({ var onSelect = _props2.onSelect; var ItemComponent = _props2.itemComponent; var Option = _props2.optionComponent; - var optionID = _props2.optionID; - var props = babelHelpers.objectWithoutProperties(_props2, ['className', 'role', 'data', 'textField', 'valueField', 'focused', 'selected', 'messages', 'onSelect', 'itemComponent', 'optionComponent', 'optionID']); + var props = babelHelpers.objectWithoutProperties(_props2, ['className', 'role', 'data', 'textField', 'valueField', 'focused', 'selected', 'messages', 'onSelect', 'itemComponent', 'optionComponent']); var id = _utilWidgetHelpers.instanceId(this); var items; @@ -114,7 +115,9 @@ exports['default'] = _react2['default'].createClass({ { className: 'rw-list-empty' }, _util_2['default'].result(messages.emptyList, this.props) ) : data.map(function (item, idx) { - var currentId = optionId(id, idx); + var currentId = optionId(id, idx), + isDisabled = _utilInteraction.isDisabledItem(item, props), + isReadOnly = _utilInteraction.isReadOnlyItem(item, props); return _react2['default'].createElement( Option, @@ -122,14 +125,18 @@ exports['default'] = _react2['default'].createClass({ key: 'item_' + idx, id: currentId, dataItem: item, + disabled: isDisabled, + readOnly: isReadOnly, focused: focused === item, selected: selected === item, - onClick: onSelect.bind(null, item) + onClick: isDisabled || isReadOnly ? undefined : onSelect.bind(null, item) }, ItemComponent ? _react2['default'].createElement(ItemComponent, { item: item, value: _utilDataHelpers.dataValue(item, valueField), - text: _utilDataHelpers.dataText(item, textField) + text: _utilDataHelpers.dataText(item, textField), + disabled: isDisabled, + readOnly: isReadOnly }) : _utilDataHelpers.dataText(item, textField) ); }); diff --git a/lib/ListGroupable.js b/lib/ListGroupable.js index 89b01e43f..07e9d639e 100644 --- a/lib/ListGroupable.js +++ b/lib/ListGroupable.js @@ -36,6 +36,8 @@ var _utilDataHelpers = require('./util/dataHelpers'); var _utilWidgetHelpers = require('./util/widgetHelpers'); +var _utilInteraction = require('./util/interaction'); + var optionId = function optionId(id, idx) { return id + '__option__' + idx; }; @@ -58,10 +60,11 @@ exports['default'] = _react2['default'].createClass({ selected: _react2['default'].PropTypes.any, focused: _react2['default'].PropTypes.any, - valueField: _react2['default'].PropTypes.string, + valueField: _utilPropTypes2['default'].accessor, textField: _utilPropTypes2['default'].accessor, - optID: _react2['default'].PropTypes.string, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray, groupBy: _utilPropTypes2['default'].accessor, @@ -72,7 +75,6 @@ exports['default'] = _react2['default'].createClass({ getDefaultProps: function getDefaultProps() { return { - optID: '', onSelect: function onSelect() {}, data: [], optionComponent: _ListOption2['default'], @@ -187,7 +189,9 @@ exports['default'] = _react2['default'].createClass({ var ItemComponent = _props2.itemComponent; var Option = _props2.optionComponent; - var currentID = optionId(_utilWidgetHelpers.instanceId(this), idx); + var currentID = optionId(_utilWidgetHelpers.instanceId(this), idx), + isDisabled = _utilInteraction.isDisabledItem(item, this.props), + isReadOnly = _utilInteraction.isReadOnlyItem(item, this.props); if (focused === item) this._currentActiveID = currentID; @@ -199,12 +203,16 @@ exports['default'] = _react2['default'].createClass({ dataItem: item, focused: focused === item, selected: selected === item, - onClick: onSelect.bind(null, item) + disabled: isDisabled, + readOnly: isReadOnly, + onClick: isDisabled || isReadOnly ? undefined : onSelect.bind(null, item) }, ItemComponent ? _react2['default'].createElement(ItemComponent, { item: item, value: _utilDataHelpers.dataValue(item, valueField), - text: _utilDataHelpers.dataText(item, textField) + text: _utilDataHelpers.dataText(item, textField), + disabled: isDisabled, + readOnly: isReadOnly }) : _utilDataHelpers.dataText(item, textField) ); }, diff --git a/lib/ListOption.js b/lib/ListOption.js index 085ab737b..bf24aa9f4 100644 --- a/lib/ListOption.js +++ b/lib/ListOption.js @@ -18,7 +18,9 @@ var ListOption = _react2['default'].createClass({ propTypes: { dataItem: _react2['default'].PropTypes.any, focused: _react2['default'].PropTypes.bool, - selected: _react2['default'].PropTypes.bool + selected: _react2['default'].PropTypes.bool, + disabled: _react2['default'].PropTypes.bool, + readOnly: _react2['default'].PropTypes.bool }, render: function render() { @@ -27,18 +29,22 @@ var ListOption = _react2['default'].createClass({ var children = _props.children; var focused = _props.focused; var selected = _props.selected; - var props = babelHelpers.objectWithoutProperties(_props, ['className', 'children', 'focused', 'selected']); + var disabled = _props.disabled; + var readOnly = _props.readOnly; + var props = babelHelpers.objectWithoutProperties(_props, ['className', 'children', 'focused', 'selected', 'disabled', 'readOnly']); var classes = { 'rw-state-focus': focused, - 'rw-state-selected': selected + 'rw-state-selected': selected, + 'rw-state-disabled': disabled, + 'rw-state-readonly': readOnly }; return _react2['default'].createElement( 'li', babelHelpers._extends({ role: 'option', - tabIndex: '-1', + tabIndex: !(disabled || readOnly) ? '-1' : undefined, 'aria-selected': !!selected, className: _classnames2['default']('rw-list-option', className, classes) }, props), diff --git a/lib/Multiselect.js b/lib/Multiselect.js index 4768cb6e2..806b1bf1e 100644 --- a/lib/Multiselect.js +++ b/lib/Multiselect.js @@ -57,7 +57,7 @@ var _utilWidgetHelpers = require('./util/widgetHelpers'); var compatCreate = function compatCreate(props, msgs) { return typeof msgs.createNew === 'function' ? msgs.createNew(props) : [_react2['default'].createElement( 'strong', - null, + { key: 'dumb' }, '"' + props.searchTerm + '"' ), ' ' + msgs.createNew]; }; @@ -329,8 +329,7 @@ var Multiselect = _react2['default'].createClass(babelHelpers.createDecoratedObj babelHelpers._extends({}, popupProps, { onOpening: function () { return _this.refs.list.forceUpdate(); - }, - onRequestClose: this.close + } }), _react2['default'].createElement( 'div', diff --git a/lib/NumberPicker.js b/lib/NumberPicker.js index 1008fac83..6c460ab45 100644 --- a/lib/NumberPicker.js +++ b/lib/NumberPicker.js @@ -165,7 +165,7 @@ var NumberPicker = _react2['default'].createClass(babelHelpers.createDecoratedOb className: _classnames2['default']({ 'rw-state-active': this.state.active === directions.UP }), onMouseDown: this._mouseDown.bind(null, directions.UP), onMouseUp: this._mouseUp.bind(null, directions.UP), - onMouseOut: this._mouseUp.bind(null, directions.UP), + onMouseLeave: this._mouseUp.bind(null, directions.UP), onClick: this._focus.bind(null, true), disabled: val === this.props.max || this.props.disabled, 'aria-disabled': val === this.props.max || this.props.disabled }, @@ -186,7 +186,7 @@ var NumberPicker = _react2['default'].createClass(babelHelpers.createDecoratedOb className: _classnames2['default']({ 'rw-state-active': this.state.active === directions.DOWN }), onMouseDown: this._mouseDown.bind(null, directions.DOWN), onMouseUp: this._mouseUp.bind(null, directions.DOWN), - onMouseOut: this._mouseUp.bind(null, directions.DOWN), + onMouseLeave: this._mouseUp.bind(null, directions.DOWN), onClick: this._focus.bind(null, true), disabled: val === this.props.min || this.props.disabled, 'aria-disabled': val === this.props.min || this.props.disabled }, diff --git a/lib/Popup.js b/lib/Popup.js index 35661d0cd..1573ddc48 100644 --- a/lib/Popup.js +++ b/lib/Popup.js @@ -63,7 +63,6 @@ module.exports = _react2['default'].createClass({ dropUp: _react2['default'].PropTypes.bool, duration: _react2['default'].PropTypes.number, - onRequestClose: _react2['default'].PropTypes.func.isRequired, onClosing: _react2['default'].PropTypes.func, onOpening: _react2['default'].PropTypes.func, onClose: _react2['default'].PropTypes.func, diff --git a/lib/SelectList.js b/lib/SelectList.js index aae2f0356..0863100da 100644 --- a/lib/SelectList.js +++ b/lib/SelectList.js @@ -32,6 +32,14 @@ var _List = require('./List'); var _List2 = babelHelpers.interopRequireDefault(_List); +var _ListGroupable = require('./ListGroupable'); + +var _ListGroupable2 = babelHelpers.interopRequireDefault(_ListGroupable); + +var _ListOption = require('./ListOption'); + +var _ListOption2 = babelHelpers.interopRequireDefault(_ListOption); + var _utilValidateListInterface = require('./util/validateListInterface'); var _utilValidateListInterface2 = babelHelpers.interopRequireDefault(_utilValidateListInterface); @@ -151,9 +159,10 @@ var SelectList = _react2['default'].createClass(babelHelpers.createDecoratedObje var className = _props.className; var tabIndex = _props.tabIndex; var busy = _props.busy; + var groupBy = _props.groupBy; var List = _props.listComponent; - List = List || _List2['default']; + List = List || groupBy && _ListGroupable2['default'] || _List2['default']; var elementProps = omit(this.props, Object.keys(propTypes)); var listProps = pick(this.props, Object.keys(List.propTypes)); @@ -172,6 +181,7 @@ var SelectList = _react2['default'].createClass(babelHelpers.createDecoratedObje 'div', babelHelpers._extends({}, elementProps, { onKeyDown: this._keyDown, + onKeyPress: this._keyPress, onFocus: this._focus.bind(null, true), onBlur: this._focus.bind(null, false), role: 'radiogroup', @@ -223,11 +233,7 @@ var SelectList = _react2['default'].createClass(babelHelpers.createDecoratedObje var multiple = _props2.multiple; var list = this.refs.list; var focusedItem = this.state.focusedItem; - var props = this.props; - var moveItem = function moveItem(dir, item) { - return _utilInteraction.move(dir, item, props, list); - }; var change = function change(item) { if (item) _this._change(item, multiple ? !_utilInteraction.contains(item, _this._values(), valueField) // toggle value : true); @@ -240,26 +246,36 @@ var SelectList = _react2['default'].createClass(babelHelpers.createDecoratedObje if (key === 'End') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('prev', null) });else change(moveItem('prev', null)); + if (multiple) this.setState({ focusedItem: list.last() });else change(list.last()); } else if (key === 'Home') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('next', null) });else change(moveItem('next', null)); + if (multiple) this.setState({ focusedItem: list.first() });else change(list.first()); } else if (key === 'Enter' || key === ' ') { e.preventDefault(); change(focusedItem); } else if (key === 'ArrowDown' || key === 'ArrowRight') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('next', focusedItem) });else change(moveItem('next', focusedItem)); + if (multiple) this.setState({ focusedItem: list.next(focusedItem) });else change(list.next(focusedItem)); } else if (key === 'ArrowUp' || key === 'ArrowLeft') { e.preventDefault(); - if (multiple) this.setState({ focusedItem: moveItem('prev', focusedItem) });else change(moveItem('prev', focusedItem)); + if (multiple) this.setState({ focusedItem: list.prev(focusedItem) });else change(list.prev(focusedItem)); } else if (multiple && e.keyCode === 65 && e.ctrlKey) { e.preventDefault(); this.selectAll(); - } else this.search(String.fromCharCode(e.keyCode)); + } + } +}, { + key: '_keyPress', + decorators: [_utilInteraction.widgetEditable], + value: function _keyPress(e) { + _utilWidgetHelpers.notify(this.props.onKeyPress, [e]); + + if (e.defaultPrevented) return; + + this.search(String.fromCharCode(e.which)); } }, { key: 'selectAll', @@ -332,7 +348,10 @@ var SelectList = _react2['default'].createClass(babelHelpers.createDecoratedObje var _this4 = this; var word = ((this._searchTerm || '') + character).toLowerCase(), - list = this.refs.list; + list = this.refs.list, + multiple = this.props.multiple; + + if (!character) return; this._searchTerm = word; @@ -341,7 +360,9 @@ var SelectList = _react2['default'].createClass(babelHelpers.createDecoratedObje _this4._searchTerm = ''; - if (focusedItem) _this4.setState({ focusedItem: focusedItem }); + if (focusedItem) { + !multiple ? _this4._change(focusedItem, true) : _this4.setState({ focusedItem: focusedItem }); + } }, this.props.delay); } }, { @@ -365,10 +386,9 @@ function getListItem(parent) { render: function render() { var _props4 = this.props; var children = _props4.children; - var focused = _props4.focused; - var selected = _props4.selected; + var disabled = _props4.disabled; + var readonly = _props4.readonly; var item = _props4.dataItem; - var props = babelHelpers.objectWithoutProperties(_props4, ['children', 'focused', 'selected', 'dataItem']); var _parent$props = parent.props; var multiple = _parent$props.multiple; var _parent$props$name = _parent$props.name; @@ -376,23 +396,13 @@ function getListItem(parent) { var checked = _utilInteraction.contains(item, parent._values(), parent.props.valueField), change = parent._change.bind(null, item), - disabled = _utilInteraction.isDisabledItem(item, parent.props), - readonly = _utilInteraction.isReadOnlyItem(item, parent.props), type = multiple ? 'checkbox' : 'radio'; return _react2['default'].createElement( - 'li', - babelHelpers._extends({}, props, { - tabIndex: '-1', + _ListOption2['default'], + babelHelpers._extends({}, this.props, { role: type, - 'aria-checked': !!checked, - 'aria-disabled': disabled || readonly, - className: _classnames2['default']('rw-list-option', { - 'rw-state-focus': focused, - 'rw-state-selected': selected, - 'rw-state-disabled': disabled, - 'rw-state-readonly': readonly - }) + 'aria-checked': !!checked }), _react2['default'].createElement( 'label', diff --git a/lib/TimeList.js b/lib/TimeList.js index 15c728cb0..5ceb8b397 100644 --- a/lib/TimeList.js +++ b/lib/TimeList.js @@ -169,10 +169,7 @@ exports['default'] = _react2['default'].createClass({ }, _keyDown: function _keyDown(e) { - var _this = this; - var key = e.key, - character = String.fromCharCode(e.keyCode), focusedItem = this.state.focusedItem, list = this.refs.list; @@ -182,15 +179,19 @@ exports['default'] = _react2['default'].createClass({ } else if (key === 'ArrowUp') { e.preventDefault(); this.setState({ focusedItem: list.prev(focusedItem) }); - } else { - e.preventDefault(); - - this.search(character, function (item) { - _this.setState({ focusedItem: item }); - }); } }, + _keyPress: function _keyPress(e) { + var _this = this; + + e.preventDefault(); + + this.search(String.fromCharCode(e.which), function (item) { + _this.isMounted() && _this.setState({ focusedItem: item }); + }); + }, + scrollTo: function scrollTo() { this.refs.list.move && this.refs.list.move(); }, diff --git a/lib/less/core.less b/lib/less/core.less index c8f005061..58f592503 100644 --- a/lib/less/core.less +++ b/lib/less/core.less @@ -82,11 +82,6 @@ border-radius: @input-border-radius; margin-bottom: 2px; - // .rw-open-up & { - // margin-bottom: 0; - // margin-top: 2px; - // } - .rw-rtl &{ padding-left: 1.9em; padding-right: 0; @@ -207,6 +202,17 @@ ul.rw-list { &.rw-state-selected { .state-select(); } + + &.rw-state-disabled, + &.rw-state-readonly { + color: @gray-light; + cursor: not-allowed; + + &:hover { + background: none; + border-color: transparent; + } + } } } diff --git a/lib/less/selectlist.less b/lib/less/selectlist.less index a2b002f23..c84cda5fb 100644 --- a/lib/less/selectlist.less +++ b/lib/less/selectlist.less @@ -11,7 +11,7 @@ overflow: auto; > li { - + &.rw-list-option { position: relative; min-height: 27px; @@ -22,7 +22,7 @@ position: absolute; margin: 4px 0 0 -20px; } - + > label { padding-left: 20px; line-height: 1.423em; @@ -62,14 +62,11 @@ } .rw-selectlist { - &.rw-state-disabled, &.rw-state-readonly { - > ul > li:hover { background: none; border-color: transparent; } } - -} \ No newline at end of file +} diff --git a/lib/mixins/ListMovementMixin.js b/lib/mixins/ListMovementMixin.js index 2db20cd30..e2cedcc92 100644 --- a/lib/mixins/ListMovementMixin.js +++ b/lib/mixins/ListMovementMixin.js @@ -2,9 +2,7 @@ var babelHelpers = require('../util/babelHelpers.js'); -var _react = require('react'); - -var _react2 = babelHelpers.interopRequireDefault(_react); +exports.__esModule = true; var _utilFilter = require('../util/filter'); @@ -12,70 +10,72 @@ var _utilFilter2 = babelHelpers.interopRequireDefault(_utilFilter); var _utilDataHelpers = require('../util/dataHelpers'); -module.exports = { +var _utilPropTypes = require('../util/propTypes'); + +var _utilPropTypes2 = babelHelpers.interopRequireDefault(_utilPropTypes); + +var _utilInteraction = require('../util/interaction'); + +var EMPTY_VALUE = {}; + +var isDisabledOrReadonly = function isDisabledOrReadonly(item, props) { + return _utilInteraction.isDisabledItem(item, props) || _utilInteraction.isReadOnlyItem(item, props); +}; + +exports['default'] = { propTypes: { - textField: _react2['default'].PropTypes.string + textField: _utilPropTypes2['default'].accessor, + valueField: _utilPropTypes2['default'].accessor, + disabled: _utilPropTypes2['default'].disabled.acceptsArray, + readOnly: _utilPropTypes2['default'].readOnly.acceptsArray }, first: function first() { - return this._data()[0]; + return this.next(EMPTY_VALUE); }, last: function last() { - var data = this._data(); - return data[data.length - 1]; + var data = this._data(), + item = data[data.length - 1]; + + return isDisabledOrReadonly(item, this.props) ? this.prev(item) : item; }, prev: function prev(item, word) { - var textField = this.props.textField, - data = this._data(), - idx = data.indexOf(item); + var data = this._data(), + nextIdx = data.indexOf(item), + matches = matcher(word, item, this.props.textField); + + if (nextIdx < 0 || nextIdx == null) nextIdx = 0; - if (idx === -1) idx = data.length; + nextIdx--; - return word ? findPrevInstance(textField, data, word, idx) : --idx < 0 ? data[0] : data[idx]; + while (nextIdx > -1 && (isDisabledOrReadonly(data[nextIdx], this.props) || !matches(data[nextIdx]))) nextIdx--; + + return nextIdx >= 0 ? data[nextIdx] : item; }, next: function next(item, word) { - var textField = this.props.textField, - data = this._data(), - idx = data.indexOf(item); + var data = this._data(), + nextIdx = data.indexOf(item) + 1, + len = data.length, + matches = matcher(word, item, this.props.textField); - return word ? findNextInstance(textField, data, word, idx) : ++idx === data.length ? data[data.length - 1] : data[idx]; - } + while (nextIdx < len && (isDisabledOrReadonly(data[nextIdx], this.props) || !matches(data[nextIdx]))) nextIdx++; + return nextIdx < len ? data[nextIdx] : item; + } }; -function findNextInstance(textField, data, word, startIndex) { - var matches = _utilFilter2['default'].startsWith, - idx = -1, - len = data.length, - foundStart, - itemText; +function matcher(word, item, textField) { + if (!word) return function () { + return true; + }; word = word.toLowerCase(); - - while (++idx < len) { - foundStart = foundStart || idx > startIndex; - itemText = foundStart && _utilDataHelpers.dataText(data[idx], textField).toLowerCase(); - - if (foundStart && matches(itemText, word)) return data[idx]; - } + return function (item) { + return _utilFilter2['default'].startsWith(_utilDataHelpers.dataText(item, textField).toLowerCase(), word); + }; } - -function findPrevInstance(textField, data, word, startIndex) { - var matches = _utilFilter2['default'].startsWith, - idx = data.length, - foundStart, - itemText; - - word = word.toLowerCase(); - - while (--idx >= 0) { - foundStart = foundStart || idx < startIndex; - itemText = foundStart && _utilDataHelpers.dataText(data[idx], textField).toLowerCase(); - - if (foundStart && matches(itemText, word)) return data[idx]; - } -} \ No newline at end of file +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/util/dataHelpers.js b/lib/util/dataHelpers.js index 1ee1d2188..b63e0f323 100644 --- a/lib/util/dataHelpers.js +++ b/lib/util/dataHelpers.js @@ -38,6 +38,11 @@ function dataIndexOf(data, item, valueField) { return -1; } +/** + * I don't know that the shallow equal makes sense here but am too afraid to + * remove it. + */ + function valueMatcher(a, b, valueField) { return _.isShallowEqual(dataValue(a, valueField), dataValue(b, valueField)); }