Merge branch 'dev' of https://github.com/react-toolbox/react-toolbox into dev
Conflicts: spec/style.scssold
Maxim Komlev
commit
d931c20d98
|
|
@ -5,63 +5,115 @@ import { APP_BAR } from '../identifiers.js';
|
|||
import InjectIconButton from '../button/IconButton.js';
|
||||
|
||||
const factory = (IconButton) => {
|
||||
const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
|
||||
const className = classnames(theme.appBar, {
|
||||
[theme.fixed]: props.fixed,
|
||||
[theme.flat]: props.flat
|
||||
}, props.className);
|
||||
|
||||
return (
|
||||
<header className={className} data-react-toolbox='app-bar'>
|
||||
{leftIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.leftIcon)}
|
||||
onClick={onLeftIconClick}
|
||||
icon={leftIcon} />
|
||||
}
|
||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
||||
{children}
|
||||
{rightIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.rightIcon)}
|
||||
onClick={onRightIconClick}
|
||||
icon={rightIcon} />
|
||||
}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
AppBar.propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
fixed: PropTypes.bool,
|
||||
flat: PropTypes.bool,
|
||||
leftIcon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
onLeftIconClick: PropTypes.func,
|
||||
onRightIconClick: PropTypes.func,
|
||||
rightIcon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
theme: PropTypes.shape({
|
||||
appBar: PropTypes.string,
|
||||
fixed: PropTypes.string,
|
||||
flat: PropTypes.string,
|
||||
leftIcon: PropTypes.string,
|
||||
rightIcon: PropTypes.string,
|
||||
class AppBar extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
fixed: PropTypes.bool,
|
||||
flat: PropTypes.bool,
|
||||
leftIcon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
onLeftIconClick: PropTypes.func,
|
||||
onRightIconClick: PropTypes.func,
|
||||
rightIcon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
scrollHide: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
appBar: PropTypes.string,
|
||||
fixed: PropTypes.string,
|
||||
flat: PropTypes.string,
|
||||
leftIcon: PropTypes.string,
|
||||
rightIcon: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
}),
|
||||
title: PropTypes.string
|
||||
}),
|
||||
title: PropTypes.string
|
||||
};
|
||||
};
|
||||
|
||||
AppBar.defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false
|
||||
};
|
||||
static defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false,
|
||||
scrollHide: false
|
||||
};
|
||||
|
||||
state = {hidden: false, height: 0};
|
||||
|
||||
componentDidMount () {
|
||||
if (this.props.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!this.props.scrollHide && nextProps.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
|
||||
if (this.props.scrollHide && !nextProps.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.props.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
}
|
||||
|
||||
initializeScroll = () => {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
const { height } = this.rootNode.getBoundingClientRect();
|
||||
this.curScroll = window.scrollY;
|
||||
this.setState({height});
|
||||
};
|
||||
|
||||
endScroll = () => {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
};
|
||||
|
||||
handleScroll = () => {
|
||||
const scrollDiff = this.curScroll - window.scrollY;
|
||||
const hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > this.state.height;
|
||||
this.setState({hidden});
|
||||
this.curScroll = window.scrollY;
|
||||
};
|
||||
|
||||
render () {
|
||||
const { children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title } = this.props;
|
||||
const className = classnames(theme.appBar, {
|
||||
[theme.fixed]: this.props.fixed,
|
||||
[theme.flat]: this.props.flat,
|
||||
[theme.scrollHide]: this.state.hidden
|
||||
}, this.props.className);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={className}
|
||||
data-react-toolbox='app-bar'
|
||||
ref={node => {this.rootNode = node;}}
|
||||
>
|
||||
{leftIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.leftIcon)}
|
||||
onClick={onLeftIconClick}
|
||||
icon={leftIcon} />
|
||||
}
|
||||
{title && <h1 className={classnames(theme.title)}>{title}</h1>}
|
||||
{children}
|
||||
{rightIcon && <IconButton
|
||||
inverse
|
||||
className={classnames(theme.rightIcon)}
|
||||
onClick={onRightIconClick}
|
||||
icon={rightIcon} />
|
||||
}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return AppBar;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -33,10 +33,12 @@ The `AppBar` component provides properties for the common use cases of `title`,
|
|||
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:------------|:-----------|
|
||||
| `appBar` | Used for the component root element.|
|
||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||
| `title` | Added to the title element of the app bar.|
|
||||
| `leftIcon` | Added to the left icon element when the app bar.|
|
||||
| `rightIcon` | Added to the right icon element when the app bar.|
|
||||
| Name | Description|
|
||||
|:-------------|:-----------|
|
||||
| `appBar` | Used for the component root element.|
|
||||
| `fixed` | Added to the root element when the app bar is fixed.|
|
||||
| `flat` | Added to the root element when the app bar is flat.|
|
||||
| `title` | Added to the title element of the app bar.|
|
||||
| `leftIcon` | Added to the left icon element when the app bar.|
|
||||
| `rightIcon` | Added to the right icon element when the app bar.|
|
||||
| `scrollHide` | Added to the root element when the app bar is hidden during scroll.|
|
||||
|
|
|
|||
|
|
@ -51,7 +51,15 @@
|
|||
}
|
||||
|
||||
.rightIcon {
|
||||
margin-left: auto;
|
||||
margin-right: -1.2 * $unit;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transition-duration: .5s;
|
||||
transition-property: transform;
|
||||
|
||||
&.scrollHide {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@ const factory = (ripple) => {
|
|||
checked: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
onMouseDown: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
theme: PropTypes.shape({
|
||||
check: PropTypes.string,
|
||||
checked: PropTypes.string
|
||||
}),
|
||||
style: PropTypes.object
|
||||
})
|
||||
};
|
||||
|
||||
return ripple(Check);
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@ const factory = (Input, DatePickerDialog) => {
|
|||
minDate: PropTypes.object,
|
||||
name: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onEscKeyDown: PropTypes.func,
|
||||
onKeyPress: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onOverlayClick: PropTypes.func,
|
||||
readonly: PropTypes.bool,
|
||||
sundayFirstDayOfWeek: React.PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ NavDrawer.propTypes = {
|
|||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
onOverlayClick: PropTypes.func,
|
||||
permanentAt: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
|
||||
permanentAt: PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: PropTypes.bool,
|
||||
scrollY: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
|
|
|
|||
|
|
@ -71,10 +71,10 @@ The Layout's subcomponents can alter their appearance and behavior based on the
|
|||
|:-----|:-----|:-----|
|
||||
| 480px | `xxs` | Phone (portrait) |
|
||||
| 600px | `xs` | Small tablet, phone (landscape) |
|
||||
| 720px | `sm-tablet` | Small tablet (portrait) |
|
||||
| 720px | `smTablet` | Small tablet (portrait) |
|
||||
| 840px | `sm` | Large tablet (portrait) |
|
||||
| 960px | `md` | Small tablet (landscape) |
|
||||
| 1024px | `lg-tablet` | Large tablet (landscape) |
|
||||
| 1024px | `lgTablet` | Large tablet (landscape) |
|
||||
| 1280px | `lg` | Large tablet (landscape), desktop |
|
||||
| 1440px | `xl` | desktop |
|
||||
| 1600px | `xxl` | desktop |
|
||||
|
|
|
|||
|
|
@ -108,6 +108,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
&.smTabletPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-md) {
|
||||
&.mdPermanent {
|
||||
@include permanent();
|
||||
|
|
@ -120,6 +126,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-lg-tablet) {
|
||||
&.lgTabletPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xl) {
|
||||
&.xlPermanent {
|
||||
@include permanent();
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const factory = (ListItemText) => {
|
|||
return ListItemContent;
|
||||
};
|
||||
|
||||
const ListItemContent = themr(LIST)(InjectListItemText);
|
||||
export default ListItemContent;
|
||||
const ListItemContent = factory(InjectListItemText);
|
||||
export default themr(LIST)(ListItemContent);
|
||||
export { factory as listItemContentFactory };
|
||||
export { ListItemContent };
|
||||
|
|
|
|||
|
|
@ -105,21 +105,32 @@ const factory = (MenuItem) => {
|
|||
|
||||
componentWillUpdate (nextProps, nextState) {
|
||||
if (!this.state.active && nextState.active) {
|
||||
events.addEventsToDocument({click: this.handleDocumentClick});
|
||||
events.addEventsToDocument({
|
||||
click: this.handleDocumentClick,
|
||||
touchstart: this.handleDocumentClick
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps, prevState) {
|
||||
if (prevState.active && !this.state.active) {
|
||||
if (this.props.onHide) this.props.onHide();
|
||||
events.removeEventsFromDocument({click: this.handleDocumentClick});
|
||||
events.removeEventsFromDocument({
|
||||
click: this.handleDocumentClick,
|
||||
touchstart: this.handleDocumentClick
|
||||
});
|
||||
} else if (!prevState.active && this.state.active && this.props.onShow) {
|
||||
this.props.onShow();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.state.active) events.removeEventsFromDocument({click: this.handleDocumentClick});
|
||||
if (this.state.active) {
|
||||
events.removeEventsFromDocument({
|
||||
click: this.handleDocumentClick,
|
||||
touchstart: this.handleDocumentClick
|
||||
});
|
||||
}
|
||||
clearTimeout(this.positionTimeoutHandle);
|
||||
clearTimeout(this.activateTimeoutHandle);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const factory = (TableHead, TableRow) => {
|
|||
model: PropTypes.object,
|
||||
multiSelectable: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
onRowClick: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
selectable: PropTypes.bool,
|
||||
selected: PropTypes.array,
|
||||
|
|
@ -61,6 +62,12 @@ const factory = (TableHead, TableRow) => {
|
|||
}
|
||||
};
|
||||
|
||||
handleRowClick = (index, event) => {
|
||||
if (this.props.onRowClick) {
|
||||
this.props.onRowClick(index, event);
|
||||
}
|
||||
}
|
||||
|
||||
renderHead () {
|
||||
if (this.props.heading) {
|
||||
const {model, selected, source, selectable, multiSelectable} = this.props;
|
||||
|
|
@ -90,6 +97,7 @@ const factory = (TableHead, TableRow) => {
|
|||
model={model}
|
||||
onChange={onChange ? this.handleRowChange.bind(this) : undefined}
|
||||
onSelect={this.handleRowSelect.bind(this, index)}
|
||||
onRowClick={this.handleRowClick.bind(this, index)}
|
||||
selectable={selectable}
|
||||
selected={selected.indexOf(index) !== -1}
|
||||
theme={theme}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ const factory = (Checkbox) => {
|
|||
index: PropTypes.number,
|
||||
model: PropTypes.object,
|
||||
onChange: PropTypes.func,
|
||||
onRowClick: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
selectable: PropTypes.bool,
|
||||
selected: PropTypes.bool,
|
||||
|
|
@ -21,7 +22,20 @@ const factory = (Checkbox) => {
|
|||
};
|
||||
|
||||
handleInputChange = (index, key, type, event) => {
|
||||
const value = type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
let value;
|
||||
switch (type) {
|
||||
case 'checkbox':
|
||||
value = event.target.checked;
|
||||
break;
|
||||
// Handle contentEditable
|
||||
case 'text':
|
||||
value = event.target.textContent;
|
||||
break;
|
||||
default:
|
||||
value = event.target.value;
|
||||
break;
|
||||
}
|
||||
|
||||
const onChange = this.props.model[key].onChange || this.props.onChange;
|
||||
onChange(index, key, value);
|
||||
};
|
||||
|
|
@ -38,7 +52,7 @@ const factory = (Checkbox) => {
|
|||
|
||||
renderCells () {
|
||||
return Object.keys(this.props.model).map((key) => {
|
||||
return <td key={key}>{this.renderCell(key)}</td>;
|
||||
return <td key={key} onClick={this.props.onRowClick}>{this.renderCell(key)}</td>;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +76,18 @@ const factory = (Checkbox) => {
|
|||
const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
|
||||
const inputValue = utils.prepareValueForInput(value, inputType);
|
||||
const checked = inputType === 'checkbox' && value ? true : null;
|
||||
|
||||
if (inputType === 'text') {
|
||||
return (
|
||||
<div
|
||||
children={inputValue}
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
onInput={this.handleInputChange.bind(null, index, key, inputType)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
checked={checked}
|
||||
|
|
|
|||
|
|
@ -58,10 +58,6 @@ const factory = (Tab, TabContent) => {
|
|||
};
|
||||
|
||||
handleResize = () => {
|
||||
if (!this.props.fixed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.resizeTimeout) {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ const factory = (TimePickerDialog, Input) => {
|
|||
label: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onEscKeyDown: PropTypes.func,
|
||||
onKeyPress: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onOverlayClick: PropTypes.func,
|
||||
readonly: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|||
});
|
||||
exports.AppBar = exports.appBarFactory = undefined;
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
|
@ -25,45 +27,119 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(IconButton) {
|
||||
var AppBar = function AppBar(_ref) {
|
||||
var _classnames;
|
||||
var AppBar = function (_React$Component) {
|
||||
_inherits(AppBar, _React$Component);
|
||||
|
||||
var children = _ref.children;
|
||||
var leftIcon = _ref.leftIcon;
|
||||
var onLeftIconClick = _ref.onLeftIconClick;
|
||||
var onRightIconClick = _ref.onRightIconClick;
|
||||
var rightIcon = _ref.rightIcon;
|
||||
var theme = _ref.theme;
|
||||
var title = _ref.title;
|
||||
function AppBar() {
|
||||
var _Object$getPrototypeO;
|
||||
|
||||
var props = _objectWithoutProperties(_ref, ['children', 'leftIcon', 'onLeftIconClick', 'onRightIconClick', 'rightIcon', 'theme', 'title']);
|
||||
var _temp, _this, _ret;
|
||||
|
||||
var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, props.fixed), _defineProperty(_classnames, theme.flat, props.flat), _classnames), props.className);
|
||||
_classCallCheck(this, AppBar);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'header',
|
||||
{ className: className, 'data-react-toolbox': 'app-bar' },
|
||||
leftIcon && _react2.default.createElement(IconButton, {
|
||||
inverse: true,
|
||||
className: (0, _classnames3.default)(theme.leftIcon),
|
||||
onClick: onLeftIconClick,
|
||||
icon: leftIcon }),
|
||||
title && _react2.default.createElement(
|
||||
'h1',
|
||||
{ className: (0, _classnames3.default)(theme.title) },
|
||||
title
|
||||
),
|
||||
children,
|
||||
rightIcon && _react2.default.createElement(IconButton, {
|
||||
inverse: true,
|
||||
className: (0, _classnames3.default)(theme.rightIcon),
|
||||
onClick: onRightIconClick,
|
||||
icon: rightIcon })
|
||||
);
|
||||
};
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AppBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
|
||||
window.addEventListener('scroll', _this.handleScroll);
|
||||
|
||||
var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect();
|
||||
|
||||
var height = _this$rootNode$getBou.height;
|
||||
|
||||
_this.curScroll = window.scrollY;
|
||||
_this.setState({ height: height });
|
||||
}, _this.endScroll = function () {
|
||||
window.removeEventListener('scroll', _this.handleScroll);
|
||||
}, _this.handleScroll = function () {
|
||||
var scrollDiff = _this.curScroll - window.scrollY;
|
||||
var hidden = scrollDiff < 0 && window.scrollY !== undefined && window.scrollY > _this.state.height;
|
||||
_this.setState({ hidden: hidden });
|
||||
_this.curScroll = window.scrollY;
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(AppBar, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
if (this.props.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillReceiveProps',
|
||||
value: function componentWillReceiveProps(nextProps) {
|
||||
if (!this.props.scrollHide && nextProps.scrollHide) {
|
||||
this.initializeScroll();
|
||||
}
|
||||
|
||||
if (this.props.scrollHide && !nextProps.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.props.scrollHide) {
|
||||
this.endScroll();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames,
|
||||
_this2 = this;
|
||||
|
||||
var _props = this.props;
|
||||
var children = _props.children;
|
||||
var leftIcon = _props.leftIcon;
|
||||
var onLeftIconClick = _props.onLeftIconClick;
|
||||
var onRightIconClick = _props.onRightIconClick;
|
||||
var rightIcon = _props.rightIcon;
|
||||
var theme = _props.theme;
|
||||
var title = _props.title;
|
||||
|
||||
var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'header',
|
||||
{
|
||||
className: className,
|
||||
'data-react-toolbox': 'app-bar',
|
||||
ref: function ref(node) {
|
||||
_this2.rootNode = node;
|
||||
}
|
||||
},
|
||||
leftIcon && _react2.default.createElement(IconButton, {
|
||||
inverse: true,
|
||||
className: (0, _classnames3.default)(theme.leftIcon),
|
||||
onClick: onLeftIconClick,
|
||||
icon: leftIcon }),
|
||||
title && _react2.default.createElement(
|
||||
'h1',
|
||||
{ className: (0, _classnames3.default)(theme.title) },
|
||||
title
|
||||
),
|
||||
children,
|
||||
rightIcon && _react2.default.createElement(IconButton, {
|
||||
inverse: true,
|
||||
className: (0, _classnames3.default)(theme.rightIcon),
|
||||
onClick: onRightIconClick,
|
||||
icon: rightIcon })
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
||||
return AppBar;
|
||||
}(_react2.default.Component);
|
||||
|
||||
AppBar.propTypes = {
|
||||
children: _react.PropTypes.node,
|
||||
|
|
@ -74,6 +150,7 @@ var factory = function factory(IconButton) {
|
|||
onLeftIconClick: _react.PropTypes.func,
|
||||
onRightIconClick: _react.PropTypes.func,
|
||||
rightIcon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
scrollHide: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
appBar: _react.PropTypes.string,
|
||||
fixed: _react.PropTypes.string,
|
||||
|
|
@ -84,13 +161,14 @@ var factory = function factory(IconButton) {
|
|||
}),
|
||||
title: _react.PropTypes.string
|
||||
};
|
||||
|
||||
AppBar.defaultProps = {
|
||||
className: '',
|
||||
fixed: false,
|
||||
flat: false
|
||||
flat: false,
|
||||
scrollHide: false
|
||||
};
|
||||
|
||||
|
||||
return AppBar;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,15 @@
|
|||
}
|
||||
|
||||
.rightIcon {
|
||||
margin-left: auto;
|
||||
margin-right: -1.2 * $unit;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transition-duration: .5s;
|
||||
transition-property: transform;
|
||||
|
||||
&.scrollHide {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,12 +22,14 @@ var factory = function factory(ripple) {
|
|||
var children = _ref.children;
|
||||
var onMouseDown = _ref.onMouseDown;
|
||||
var theme = _ref.theme;
|
||||
var style = _ref.style;
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{
|
||||
'data-react-toolbox': 'check',
|
||||
className: (0, _classnames3.default)(theme.check, _defineProperty({}, theme.checked, checked)),
|
||||
onMouseDown: onMouseDown
|
||||
onMouseDown: onMouseDown,
|
||||
style: style
|
||||
},
|
||||
children
|
||||
);
|
||||
|
|
@ -37,6 +39,7 @@ var factory = function factory(ripple) {
|
|||
checked: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.any,
|
||||
onMouseDown: _react.PropTypes.func,
|
||||
style: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
check: _react.PropTypes.string,
|
||||
checked: _react.PropTypes.string
|
||||
|
|
|
|||
|
|
@ -80,8 +80,9 @@ var factory = function factory(Check) {
|
|||
var _props = this.props;
|
||||
var onChange = _props.onChange;
|
||||
var theme = _props.theme;
|
||||
var style = _props.style;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['onChange', 'theme']); //eslint-disable-line no-unused-vars
|
||||
var others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);
|
||||
|
|
@ -100,6 +101,7 @@ var factory = function factory(Check) {
|
|||
checked: this.props.checked,
|
||||
disabled: this.props.disabled,
|
||||
rippleClassName: theme.ripple,
|
||||
style: style,
|
||||
theme: this.props.theme
|
||||
}),
|
||||
this.props.label ? _react2.default.createElement(
|
||||
|
|
@ -121,6 +123,7 @@ var factory = function factory(Check) {
|
|||
label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.node]),
|
||||
name: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
style: _react.PropTypes.object,
|
||||
theme: _react.PropTypes.shape({
|
||||
disabled: _react.PropTypes.string,
|
||||
field: _react.PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -186,9 +186,9 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onKeyPress: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
readonly: _react.PropTypes.bool,
|
||||
sundayFirstDayOfWeek: _react2.default.PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -3,17 +3,13 @@
|
|||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.DatePickerDialog = exports.DatePicker = exports.default = undefined;
|
||||
|
||||
var _DatePicker = require('./DatePicker');
|
||||
|
||||
var _DatePicker2 = _interopRequireDefault(_DatePicker);
|
||||
exports.DatePickerDialog = exports.DatePicker = undefined;
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _DatePicker3 = require('./DatePicker.js');
|
||||
var _DatePicker = require('./DatePicker.js');
|
||||
|
||||
var _DatePickerDialog = require('./DatePickerDialog.js');
|
||||
|
||||
|
|
@ -39,12 +35,9 @@ var _theme2 = _interopRequireDefault(_theme);
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.default = _DatePicker2.default;
|
||||
|
||||
|
||||
var Calendar = (0, _Calendar2.default)(_button.IconButton);
|
||||
var DatePickerDialog = (0, _DatePickerDialog2.default)(_dialog2.default, Calendar);
|
||||
var DatePicker = (0, _DatePicker3.datePickerFactory)(_input2.default, DatePickerDialog);
|
||||
var DatePicker = (0, _DatePicker.datePickerFactory)(_input2.default, DatePickerDialog);
|
||||
|
||||
var ThemedDatePicker = (0, _reactCssThemr.themr)(_identifiers.DATE_PICKER, _theme2.default)(DatePicker);
|
||||
exports.default = ThemedDatePicker;
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ NavDrawer.propTypes = {
|
|||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
permanentAt: _react.PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']),
|
||||
permanentAt: _react.PropTypes.oneOf(['sm', 'smTablet', 'md', 'lg', 'lgTablet', 'xl', 'xxl', 'xxxl']),
|
||||
pinned: _react.PropTypes.bool,
|
||||
scrollY: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
|
|
|
|||
|
|
@ -108,6 +108,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-sm-tablet) {
|
||||
&.smTabletPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-md) {
|
||||
&.mdPermanent {
|
||||
@include permanent();
|
||||
|
|
@ -120,6 +126,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-lg-tablet) {
|
||||
&.lgTabletPermanent {
|
||||
@include permanent();
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-breakpoint-xl) {
|
||||
&.xlPermanent {
|
||||
@include permanent();
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ var factory = function factory(ListItemText) {
|
|||
return ListItemContent;
|
||||
};
|
||||
|
||||
var ListItemContent = (0, _reactCssThemr.themr)(_identifiers.LIST)(_ListItemText2.default);
|
||||
exports.default = ListItemContent;
|
||||
var ListItemContent = factory(_ListItemText2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.LIST)(ListItemContent);
|
||||
exports.listItemContentFactory = factory;
|
||||
exports.ListItemContent = ListItemContent;
|
||||
|
|
@ -142,7 +142,10 @@ var factory = function factory(MenuItem) {
|
|||
key: 'componentWillUpdate',
|
||||
value: function componentWillUpdate(nextProps, nextState) {
|
||||
if (!this.state.active && nextState.active) {
|
||||
_utils.events.addEventsToDocument({ click: this.handleDocumentClick });
|
||||
_utils.events.addEventsToDocument({
|
||||
click: this.handleDocumentClick,
|
||||
touchstart: this.handleDocumentClick
|
||||
});
|
||||
}
|
||||
}
|
||||
}, {
|
||||
|
|
@ -150,7 +153,10 @@ var factory = function factory(MenuItem) {
|
|||
value: function componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.active && !this.state.active) {
|
||||
if (this.props.onHide) this.props.onHide();
|
||||
_utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
|
||||
_utils.events.removeEventsFromDocument({
|
||||
click: this.handleDocumentClick,
|
||||
touchstart: this.handleDocumentClick
|
||||
});
|
||||
} else if (!prevState.active && this.state.active && this.props.onShow) {
|
||||
this.props.onShow();
|
||||
}
|
||||
|
|
@ -158,7 +164,12 @@ var factory = function factory(MenuItem) {
|
|||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.state.active) _utils.events.removeEventsFromDocument({ click: this.handleDocumentClick });
|
||||
if (this.state.active) {
|
||||
_utils.events.removeEventsFromDocument({
|
||||
click: this.handleDocumentClick,
|
||||
touchstart: this.handleDocumentClick
|
||||
});
|
||||
}
|
||||
clearTimeout(this.positionTimeoutHandle);
|
||||
clearTimeout(this.activateTimeoutHandle);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$radio-field-margin-bottom: 1.5 * $unit !default;
|
||||
$radio-button-size: 1.6 * $unit !default;
|
||||
$radio-button-size: 2 * $unit !default;
|
||||
$radio-inner-margin: $radio-button-size / 4 !default;
|
||||
$radio-inner-color: $color-primary !default;
|
||||
$radio-focus-color: rgba($color-black, 0.1) !default;
|
||||
|
|
|
|||
|
|
@ -13,16 +13,15 @@
|
|||
border: .2 * $unit solid $radio-text-color;
|
||||
border-radius: 50%;
|
||||
&:before {
|
||||
@include material-animation-default();
|
||||
position: absolute;
|
||||
top: $radio-inner-margin - .2 * $unit;
|
||||
left: $radio-inner-margin - .2 * $unit;
|
||||
width: $radio-button-size - $radio-inner-margin * 2;
|
||||
height: $radio-button-size - $radio-inner-margin * 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: $radio-inner-color;
|
||||
border-radius: 50%;
|
||||
transition: transform;
|
||||
transition: transform $animation-duration $animation-curve-default;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +36,7 @@
|
|||
@extend .radio;
|
||||
border: .2 * $unit solid $radio-inner-color;
|
||||
&:before {
|
||||
transform: scale(1);
|
||||
transform: scale(0.65);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,6 +86,10 @@ var factory = function factory(TableHead, TableRow) {
|
|||
if (_this.props.onChange) {
|
||||
_this.props.onChange(index, key, value);
|
||||
}
|
||||
}, _this.handleRowClick = function (index, event) {
|
||||
if (_this.props.onRowClick) {
|
||||
_this.props.onRowClick(index, event);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
|
|
@ -135,6 +139,7 @@ var factory = function factory(TableHead, TableRow) {
|
|||
model: model,
|
||||
onChange: onChange ? _this2.handleRowChange.bind(_this2) : undefined,
|
||||
onSelect: _this2.handleRowSelect.bind(_this2, index),
|
||||
onRowClick: _this2.handleRowClick.bind(_this2, index),
|
||||
selectable: selectable,
|
||||
selected: selected.indexOf(index) !== -1,
|
||||
theme: theme
|
||||
|
|
@ -167,6 +172,7 @@ var factory = function factory(TableHead, TableRow) {
|
|||
model: _react.PropTypes.object,
|
||||
multiSelectable: _react.PropTypes.bool,
|
||||
onChange: _react.PropTypes.func,
|
||||
onRowClick: _react.PropTypes.func,
|
||||
onSelect: _react.PropTypes.func,
|
||||
selectable: _react.PropTypes.bool,
|
||||
selected: _react.PropTypes.array,
|
||||
|
|
|
|||
|
|
@ -44,7 +44,20 @@ var factory = function factory(Checkbox) {
|
|||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
|
||||
var value = type === 'checkbox' ? event.target.checked : event.target.value;
|
||||
var value = void 0;
|
||||
switch (type) {
|
||||
case 'checkbox':
|
||||
value = event.target.checked;
|
||||
break;
|
||||
// Handle contentEditable
|
||||
case 'text':
|
||||
value = event.target.textContent;
|
||||
break;
|
||||
default:
|
||||
value = event.target.value;
|
||||
break;
|
||||
}
|
||||
|
||||
var onChange = _this.props.model[key].onChange || _this.props.onChange;
|
||||
onChange(index, key, value);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
|
|
@ -69,7 +82,7 @@ var factory = function factory(Checkbox) {
|
|||
return Object.keys(this.props.model).map(function (key) {
|
||||
return _react2.default.createElement(
|
||||
'td',
|
||||
{ key: key },
|
||||
{ key: key, onClick: _this2.props.onRowClick },
|
||||
_this2.renderCell(key)
|
||||
);
|
||||
});
|
||||
|
|
@ -99,6 +112,16 @@ var factory = function factory(Checkbox) {
|
|||
var inputType = _utils2.default.inputTypeForPrototype(this.props.model[key].type);
|
||||
var inputValue = _utils2.default.prepareValueForInput(value, inputType);
|
||||
var checked = inputType === 'checkbox' && value ? true : null;
|
||||
|
||||
if (inputType === 'text') {
|
||||
return _react2.default.createElement('div', {
|
||||
children: inputValue,
|
||||
contentEditable: true,
|
||||
suppressContentEditableWarning: true,
|
||||
onInput: this.handleInputChange.bind(null, index, key, inputType)
|
||||
});
|
||||
}
|
||||
|
||||
return _react2.default.createElement('input', {
|
||||
checked: checked,
|
||||
onChange: this.handleInputChange.bind(null, index, key, inputType),
|
||||
|
|
@ -130,6 +153,7 @@ var factory = function factory(Checkbox) {
|
|||
index: _react.PropTypes.number,
|
||||
model: _react.PropTypes.object,
|
||||
onChange: _react.PropTypes.func,
|
||||
onRowClick: _react.PropTypes.func,
|
||||
onSelect: _react.PropTypes.func,
|
||||
selectable: _react.PropTypes.bool,
|
||||
selected: _react.PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -58,10 +58,6 @@ var factory = function factory(Tab, TabContent) {
|
|||
var idx = parseInt(event.currentTarget.id);
|
||||
if (_this.props.onChange) _this.props.onChange(idx);
|
||||
}, _this.handleResize = function () {
|
||||
if (!_this.props.fixed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (_this.resizeTimeout) {
|
||||
clearTimeout(_this.resizeTimeout);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -159,9 +159,9 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
label: _react.PropTypes.string,
|
||||
name: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onKeyPress: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
readonly: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
|
|
|
|||
|
|
@ -105,11 +105,11 @@
|
|||
"prebuild": "npm run clean",
|
||||
"prepublish": "npm run build",
|
||||
"release": "bumped release",
|
||||
"sass": "cpx './components/**/*.scss' ./lib",
|
||||
"sass": "cpx \"./components/**/*.scss\" ./lib",
|
||||
"start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
|
||||
"test": "cross-env NODE_ENV=test karma start",
|
||||
"test:watch": "cross-env NODE_ENV=test karma start --no-single-run",
|
||||
"tsd": "cpx './components/**/*.d.ts' ./lib"
|
||||
"tsd": "cpx \"./components/**/*.d.ts\" ./lib"
|
||||
},
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -146,14 +146,3 @@ $offset: 1.8 * $unit;
|
|||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.pager
|
||||
{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
Loading…
Reference in New Issue