public SuggestChecklist()

in expanded_checklist/visual_interface/src/components/template_editor/TokenSpan.tsx [90:135]


    public SuggestChecklist(): JSX.Element {
        if (this.options.length === 0) {
            return null;
        }
        $('.checklist').scroll(function(){
            $('.checklist').scrollTop($(this).scrollTop());    
        })
        return <div 
            key={this.props.token.displayTag() + this.props.token.key()}
            className="full-width">
            <div><b className='info-header'>Fill in with...</b></div>
            <div style={{ borderBottom: '1px solid #E9E9E9' }}>
            <Checkbox
                indeterminate={
                    templateStore.selectedSuggestIdxes.length && 
                    templateStore.selectedSuggestIdxes.length < this.options.length}
                onChange={this.onCheckAllChange}
                checked={this.options.length && 
                templateStore.selectedSuggestIdxes.length === this.options.length}>
                <i>Check All</i>
            </Checkbox>
            </div>
            <div 
                onScroll={() => {
                    $('.checklist').scroll(function(){
                        $('.checklist').scrollTop($(this).scrollTop());    
                    })
                }}
                style={{height: 100}} className="checklist full-width overflow-y">
            <Checkbox.Group 
                value={templateStore.selectedSuggestIdxes} 
                onChange={this.onSelectSuggests}>
            <Row>
                {this.options.map((s, idx: number) => 
                    <Row key={`${s}${idx}`}><Checkbox value={idx}>
                        <span className="ellipsis mask-token">
                            {this.token.needArticle ?
                                <span className="article-token">{`${utils.genArticle(s)} `}</span> : null}
                            {s}
                        </span>
                    </Checkbox></Row>)}
            </Row>
            </Checkbox.Group>
            </div>
      </div>
    }