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> ); }
const EmptyState = ({ children, ...props }) => ( <div class="col-md-12"> <div class={cx('text-center', style.emptyStateDivBox)}> <MarkupText id="integration.tasmota.discover.noDeviceFound" /> </div> </div> )
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), }); }
const DeviceConfigurationLink = ({ children, documentKey, user, linkClass }) => ( <a target="_blank" rel="noopener noreferrer" href={`${documentationURL}/${user.language}/docs/integrations/${documentKey}`} class={cx({ [linkClass]: linkClass })} > {children} </a> )
props.systemContainers.map(container => ( <tr> <td>{container.name}</td> <td>{container.created_at_formatted}</td> <td> <span class={cx('badge', { 'badge-success': container.state === 'running', 'badge-warning': container.state !== 'running' })} > <Text id={`systemSettings.containerState.${container.state}`} /> </span> </td> </tr> ))
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>; }
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 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(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> ); }
const EmptyState = () => ( <div class="col-md-12"> <div class={cx('text-center', style.emptyStateDivBox)}> <Text id="integration.tasmota.device.noDeviceFound" /> <div class="mt-5"> <Text id="integration.tasmota.discoverDeviceDescr" /> <Link href="/dashboard/integration/device/tasmota/discover"> <button class="btn btn-outline-primary ml-2"> <Text id="integration.tasmota.discoverTab" /> <i class="fe fe-radio" /> </button> </Link> </div> </div> </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>; }
const EmptyState = ({ children, ...props }) => ( <div class="col-md-12"> <div class={cx('text-center', style.emptyStateDivBox)}> <Text id="integration.rtspCamera.noCameraFound" /> </div> </div> )