render () { const statusDOMs = this.props.list.map((elem) => { return (<option key={elem}>{elem}</option>) }) return ( <span ref='dropdown' className={classnames('mdl-textfield', 'mdl-js-textfield', classes.dropdown, (this.props.disabled ? 'is-disabled' : ''))}> <select className='mdl-textfield__input' onChange={this.handleChange} value={this.props.initialValue} disabled={this.props.disabled}> {statusDOMs} </select> </span> ) }
render() { let zoom = global.Mancy.preferences.pageZoomFactor; return ( <div className='preference'> <div className='preference-name'> Page zoom </div> <div className='preference-value'> <select onChange={this.onChangePageZoomFactor} title='Page Zoom Factor'> { _.map(zoomOptions, (z) => { return <option selected={z === zoom} value={z}>{this.getZoomPercentage(z)}</option> }) } </select> </div> </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> ); }
<select {...other}>{children}</select>
render() { let fonts = RepFonts.getSystemFonts(); let font = global.Mancy.preferences.fontFamily; return ( <span className='font-preferences'> { fonts.length ? <div className='preference'> <div className='preference-name'> Font </div> <div className='preference-value'> <select onChange={this.onChangeFontFamily} title='Font Family'> { _.map(fonts, (f) => { return <option selected={f === font} value={f}>{f}</option> }) } </select> </div> </div> : null } </span> ); }
value={fuelSavings.milesDriven}/> miles per <select name="milesDrivenTimeframe" onChange={onChange}
onKeyDown={this.onOuterKeyDownCB} <select { ...valueArgs } ref={el => { this.controlEl = el; }}
<p> <label><span className="w-label">Theme:</span> <select value={this.props.theme} onChange={this.props.onThemeChange} className="form-control"> <option value="default">default</option> <option value="ambiance">ambiance</option> <p> <label><span className="w-label">Font size:</span> <select value={this.props.fontSize} onChange={this.props.onFontSizeChange} className="form-control"> <option value="13px">13px</option> <option value="14px">14px</option>
let SelectWidget = (props) => { let {input, configValue, label} = props; console.log(input); return ( <div className="form-group form-group-flex addon-options-widget-default-value-wrapper"> {label && <label className="control-label form-label-flex-md addon-options-widget-default-value-label">{label}</label>} <div className="form-input-flex"> <select className="form-control addon-options-widget-default-value-select" {...input}> <option value="" key="0-default">Choose One</option> { configValue && configValue.value && configValue.value.map((option, index) => { let price = configValue.pricing && configValue.pricing.value && configValue.pricing.value[option]; return <option key={index} value={option}> {(price && configValue.pricing.operation) ? <div>{option}<PriceAdjustment price={price} operation={configValue.pricing.operation}/></div> : `${option}`} </option> } )} </select> </div> </div> ) }
</div> <div className="acc_type_main"> <select value={type} className="acc_select"
will authenticate your users and be used by the client-side javascript.</span><br/> <strong><span>Select a Server-side language or framework: </span></strong> <select onChange={props.onChange} value={props.value}> <option value="node">NodeJS</option> <option value="php">PHP</option>
var LocaleSwitcher = ({currentLocale, onLocaleChange}) => ( <select value={currentLocale} onChange={e => onLocaleChange(e.target.value)}> {locales.map(lang => <option key={lang} value={lang}>{lang}</option>)} </select> )
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> ); }
<select {...other}>{children}</select>