parent
0e31a465c7
commit
ba3993c811
|
@ -383,7 +383,7 @@ const factory = (Chip, Input) => {
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
placeholder, allowClear, className, clearTooltip, disabled,
|
placeholder, allowClear, className, clearTooltip, disabled,
|
||||||
error, label, value, selectedPosition, theme, multiple
|
error, label, value, selectedPosition, style, theme, multiple
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const inputProps = this.props.inputProps || {};
|
const inputProps = this.props.inputProps || {};
|
||||||
const outerClassName = classnames(theme.autocomplete, {
|
const outerClassName = classnames(theme.autocomplete, {
|
||||||
|
@ -393,7 +393,7 @@ const factory = (Chip, Input) => {
|
||||||
? value && Object.keys(value).length > 0
|
? value && Object.keys(value).length > 0
|
||||||
: value != null);
|
: value != null);
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox="autocomplete" className={outerClassName}>
|
<div data-react-toolbox="autocomplete" className={outerClassName} style={style}>
|
||||||
{selectedPosition === 'above' ? this.renderSelected() : null}
|
{selectedPosition === 'above' ? this.renderSelected() : null}
|
||||||
{withClear ? <span
|
{withClear ? <span
|
||||||
className={'material-icons '+theme.clear}
|
className={'material-icons '+theme.clear}
|
||||||
|
|
|
@ -69,6 +69,7 @@ const factory = (Check) => {
|
||||||
className={className}
|
className={className}
|
||||||
onMouseEnter={onMouseEnter}
|
onMouseEnter={onMouseEnter}
|
||||||
onMouseLeave={onMouseLeave}
|
onMouseLeave={onMouseLeave}
|
||||||
|
style={style}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
{...others}
|
{...others}
|
||||||
|
@ -85,7 +86,6 @@ const factory = (Check) => {
|
||||||
checked={checked}
|
checked={checked}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
rippleClassName={theme.ripple}
|
rippleClassName={theme.ripple}
|
||||||
style={style}
|
|
||||||
theme={theme}
|
theme={theme}
|
||||||
/>
|
/>
|
||||||
{label ? <span data-react-toolbox="label" className={theme.text}>{label}</span> : null}
|
{label ? <span data-react-toolbox="label" className={theme.text}>{label}</span> : null}
|
||||||
|
|
|
@ -20,6 +20,8 @@ const factory = (Overlay, Button) => {
|
||||||
[props.theme.active]: props.active,
|
[props.theme.active]: props.active,
|
||||||
}, props.className);
|
}, props.className);
|
||||||
|
|
||||||
|
const style = props.style; // eslint-disable-line
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Portal className={props.theme.wrapper}>
|
<Portal className={props.theme.wrapper}>
|
||||||
<Overlay
|
<Overlay
|
||||||
|
@ -33,7 +35,7 @@ const factory = (Overlay, Button) => {
|
||||||
theme={props.theme}
|
theme={props.theme}
|
||||||
themeNamespace="overlay"
|
themeNamespace="overlay"
|
||||||
/>
|
/>
|
||||||
<div data-react-toolbox="dialog" className={className}>
|
<div data-react-toolbox="dialog" className={className} style={style}>
|
||||||
<section role="body" className={props.theme.body}>
|
<section role="body" className={props.theme.body}>
|
||||||
{props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
|
{props.title ? <h6 className={props.theme.title}>{props.title}</h6> : null}
|
||||||
{props.children}
|
{props.children}
|
||||||
|
|
|
@ -163,7 +163,7 @@ const factory = (FontIcon) => {
|
||||||
render() {
|
render() {
|
||||||
const { children, defaultValue, disabled, error, floating, hint, icon,
|
const { children, defaultValue, disabled, error, floating, hint, icon,
|
||||||
name, label: labelText, maxLength, multiline, required, role,
|
name, label: labelText, maxLength, multiline, required, role,
|
||||||
theme, type, value, onKeyPress, rows = 1, ...others } = this.props;
|
theme, type, value, onKeyPress, rows = 1, style, ...others } = this.props; // eslint-disable-line
|
||||||
const length = maxLength && value ? value.length : 0;
|
const length = maxLength && value ? value.length : 0;
|
||||||
const labelClassName = classnames(theme.label, { [theme.fixed]: !floating });
|
const labelClassName = classnames(theme.label, { [theme.fixed]: !floating });
|
||||||
|
|
||||||
|
@ -198,7 +198,7 @@ const factory = (FontIcon) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox="input" className={className}>
|
<div data-react-toolbox="input" className={className} style={style}>
|
||||||
{React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
|
{React.createElement(multiline ? 'textarea' : 'input', inputElementProps)}
|
||||||
{icon ? <FontIcon className={theme.icon} value={icon} /> : null}
|
{icon ? <FontIcon className={theme.icon} value={icon} /> : null}
|
||||||
<span className={theme.bar} />
|
<span className={theme.bar} />
|
||||||
|
|
|
@ -58,12 +58,13 @@ const factory = (Thumb) => {
|
||||||
disabled,
|
disabled,
|
||||||
onChange, // eslint-disable-line no-unused-vars
|
onChange, // eslint-disable-line no-unused-vars
|
||||||
ripple,
|
ripple,
|
||||||
|
style, // eslint-disable-line
|
||||||
theme,
|
theme,
|
||||||
...others
|
...others
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
|
const _className = classnames(theme[disabled ? 'disabled' : 'field'], className);
|
||||||
return (
|
return (
|
||||||
<label data-react-toolbox="switch" className={_className}>
|
<label data-react-toolbox="switch" className={_className} style={style}>
|
||||||
<input
|
<input
|
||||||
{...others}
|
{...others}
|
||||||
checked={this.props.checked}
|
checked={this.props.checked}
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
&.selected { background-color: var(--table-selection-color); }
|
&.selected { background-color: var(--table-selection-color); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* common styles for all kinds of cells */
|
||||||
.table > thead > tr > th,
|
.table > thead > tr > th,
|
||||||
.table > tbody > tr > th,
|
.table > tbody > tr > th,
|
||||||
.table > thead > tr > td,
|
.table > thead > tr > td,
|
||||||
|
@ -61,9 +62,15 @@
|
||||||
&:first-of-type { padding-left: 24px; }
|
&:first-of-type { padding-left: 24px; }
|
||||||
&:last-of-type { padding-right: 24px; }
|
&:last-of-type { padding-right: 24px; }
|
||||||
&.numeric { text-align: right; }
|
&.numeric { text-align: right; }
|
||||||
|
|
||||||
|
&.checkboxCell {
|
||||||
|
padding-right: 5px;
|
||||||
|
width: calc(1.8 * var(--unit));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table > thead > tr > td,
|
/* styles for both header and normal body cells */
|
||||||
|
.table > tbody > tr > th,
|
||||||
.table > tbody > tr > td,
|
.table > tbody > tr > td,
|
||||||
.rowCell {
|
.rowCell {
|
||||||
border-top: var(--table-dividers);
|
border-top: var(--table-dividers);
|
||||||
|
@ -71,15 +78,13 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
&.checkboxCell {
|
&.checkboxCell {
|
||||||
padding-right: 5px;
|
|
||||||
width: calc(1.8 * var(--unit));
|
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* styles for header cells both in body and header */
|
||||||
.table > thead > tr > th,
|
.table > thead > tr > th,
|
||||||
.table > tbody > tr > th,
|
.table > tbody > tr > th,
|
||||||
.headCell {
|
.headCell {
|
||||||
|
@ -88,14 +93,17 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
height: var(--table-row-height);
|
height: var(--table-row-height);
|
||||||
line-height: calc(2.4 * var(--unit));
|
line-height: calc(2.4 * var(--unit));
|
||||||
padding-bottom: 8px;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* styles for all cells in header */
|
||||||
|
.table > thead > tr > th,
|
||||||
|
.table > thead > tr > td,
|
||||||
|
.headCell {
|
||||||
|
padding-bottom: 8px;
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
|
|
||||||
&.checkboxCell {
|
&.checkboxCell {
|
||||||
padding-right: 5px;
|
|
||||||
width: calc(1.8 * var(--unit));
|
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
margin: 0 0 3px;
|
margin: 0 0 3px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
"name": "react-toolbox",
|
"name": "react-toolbox",
|
||||||
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
|
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
|
||||||
"homepage": "http://www.react-toolbox.io",
|
"homepage": "http://www.react-toolbox.io",
|
||||||
"version": "2.0.0-beta.21",
|
"version": "2.0.0-beta.22",
|
||||||
"main": "./lib",
|
"main": "./lib",
|
||||||
"module": "./components",
|
"module": "./components",
|
||||||
"author": {
|
"author": {
|
||||||
|
|
Loading…
Reference in New Issue