const CreateForm = ({createItem}) => { return ( <div className='list-item'> <input autoFocus className='create-form' onKeyPress={createItem} onClick={(event) => {event.stopPropagation()}} /> </div> ) }
const RenameForm = ({ renameHandler }) => { return ( <span> <input autoFocus className='rename-input' onKeyPress={renameHandler} onClick={(event)=>{event.stopPropagation()}}/> </span> ) }
<div className="modes"> <button className={`lossless btn ${compression === 'lossless' ? 'active' : ''}`} onClick={(e) => { e.stopPropagation(); e.preventDefault(); props.changeCompressionMode('lossless'); </button> <button className={`lossy btn ${compression === 'lossy' ? 'active' : ''}`} onClick={(e) => { e.stopPropagation(); e.preventDefault(); props.changeCompressionMode('lossy'); disabled={images.length > 0 ? false : true} onClick={(e) => { e.stopPropagation(); props.beginCompression(); }}
disableRipple onClick={e => { e.stopPropagation();
render() { const {done, children, onToggle, onRemove} = this.props; return ( <div className={cx('todo-item')} onClick={onToggle}> <input className={cx('tick')} type="checkbox" checked={done} readOnly/> <div className={cx('text', {done})}>{children}</div> <div className={cx('delete')} onClick={(e) => { onRemove(); e.stopPropagation(); }}>지우기</div> </div> ); }
const defaultSelectInputComponent = (props) => { return ( <input type={props.selectType || 'checkbox'} checked={props.checked} onClick={(e)=>{ const { shiftKey } = e; e.stopPropagation(); props.onClick(props.id, shiftKey, props.row); }} onChange={()=>{}} /> ) }
const Modal = ({ children, close, classes }) => ReactDOM.createPortal( <div className={classes.ModalBg} onClick={close}> <div className={classes.Modal} onClick={e => e.stopPropagation()}> {children} </div> </div>, document.getElementById('modal-root'), )
const SimpleModal = ({ children, onOutsideClick, onEscape }) => ( <div className='simple-modal-container' onClick={onOutsideClick}> <ScrollLock /> <KeyHandler keyEventName={KEYDOWN} keyValue='Escape' onKeyHandle={onEscape} /> <div className='simple-modal-inner' onClick={event => event.stopPropagation()}> {children} </div> </div> )
render () { return ( <input className='Search__input' type='text' onChange={this.setSearchValue} onClick={(e) => e.stopPropagation()} value={this.state.value} disabled={this.props.disabled} placeholder='Search' /> ) }
render() { const { autofocus } = this.props; return ( <div ref={ref => (autofocus && ref && ref.focus())} className="oc-fm--dialog" onKeyDown={this.handleKeyDown} onClick={e => e.stopPropagation()} onMouseDown={e => e.stopPropagation()} onMouseUp={e => e.stopPropagation()} tabIndex="0" > {this.props.children} </div> ); }
const Chip = (props) => { const { children, onRemove, className, ...rest } = props return ( <div className={classnames(className, style['item'])} key={children} {...rest}> {children} <FontAwesomeIcon className={style['button-remove']} icon={faTimes} onClick={event => { event.stopPropagation() onRemove(children) }} /> </div> ) }
const Modal = props => { return ReactDOM.createPortal( <div onClick={props.onDismiss} className="ui dimmer modals visible active"> <div onClick={(e) => e.stopPropagation()} className="ui standard modal visible active"> <div className="header">{props.title}</div> <div className="content">{props.content}</div> <div className="actions">{props.actions}</div> </div> </div>, document.querySelector('#modal') ); }
render() { const {done, children, onToggle, onRemove} = this.props; /* 앞 코드에서는 비구조화 할달을 이용하여 this.props 안에 있는 done, children, onToggle, onRemove 레퍼런스를 만들어 주었습니다. */ return ( <div className={cx('todo-item')} onClick={onToggle}> <input className={cx('tick')} type="checkbox" checked={done} readOnly /> <div className={cx('text', {done})}>{children}</div> <div className={cx('delete')} onClick={(e) => { onRemove(); e.stopPropagation(); } }>[지우기]</div> </div> ) }
const Modal = props => { return reactDom.createPortal( <div className="ui dimmer modals visible active" onClick={props.onDismiss}> <div className="ui standard modal visible active" onClick={e => e.stopPropagation()} > <div className="header">{props.title}</div> <div className="content">{props.content}</div> <div className="actions">{props.actions}</div> </div> </div>, document.querySelector("#modal") ); }
const defaultSelectInputComponent = (props) => { return ( <input type={props.selectType || 'checkbox'} checked={props.checked} onClick={(e)=>{ const { shiftKey } = e; e.stopPropagation(); props.onClick(props.id, shiftKey, props.row); }} onChange={()=>{}} /> ) }