test('composition stuff', () => {
const cls1 = css({ justifyContent: 'center' })
const cls2 = css([cls1])
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
const tree2 = renderer.create(<div className={cls2} />).toJSON()
expect(tree2).toMatchSnapshot()
})
render() {
return (
<Content>
<h3 className={css({ margin: '0 0 0.5rem 0', fontSize: '1rem' })}>
Update - {format(new Date(this.props.date), 'MMMM Do YYYY')}
</h3>
<div className={css({ margin: 0, fontStyle: 'italic' })}>
<Markdown content={this.props.children[0]} />
</div>
</Content>
)
}
render() {
const { children, isEnabled } = this.props;
const { touchScrollTarget } = this.state;
// bail early if not enabled
if (!isEnabled) return children;
/*
* Div
* ------------------------------
* blocks scrolling on non-body elements behind the menu
* NodeResolver
* ------------------------------
* we need a reference to the scrollable element to "unlock" scroll on
* mobile devices
* ScrollLock
* ------------------------------
* actually does the scroll locking
*/
return (
<div>
<div
onClick={this.blurSelectInput}
className={css({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })}
/>
<NodeResolver innerRef={this.getScrollTarget}>{children}</NodeResolver>
{touchScrollTarget ? (
<ScrollLock touchScrollTarget={touchScrollTarget} />
) : null}
</div>
);
}
render() {
const {
appendTo,
children,
controlElement,
menuPlacement,
menuPosition: position,
getStyles,
} = this.props;
const isFixed = position === 'fixed';
// bail early if required elements aren't present
if ((!appendTo && !isFixed) || !controlElement) {
return null;
}
const placement = this.state.placement || coercePlacement(menuPlacement);
const rect = getBoundingClientObj(controlElement);
const scrollDistance = isFixed ? 0 : window.pageYOffset;
const offset = rect[placement] + scrollDistance;
const state = { offset, position, rect };
// same wrapper element whether fixed or portalled
const menuWrapper = (
<div className={css(getStyles('menuPortal', state))}>{children}</div>
);
return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper;
}
const Group = (props: GroupProps) => {
const {
children,
className,
cx,
getStyles,
Heading,
headingProps,
label,
theme,
} = props;
return (
<div
className={cx(
css(getStyles('group', props)),
{ 'group': true },
className,
)}
>
<Heading {...headingProps} theme={theme} getStyles={getStyles} cx={cx}>
{label}
</Heading>
<div>{children}</div>
</div>
);
};
test('object composition', () => {
const imageStyles = css({
width: 96,
height: 96
})
css([
{
color: 'blue'
}
])
const red = css([
{
color: 'red'
}
])
const blue = css([
red,
{
color: 'blue'
}
])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};
`
const tree = renderer.create(<Avatar />).toJSON()
expect(tree).toMatchSnapshot()
})
test('css prop with merge', () => {
const tree = renderer
.create(
<div className={css({ display: 'flex' })} css={{ display: 'block' }} />
)
.toJSON()
expect(tree).toMatchSnapshot()
expect(sheet).toMatchSnapshot()
})
const Menu = (props: MenuProps) => {
const { children, className, cx, getStyles, innerRef, innerProps } = props;
const cn = cx(css(getStyles('menu', props)), { menu: true }, className);
return (
<div className={cn} {...innerProps} ref={innerRef}>
{children}
</div>
);
};
render() {
const { showSearchBox, onClose, stories, theme } = this.props;
return (
<ReactModal
isOpen={showSearchBox}
onAfterOpen={this.onModalOpen}
onRequestClose={onClose}
className={css({
fontSize: theme.mainTextColor,
fontFamily: theme.mainTextFace,
color: theme.mainTextColor,
})}
overlayClassName={css({
position: 'fixed',
height: '100vh',
width: '100vw',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: theme.overlayBackground,
zIndex: 1,
})}
contentLabel="Search"
shouldReturnFocusAfterClose={false}
>
<FuzzySearch
list={formatStories(stories)}
onSelect={this.onSelect}
keys={['value', 'type']}
resultsTemplate={suggestionTemplate}
ref={inputRef => {
this.inputRef = inputRef;
}}
/>
</ReactModal>
);
}
test('handles objects', () => {
const cls1 = css({
float: 'left',
display: 'flex',
color: `${'blue'}`,
fontSize: `${'20px'}`,
height: 50,
width: 20
})
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
})
export const GroupHeading = (props: any) => {
const { className, cx, getStyles, ...cleanProps } = props;
return (
<div
className={cx(
css(getStyles('groupHeading', props)),
{ 'group-heading': true },
className
)}
{...cleanProps}
/>
);
};
const Dot = ({ size, x, y, children, color }) => (
<div
className={css(styles.root, {
borderBottomColor: color,
borderRightWidth: `${size / 2}px`,
borderBottomWidth: `${size / 2}px`,
borderLeftWidth: `${size / 2}px`,
marginLeft: `${x}px`,
marginTop: `${y}px`
})}
>
{children}
</div>
);
const Placeholder = (props: PlaceholderProps) => {
const { children, className, cx, getStyles, innerProps } = props;
return (
<div
className={cx(
css(getStyles('placeholder', props)),
{
'placeholder': true,
},
className
)}
{...innerProps}
>
{children}
</div>
);
};
const Control = (props: ControlProps) => {
const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps, menuIsOpen } = props;
return (
<div
ref={innerRef}
className={cx(emotionCSS(getStyles('control', props)), {
'control': true,
'control--is-disabled': isDisabled,
'control--is-focused': isFocused,
'control--menu-is-open': menuIsOpen
}, className)}
{...innerProps}
>
{children}
</div>
);
};
export const MenuList = (props: MenuListComponentProps) => {
const { children, className, cx, getStyles, isMulti, innerRef } = props;
return (
<div
className={cx(
css(getStyles('menuList', props)),
{
'menu-list': true,
'menu-list--is-multi': isMulti,
},
className
)}
ref={innerRef}
>
{children}
</div>
);
};
export const LoadingMessage = (props: NoticeProps) => {
const { children, className, cx, getStyles, innerProps } = props;
return (
<div
className={cx(
css(getStyles('loadingMessage', props)),
{
'menu-notice': true,
'menu-notice--loading': true,
},
className
)}
{...innerProps}
>
{children}
</div>
);
};
const Option = (props: OptionProps) => {
const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps } = props;
return (
<div
ref={innerRef}
className={cx(
css(getStyles('option', props)),
{
'option': true,
'option--is-disabled': isDisabled,
'option--is-focused': isFocused,
'option--is-selected': isSelected,
},
className
)}
{...innerProps}
>
{children}
</div>
);
};
test('composition with objects', () => {
const cls1 = css({
display: 'flex',
width: 30,
height: 'calc(40vw - 50px)',
'&:hover': { color: 'blue' },
':after': {
content: '" "',
color: 'red'
},
'@media(min-width: 420px)': {
color: 'green'
}
})
const cls2 = css`
${cls1};
justify-content: center;
`
const tree = renderer.create(<div className={cls2} />).toJSON()
expect(tree).toMatchSnapshot()
})
test('source-map nested styles', () => {
const mq = [
'@media(min-width: 420px)',
'@media(min-width: 640px)',
'@media(min-width: 960px)'
]
css({
color: 'blue',
'&:hover': {
'& .name': {
color: 'amethyst',
'&:focus': {
color: 'burlywood',
[mq[0]]: {
color: 'rebeccapurple'
}
}
},
color: 'green'
}
})
expect(sheet).toMatchSnapshot()
})
test('null rule', () => {
const cls1 = css()
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
})
accumulator[label] = (...args) =>
css`
@media (max-width: ${breakpoints[label]}px) {
${css(...args)};
}
`;
render () {
let theme = this.context
// log.log('TabItem: theme: ', theme)
const { connectDragSource, connectDropTarget, isOver } = this.props
var tabWindow = this.props.tabWindow
var tab = this.props.tab
var managed = tabWindow.saved
var tabTitle = tab.title
const tooltipContent = tabTitle + '\n' + tab.url
// span style depending on whether open or closed window
var tabOpenStateStyle = null
var tabCheckItem
if (managed) {
const tabTitleClosedHover = css({
'&:hover': {
color: theme.closedGray
},
})
const tabTitleClosed = cx(styles.closed(theme), tabTitleClosedHover)
if (!tab.open) {
tabOpenStateStyle = tabTitleClosed
}
const checkTitle = tab.saved ? 'Remove bookmark for this tab' : 'Bookmark this tab'
const checkOnClick = tab.saved ? this.handleUnbookmarkTabItem : this.handleBookmarkTabItem
tabCheckItem = (
<HeaderCheckbox
extraUncheckedStyle={tabItemHoverVisible}
title={checkTitle}
open={tab.open}
onClick={checkOnClick}
value={tab.saved}
/>)
} else {
// insert a spacer:
tabCheckItem = <div className={styles.headerButton} />
}
const tabFavIcon = tabItemUtil.mkFavIcon(tab)
var tabActiveStyle = (tab.open && tab.openState.active) ? styles.activeSpan : null
var tabTitleStyle = cx(styles.text, styles.tabTitle, styles.noWrap, tabOpenStateStyle, tabActiveStyle)
var selectedStyle = this.props.isSelected ? styles.tabItemSelected(theme) : null
var dropStyle = isOver ? styles.tabItemDropOver : null
const suspendedIcon = (tab.open && tab.openState.isSuspended) ? <div className={styles.headerButton}>💤</div> : null
const audibleIcon = (tab.open && tab.openState.audible) ? <div className={audibleIconStyle} /> : null
const tabItemCloseButtonStyle = cx(styles.headerButton, tabItemHoverVisible, styles.closeButtonBaseStyle(theme))
const closeButton = (
<HeaderButton
className={tabItemCloseButtonStyle}
visible={tab.open}
title='Close Window'
onClick={this.handleClose} />)
// Note explicit global css class name tabItemHoverContainer here
// Due to limitation of nested class selectors with composition;
// see https://emotion.sh/docs/nested for more info.
const tabItemStyle = cx(styles.noWrap, styles.tabItem, selectedStyle, dropStyle)
return connectDropTarget(connectDragSource(
<div
className = {tabItemStyle + ' tabItemHoverContainer'}
onClick={this.handleClick}>
<div className={styles.rowItemsFixedWidth}>
{tabCheckItem}
{tabFavIcon}
</div>
<a
href={tab.url}
className={tabTitleStyle}
title={tooltipContent}
onClick={this.handleClick}>{tabTitle}</a>
<div className={styles.rowItemsFixedWidth}>
{suspendedIcon}
{audibleIcon}
{closeButton}
</div>
</div>))
}
render() {
const { style, ...other } = this.props;
return <div {...other} className={css(viewStyle, ...style)} />;
}
Z"
/>
<div className={styles.Label}>{label}</div>
</div>
{isExpanded && <div className={styles.Content}>{children}</div>}
</div>
);
}
}
const styles = {
AccordionTab: css({
flex: "1 0 1.5rem",
cursor: "default",
borderBottom: `1px solid ${colors.inverseBackgroundDark}`,
userSelect: "none",
[media.medium]: {
borderRight: `1px solid ${colors.inverseBackgroundDark}`,
},
}),
HeaderRow: css({
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: "0.625rem 0.9375rem",
transition: "background-color 250ms ease-in-out, color 250ms ease-in-out",
color: colors.inverseForegroundLight,
cursor: "pointer",
"&:hover": {
backgroundColor: colors.inverseBackgroundLight,
};
}
export default function ReplWithErrorBoundary() {
return (
<ErrorBoundary>
<Repl />
</ErrorBoundary>
);
}
const styles = {
loader: css({
alignItems: "center",
background: colors.inverseBackgroundDark,
color: colors.inverseForegroundLight,
display: "flex",
height: "100vh",
justifyContent: "center",
}),
loadingAnimation: css({
justifyContent: "center",
margin: "2rem 0 0 0",
}),
loaderContent: css({
margin: "auto",
textAlign: "center",
}),
codeMirrorPanel: css({
flex: "0 0 50%",
}),
optionsColumn: css({
render() {
const {
children,
className,
components,
cx,
data,
getStyles,
innerProps,
isDisabled,
removeProps,
selectProps,
} = this.props;
const { Container, Label, Remove } = components;
const containerInnerProps = {
className: cx(
css(getStyles('multiValue', this.props)),
{
'multi-value': true,
'multi-value--is-disabled': isDisabled,
},
className
),
...innerProps,
};
const labelInnerProps = {
className: cx(
css(getStyles('multiValueLabel', this.props)),
{
'multi-value__label': true,
},
className
),
};
const removeInnerProps = {
className: cx(
css(getStyles('multiValueRemove', this.props)),
{
'multi-value__remove': true,
},
className
),
...removeProps,
};
return (
<Container
data={data}
innerProps={containerInnerProps}
selectProps={selectProps}
>
<Label
data={data}
innerProps={labelInnerProps}
selectProps={selectProps}
>
{children}
</Label>
<Remove
data={data}
innerProps={removeInnerProps}
selectProps={selectProps}
/>
</Container>
);
}
test('nested array', () => {
const cls1 = css([[{ display: 'flex' }]])
const tree = renderer.create(<div className={cls1} />).toJSON()
expect(tree).toMatchSnapshot()
})
import * as log from 'loglevel' // eslint-disable-line no-unused-vars
import * as React from 'react'
import { css } from 'emotion'
const flatButtonStyle = css({
border: '0px',
display: 'inline-block',
backgroundColor: 'rgba(0,0,0,0)',
fontFamily: 'Roboto, sans-serif',
fontSize: 14,
color: '#4285f4',
'&:hover': {
textDecoration: 'none'
}
})
class FlatButton extends React.Component {
handleClick = (event) => {
log.log('FlatButton.handleClick: ', this.props)
event.stopPropagation()
event.preventDefault()
if (this.props.onClick) {
this.props.onClick(event)
}
log.log('FlatButton.handleClick: returning false')
return false
};
render () {
return (
<a
const collapsedStyle = (theme: Object) => cx(styles.headerButton, css({ maskImage: expandIcon }), baseStyle(theme))
font-size: 0.875rem;
padding-left: 1rem;
user-select: none;
input {
margin: 0 0.5rem 0 0;
}
}
`,
item: css({
alignItems: "center",
borderBottom: `1px solid ${colors.inverseBackgroundDark}`,
cursor: "pointer",
display: "flex",
fontSize: "0.875rem",
padding: "0.5rem 1rem",
transition: "all 0.25s ease-out",
"&:hover": {
backgroundColor: "#455569",
},
}),
itemName: css`
flex: 1;
strong {
color: #fff;
}
p {
font-size: 0.75rem;