render() { const {clickHandler, icon, label, slug} = this.props; const classes = classnames('action tooltip__wrapper', { [`action--${slug}`]: slug != null, }); return ( <Tooltip content={label} onClick={clickHandler} position="bottom" wrapperClassName={classes}> {icon} <span className="action__label">{label}</span> </Tooltip> ); }
render() { const classes = classnames('application__view', { [`application__view--${this.props.modifier}`]: this.props.modifier != null, }); return <div className={classes}>{this.props.children}</div>; }
getNavigationItems(items) { return items.map(item => { const classes = classnames(this.props.itemClassName, { [this.props.selectedClassName]: item.slug === this.state.selectedItem, }); return ( <li className={classes} key={item.slug} onClick={this.handleItemClick.bind(this, item)}> {item.label} </li> ); }); }
export function torrentStatusClasses(torrent, ...classes) { return classnames(classes, { 'torrent--has-error': torrent.status.includes(torrentStatusMap.error), 'torrent--is-stopped': torrent.status.includes(torrentStatusMap.stopped), 'torrent--is-downloading': torrent.status.includes(torrentStatusMap.downloading), 'torrent--is-downloading--actively': torrent.status.includes(torrentStatusMap.activelyDownloading), 'torrent--is-uploading--actively': torrent.status.includes(torrentStatusMap.activelyUploading), 'torrent--is-seeding': torrent.status.includes(torrentStatusMap.seeding), 'torrent--is-completed': torrent.status.includes(torrentStatusMap.complete), 'torrent--is-checking': torrent.status.includes(torrentStatusMap.checking), 'torrent--is-inactive': torrent.status.includes(torrentStatusMap.inactive), }); }
function Feature ({ imageUrl, title, description }) { const imgUrl = useBaseUrl(imageUrl) return ( <div className={classnames('col col--4', styles.feature)}> {imgUrl && ( <div className='text--center'> <div className='feature-image-wrapper'> <img className={styles.featureImage} src={imgUrl} alt={title} /> </div> </div> )} <h3 className='text--center'>{title}</h3> <p>{description}</p> </div> ) }
render() { const classes = classnames(this.props.baseClassName, { [`${this.props.baseClassName}--${this.props.modifier}`]: this.props.baseClassName, [this.props.className]: this.props.className, }); return <div className={classes}>{this.props.children}</div>; }
renderDependencyList() { const {dependencies} = this.props; const listItems = Object.keys(dependencies).map(id => { const {message, satisfied} = dependencies[id]; const statusIcon = ICONS.satisfied; const classes = classnames('dependency-list__dependency', { 'dependency-list__dependency--satisfied': satisfied, }); return ( <li className={classes} key={id}> <span className="dependency-list__dependency__icon">{statusIcon}</span> <span className="dependency-list__dependency__message">{message}</span> </li> ); }); return <ul className="dependency-list">{listItems}</ul>; }
getNavigationItems(items) { return items.map(item => { let selectedSlug = null; if (this.state.selectedItem) { selectedSlug = this.state.selectedItem; } else { selectedSlug = this.props.defaultItem; } const classes = classnames(this.props.itemClassName, { [this.props.selectedClassName]: item.slug === selectedSlug, }); return ( <li className={classes} key={item.slug} onClick={this.handleItemClick.bind(this, item)}> {item.label} </li> ); }); }
render() { const tabs = Object.keys(this.props.tabs).map(tabId => { const currentTab = this.props.tabs[tabId]; currentTab.id = tabId; const classes = classnames('modal__tab', { 'is-active': tabId === this.props.activeTabId, }); return ( <li className={classes} key={tabId} onClick={this.handleTabClick.bind(this, currentTab)}> {currentTab.label} </li> ); }); return <ul className="modal__tabs">{tabs}</ul>; }
render() { const classes = classnames('sortable-list', this.props.className); return ( <ul className={classes} onMouseDown={this.handleMouseDown} ref={ref => { this.sortableListRef = ref; }}> <SortableListItemDragLayer items={this.state.items} listOffset={this.state.listOffset} renderItem={this.props.renderItem} /> {this.getItemList()} </ul> ); }
getDropdownMenuItems(listItems) { return listItems.map((property, index) => { const classes = classnames('dropdown__item menu__item', property.className, { 'is-selectable': property.selectable !== false, 'is-selected': property.selected, }); let clickHandler = null; if (property.selectable !== false) { clickHandler = this.handleItemSelect.bind(this, property); } return ( // TODO: Find a better key // eslint-disable-next-line react/no-array-index-key <li className={classes} key={index} onClick={clickHandler}> {property.displayName} </li> ); }); }
render() { const {children, isDragging, isLocked, connectDragSource, connectDropTarget} = this.props; let lockedIcon = null; if (isLocked) { lockedIcon = <LockIcon />; } const classes = classnames('sortable-list__item', { 'sortable-list__item--is-dragging': isDragging, 'sortable-list__item--is-locked': isLocked, }); return connectDragSource( connectDropTarget( <div className={classes}> {lockedIcon} {children} </div>, ), ); }
render() { const classes = classnames(this.props.listClassName, { [this.props.uniqueClassName]: this.props.uniqueClassName, }); return <ul className={classes}>{this.getNavigationItems(this.props.items)}</ul>; }
render() { const classes = classnames('loading-indicator', { 'is-inverse': this.props.inverse, }); return ( <div className={classes} key="loading-indicator"> <div className="loading-indicator__bar loading-indicator__bar--1" /> <div className="loading-indicator__bar loading-indicator__bar--2" /> <div className="loading-indicator__bar loading-indicator__bar--3" /> </div> ); }
render() { const classes = classnames(this.props.baseClassName, { [`${this.props.baseClassName}--${this.props.modifier}`]: this.props.modifier, }); return <div className={classes}>{this.props.children}</div>; }