Ferenc Radius
GitHub
commit
e0f75b362b
|
|
@ -1,6 +1,11 @@
|
|||
sudo: false
|
||||
|
||||
language: node_js
|
||||
|
||||
node_js:
|
||||
- "4.3.2"
|
||||
- 6
|
||||
- 4
|
||||
|
||||
script:
|
||||
- npm run lint
|
||||
- npm test
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { BUTTON } from '../identifiers.js';
|
||||
import InjectFontIcon from '../font_icon/FontIcon.js';
|
||||
import rippleFactory from '../ripple/Ripple.js';
|
||||
|
||||
const factory = (ripple, FontIcon) => {
|
||||
class SimpleBrowseButton extends Component {
|
||||
static propTypes = {
|
||||
accent: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
flat: PropTypes.bool,
|
||||
floating: PropTypes.bool,
|
||||
icon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
inverse: PropTypes.bool,
|
||||
label: PropTypes.string,
|
||||
mini: PropTypes.bool,
|
||||
neutral: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
onMouseLeave: PropTypes.func,
|
||||
onMouseUp: PropTypes.func,
|
||||
primary: PropTypes.bool,
|
||||
raised: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
accent: PropTypes.string,
|
||||
button: PropTypes.string,
|
||||
flat: PropTypes.string,
|
||||
floating: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
inverse: PropTypes.string,
|
||||
mini: PropTypes.string,
|
||||
neutral: PropTypes.string,
|
||||
primary: PropTypes.string,
|
||||
raised: PropTypes.string,
|
||||
rippleWrapper: PropTypes.string,
|
||||
toggle: PropTypes.string
|
||||
}),
|
||||
type: PropTypes.string
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
flat: false,
|
||||
floating: false,
|
||||
mini: false,
|
||||
neutral: true,
|
||||
primary: false,
|
||||
raised: false
|
||||
};
|
||||
|
||||
handleMouseUp = (event) => {
|
||||
this.refs.label.blur();
|
||||
if (this.props.onMouseUp) this.props.onMouseUp(event);
|
||||
};
|
||||
|
||||
handleMouseLeave = (event) => {
|
||||
this.refs.label.blur();
|
||||
if (this.props.onMouseLeave) this.props.onMouseLeave(event);
|
||||
};
|
||||
|
||||
handleFileChange = (event) => {
|
||||
if (this.props.onChange) this.props.onChange(event);
|
||||
};
|
||||
|
||||
render () {
|
||||
const { accent, children, className, flat, floating, icon,
|
||||
inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
|
||||
const element = 'label';
|
||||
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||
|
||||
const classes = classnames(theme.button, [theme[shape]], {
|
||||
[theme[level]]: neutral,
|
||||
[theme.mini]: mini,
|
||||
[theme.inverse]: inverse
|
||||
}, className);
|
||||
|
||||
const props = {
|
||||
...others,
|
||||
ref: 'label',
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
'data-react-toolbox': 'label'
|
||||
};
|
||||
|
||||
return React.createElement(element, props,
|
||||
icon ? <FontIcon className={theme.icon} value={icon}/> : null,
|
||||
<span>{label}</span>,
|
||||
<input className={classes} type="file" onChange={this.handleFileChange}/>,
|
||||
children
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return ripple(SimpleBrowseButton);
|
||||
};
|
||||
|
||||
const BrowseButton = factory(rippleFactory({ centered: false }), InjectFontIcon);
|
||||
export default themr(BUTTON)(BrowseButton);
|
||||
export { factory as browseButtonFactory };
|
||||
export { BrowseButton };
|
||||
|
|
@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
|
|||
}
|
||||
|
||||
export class IconButton extends React.Component<IconButtonProps, {}> { }
|
||||
|
||||
export interface BrowseButtonTheme {
|
||||
/**
|
||||
* Used for the root in case button is accent.
|
||||
*/
|
||||
accent?: string;
|
||||
/**
|
||||
* Used for the root element in any button.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used when the button is flat for the root element.
|
||||
*/
|
||||
flat?: string;
|
||||
/**
|
||||
* Used when the button is floating for the root element.
|
||||
*/
|
||||
floating?: string;
|
||||
/**
|
||||
* For the icon inside a button.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used when colors are inverted.
|
||||
*/
|
||||
inverse?: string;
|
||||
/**
|
||||
* Used for mini floating buttons.
|
||||
*/
|
||||
mini?: string;
|
||||
/**
|
||||
* Used for neutral colored buttons.
|
||||
*/
|
||||
neutral?: string;
|
||||
/**
|
||||
* Used for primary buttons when button is primary.
|
||||
*/
|
||||
primary?: string;
|
||||
/**
|
||||
* Used when the button is raised for root element.
|
||||
*/
|
||||
raised?: string;
|
||||
/**
|
||||
* Used for the ripple element.
|
||||
*/
|
||||
rippleWrapper?: string;
|
||||
/**
|
||||
* Used for toggle buttons in the root element.
|
||||
*/
|
||||
toggle?: string;
|
||||
}
|
||||
|
||||
interface BrowseButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean;
|
||||
/**
|
||||
* Creates a link for the button.
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
inverse?: boolean;
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* To be used with floating button. If true, the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean;
|
||||
/**
|
||||
* Set it to false if you don't want the neutral styles to be included.
|
||||
* @default true
|
||||
*/
|
||||
neutral?: boolean;
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean;
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: BrowseButtonTheme;
|
||||
}
|
||||
|
||||
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { BUTTON } from '../identifiers.js';
|
||||
import { themr } from 'react-css-themr';
|
||||
import { buttonFactory } from './Button.js';
|
||||
import { browseButtonFactory } from './BrowseButton.js';
|
||||
import { iconButtonFactory } from './IconButton.js';
|
||||
import FontIcon from '../font_icon/FontIcon.js';
|
||||
import themedRippleFactory from '../ripple';
|
||||
|
|
@ -8,9 +9,12 @@ import theme from './theme.scss';
|
|||
|
||||
const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
|
||||
const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
|
||||
const BrowseButton = browseButtonFactory(themedRippleFactory({ centered: false }), FontIcon);
|
||||
const ThemedButton = themr(BUTTON, theme)(Button);
|
||||
const ThemedIconButton = themr(BUTTON, theme)(IconButton);
|
||||
const ThemedBrowseButton = themr(BUTTON, theme)(BrowseButton);
|
||||
|
||||
export default ThemedButton;
|
||||
export { ThemedButton as Button };
|
||||
export { ThemedIconButton as IconButton };
|
||||
export { ThemedBrowseButton as BrowseButton };
|
||||
|
|
|
|||
|
|
@ -6,6 +6,17 @@
|
|||
|
||||
.button {
|
||||
position: relative;
|
||||
|
||||
> input {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
background-size: cover;
|
||||
&.wide, &.square {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
@ -36,10 +35,15 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&.wide {
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.wide::after {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
&.square {
|
||||
&.square::after {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@ import React, { PropTypes } from 'react';
|
|||
import classnames from 'classnames';
|
||||
|
||||
const factory = (ripple) => {
|
||||
const Check = ({checked, children, onMouseDown, theme}) => (
|
||||
const Check = ({checked, children, onMouseDown, theme, style}) => (
|
||||
<div
|
||||
data-react-toolbox='check'
|
||||
className={classnames(theme.check, { [theme.checked]: checked })}
|
||||
onMouseDown={onMouseDown}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
@ -16,6 +17,7 @@ const factory = (ripple) => {
|
|||
checked: PropTypes.bool,
|
||||
children: PropTypes.any,
|
||||
onMouseDown: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
theme: PropTypes.shape({
|
||||
check: PropTypes.string,
|
||||
checked: PropTypes.string
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const factory = (Check) => {
|
|||
]),
|
||||
name: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
theme: PropTypes.shape({
|
||||
disabled: PropTypes.string,
|
||||
field: PropTypes.string,
|
||||
|
|
@ -47,7 +48,7 @@ const factory = (Check) => {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
|
||||
const { onChange, theme, style, ...others } = this.props; //eslint-disable-line no-unused-vars
|
||||
const className = classnames(theme.field, {
|
||||
[theme.disabled]: this.props.disabled
|
||||
}, this.props.className);
|
||||
|
|
@ -66,6 +67,7 @@ const factory = (Check) => {
|
|||
checked={this.props.checked}
|
||||
disabled={this.props.disabled}
|
||||
rippleClassName={theme.ripple}
|
||||
style={style}
|
||||
theme={this.props.theme}
|
||||
/>
|
||||
{this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const factory = (Input, DatePickerDialog) => {
|
|||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
autoOk: PropTypes.bool,
|
||||
cancelLabel: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
icon: PropTypes.oneOfType([
|
||||
|
|
@ -32,10 +33,11 @@ const factory = (Input, DatePickerDialog) => {
|
|||
maxDate: PropTypes.object,
|
||||
minDate: PropTypes.object,
|
||||
name: PropTypes.string,
|
||||
okLabel: 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,
|
||||
|
|
@ -99,8 +101,8 @@ const factory = (Input, DatePickerDialog) => {
|
|||
|
||||
render () {
|
||||
const { active, // eslint-disable-line
|
||||
autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
|
||||
onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
|
||||
autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
|
||||
okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
|
||||
...others } = this.props;
|
||||
const finalInputFormat = inputFormat || time.formatDate;
|
||||
const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
|
||||
|
|
@ -126,11 +128,13 @@ const factory = (Input, DatePickerDialog) => {
|
|||
<DatePickerDialog
|
||||
active={this.state.active}
|
||||
autoOk={autoOk}
|
||||
cancelLabel={cancelLabel}
|
||||
className={this.props.className}
|
||||
locale={locale}
|
||||
maxDate={maxDate}
|
||||
minDate={minDate}
|
||||
name={this.props.name}
|
||||
okLabel={okLabel}
|
||||
onDismiss={this.handleDismiss}
|
||||
onEscKeyDown={onEscKeyDown || this.handleDismiss}
|
||||
onOverlayClick={onOverlayClick || this.handleDismiss}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ const factory = (Dialog, Calendar) => {
|
|||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
autoOk: PropTypes.bool,
|
||||
cancelLabel: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
locale: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
|
|
@ -15,6 +16,7 @@ const factory = (Dialog, Calendar) => {
|
|||
maxDate: PropTypes.object,
|
||||
minDate: PropTypes.object,
|
||||
name: PropTypes.string,
|
||||
okLabel: PropTypes.string,
|
||||
onDismiss: PropTypes.func,
|
||||
onEscKeyDown: PropTypes.func,
|
||||
onOverlayClick: PropTypes.func,
|
||||
|
|
@ -35,7 +37,9 @@ const factory = (Dialog, Calendar) => {
|
|||
|
||||
static defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
className: '',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
|
@ -82,8 +86,8 @@ const factory = (Dialog, Calendar) => {
|
|||
};
|
||||
|
||||
actions = [
|
||||
{ label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
|
||||
{ label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
|
||||
{ label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
|
||||
{ label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
|
||||
];
|
||||
|
||||
render () {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
export default from './DatePicker';
|
||||
|
||||
import { themr } from 'react-css-themr';
|
||||
import { DATE_PICKER, DIALOG } from '../identifiers.js';
|
||||
import { datePickerFactory } from './DatePicker.js';
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ const factory = (Input) => {
|
|||
onChange: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
required: PropTypes.bool,
|
||||
source: PropTypes.array.isRequired,
|
||||
template: PropTypes.func,
|
||||
theme: PropTypes.shape({
|
||||
|
|
@ -30,6 +31,7 @@ const factory = (Input) => {
|
|||
errored: PropTypes.string,
|
||||
field: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
required: PropTypes.bool,
|
||||
selected: PropTypes.string,
|
||||
templateValue: PropTypes.string,
|
||||
up: PropTypes.string,
|
||||
|
|
@ -46,7 +48,8 @@ const factory = (Input) => {
|
|||
auto: true,
|
||||
className: '',
|
||||
allowBlank: true,
|
||||
disabled: false
|
||||
disabled: false,
|
||||
required: false
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
@ -118,7 +121,8 @@ const factory = (Input) => {
|
|||
const { theme } = this.props;
|
||||
const className = classnames(theme.field, {
|
||||
[theme.errored]: this.props.error,
|
||||
[theme.disabled]: this.props.disabled
|
||||
[theme.disabled]: this.props.disabled,
|
||||
[theme.required]: this.props.required
|
||||
});
|
||||
|
||||
return (
|
||||
|
|
@ -126,7 +130,12 @@ const factory = (Input) => {
|
|||
<div className={`${theme.templateValue} ${theme.value}`}>
|
||||
{this.props.template(selected)}
|
||||
</div>
|
||||
{this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
|
||||
{this.props.label
|
||||
? <label className={theme.label}>
|
||||
{this.props.label}
|
||||
{this.props.required ? <span className={theme.required}> * </span> : null}
|
||||
</label>
|
||||
: null}
|
||||
{this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -143,12 +152,13 @@ const factory = (Input) => {
|
|||
};
|
||||
|
||||
render () {
|
||||
const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
|
||||
const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
|
||||
const selected = this.getSelectedItem();
|
||||
const className = classnames(theme.dropdown, {
|
||||
[theme.up]: this.state.up,
|
||||
[theme.active]: this.state.active,
|
||||
[theme.disabled]: this.props.disabled
|
||||
[theme.disabled]: this.props.disabled,
|
||||
[theme.required]: this.props.required
|
||||
}, this.props.className);
|
||||
|
||||
return (
|
||||
|
|
@ -157,6 +167,7 @@ const factory = (Input) => {
|
|||
{...others}
|
||||
className={theme.value}
|
||||
onClick={this.handleClick}
|
||||
required={this.props.required}
|
||||
readOnly
|
||||
type={template && selected ? 'hidden' : null}
|
||||
value={selected && selected.label ? selected.label : ''}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
|
|||
| `source` | `Array` | | Array of data objects with the data to represent in the dropdown.|
|
||||
| `template` | `Function` | | Callback function that returns a JSX template to represent the element.|
|
||||
| `value` | `String` | | Default value using JSON data.|
|
||||
| `required` | `Boolean` | `false` | If true, the dropdown has a required attribute.|
|
||||
|
||||
## Theming
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,9 @@
|
|||
> .templateValue {
|
||||
border-bottom: 1px solid $input-text-error-color;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
|
@ -96,6 +99,9 @@
|
|||
font-size: $input-label-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
.required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ import classnames from 'classnames';
|
|||
import { themr } from 'react-css-themr';
|
||||
import { LAYOUT } from '../identifiers.js';
|
||||
|
||||
const Panel = ({ children, className, scrollY, theme }) => {
|
||||
const Panel = ({ children, className, onScroll, scrollY, theme }) => {
|
||||
const _className = classnames(theme.panel, {
|
||||
[theme.scrollY]: scrollY
|
||||
}, className);
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='panel' className={_className}>
|
||||
<div data-react-toolbox='panel' onScroll={onScroll} className={_className}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -18,6 +18,7 @@ const Panel = ({ children, className, scrollY, theme }) => {
|
|||
Panel.propTypes = {
|
||||
children: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
onScroll: PropTypes.func,
|
||||
scrollY: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
panel: PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
@ -148,6 +148,7 @@ The `Panel` is the main content area within a `Layout`. It is a full-height fle
|
|||
### Properties
|
||||
| Name | Type | Default | Description |
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `onScroll` | `Function` | | Callback function to be invoked when the component scrolls. |
|
||||
| `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
|
||||
| `className` | `string` | | Additional class(es) for custom styling. |
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ class Overlay extends Component {
|
|||
|
||||
componentDidMount () {
|
||||
if (this.props.active) {
|
||||
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
|
||||
document.body.addEventListener('keydown', this.handleEscKey);
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
|
@ -37,20 +37,17 @@ class Overlay extends Component {
|
|||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (this.props.active && !this.escKeyListener) {
|
||||
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
|
||||
if (this.props.active) {
|
||||
document.body.addEventListener('keydown', this.handleEscKey);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
|
||||
if (this.escKeyListener) {
|
||||
document.body.removeEventListener('keydown', this.handleEscKey);
|
||||
this.escKeyListener = null;
|
||||
}
|
||||
document.body.removeEventListener('keydown', this.handleEscKey);
|
||||
}
|
||||
|
||||
handleEscKey (e) {
|
||||
handleEscKey = (e) => {
|
||||
if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
|
||||
this.props.onEscKeyDown(e);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,12 +12,16 @@ const factory = (Overlay, Button) => {
|
|||
static propTypes = {
|
||||
action: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
icon: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
label: PropTypes.string,
|
||||
label: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
onClick: PropTypes.func,
|
||||
onTimeout: PropTypes.func,
|
||||
theme: PropTypes.shape({
|
||||
|
|
@ -49,7 +53,7 @@ const factory = (Overlay, Button) => {
|
|||
}
|
||||
|
||||
render () {
|
||||
const {action, active, icon, label, onClick, theme, type } = this.props;
|
||||
const {action, active, children, icon, label, onClick, theme, type } = this.props;
|
||||
const className = classnames([theme.snackbar, theme[type]], {
|
||||
[theme.active]: active
|
||||
}, this.props.className);
|
||||
|
|
@ -58,7 +62,10 @@ const factory = (Overlay, Button) => {
|
|||
<Overlay invisible>
|
||||
<div data-react-toolbox='snackbar' className={className}>
|
||||
{icon ? <FontIcon value={icon} className={theme.icon} /> : null}
|
||||
<span className={theme.label}>{label}</span>
|
||||
<span className={theme.label}>
|
||||
{label}
|
||||
{children}
|
||||
</span>
|
||||
{action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
|
||||
</div>
|
||||
</Overlay>
|
||||
|
|
|
|||
|
|
@ -41,9 +41,10 @@ This component can be styled by context providing a theme with the key `RTSnackb
|
|||
|:-----|:-----|:-----|:-----|
|
||||
| `action` | `String` | | Label for the action component inside the Snackbar.|
|
||||
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
|
||||
| `children` | `String or Element` | `false` | Text or node to be displayed in the content as alternative to `label`.|
|
||||
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
||||
| `icon` | `String` or `Element` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
|
||||
| `label` | `String` | | Text to display in the content. Required.|
|
||||
| `label` | `String or Element` | | Text to display in the content.|
|
||||
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
|
||||
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
|
||||
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,29 @@
|
|||
# Table
|
||||
|
||||
The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted formated cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
|
||||
The Table component is an enhanced version of the standard HTML `<table>`. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities. This component uses a solid typed model, helping you to create formatted cells. These cells can be editable if you subscribe to `onChange` method who dispatch then new source with each change.
|
||||
|
||||
*A note about models and table headers*: By default, the table header text uses name of the property in the model. Additionally, the table header text is automatically set in title case (first letter of each word capitalized). Thus, if you use the property name `twitter` in your model, the displayed table header will be `Twitter`. You can override the default text by including a `title` attribute, as demonstrated in the example below for the `birthdate` property. You may also override the title case in your own theme's css. In the following example, we force the first letter of the table header text to lowercase, using SCSS syntax:
|
||||
|
||||
```
|
||||
.table {
|
||||
th {
|
||||
&:first-letter {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!-- example -->
|
||||
|
||||
```jsx
|
||||
import Table from 'react-toolbox/lib/table';
|
||||
|
||||
const UserModel = {
|
||||
name: {type: String},
|
||||
twitter: {type: String},
|
||||
birthdate: {type: Date},
|
||||
birthdate: {type: Date,
|
||||
title: 'Date of Birth'},
|
||||
cats: {type: Number},
|
||||
dogs: {type: Number},
|
||||
active: {type: Boolean}
|
||||
|
|
@ -47,30 +61,31 @@ class TableTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
`
|
||||
```
|
||||
|
||||
This component can be styled by context providing a theme with the key `RTTable` through the theme provider.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|:-----|:-----|:-----|:-----|
|
||||
| `className` | `String` | `''` | Sets a custom class to style the Component.|
|
||||
| `heading` | `Boolean` | `true` | If true, component will show a heading using model field names.|
|
||||
| `model` | `Object` | | Object describing the data model that represents each object in the `source`.|
|
||||
| `onChange` | `Function` | | Callback function that is fired when an item in a row changes. If set, rows are editable. |
|
||||
| `onSelect` | `Function` | | Callback function invoked when the row selection changes.|
|
||||
| `selectable` | `Boolean` | `true` | If true, each row will display a checkbox to allow the user to select that one row.|
|
||||
| `multiSelectable` | `Boolean` | `true` | If true, the header and each row will display a checkbox to allow the user to select multiple rows.|
|
||||
| `selected` | `Array` | | Array of indexes of the items in the source that should appear as selected.|
|
||||
| `source` | `Array` | | Array of objects representing each item to show.|
|
||||
Name | Type | Default | Description
|
||||
:---------------- | :--------- | :------ | :--------------------------------------------------------------------------------------------------
|
||||
`className` | `String` | `''` | Sets a custom class to style the Component.
|
||||
`heading` | `Boolean` | `true` | If true, component will show a heading using model field names.
|
||||
`model` | `Object` | | Object describing the data model that represents each object in the `source`.
|
||||
`onChange` | `Function` | | Callback function that is fired when an item in a row changes. If set, rows are editable.
|
||||
`onSelect` | `Function` | | Callback function invoked when the row selection changes.
|
||||
`selectable` | `Boolean` | `true` | If true, each row will display a checkbox to allow the user to select that one row.
|
||||
`multiSelectable` | `Boolean` | `true` | If true, the header and each row will display a checkbox to allow the user to select multiple rows.
|
||||
`selected` | `Array` | | Array of indexes of the items in the source that should appear as selected.
|
||||
`source` | `Array` | | Array of objects representing each item to show.
|
||||
|
||||
## Theme
|
||||
|
||||
| Name | Description|
|
||||
|:---------|:-----------|
|
||||
| `editable` | It will be added to a row in case it is editable.|
|
||||
| `row` | Used for the row element.|
|
||||
| `selectable` | It will be added to a row in case it is selectable.|
|
||||
| `selected` | Added to a row in case it is selected.|
|
||||
| `table` | Classname used for the root element.|
|
||||
Name | Description
|
||||
:----------- | :--------------------------------------------------
|
||||
`editable` | It will be added to a row in case it is editable.
|
||||
`row` | Used for the row element.
|
||||
`selectable` | It will be added to a row in case it is selectable.
|
||||
`selected` | Added to a row in case it is selected.
|
||||
`table` | Classname used for the root element.
|
||||
|
|
|
|||
|
|
@ -58,10 +58,6 @@ const factory = (Tab, TabContent) => {
|
|||
};
|
||||
|
||||
handleResize = () => {
|
||||
if (!this.props.fixed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.resizeTimeout) {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,16 +12,18 @@ const factory = (TimePickerDialog, Input) => {
|
|||
class TimePicker extends Component {
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
cancelLabel: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
error: PropTypes.string,
|
||||
format: PropTypes.oneOf(['24hr', 'ampm']),
|
||||
inputClassName: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
okLabel: 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({
|
||||
|
|
@ -82,7 +84,8 @@ const factory = (TimePickerDialog, Input) => {
|
|||
render () {
|
||||
const {
|
||||
active, // eslint-disable-line
|
||||
format, inputClassName, onEscKeyDown, onOverlayClick, readonly, value, ...others
|
||||
cancelLabel, format, inputClassName, okLabel, onEscKeyDown, onOverlayClick,
|
||||
readonly, value, ...others
|
||||
} = this.props;
|
||||
const formattedTime = value ? time.formatTime(value, format) : '';
|
||||
return (
|
||||
|
|
@ -102,9 +105,11 @@ const factory = (TimePickerDialog, Input) => {
|
|||
/>
|
||||
<TimePickerDialog
|
||||
active={this.state.active}
|
||||
cancelLabel={cancelLabel}
|
||||
className={this.props.className}
|
||||
format={format}
|
||||
name={this.props.name}
|
||||
okLabel={okLabel}
|
||||
onDismiss={this.handleDismiss}
|
||||
onEscKeyDown={onEscKeyDown}
|
||||
onOverlayClick={onOverlayClick}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@ const factory = (Dialog) => {
|
|||
class TimePickerDialog extends Component {
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
cancelLabel: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
format: PropTypes.oneOf(['24hr', 'ampm']),
|
||||
name: PropTypes.string,
|
||||
okLabel: PropTypes.string,
|
||||
onDismiss: PropTypes.func,
|
||||
onEscKeyDown: PropTypes.func,
|
||||
onOverlayClick: PropTypes.func,
|
||||
|
|
@ -34,7 +36,9 @@ const factory = (Dialog) => {
|
|||
|
||||
static defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
format: '24hr',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
|
@ -70,8 +74,8 @@ const factory = (Dialog) => {
|
|||
};
|
||||
|
||||
actions = [
|
||||
{ label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
|
||||
{ label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
|
||||
{ label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
|
||||
{ label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
|
||||
];
|
||||
|
||||
formatHours () {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const TRANSITIONS = {
|
|||
|
||||
function transitionEventNamesFor (element) {
|
||||
for (const transition in TRANSITIONS) {
|
||||
if (element.style[transition] !== undefined) {
|
||||
if (element && element.style[transition] !== undefined) {
|
||||
return TRANSITIONS[transition];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,11 +112,18 @@ const dateLocales = {
|
|||
weekdaysLetter: []
|
||||
},
|
||||
ru: {
|
||||
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
|
||||
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
|
||||
monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
|
||||
weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
|
||||
weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
|
||||
weekdaysLetter: []
|
||||
},
|
||||
ua: {
|
||||
months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
|
||||
monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
|
||||
weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
|
||||
weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
|
||||
weekdaysLetter: []
|
||||
}
|
||||
};
|
||||
const time = {
|
||||
|
|
|
|||
|
|
@ -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 _ref;
|
||||
|
||||
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, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
|
|||
_inherits(Autocomplete, _Component);
|
||||
|
||||
function Autocomplete() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
direction: _this.props.direction,
|
||||
focus: false,
|
||||
showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
|
||||
|
|
@ -334,11 +334,11 @@ var factory = function factory(Chip, Input) {
|
|||
var _this2 = this;
|
||||
|
||||
if (this.props.multiple) {
|
||||
var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
|
||||
var _ref2 = _slicedToArray(_ref, 2);
|
||||
var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
|
||||
var _ref3 = _slicedToArray(_ref2, 2);
|
||||
|
||||
var key = _ref2[0];
|
||||
var value = _ref2[1];
|
||||
var key = _ref3[0];
|
||||
var value = _ref3[1];
|
||||
|
||||
return _react2.default.createElement(
|
||||
Chip,
|
||||
|
|
@ -366,11 +366,11 @@ var factory = function factory(Chip, Input) {
|
|||
|
||||
var theme = this.props.theme;
|
||||
|
||||
var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
|
||||
var _ref4 = _slicedToArray(_ref3, 2);
|
||||
var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
|
||||
var _ref5 = _slicedToArray(_ref4, 2);
|
||||
|
||||
var key = _ref4[0];
|
||||
var value = _ref4[1];
|
||||
var key = _ref5[0];
|
||||
var value = _ref5[1];
|
||||
|
||||
var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
|
||||
return _react2.default.createElement(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.BrowseButton = exports.browseButtonFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
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);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _Ripple = require('../ripple/Ripple.js');
|
||||
|
||||
var _Ripple2 = _interopRequireDefault(_Ripple);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
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(ripple, FontIcon) {
|
||||
var SimpleBrowseButton = function (_Component) {
|
||||
_inherits(SimpleBrowseButton, _Component);
|
||||
|
||||
function SimpleBrowseButton() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, SimpleBrowseButton);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.label.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
_this.refs.label.blur();
|
||||
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
|
||||
}, _this.handleFileChange = function (event) {
|
||||
if (_this.props.onChange) _this.props.onChange(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(SimpleBrowseButton, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var _props = this.props;
|
||||
var accent = _props.accent;
|
||||
var children = _props.children;
|
||||
var className = _props.className;
|
||||
var flat = _props.flat;
|
||||
var floating = _props.floating;
|
||||
var icon = _props.icon;
|
||||
var inverse = _props.inverse;
|
||||
var label = _props.label;
|
||||
var mini = _props.mini;
|
||||
var neutral = _props.neutral;
|
||||
var primary = _props.primary;
|
||||
var theme = _props.theme;
|
||||
var raised = _props.raised;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
|
||||
|
||||
var element = 'label';
|
||||
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
|
||||
|
||||
var props = _extends({}, others, {
|
||||
ref: 'label',
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
'data-react-toolbox': 'label'
|
||||
});
|
||||
|
||||
return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
|
||||
'span',
|
||||
null,
|
||||
label
|
||||
), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
|
||||
}
|
||||
}]);
|
||||
|
||||
return SimpleBrowseButton;
|
||||
}(_react.Component);
|
||||
|
||||
SimpleBrowseButton.propTypes = {
|
||||
accent: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
flat: _react.PropTypes.bool,
|
||||
floating: _react.PropTypes.bool,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
inverse: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.string,
|
||||
mini: _react.PropTypes.bool,
|
||||
neutral: _react.PropTypes.bool,
|
||||
onChange: _react.PropTypes.func,
|
||||
onMouseLeave: _react.PropTypes.func,
|
||||
onMouseUp: _react.PropTypes.func,
|
||||
primary: _react.PropTypes.bool,
|
||||
raised: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
accent: _react.PropTypes.string,
|
||||
button: _react.PropTypes.string,
|
||||
flat: _react.PropTypes.string,
|
||||
floating: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.string,
|
||||
inverse: _react.PropTypes.string,
|
||||
mini: _react.PropTypes.string,
|
||||
neutral: _react.PropTypes.string,
|
||||
primary: _react.PropTypes.string,
|
||||
raised: _react.PropTypes.string,
|
||||
rippleWrapper: _react.PropTypes.string,
|
||||
toggle: _react.PropTypes.string
|
||||
}),
|
||||
type: _react.PropTypes.string
|
||||
};
|
||||
SimpleBrowseButton.defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
flat: false,
|
||||
floating: false,
|
||||
mini: false,
|
||||
neutral: true,
|
||||
primary: false,
|
||||
raised: false
|
||||
};
|
||||
|
||||
|
||||
return ripple(SimpleBrowseButton);
|
||||
};
|
||||
|
||||
var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
|
||||
exports.browseButtonFactory = factory;
|
||||
exports.BrowseButton = BrowseButton;
|
||||
|
|
@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
|
|||
_inherits(Button, _Component);
|
||||
|
||||
function Button() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.button.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
|
|||
_inherits(IconButton, _Component);
|
||||
|
||||
function IconButton() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.button.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
|
|
|
|||
|
|
@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
|
|||
}
|
||||
|
||||
export class IconButton extends React.Component<IconButtonProps, {}> { }
|
||||
|
||||
export interface BrowseButtonTheme {
|
||||
/**
|
||||
* Used for the root in case button is accent.
|
||||
*/
|
||||
accent?: string;
|
||||
/**
|
||||
* Used for the root element in any button.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used when the button is flat for the root element.
|
||||
*/
|
||||
flat?: string;
|
||||
/**
|
||||
* Used when the button is floating for the root element.
|
||||
*/
|
||||
floating?: string;
|
||||
/**
|
||||
* For the icon inside a button.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used when colors are inverted.
|
||||
*/
|
||||
inverse?: string;
|
||||
/**
|
||||
* Used for mini floating buttons.
|
||||
*/
|
||||
mini?: string;
|
||||
/**
|
||||
* Used for neutral colored buttons.
|
||||
*/
|
||||
neutral?: string;
|
||||
/**
|
||||
* Used for primary buttons when button is primary.
|
||||
*/
|
||||
primary?: string;
|
||||
/**
|
||||
* Used when the button is raised for root element.
|
||||
*/
|
||||
raised?: string;
|
||||
/**
|
||||
* Used for the ripple element.
|
||||
*/
|
||||
rippleWrapper?: string;
|
||||
/**
|
||||
* Used for toggle buttons in the root element.
|
||||
*/
|
||||
toggle?: string;
|
||||
}
|
||||
|
||||
interface BrowseButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean;
|
||||
/**
|
||||
* Creates a link for the button.
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
inverse?: boolean;
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* To be used with floating button. If true, the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean;
|
||||
/**
|
||||
* Set it to false if you don't want the neutral styles to be included.
|
||||
* @default true
|
||||
*/
|
||||
neutral?: boolean;
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean;
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: BrowseButtonTheme;
|
||||
}
|
||||
|
||||
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.IconButton = exports.Button = undefined;
|
||||
exports.BrowseButton = exports.IconButton = exports.Button = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
|
|
@ -11,6 +11,8 @@ var _reactCssThemr = require('react-css-themr');
|
|||
|
||||
var _Button = require('./Button.js');
|
||||
|
||||
var _BrowseButton = require('./BrowseButton.js');
|
||||
|
||||
var _IconButton = require('./IconButton.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
|
@ -29,9 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
|
||||
var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
|
||||
var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
|
||||
var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
|
||||
var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
|
||||
|
||||
exports.default = ThemedButton;
|
||||
exports.Button = ThemedButton;
|
||||
exports.IconButton = ThemedIconButton;
|
||||
exports.IconButton = ThemedIconButton;
|
||||
exports.BrowseButton = ThemedBrowseButton;
|
||||
|
|
@ -6,6 +6,17 @@
|
|||
|
||||
.button {
|
||||
position: relative;
|
||||
|
||||
> input {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
background-size: cover;
|
||||
&.wide, &.square {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
@ -36,10 +35,15 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&.wide {
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.wide::after {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
&.square {
|
||||
&.square::after {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ var factory = function factory(Check) {
|
|||
_inherits(Checkbox, _Component);
|
||||
|
||||
function Checkbox() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ var factory = function factory(Check) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
|
||||
if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
|
||||
if (!_this.props.disabled && _this.props.onChange) {
|
||||
_this.props.onChange(!_this.props.checked, event);
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
|
|||
_inherits(Calendar, _Component);
|
||||
|
||||
function Calendar() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
viewDate: _this.props.selectedDate
|
||||
}, _this.handleDayClick = function (day) {
|
||||
_this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ var Day = function (_Component) {
|
|||
_inherits(Day, _Component);
|
||||
|
||||
function Day() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ var Day = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
|
||||
if (!_this.props.disabled && _this.props.onClick) {
|
||||
_this.props.onClick(_this.props.day);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ var Month = function (_Component) {
|
|||
_inherits(Month, _Component);
|
||||
|
||||
function Month() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ var Month = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
|
||||
if (_this.props.onDayClick) _this.props.onDayClick(day);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
_inherits(DatePicker, _Component);
|
||||
|
||||
function DatePicker() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: _this.props.active
|
||||
}, _this.handleDismiss = function () {
|
||||
_this.setState({ active: false });
|
||||
|
|
@ -115,18 +115,20 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
var _props = this.props;
|
||||
var active = _props.active;
|
||||
var autoOk = _props.autoOk;
|
||||
var cancelLabel = _props.cancelLabel;
|
||||
var inputClassName = _props.inputClassName;
|
||||
var inputFormat = _props.inputFormat;
|
||||
var locale = _props.locale;
|
||||
var maxDate = _props.maxDate;
|
||||
var minDate = _props.minDate;
|
||||
var okLabel = _props.okLabel;
|
||||
var onEscKeyDown = _props.onEscKeyDown;
|
||||
var onOverlayClick = _props.onOverlayClick;
|
||||
var readonly = _props.readonly;
|
||||
var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
|
||||
var value = _props.value;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
|
||||
var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
|
||||
|
||||
var finalInputFormat = inputFormat || _time2.default.formatDate;
|
||||
var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
|
||||
|
|
@ -152,11 +154,13 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
_react2.default.createElement(DatePickerDialog, {
|
||||
active: this.state.active,
|
||||
autoOk: autoOk,
|
||||
cancelLabel: cancelLabel,
|
||||
className: this.props.className,
|
||||
locale: locale,
|
||||
maxDate: maxDate,
|
||||
minDate: minDate,
|
||||
name: this.props.name,
|
||||
okLabel: okLabel,
|
||||
onDismiss: this.handleDismiss,
|
||||
onEscKeyDown: onEscKeyDown || this.handleDismiss,
|
||||
onOverlayClick: onOverlayClick || this.handleDismiss,
|
||||
|
|
@ -175,6 +179,7 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
DatePicker.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
error: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
|
|
@ -185,10 +190,11 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _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,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
|
|||
_inherits(CalendarDialog, _Component);
|
||||
|
||||
function CalendarDialog() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
display: 'months',
|
||||
date: _this.props.value
|
||||
}, _this.handleNewDate = function (value, dayClick) {
|
||||
|
|
@ -65,7 +65,7 @@ var factory = function factory(Dialog, Calendar) {
|
|||
if (Object.prototype.toString.call(date) === '[object Date]') {
|
||||
_this.handleNewDate(date, false);
|
||||
}
|
||||
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(CalendarDialog, [{
|
||||
|
|
@ -142,11 +142,13 @@ var factory = function factory(Dialog, Calendar) {
|
|||
CalendarDialog.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
|
|
@ -166,7 +168,9 @@ var factory = function factory(Dialog, Calendar) {
|
|||
};
|
||||
CalendarDialog.defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
className: '',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ var factory = function factory(Input) {
|
|||
_inherits(Dropdown, _Component);
|
||||
|
||||
function Dropdown() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ var factory = function factory(Input) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: false,
|
||||
up: false
|
||||
}, _this.close = function () {
|
||||
|
|
@ -157,7 +157,7 @@ var factory = function factory(Input) {
|
|||
|
||||
var theme = this.props.theme;
|
||||
|
||||
var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _classnames));
|
||||
var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
|
|
@ -170,7 +170,12 @@ var factory = function factory(Input) {
|
|||
this.props.label ? _react2.default.createElement(
|
||||
'label',
|
||||
{ className: theme.label },
|
||||
this.props.label
|
||||
this.props.label,
|
||||
this.props.required ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.required },
|
||||
' * '
|
||||
) : null
|
||||
) : null,
|
||||
this.props.error ? _react2.default.createElement(
|
||||
'span',
|
||||
|
|
@ -190,12 +195,13 @@ var factory = function factory(Input) {
|
|||
var source = _props.source;
|
||||
var allowBlank = _props.allowBlank;
|
||||
var auto = _props.auto;
|
||||
var required = _props.required;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto']); //eslint-disable-line no-unused-vars
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var selected = this.getSelectedItem();
|
||||
var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
|
||||
var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
|
|
@ -203,6 +209,7 @@ var factory = function factory(Input) {
|
|||
_react2.default.createElement(Input, _extends({}, others, {
|
||||
className: theme.value,
|
||||
onClick: this.handleClick,
|
||||
required: this.props.required,
|
||||
readOnly: true,
|
||||
type: template && selected ? 'hidden' : null,
|
||||
value: selected && selected.label ? selected.label : ''
|
||||
|
|
@ -232,6 +239,7 @@ var factory = function factory(Input) {
|
|||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onFocus: _react.PropTypes.func,
|
||||
required: _react.PropTypes.bool,
|
||||
source: _react.PropTypes.array.isRequired,
|
||||
template: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
|
|
@ -242,6 +250,7 @@ var factory = function factory(Input) {
|
|||
errored: _react.PropTypes.string,
|
||||
field: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
required: _react.PropTypes.bool,
|
||||
selected: _react.PropTypes.string,
|
||||
templateValue: _react.PropTypes.string,
|
||||
up: _react.PropTypes.string,
|
||||
|
|
@ -254,7 +263,8 @@ var factory = function factory(Input) {
|
|||
auto: true,
|
||||
className: '',
|
||||
allowBlank: true,
|
||||
disabled: false
|
||||
disabled: false,
|
||||
required: false
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,9 @@
|
|||
> .templateValue {
|
||||
border-bottom: 1px solid $input-text-error-color;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
|
@ -96,6 +99,9 @@
|
|||
font-size: $input-label-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
.required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
|
|||
_inherits(Form, _Component);
|
||||
|
||||
function Form() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
|
||||
event.preventDefault();
|
||||
if (_this.props.onSubmit) _this.props.onSubmit(event);
|
||||
}, _this.onChange = function (field, value, event) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
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 ActivableRendererFactory = function ActivableRendererFactory() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? { delay: 500 } : arguments[0];
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { delay: 500 };
|
||||
return function (ActivableComponent) {
|
||||
var _class, _temp2;
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
|
|||
_inherits(ActivableRenderer, _Component);
|
||||
|
||||
function ActivableRenderer() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: _this.props.active,
|
||||
rendered: _this.props.active
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ var Portal = function (_Component) {
|
|||
function Portal() {
|
||||
_classCallCheck(this, Portal);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(Portal, [{
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ exports.Input = exports.inputFactory = undefined;
|
|||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
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; }; }();
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
|
|||
_inherits(Input, _React$Component);
|
||||
|
||||
function Input() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
|
||||
var _this$props = _this.props;
|
||||
var onChange = _this$props.onChange;
|
||||
var multiline = _this$props.multiline;
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|||
var Panel = function Panel(_ref) {
|
||||
var children = _ref.children;
|
||||
var className = _ref.className;
|
||||
var onScroll = _ref.onScroll;
|
||||
var scrollY = _ref.scrollY;
|
||||
var theme = _ref.theme;
|
||||
|
||||
|
|
@ -31,7 +32,7 @@ var Panel = function Panel(_ref) {
|
|||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ 'data-react-toolbox': 'panel', className: _className },
|
||||
{ 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
|
||||
children
|
||||
);
|
||||
};
|
||||
|
|
@ -39,6 +40,7 @@ var Panel = function Panel(_ref) {
|
|||
Panel.propTypes = {
|
||||
children: _react.PropTypes.any,
|
||||
className: _react.PropTypes.string,
|
||||
onScroll: _react.PropTypes.func,
|
||||
scrollY: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
panel: _react.PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
|
|||
function List() {
|
||||
_classCallCheck(this, List);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(List, [{
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
|
|||
_inherits(ListItem, _Component);
|
||||
|
||||
function ListItem() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
if (_this.props.onClick && !_this.props.disabled) {
|
||||
_this.props.onClick(event);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
|
|||
function ListItemContent() {
|
||||
_classCallCheck(this, ListItemContent);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(ListItemContent, [{
|
||||
|
|
@ -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;
|
||||
|
|
@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
|
|||
_inherits(IconMenu, _Component);
|
||||
|
||||
function IconMenu() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: false
|
||||
}, _this.handleButtonClick = function (event) {
|
||||
_this.setState({ active: !_this.state.active });
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
|
|||
_inherits(Menu, _Component);
|
||||
|
||||
function Menu() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: _this.props.active,
|
||||
rippled: false
|
||||
}, _this.handleDocumentClick = function (event) {
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ var factory = function factory(ripple) {
|
|||
_inherits(MenuItem, _Component);
|
||||
|
||||
function MenuItem() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ var factory = function factory(ripple) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
if (_this.props.onClick && !_this.props.disabled) {
|
||||
_this.props.onClick(event, _this);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,16 +37,28 @@ var Overlay = function (_Component) {
|
|||
_inherits(Overlay, _Component);
|
||||
|
||||
function Overlay() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, Overlay);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
|
||||
if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
|
||||
_this.props.onEscKeyDown(e);
|
||||
}
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(Overlay, [{
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
if (this.props.active) {
|
||||
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
|
||||
document.body.addEventListener('keydown', this.handleEscKey);
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
|
@ -59,25 +71,15 @@ var Overlay = function (_Component) {
|
|||
}, {
|
||||
key: 'componentDidUpdate',
|
||||
value: function componentDidUpdate() {
|
||||
if (this.props.active && !this.escKeyListener) {
|
||||
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
|
||||
if (this.props.active) {
|
||||
document.body.addEventListener('keydown', this.handleEscKey);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
|
||||
if (this.escKeyListener) {
|
||||
document.body.removeEventListener('keydown', this.handleEscKey);
|
||||
this.escKeyListener = null;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'handleEscKey',
|
||||
value: function handleEscKey(e) {
|
||||
if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
|
||||
this.props.onEscKeyDown(e);
|
||||
}
|
||||
document.body.removeEventListener('keydown', this.handleEscKey);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
|
|||
function ProgressBar() {
|
||||
_classCallCheck(this, ProgressBar);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(ProgressBar, [{
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ var factory = function factory(Radio) {
|
|||
_inherits(RadioButton, _Component);
|
||||
|
||||
function RadioButton() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ var factory = function factory(Radio) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
var _this$props = _this.props;
|
||||
var checked = _this$props.checked;
|
||||
var disabled = _this$props.disabled;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
|
|||
_inherits(RadioGroup, _Component);
|
||||
|
||||
function RadioGroup() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
|
||||
if (_this.props.onChange) _this.props.onChange(value);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ var defaults = {
|
|||
};
|
||||
|
||||
var rippleFactory = function rippleFactory() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
var _defaults$options = _extends({}, defaults, options);
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ var rippleFactory = function rippleFactory() {
|
|||
_inherits(RippledComponent, _Component);
|
||||
|
||||
function RippledComponent() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ var rippleFactory = function rippleFactory() {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
ripples: {}
|
||||
}, _this.handleMouseDown = function (event) {
|
||||
if (_this.props.onMouseDown) _this.props.onMouseDown(event);
|
||||
|
|
@ -304,14 +304,14 @@ var rippleFactory = function rippleFactory() {
|
|||
}
|
||||
}, {
|
||||
key: 'renderRipple',
|
||||
value: function renderRipple(key, className, _ref) {
|
||||
value: function renderRipple(key, className, _ref2) {
|
||||
var _classnames;
|
||||
|
||||
var active = _ref.active;
|
||||
var left = _ref.left;
|
||||
var restarting = _ref.restarting;
|
||||
var top = _ref.top;
|
||||
var width = _ref.width;
|
||||
var active = _ref2.active;
|
||||
var left = _ref2.left;
|
||||
var restarting = _ref2.restarting;
|
||||
var top = _ref2.top;
|
||||
var width = _ref2.width;
|
||||
|
||||
var scale = restarting ? 0 : 1;
|
||||
var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ var factory = function factory(ProgressBar, Input) {
|
|||
_inherits(Slider, _Component);
|
||||
|
||||
function Slider() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ var factory = function factory(ProgressBar, Input) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
inputFocused: false,
|
||||
inputValue: null,
|
||||
sliderLength: 0,
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
|
|||
function Snackbar() {
|
||||
_classCallCheck(this, Snackbar);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(Snackbar, [{
|
||||
|
|
@ -79,6 +79,7 @@ var factory = function factory(Overlay, Button) {
|
|||
var _props = this.props;
|
||||
var action = _props.action;
|
||||
var active = _props.active;
|
||||
var children = _props.children;
|
||||
var icon = _props.icon;
|
||||
var label = _props.label;
|
||||
var onClick = _props.onClick;
|
||||
|
|
@ -97,7 +98,8 @@ var factory = function factory(Overlay, Button) {
|
|||
_react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.label },
|
||||
label
|
||||
label,
|
||||
children
|
||||
),
|
||||
action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
|
||||
)
|
||||
|
|
@ -111,9 +113,10 @@ var factory = function factory(Overlay, Button) {
|
|||
Snackbar.propTypes = {
|
||||
action: _react.PropTypes.string,
|
||||
active: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
label: _react.PropTypes.string,
|
||||
label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
onClick: _react.PropTypes.func,
|
||||
onTimeout: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
|
|||
_inherits(Switch, _Component);
|
||||
|
||||
function Switch() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
|
||||
if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
|
||||
if (!_this.props.disabled && _this.props.onChange) {
|
||||
_this.props.onChange(!_this.props.checked, event);
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
|
|||
_inherits(Table, _Component);
|
||||
|
||||
function Table() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
|
||||
if (_this.props.onSelect) {
|
||||
var _this$props = _this.props;
|
||||
var source = _this$props.source;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
|
|||
_inherits(TableRow, _Component);
|
||||
|
||||
function TableRow() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -43,8 +43,21 @@ var factory = function factory(Checkbox) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
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;
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ var Tab = function (_Component) {
|
|||
_inherits(Tab, _Component);
|
||||
|
||||
function Tab() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ var Tab = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
|
||||
if (!_this.props.disabled && _this.props.onClick) {
|
||||
_this.props.onClick(event);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ var TabContent = function (_Component) {
|
|||
function TabContent() {
|
||||
_classCallCheck(this, TabContent);
|
||||
|
||||
return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(TabContent, [{
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
|
|||
_inherits(Tabs, _Component);
|
||||
|
||||
function Tabs() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -52,16 +52,12 @@ var factory = function factory(Tab, TabContent) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
pointer: {}
|
||||
}, _this.handleHeaderClick = function (event) {
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ describe('Tabs', function () {
|
|||
function Composition() {
|
||||
_classCallCheck(this, Composition);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
|
||||
var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
|
||||
|
||||
_this.state = { index: 0 };
|
||||
return _this;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ var Clock = function (_Component) {
|
|||
_inherits(Clock, _Component);
|
||||
|
||||
function Clock() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ var Clock = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
center: { x: null, y: null },
|
||||
radius: 0
|
||||
}, _this.handleHourChange = function (hours) {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ var Face = function (_Component) {
|
|||
_inherits(Face, _Component);
|
||||
|
||||
function Face() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ var Face = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
|
||||
var _this$props = _this.props;
|
||||
var active = _this$props.active;
|
||||
var radius = _this$props.radius;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ var Hand = function (_Component) {
|
|||
_inherits(Hand, _Component);
|
||||
|
||||
function Hand() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ var Hand = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
knobWidth: 0
|
||||
}, _this.handleMouseMove = function (event) {
|
||||
_this.move(_events2.default.getMousePosition(event));
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ var Hours = function (_Component) {
|
|||
_inherits(Hours, _Component);
|
||||
|
||||
function Hours() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ var Hours = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
|
||||
}, _this.handleHandMove = function (degrees, radius) {
|
||||
var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ var Minutes = function (_Component) {
|
|||
_inherits(Minutes, _Component);
|
||||
|
||||
function Minutes() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ var Minutes = function (_Component) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
|
||||
_this.props.onChange(degrees / step);
|
||||
}, _this.handleMouseDown = function (event) {
|
||||
_this.refs.hand.mouseStart(event);
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
_inherits(TimePicker, _Component);
|
||||
|
||||
function TimePicker() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: _this.props.active
|
||||
}, _this.handleDismiss = function () {
|
||||
_this.setState({ active: false });
|
||||
|
|
@ -106,14 +106,16 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
value: function render() {
|
||||
var _props = this.props;
|
||||
var active = _props.active;
|
||||
var cancelLabel = _props.cancelLabel;
|
||||
var format = _props.format;
|
||||
var inputClassName = _props.inputClassName;
|
||||
var okLabel = _props.okLabel;
|
||||
var onEscKeyDown = _props.onEscKeyDown;
|
||||
var onOverlayClick = _props.onOverlayClick;
|
||||
var readonly = _props.readonly;
|
||||
var value = _props.value;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['active', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
|
||||
var others = _objectWithoutProperties(_props, ['active', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
|
||||
|
||||
var formattedTime = value ? _time2.default.formatTime(value, format) : '';
|
||||
return _react2.default.createElement(
|
||||
|
|
@ -133,9 +135,11 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
})),
|
||||
_react2.default.createElement(TimePickerDialog, {
|
||||
active: this.state.active,
|
||||
cancelLabel: cancelLabel,
|
||||
className: this.props.className,
|
||||
format: format,
|
||||
name: this.props.name,
|
||||
okLabel: okLabel,
|
||||
onDismiss: this.handleDismiss,
|
||||
onEscKeyDown: onEscKeyDown,
|
||||
onOverlayClick: onOverlayClick,
|
||||
|
|
@ -152,16 +156,18 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
|
||||
TimePicker.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
error: _react.PropTypes.string,
|
||||
format: _react.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
inputClassName: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _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({
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
|
|||
_inherits(TimePickerDialog, _Component);
|
||||
|
||||
function TimePickerDialog() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
display: 'hours',
|
||||
displayTime: _this.props.value
|
||||
}, _this.handleClockChange = function (value) {
|
||||
|
|
@ -58,7 +58,7 @@ var factory = function factory(Dialog) {
|
|||
if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
|
||||
}, _this.switchDisplay = function (event) {
|
||||
_this.setState({ display: event.target.id });
|
||||
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(TimePickerDialog, [{
|
||||
|
|
@ -154,9 +154,11 @@ var factory = function factory(Dialog) {
|
|||
|
||||
TimePickerDialog.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
format: _react.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
|
|
@ -180,7 +182,9 @@ var factory = function factory(Dialog) {
|
|||
};
|
||||
TimePickerDialog.defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
format: '24hr',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ var defaults = {
|
|||
};
|
||||
|
||||
var tooltipFactory = function tooltipFactory() {
|
||||
var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
|
||||
var _defaults$options = _extends({}, defaults, options);
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
|
|||
_inherits(TooltippedComponent, _Component);
|
||||
|
||||
function TooltippedComponent() {
|
||||
var _Object$getPrototypeO;
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
|
|
@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
|
|||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
|
||||
active: false,
|
||||
position: _this.props.tooltipPosition,
|
||||
visible: false
|
||||
|
|
@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
|
|||
}
|
||||
}, {
|
||||
key: 'activate',
|
||||
value: function activate(_ref) {
|
||||
value: function activate(_ref2) {
|
||||
var _this2 = this;
|
||||
|
||||
var top = _ref.top;
|
||||
var left = _ref.left;
|
||||
var position = _ref.position;
|
||||
var top = _ref2.top;
|
||||
var left = _ref2.left;
|
||||
var position = _ref2.position;
|
||||
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.setState({ visible: true, position: position });
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ var TRANSITIONS = {
|
|||
|
||||
function transitionEventNamesFor(element) {
|
||||
for (var transition in TRANSITIONS) {
|
||||
if (element.style[transition] !== undefined) {
|
||||
if (element && element.style[transition] !== undefined) {
|
||||
return TRANSITIONS[transition];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ function addPrefixesTo(style, property, value) {
|
|||
}
|
||||
|
||||
function prefixer(style) {
|
||||
var defaultValue = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
|
||||
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var _style = defaultValue;
|
||||
for (var property in style) {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
|
||||
exports.default = {
|
||||
renderComponent: function renderComponent(Component) {
|
||||
var props = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
|
||||
var state = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
|
||||
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
|
||||
var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
|
||||
if (state !== {}) {
|
||||
|
|
|
|||
|
|
@ -117,11 +117,18 @@ var dateLocales = {
|
|||
weekdaysLetter: []
|
||||
},
|
||||
ru: {
|
||||
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
|
||||
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
|
||||
monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
|
||||
weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
|
||||
weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
|
||||
weekdaysLetter: []
|
||||
},
|
||||
ua: {
|
||||
months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
|
||||
monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
|
||||
weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
|
||||
weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
|
||||
weekdaysLetter: []
|
||||
}
|
||||
};
|
||||
var time = {
|
||||
|
|
@ -141,33 +148,33 @@ var time = {
|
|||
return d.getHours() >= 12 ? 'pm' : 'am';
|
||||
},
|
||||
getFullMonth: function getFullMonth(d) {
|
||||
var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
|
||||
var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
||||
|
||||
var month = d.getMonth();
|
||||
var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
|
||||
return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
|
||||
},
|
||||
getShortMonth: function getShortMonth(d) {
|
||||
var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
|
||||
var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
||||
|
||||
var month = d.getMonth();
|
||||
var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
|
||||
return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
|
||||
},
|
||||
getFullDayOfWeek: function getFullDayOfWeek(day) {
|
||||
var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
|
||||
var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
||||
|
||||
var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
|
||||
return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
|
||||
},
|
||||
getShortDayOfWeek: function getShortDayOfWeek(day) {
|
||||
var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
|
||||
var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
||||
|
||||
var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
|
||||
return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
|
||||
},
|
||||
getDayOfWeekLetter: function getDayOfWeekLetter(day) {
|
||||
var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
|
||||
var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
||||
|
||||
var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
|
||||
return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
|
||||
|
|
@ -262,7 +269,7 @@ var time = {
|
|||
return diff1 < diff2 ? date1 : date2;
|
||||
},
|
||||
formatDate: function formatDate(date) {
|
||||
var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
|
||||
var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
|
||||
|
||||
if (locale === 'en') {
|
||||
return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ exports.default = {
|
|||
return angle < 0 ? 360 + angle : angle;
|
||||
},
|
||||
range: function range() {
|
||||
var start = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
|
||||
var stop = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
|
||||
var step = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
|
||||
var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
||||
var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
||||
var _start = 0;
|
||||
var _stop = start;
|
||||
|
||||
|
|
|
|||
11
package.json
11
package.json
|
|
@ -2,7 +2,7 @@
|
|||
"name": "react-toolbox",
|
||||
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
|
||||
"homepage": "http://www.react-toolbox.com",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.3",
|
||||
"main": "./lib",
|
||||
"author": {
|
||||
"name": "React Toolbox Team",
|
||||
|
|
@ -38,7 +38,8 @@
|
|||
"dependencies": {
|
||||
"classnames": "~2.2.5",
|
||||
"core-js": "~2.4.0",
|
||||
"react-css-themr": "~1.2.0"
|
||||
"normalize.css": "~5.0.0",
|
||||
"react-css-themr": "~1.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "~6.4.0",
|
||||
|
|
@ -72,7 +73,6 @@
|
|||
"karma-webpack": "~1.7.0",
|
||||
"mocha": "~3.0.1",
|
||||
"node-sass": "~3.7.0",
|
||||
"normalize.css": "~4.2.0",
|
||||
"phantomjs": "~2.1.7",
|
||||
"phantomjs-polyfill": "0.0.2",
|
||||
"phantomjs-prebuilt": "~2.1.7",
|
||||
|
|
@ -105,17 +105,16 @@
|
|||
"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": {
|
||||
"classnames": "~2.2.0",
|
||||
"immutability-helper": "~2.0.0",
|
||||
"normalize.css": "~4.2.0",
|
||||
"react": "~0.14 || ~15.3.0",
|
||||
"react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
|
||||
"react-dom": "~0.14.0 || ~15.3.0"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import GithubIcon from './github_icon';
|
||||
import { Button, IconButton } from '../../components/button';
|
||||
import { Button, IconButton, BrowseButton } from '../../components/button';
|
||||
|
||||
const ButtonTest = () => (
|
||||
<section>
|
||||
|
|
@ -35,7 +35,12 @@ const ButtonTest = () => (
|
|||
<span style={{verticalAlign: 'middle'}}>Menu</span>
|
||||
<IconButton><GithubIcon /></IconButton>
|
||||
<span style={{verticalAlign: 'middle'}}>Github</span>
|
||||
</section>
|
||||
<h5>Browse Button</h5>
|
||||
<br/>
|
||||
<BrowseButton icon='folder_open' label='BROWSE' raised primary />
|
||||
|
||||
<BrowseButton label='BROWSE' raised />
|
||||
</section>
|
||||
);
|
||||
|
||||
function rippleEnded () {
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue