const DiskUsageTooltipItem = ({label, value}) => { return ( <li className="diskusage__details-list__item"> <label className="diskusage__details-list__label">{label}</label> <Size className="diskuage__size-used" value={value} /> </li> ); }
render() { return ( <label style={this.state.style} onClick={this.props.onClick} htmlFor={this.props.htmlFor} tabIndex="-1" // firefox bugfix (see #252) > {this.props.text} </label> ); }
render () { const apiKeys = this.props.apiKeys.map(this.renderApiKey) return ( <div className={classnames(classes.container)}> <label className={classes.label}>API Keys</label> {apiKeys} <div className={classes['add-icon']}> <i className='material-icons' onClick={this.props.onAdd}> add_circle_outline </i> </div> </div> ) }
getDropdownHeader() { const {selectedProperty} = this.props; let propertyMessageConfig = TorrentProperties[selectedProperty]; if (propertyMessageConfig == null) { propertyMessageConfig = TorrentProperties.dateAdded; } return ( <button className="dropdown__button"> <label className="dropdown__label"> <FormattedMessage id="torrents.sort.title" defaultMessage="Sort By" /> </label> <span className="dropdown__value"> <FormattedMessage id={propertyMessageConfig.id} defaultMessage={propertyMessageConfig.defaultMessage} /> </span> </button> ); }
function TextInput() { const [state, setState] = useState('') return ( <div> <label htmlFor={'my-input'}>Enter text: </label> <input id={'my-input'} type={'text'} value={state} placeholder={'Type here'} onChange={event => { setState(event.target.value) }} /> <br /> <br /> You entered: {state} </div> ) }
render () { let errMsg if (this.state.message) { errMsg = (<ErrorMessage message={this.state.message} />) } return ( <div className={classes.setting} > <label className={classes.label} htmlFor='background-color'>Background Color</label> {errMsg} <span className={classes.item} > <input className={classes.selector} id='background-color' value={this.state.backgroundColor} onChange={this.handleChange} /> <div className={classes.colorbox} style={{backgroundColor: this.state.backgroundColor}} /> </span> <IconButton onClick={this.handleClickSaveButton} iconName='save' name='Save' disabled={this.state.isUpdating} /> </div> ) }
export default function Limit({ limit = 10000, onUpdate }) { return ( <label> Limit{' '} <InputNumber prefix="Limit" value={limit} step={1000} onChange={(value) => onUpdate({ limit: value, }) } /> </label> ); }
const foldersComp = () => { const optionComps = []; const nonBreakingSpacify = (s) => { // https://stackoverflow.com/a/24437562/561309 return s.replace(/ /g, '\u00a0'); }; const addOptions = (folders, depth) => { for (let i = 0; i < folders.length; i++) { const folder = folders[i]; optionComps.push(<option key={folder.id} value={folder.id}>{nonBreakingSpacify(' '.repeat(depth) + folder.title)}</option>); if (folder.children) addOptions(folder.children, depth + 1); } }; addOptions(this.props.folders, 0); return ( <div className="Folders"> <label>In notebook: </label> <select value={this.props.selectedFolderId || ''} onChange={this.folderSelect_change}> { optionComps } </select> </div> ); }
render () { let input = ( <input type='radio' id={this.props.label} className='mdl-radio__button' name={this.props.groupName} onClick={this.handleChange} ref='radiobutton_input' /> ) return ( <label className={classnames(classes.label, 'mdl-radio', 'mdl-js-radio', 'mdl-js-ripple-effect')} htmlFor={this.props.label} key={this.props.label} ref='radiobutton'> {input} <span className='mdl-radio__label'>{this.props.label}</span> </label> ) }
columnList.map(function(col) { var name = col.name; var canEdit1 = name === 'custom1'; var canEdit = canEdit1 || name === 'custom2'; var title; if (canEdit) { title = canEdit1 ? dataCenter.custom1 : dataCenter.custom2; } else { title = col.title; } return ( <label {...state.dragger} data-name={name} draggable={true} key={name} > <input disabled={col.locked} checked={!!col.selected || !!col.locked} data-name={name} type="checkbox" /> {canEdit ? <span title={title} className="w-network-custom-col">{title}</span> : title} {canEdit ? <span onClick={self.editCustomCol} data-name={col.title} title={'Edit ' + col.title} className="glyphicon glyphicon-edit">{canEdit1 ? 1 : 2}</span> : undefined} </label> ); })
render () { const groupName = this.props.title + ' Group' const radioBoxes = this.props.candidates.map((candidate) => { let checked = candidate === this.props.checkedCandidate return ( <RadioButton key={candidate} onChange={this.props.onClicked} label={candidate} checked={checked} groupName={groupName} /> ) }) const itemID = this.props.title return ( <div className={this.props.className}> <label className={classes.label} htmlFor={itemID}> {this.props.title} </label> <div className={classes.item} id={itemID}> {radioBoxes} </div> </div> ) }
render () { return ( <div className={this.props.className}> <label className={classes.label} htmlFor={this.props.title}> {this.props.title} </label> <div className={classes.container}> <div className={classes.date}> <DatePicker dateFormat={'YYYY-MM-DD'} selected={this.state.date} onChange={this.handleChangeDate} className={classes.datepicker} /> </div> <span className={classes.time}> <DropdownList onChange={this.handleChangeTime} list={timeCandidates} initialValue={this.state.time} /> </span> </div> </div> ) }
render () { const logo = this.getLogo() let deleteIcon if (this.state.isUploading || this.props.logoID === '' || this.props.logoID === undefined) { deleteIcon = <IconButton onClick={this.handleClickDeleteButton} iconName='delete' name='Delete' disabled /> } else { deleteIcon = <IconButton onClick={this.handleClickDeleteButton} iconName='delete' name='Delete' /> } let errMsg if (this.state.message) { errMsg = (<ErrorMessage message={this.state.message} />) } /* eslint-disable react/jsx-no-bind */ // refs callback return ( <div className={classes.container}> <label className={classes.label}>Logo</label> {errMsg} {logo} <input type='file' ref={input => { this.fileSelector = input }} onChange={this.upload} /> <div className={classes.icons}> <IconButton onClick={this.handleClickUploadButton} iconName='file_upload' name='Upload' /> {deleteIcon} </div> </div> ) /* eslint-enable react/jsx-no-bind */ }
render() { const { children, className, label, autoFocus, checked, defaultChecked, defaultValue, disabled, form, name, required, value, onChange, ...reactProps } = this.props; return ( <div { ...reactProps } className={'mui-checkbox ' + className} > <label> <input ref={el => { this.controlEl = el; }} type="checkbox" autoFocus={autoFocus} checked={checked} defaultChecked={defaultChecked} defaultValue={defaultValue} disabled={disabled} form={form} name={name} required={required} value={value} onChange={onChange} /> {label} </label> </div> ); }
const foldersComp = () => { const optionComps = []; const nonBreakingSpacify = (s) => { // https://stackoverflow.com/a/24437562/561309 return s.replace(/ /g, '\u00a0'); }; const addOptions = (folders, depth) => { for (let i = 0; i < folders.length; i++) { const folder = folders[i]; optionComps.push(<option key={folder.id} value={folder.id}>{nonBreakingSpacify(' '.repeat(depth) + folder.title)}</option>); if (folder.children) addOptions(folder.children, depth + 1); } }; addOptions(this.props.folders, 0); return ( <div className="Folders"> <label>In notebook: </label> <select value={this.props.selectedFolderId || ''} onChange={this.folderSelect_change}> { optionComps } </select> </div> ); }