Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev
* 'dev' of github.com:soyjavi/react-toolbox: ListItem legend may be a node as well (#1496) Allow pass inverse to IconMenu (#1490) Fix media queries panel height calculations (#1467) Allow to change FontIcon for Tab by passing it into the factory (#1439) Added required?: boolean; (#1491)old
commit
8304c1ec2e
|
@ -191,6 +191,10 @@ export interface DatePickerProps extends ReactToolbox.Props {
|
||||||
* Date object with the currently selected date.
|
* Date object with the currently selected date.
|
||||||
*/
|
*/
|
||||||
value?: Date | string;
|
value?: Date | string;
|
||||||
|
/**
|
||||||
|
* Used in case the input is required.
|
||||||
|
*/
|
||||||
|
required?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DatePickerLocale {
|
export interface DatePickerLocale {
|
||||||
|
|
|
@ -70,19 +70,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& .panel {
|
& .panel {
|
||||||
|
height: calc(100vh - var(--appbar-height));
|
||||||
|
max-height: calc(100vh - var(--appbar-height));
|
||||||
top: var(--appbar-height);
|
top: var(--appbar-height);
|
||||||
|
|
||||||
&:not(.bodyScroll) {
|
&:not(.bodyScroll) {
|
||||||
height: calc(100vh - var(--appbar-height));
|
|
||||||
max-height: calc(100vh - var(--appbar-height));
|
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (--xxs-viewport) and (--portrait) {
|
@media screen and (--xxs-viewport) and (--portrait) {
|
||||||
|
height: calc(100vh - var(--appbar-height-m-portrait));
|
||||||
|
max-height: calc(100vh - var(--appbar-height-m-portrait));
|
||||||
top: var(--appbar-height-m-portrait);
|
top: var(--appbar-height-m-portrait);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (--xs-viewport) and (--landscape) {
|
@media screen and (--xs-viewport) and (--landscape) {
|
||||||
|
height: calc(100vh - var(--appbar-height-m-landscape));
|
||||||
|
max-height: calc(100vh - var(--appbar-height-m-landscape));
|
||||||
top: var(--appbar-height-m-landscape);
|
top: var(--appbar-height-m-landscape);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,10 @@ const factory = (ListItemText) => {
|
||||||
PropTypes.node,
|
PropTypes.node,
|
||||||
]),
|
]),
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
legend: PropTypes.string,
|
legend: PropTypes.oneOfType([
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.node,
|
||||||
|
]),
|
||||||
theme: PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
auto: PropTypes.string,
|
auto: PropTypes.string,
|
||||||
itemContentRoot: PropTypes.string,
|
itemContentRoot: PropTypes.string,
|
||||||
|
|
|
@ -27,6 +27,11 @@ export interface IconMenuProps extends ReactToolbox.Props {
|
||||||
* @default true
|
* @default true
|
||||||
*/
|
*/
|
||||||
iconRipple?: boolean;
|
iconRipple?: boolean;
|
||||||
|
/**
|
||||||
|
* If true, the neutral colors are inverted. Useful if the icon is over a dark background.
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
inverse?: boolean;
|
||||||
/**
|
/**
|
||||||
* Transferred to the Menu component.
|
* Transferred to the Menu component.
|
||||||
* @default true
|
* @default true
|
||||||
|
|
|
@ -16,6 +16,7 @@ const factory = (IconButton, Menu) => {
|
||||||
PropTypes.element,
|
PropTypes.element,
|
||||||
]),
|
]),
|
||||||
iconRipple: PropTypes.bool,
|
iconRipple: PropTypes.bool,
|
||||||
|
inverse: PropTypes.bool,
|
||||||
menuRipple: PropTypes.bool,
|
menuRipple: PropTypes.bool,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
onHide: PropTypes.func,
|
onHide: PropTypes.func,
|
||||||
|
|
|
@ -2,11 +2,11 @@ import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { themr } from 'react-css-themr';
|
import { themr } from 'react-css-themr';
|
||||||
import { FontIcon } from '../font_icon';
|
|
||||||
import { TABS } from '../identifiers';
|
import { TABS } from '../identifiers';
|
||||||
import rippleFactory from '../ripple/Ripple';
|
import rippleFactory from '../ripple/Ripple';
|
||||||
|
import InjectFontIcon from '../font_icon/FontIcon';
|
||||||
|
|
||||||
const factory = (ripple) => {
|
const factory = (ripple, FontIcon) => {
|
||||||
class Tab extends Component {
|
class Tab extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
|
@ -77,7 +77,7 @@ const factory = (ripple) => {
|
||||||
return ripple(Tab);
|
return ripple(Tab);
|
||||||
};
|
};
|
||||||
|
|
||||||
const Tab = factory(rippleFactory({ centered: false }));
|
const Tab = factory(rippleFactory({ centered: false }), InjectFontIcon);
|
||||||
export default themr(TABS)(Tab);
|
export default themr(TABS)(Tab);
|
||||||
export { factory as tabFactory };
|
export { factory as tabFactory };
|
||||||
export { Tab };
|
export { Tab };
|
||||||
|
|
|
@ -9,7 +9,7 @@ import theme from './theme.css';
|
||||||
|
|
||||||
const applyTheme = Component => themr(TABS, theme)(Component);
|
const applyTheme = Component => themr(TABS, theme)(Component);
|
||||||
const ThemedTabContent = applyTheme(TabContent);
|
const ThemedTabContent = applyTheme(TabContent);
|
||||||
const ThemedTab = applyTheme(tabFactory(themedRippleFactory({ centered: false })));
|
const ThemedTab = applyTheme(tabFactory(themedRippleFactory({ centered: false }), FontIcon));
|
||||||
const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent, FontIcon));
|
const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent, FontIcon));
|
||||||
|
|
||||||
export { ThemedTab as Tab };
|
export { ThemedTab as Tab };
|
||||||
|
|
Loading…
Reference in New Issue