Skip to content

Commit

Permalink
feat: use <span> for text node children <Dimmable>
Browse files Browse the repository at this point in the history
  • Loading branch information
streamich committed Mar 4, 2018
1 parent e64f3bc commit bfe09d6
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/Dimmable/__story__/story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ storiesOf('UI/Dimmable', module)
.add('Text node', () =>
<Toggle>{({on, toggle}) =>
<div>
<Dimmable dim={on}>
<Dimmable dim={on} ms={2000}>
<div style={{width: 500, height: 300, border: '1px solid tomato'}}>
Inline...
</div>
Expand Down Expand Up @@ -66,7 +66,7 @@ storiesOf('UI/Dimmable', module)
</Dimmable>
)
.add('Set color', () =>
<Dimmable color='rgba(255, 255, 255, .3)' dim renderOverlay={(on) => 'Hello'}>
<Dimmable color='rgba(255, 255, 255, .3)' ms={2000} dim renderOverlay={(on) => 'Hello'}>
<div style={{width: 500, height: 300, border: '1px solid tomato'}}>
Inline...
</div>
Expand Down
13 changes: 12 additions & 1 deletion src/Dimmable/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,16 @@ import {Component, Children, cloneElement} from 'react';
import {h, noop} from '../util';
import {Dimmer, IDimmerProps} from '../Dimmer';

const onlyTextNodes = (children) => {
for (let i = 0; i < children.length; i++) {
if (typeof children[i] === 'object') {
return false;
}
}

return true;
};

export interface IDimmableProps extends IDimmerProps {
dim?: boolean;
blur?: number;
Expand All @@ -27,6 +37,7 @@ export class Dimmable extends Component<IDimmableProps> {

if (dim) {
childProps = {
'aria-hidden': 'true',
style: {
pointerEvents: 'none'
}
Expand Down Expand Up @@ -57,7 +68,7 @@ export class Dimmable extends Component<IDimmableProps> {
child = cloneElement(child, childProps);
}
} else {
child = h('div', childProps, ...elementChildren);
child = h(onlyTextNodes(elementChildren) ? 'span' : 'div', childProps, ...elementChildren);
}

return cloneElement(element, {},
Expand Down

0 comments on commit bfe09d6

Please sign in to comment.