react-dual-listbox 사용 방법

react-dual-listbox란 무엇입니까?

React Dual Listbox는 이중 목록 상자 보기를 렌더링하기 위한 경량 React 구성 요소입니다.

다음은 react-dual-listbox를 사용하는 방법에 대한 최소한의 예입니다.

선호하는 종속성 관리자를 사용하여 라이브러리를 설치할 수 있습니다.
원사 사용:
yarn add react-dual-listbox
npm 사용:
npm install react-dual-listbox --save
이 라이브러리는 Font Awesome 스타일을 사용하며 브라우저에 로드될 것으로 예상합니다.

react-dual-listbox 스타일 지정

편의를 위해 다음 파일 중 하나를 사용하여 라이브러리의 스타일을 사용할 수 있습니다.

node_modules/react-dual-listbox/lib/react-dual-listbox.css

node_modules/react-dual-listbox/src/less/react-dual-listbox.less

node_modules/react-dual-listbox/src/scss/react-dual-listbox.scss

스타일시트에 이러한 파일 중 하나를 포함하거나 CSS 로더를 활용할 수 있습니다.
코드 샘플:

import 'react-dual-listbox/lib/react-dual-listbox.css';

컴포넌트 렌더링 방법

DualListBox는 제어되는 구성 요소이므로 선택한 값을 변경하려면 selected 핸들러와 함께 onChange 속성을 업데이트해야 합니다.

다음은 구성 요소 렌더링을 위한 최소 코드 샘플입니다.

import React from 'react';
import DualListBox from 'react-dual-listbox';

const options = [
    { value: 'one', label: 'Option One' },
    { value: 'two', label: 'Option Two' },
];

class Widget extends React.Component {
    state = {
        selected: ['one'],
    };

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                options={options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

Optgroups도 지원됩니다.

전통적인 <optgroup> 도 지원됩니다.

코드 샘플:

render() {
    const options = [
        {
            label: 'Earth',
            options: [
                { value: 'luna', label: 'Moon' },
            ],
        },
        {
            label: 'Mars',
            options: [
                { value: 'phobos', label: 'Phobos' },
                { value: 'deimos', label: 'Deimos' },
            ],
        },
        {
            label: 'Jupiter',
            options: [
                { value: 'io', label: 'Io' },
                { value: 'europa', label: 'Europa' },
                { value: 'ganymede', label: 'Ganymede' },
                { value: 'callisto', label: 'Callisto' },
            ],
        },
    ];

    return <DualListBox options={options} />;
}

구성 요소 또는 옵션 비활성화

disabled 속성을 전달하여 전체 구성 요소를 비활성화합니다. 또는 항목별로 개별 옵션을 비활성화할 수 있습니다.

코드 샘플:

render() {
    const options = [
        {
            label: 'Mars',
            disabled: true,
            options: [
                { value: 'phobos', label: 'Phobos' },
                { value: 'deimos', label: 'Deimos' },
            ],
        },
        {
            label: 'Jupiter',
            options: [
                { value: 'io', label: 'Io' },
                { value: 'europa', label: 'Europa', disabled: true },
                { value: 'ganymede', label: 'Ganymede' },
                { value: 'callisto', label: 'Callisto' },
            ],
        },
    ];

    return <DualListBox options={options} />;
}

필터링

canFilter 속성을 전달하기만 하면 사용 가능하고 선택된 옵션의 필터링을 활성화할 수 있습니다.

코드 샘플:

render() {
    ...

    return <DualListBox canFilter options={options} />;
}

기본 필터 자리 표시자 텍스트와 필터링 기능을 선택적으로 재정의할 수도 있습니다.

코드 샘플:

render() {
    ...

    return (
        <DualListBox
            canFilter
            filterCallback={(option, filterInput) => {
                if (filterInput === '') {
                    return true;
                }

                return (new RegExp(filterInput, 'i')).test(option.label);
            }}
            filterPlaceholder="Filter..."
            options={options}
        />
    );
}

구성 요소에 맡기지 않고 필터 검색 텍스트를 제어할 수도 있습니다.

코드 샘플:

render() {
    ...

    return (
        <DualListBox
            canFilter
            filter={{
                available: 'europa',
                selected: '',
            }}
            options={options}
            onFilterChange={(filter) => {
                console.log(filter;
            }}
        />
    );
}

동작/버튼 정렬

기본적으로 이동 버튼은 구성 요소의 중앙에 정렬됩니다. 또 다른 옵션은 이러한 작업을 해당 목록 위에 정렬하는 것입니다.

코드 샘플:

render() {
    ...

    return (
        <DualListBox alignActions="top" options={options} />
    );
}

선택 순서 유지

기본적으로 react-dual-listbox는 options 속성의 순서에 따라 선택한 항목을 정렬합니다. 대신 선택 순서를 유지하려는 경우가 있을 수 있습니다. 이 경우 preserveSelectOrder 속성을 추가할 수 있습니다.

선택 순서를 유지할 때 제공된 <optgroup> 는 표시되지 않습니다.

코드 샘플:

render() {
    ...

    return <DualListBox options={options} preserveSelectOrder />;
}

사용자가 항목을 오른쪽으로 이동한 후 선택 항목을 다시 정렬할 수 있도록 하려면 showOrderButtons 속성을 전달할 수도 있습니다.

사용 가능한 옵션 제한

경우에 따라 선택할 수 있는 옵션을 제한하는 것이 바람직할 수 있습니다. 예를 들어 사용자가 태양계의 행성을 검색할 수 있도록 하는 이중 목록 상자 위에 컨트롤이 있을 수 있습니다. 행성이 선택되면 사용 가능한 옵션을 해당 행성의 위성으로 제한하려고 합니다. 이 경우 available 속성을 사용하십시오.

코드 샘플:

render() {
    ...

    // Let's restrict ourselves to the Jovian moons
    const available = ['io', 'europa', 'ganymede', 'callisto'];

    return <DualListBox options={options} available={available} />;
}

기본 아이콘 변경

기본적으로 react-dual-listbox는 구성 요소에 표시되는 다양한 아이콘에 대해 Font Awesome을 사용합니다. 기본값을 변경하려면 아이콘 속성을 전달하고 기본값을 재정의하면 됩니다.

코드 샘플:

<DualListBox
    ...
    icons={{
        moveLeft: <span className="fa fa-chevron-left" />,
        moveAllLeft: [
            <span key={0} className="fa fa-chevron-left" />,
            <span key={1} className="fa fa-chevron-left" />,
        ],
        moveRight: <span className="fa fa-chevron-right" />,
        moveAllRight: [
            <span key={0} className="fa fa-chevron-right" />,
            <span key={1} className="fa fa-chevron-right" />,
        ],
        moveDown: <span className="fa fa-chevron-down" />,
        moveUp: <span className="fa fa-chevron-up" />,
        moveTop: <span className="fa fa-double-angle-up" />,
        moveBottom: <span className="fa fa-double-angle-down" />,
    }}
/>

변경된 값 추출

경우에 따라 선택한 값이 변경될 때 사용자가 강조 표시한 옵션을 아는 것이 유용할 수 있습니다. 이 경우 onChange 핸들러의 두 번째 매개변수를 사용할 수 있습니다.

코드 샘플:

class Widget extends React.Component {
    ...

    onChange = (selected, selection) => {
        console.log('The user highlighted these options', selection);
        this.setState({ selected });
    };

    ...
}

Check the output here...

읽어 주셔서 감사합니다...

행복한 코딩!