var createOptions = function(list) { return list.map(function(item) { var value = item; var text = item; if (item && typeof item === 'object') { value = item.value == null ? item.text : item.value; text = item.text; } return ( <option value={value}>{text}</option> ); }); }
render() { const { children, label, ...reactProps } = this.props; return <option { ...reactProps }>{label}</option>; }
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> ); }
// Buttons storiesOf('Input', module) .add('text', () => ( <Input type="text" /> )) .add('password', () => ( <Input type="password" /> )) .add('textarea', () => ( <Textarea /> )) .add('select', () => ( <Select> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </Select> ))
state.methods.map(function(m) { return <option value={m}>{m}</option>; })
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 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> ); }
_.map(langs, (v, k) => { return <option selected={k === this.state.lang} value={k}>{v}</option> })
<option className="mui--text-placeholder" value=""> {placeholder} </option>
<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> <option value="blackboard">blackboard</option> <option value="cobalt">cobalt</option> <option value="eclipse">eclipse</option> <option value="elegant">elegant</option> <option value="erlang-dark">erlang-dark</option> <option value="lesser-dark">lesser-dark</option> <option value="midnight">midnight</option> <option value="monokai">monokai</option> <option value="neat">neat</option> <option value="night">night</option> <option value="rubyblue">rubyblue</option> <option value="solarized dark">solarized dark</option> <option value="solarized light">solarized light</option> <option value="twilight">twilight</option> <option value="vibrant-ink">vibrant-ink</option> <option value="xq-dark">xq-dark</option> <option value="xq-light">xq-light</option> </select> </label> <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> <option value="16px">16px</option>
// Buttons storiesOf('Input', module) .add('text', () => ( <Input type="text" /> )) .add('password', () => ( <Input type="password" /> )) .add('textarea', () => ( <Textarea /> )) .add('select', () => ( <Select> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</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> ); }