React 메뉴 및 리스트 아이템 템플릿 커스터마이징

추천0

페이지 정보

작성자 GrapeCity

작성일 2019-07-23 10:11 조회 3,771회 댓글 0건

본문

관련링크

Wijmo 메뉴 및 목록과 유사한 컨트롤들(ListBox, ComboBox, MultiSelect)을 사용하면 formatItem 이벤트에서 JS 코드 및 DOM API를 사용하여 각 항목에 대한 요소 트리를 생성하여 항목의 컨텐츠를 사용자 정의 할 수 있습니다.

그러나 React의 경우, JSX 마크업에서 속성 바인딩과 함께 React 컴포넌트를 사용하여 항목의 컨텐츠를 선언적으로 정의하는 것이 매력적으로 보입니다.

Wijmo 2019 v2 릴리즈에서, Wijmo React interop에 두 가지 특별한 컴포넌트를 추가하였습니다.

특히 Menu의 경우, MenuItem 및 MenuSeparator 자식 컴포넌트를 추가하여 JSX에서 선언적으로 메뉴 항목 및 구분 기호를 정의할 수 있습니다.
모든 주요 리스트와 유사한 컨트롤 (ListBox, ComboBox, MultiSelect, Menu)에 대해 특별 wjItemTemplate render prop을 추가하여 항목 내용을 그리는 렌더 함수를 지정할 수 있습니다.

순수한 JavaScript 메뉴 컨트롤은 메뉴 항목이 컨트롤의 itemsSource 속성에 바인딩 된 배열에 정의되어 있다고 가정합니다. 즉, 항목은 React 컴포넌트의 모델 부분에 정의되어 있습니다. 실제로 메뉴 항목이 컴포넌트의 UI 부분과 관련되어 있기 때문에 항상 편리하지는 않습니다. 그리고 React UI 수단, 즉 JSX 마크업을 사용하여 이를 정의하는 것이 더 편리합니다.

이제 @grapecity/wijmo.react.input 모듈의 새로운 MenuItem 컴포넌트를 통해 가능합니다. 배열에서 항목을 정의하는 대신 이제 렌더링 함수의 JSX에서 Menu 컴포넌트에 중첩된 MenuItem 컴포넌트를 사용할 수 있습니다. 여기서 모든 MenuItem은 임의의 복잡한 내용으로 별도의 메뉴 항목을 정의합니다. 또한 MenuSeparator 컴포넌트를 사용하여 메뉴 항목 사이에 구분 기호를 삽입할 수 있습니다. 예를 들어, 이 샘플의 다음 JSX 코드는 종료 항목 앞에 풍부한 컨텐츠와 구분 기호가 있는 파일 메뉴 항목을 정의합니다.

<wjInput.Menu
    header="File"
    itemClicked={this.menuItemClicked}>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;
        <b>New</b>
        <br />
        <small><i>create a new file</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;
        <b>Open</b>
        <br />
        <small><i>open an existing file or folder</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;
        <b>Save</b>
        <br />
        <small><i>save the current file</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuSeparator></wjInput.MenuSeparator>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;
        <b>Exit</b>
        <br />
        <small><i>exit the application</i></small>
    </wjInput.MenuItem>
</wjInput.Menu>

데이터를 설명하는 데이터 소스에서 여러 MenuItem을 동적으로 생성할 수도 있습니다.

예를 들어, 이 샘플에서 가져온 아래의 마크업 스니펫은 palettes 배열을 해당 데이터를 나타내는 MenuItem 컴포넌트 배열에 맵핑합니다.

<wjInput.Menu
    header="Palette"
    maxDropDownHeight={300}
    value={this.state.thePalette}>
    {this.palettes.map((value) => {
        return <wjInput.MenuItem value={value.name}>
            {value.name}
            <span style={{float:'right'}}>
            {value.colors.map((color) => {
                return <div style={{
                    backgroundColor: color,
                    display:'inline',
                    padding:'2px',
                    height:'10px',
                    width:'3px'}}>
                </div>
            })}
            </span>
        </wjInput.MenuItem>
    })}
</wjInput.Menu>

여기서 Menu 컴포넌트는 itemsSource 속성을 사용하여 데이터 배열에 바인딩되지 않는 대신 데이터 배열에서 하위 MenuItem 컴포넌트를 생성합니다.

명령(Commands)

매개 변수를 사용하여 명령에 바인드 된 메뉴 항목을 선언적으로 정의할 수 있습니다. MenuItem 컴포넌트는 명령 및 해당 매개 변수에 각각 바인딩 될 수있는 인터페이스에서 cmd 및 cmdParam 속성을 노출합니다.

이 샘플에서 가져온 아래의 마크업 스니펫은 이러한 특성을 사용하여 값을 늘리거나 줄이는 메뉴 항목을 보여줍니다. 각 항목은 명령 매개 변수로 지정된 다른 증분 값을 나타냅니다.

<wjInput.Menu
    header="Tax Commands"
    id="changeTax"
    command={this.state.command}>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.50}>
        Increment by 50%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.25}>
        Increment by 25%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.05}>
        Increment by 5%
    </wjInput.MenuItem>
    <wjInput.MenuSeparator></wjInput.MenuSeparator>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.05}>
        Decrement by 5%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.25}>
        Decrement by 25%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.50}>
        Decrement by 50%
    </wjInput.MenuItem>
</wjInput.Menu>

값 선택기(Value Pickers)

MenuItem 컴포넌트를 도입하면 Menu를 값 선택기로 사용할 수 있습니다.

MenuItem는 항목과 관련된 값을 포함하고 있는 value 속성을 갖고 있습니다. 그리고 메뉴 자체에는 value 속성이 있는데, 이 속성의 값은 메뉴 헤더 옆에 표시됩니다.

이 속성은 부모 컴포넌트 상태에 바인딩 될 수 있으며 itemClicked 이벤트를 사용하여 선택한 메뉴 항목과 관련된 값으로 상태를 업데이트할 수 있습니다.

이 예제에서는 브라우저 이름을 선택하는 데 사용할 수있는 메뉴를 보여줍니다.

render() {
    return <wjInput.Menu
            header="Run"
            value={this.state.browser}
            itemClicked={this.splitButtonItemClicked}>
        <wjInput.MenuItem value="IE">Internet Explorer</wjInput.MenuItem>
        <wjInput.MenuItem value="Chrome">Chrome</wjInput.MenuItem>
        <wjInput.MenuItem value="FF">FireFox</wjInput.MenuItem>
        <wjInput.MenuItem value="Safari">Safari</wjInput.MenuItem>
        <wjInput.MenuItem value="Opera">Opera</wjInput.MenuItem>
    </wjInput.Menu>
}
splitButtonItemClicked = (menu) => {
    this.setState({
        browser: menu.selectedItem.value
    });
};

아이템 템플릿

formatItem 이벤트를 사용하여 ListBox, ComboBox, MultiSelect 및 Menu와 같은 순수한 JS 목록과 유사한 컨트롤에 대한 사용자 정의 항목 내용을 만듭니다. 해당 React 컴포넌트를 사용하면 JSX 마크 업을 사용하여 항목 컨텐츠를 선언적으로 설명 할 수 있습니다.

언급 된 각 컴포넌트는 이제 wjItemTemplate render prop을 노출하여 항목 컨텐츠를 그리는 렌더링 함수를 지정할 수 있습니다.

예를 들어 이 샘플의 다음 마크업은 글리프와 그 이름을 소스 배열에서 가져옵니다.


<wjInput.ListBox
    displayMemberPath="country"
    itemsSource={this.state.glyphs}
    selectedIndexChanged={this.onSelectedIndexChanged}
    initialized={this.onInitialized}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div>
            <div className="wj-glyph">
                <span className={`wj-glyph-${context.item}`}></span>
            </div>
            {context.item}
        </div>
    )}>
</wjInput.ListBox>

wjItemTemplate 렌더 함수는 현재 도면 항목에 대한 정보를 제공하는 객체인 context 매개 변수를 제공합니다. 다음과 같은 속성을 제공합니다.

item - 그 내용이 렌더링되는 데이터 아이템
itemIndex - 렌더링되는 항목의 인덱스
control - React 컴포넌트가 나타내는 기본 순수 JS 컨트롤

MultiSelect 컴포넌트

MultiSelect 컴포넌트는 목록과 유사한 컨트롤과 비교할 때 하나의 특이성이 있습니다.

모든 항목에는 항목의 확인 상태를 변경하는 체크박스가 있어야 합니다. 항목 템플릿을 사용하여 항목을 사용자 정의 할 때 이 기능을 유지하는 것이 좋습니다.

일반적으로 항목 템플릿에서 type = "checkbox" 가 있는 첫번째 input 요소는 확인된 상태 스위치로 사용됩니다.

이 샘플의 다음 마크업 스니펫은 이러한 체크박스가 포함된 항목 템플릿을 정의합니다.

<wjInput.MultiSelect
    displayMemberPath="name"
    headerPath="name"
    placeholder="Countries"
    itemsSource={this.state.data}
    showSelectAllCheckbox={this.state.showSelectAllCheckbox}
    checkedItemsChanged={this._onCheckedItemsChanged.bind(this)}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div className="item">
            <label><input type="checkbox"/>{context.item.name}</label>
            <br/>
            <b>{context.item.city}</b> ({context.item.state})<br/>
            {context.item.address}<br/>
            Phone: <b>{context.item.phone}</b><br/>
            Fax: <b>{context.item.fax}</b><br/>
            Website: <a href="{context.item.site}" target="_blank">{context.item.site}</a><br/>
        </div>
    )}>
</wjInput.MultiSelect>

위에서 우리는 MenuItem 컴포넌트가 데이터 항목 배열에서 동적으로 작성되는 방법을 이미 살펴보았습니다. wjItemTemplate render props는 유사한 기능을 수행하는 또다른 방법입니다. 이 경우 메뉴 컴포넌트는 항목의 배열에 바인딩 되어야하며 wjItemTemplate render props는 각 항목을 렌더링하는 템플릿을 정의합니다. 예를 들어, 이 샘플의 마크업 스니펫은 musicians 배열에 바인딩 된 메뉴의 사용자 정의된 항목을 보여줍니다.

    header="Artists"
    itemClicked={this.menuItemClicked}
    itemsSource={this.musicians}
    maxDropDownHeight={300}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div style={{minWidth: '160px'}}>
            {context.itemIndex + 1}. <b>{context.item.name}</b>
            {context.item.photo ?
            <div>
                <img src={context.item.photo} height="50" />
            </div>
            : null}
        </div>
    )}>
</wjInput.Menu>

결론

새로운 MenuItem 컴포넌트 및 wjItemTemplate render props는 Wijmo의 목록과 유사한 컴포넌트를 더욱 편리하게 사용자 정의할 수 있도록 도와줍니다. 이제 바인딩이 있는 다른 애플리케이션 컴포넌트를 포함하는 풍부한 내용으로 기존의 JSX 마크업을 사용하여 내용을 정의할 수 있습니다.