How to use the radium.getState function in radium
To help you get started, we’ve selected a few radium examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
dremio / dremio-oss / dac / ui / src / components / Fields / FieldList.js View on Github 
render() {
const {addItem, style, children} = this.props;
const isHovered = Radium.getState(this.state, 'addItem', ':hover');
const combinedStyle = {':hover': {}, ...styles.addButton, ...style}; // need Radium fakeout
return <a style="{combinedStyle}">
{children}
</a>;
}
}__getDotStyles__ = (dotType, key) => {
const hoverStyle = {
backgroundColor: this.props.styles.foreground,
border: `2px solid ${this.props.styles.foreground}`,
};
return [
dots.base,
{ left: this.props.labelWidth / 2 - dots.base.width / 2},
dots[dotType](this.props.styles),
Radium.getState(this.state, key, ':hover') || Radium.getState(this.state, 'dot-dot', ':hover')
? hoverStyle
: undefined,
]
}render() {
const animateIsHovered = Radium.getState(
this.state,
'button-filter',
':hover',
)
const animateIsFocused = Radium.getState(
this.state,
'button-filter',
':focus',
)
const animateIsActived = Radium.getState(
this.state,
'button-filter',
':active',
)
const isDisabled = this.props.disabled
const isModifier = this.props.modifier
const isAnimated =
!isDisabled && (animateIsHovered || animateIsFocused || animateIsActived)return this.tabs.map(tab => {
const { hasRecommendations, viewState } = this.props;
const isHovered = Radium.getState(this.state, tab.id, ':hover');
const disabledStyle = (tab.id === RECOMMENDED_JOIN && !hasRecommendations) || viewState.get('isInProgress')
? styles.disabled
: {};
const activeTabStyle = (isHovered || this.isActiveTab(tab.id)) && !viewState.get('isInProgress')
? styles.activeTab
: {};
return (
<h5 style="{[styles.tab," data-qa="{tab.name}">
<span>{tab.name}</span>
</h5>const {
prevButtonLabel,
nextButtonLabel,
currentPage,
totalPages,
} = this.props
const buttonLabel =
direction == 'left'
? parseHtml(prevButtonLabel)
: parseHtml(nextButtonLabel)
const isDisabled =
direction == 'left' ? currentPage == 1 : currentPage == totalPages
const linkIsHovered = Radium.getState(
this.state,
`link-${direction}`,
':hover',
)
const linkIsFocused = Radium.getState(
this.state,
`link-${direction}`,
':focus',
)
const linkIsActived = Radium.getState(
this.state,
`link-${direction}`,
':active',
)
const styleList = [const blockDrag = {
opacity: isDragging ? 0 : 1,
cursor: 'move',
margin: '0px',
':hover': {
boxSizing: 'border-box',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24)'
}
};
return connectDragSource(connectDropTarget(
<div style="{blockDrag}">
{Radium.getState(this.state, 'block', ':hover')}
<div style="{resumeThemes[currentTheme].blockDiv}">
this.props.handleUpdateLocalState(e, 'jobTitle', 'blocks', this.props.blockId)} />
<div style="{resumeThemes[currentTheme].pipe}">
|
</div>
this.props.handleUpdateLocalState(e, 'companyName', 'blocks', this.props.blockId)} />
</div></div>':active': {
backgroundColor: this.props.colors.sideBackground,
},
}}
onClick={() => {
this.props.dispatch(publicationFromDoi(this.state.value.match(doiPattern)[1], new Date().getTime()));
this.setState({valid: false, value: ''});
}}
>
{this.props.connected ? (
<svg viewBox="0 0 39 39" height="39px" width="39px">
<path transform="translate(19.946152, 17.361216) rotate(30.000000) translate(-19.946152, -17.361216)" d="M23.4461524,8.86121593 L25.4461524,8.86121593 L25.4461524,23.8612159 L23.4461524,23.8612159 L23.4461524,8.86121593 Z M14.4461524,23.8612159 L25.4461524,23.8612159 L25.4461524,25.8612159 L14.4461524,25.8612159 L14.4461524,23.8612159 Z" style="{{"></path>
</svg>
) : (
<svg viewBox="0 0 39 39" height="39px" width="39px">
<rect height="12" width="2" y="10" x="18.5" fill="{this.props.colors.sideSeparator}"></rect>
<rect height="2" width="2" y="24" x="18.5" fill="{this.props.colors.sideSeparator}"></rect>
</svg>shouldComponentUpdate(nextProps, nextState) {
if (this.props.viewMode !== nextProps.viewMode || this.props.loadStatus !== nextProps.loadStatus || this.props.darkMode !== nextProps.darkMode || this.props.activeFocus !== nextProps.activeFocus || this.props.showBottomLeftMenu !== nextProps.showBottomLeftMenu || this.props.showBottomRightMenu !== nextProps.showBottomRightMenu ) {
return true;
}
if (this.props.tocH1.length !== nextProps.tocH1.length) {
return true;
}
for (let index = nextProps.tocH1.length; index--;) {
if (this.props.tocH1[index].title !== nextProps.tocH1[index].title) {
return true;
}
}
const keys = ['bNav_toc', 'showAllTOCButton', 'bNav_format'];
for (let index = keys.length; index--;) {
if (Radium.getState(this.state, keys[index], ':hover') !== Radium.getState(nextState, keys[index], ':hover')) {
return true;
}
}
for (let index = formattingOptions.length; index--;) {
if (Radium.getState(this.state, 'brNav' + index, ':hover') !== Radium.getState(nextState, 'brNav' + index, ':hover')) {
return true;
}
}
for (let index = nextProps.tocH1.length; index--;) {
if (Radium.getState(this.state, 'blNav' + index, ':hover') !== Radium.getState(nextState, 'blNav' + index, ':hover')) {
return true;
}
}
return false;
},};
return connectDragSource(connectDropTarget(
<div style="{blockDrag}">
this.props.handleUpdateLocalState(e, 'companyName', 'blocks', this.props.blockId)} />
this.props.handleUpdateLocalState(e, 'location', 'blocks', this.props.blockId)} />
{Radium.getState(this.state, 'heading', ':hover') ? (
<img src="{require('styles/assets/ic_remove_circle_outline_black_24px.svg')}"> this.hideBlock(e, this.props.blockId)} />
) : null}
</div>
));
}
}render() {
const { msg } = this.props;
const hover = Radium.getState(this.state, 'dsfsda', ':hover');
return (
<div style="{styles.wrapper}">
<div style="{styles.text}">
{msg('intro.title')}
</div>
<span style="{[styles.circle,">
</span></div>radium
A set of tools to manage inline styles on React elements
