ドラッグアンドドロップテーブルに反応する美しいDND(パートI)

今週、私は新しい反応成分を実験的に学習し、それを私の中に実装したかったですEffectiveDonate ウェブサイト.私はサイトのどのような側面がそのUXを改善するためにクールな新機能を使用することができるかを考え始めて、プロフィールページに集中しました.以前に、プロフィールページは、ユーザーが彼らのデフォルトテーマ(健康、教育、その他)を更新するのを許して、また、彼らが主演した非営利的なプロジェクトを見ることができました.プロジェクトのリストはSemantic UI Table , そして、ユーザーがプロジェクトについての重要な情報を表示し、プロジェクトに寄付したり、プロジェクトをその星から削除することができました.しかし、テーブルの順序でソートされたので、ユーザーの最新の主演のプロジェクトは、テーブルの下部にすべての方法だった-最高のUXではない!
簡単に修正してテーブルを並べ替えることができましたが、簡単に修正できました.それで、私はテーブルをよりダイナミックにするために反応のいくつかの解決をブレーンストーミングし始めました.これを見つけたList of Awesome React Components , ドラッグアンドドロップコンポーネントのリストを読んでください.ドラッグアンドドロップは、ユーザーが彼らの主演プロジェクトをカスタマイズできるように素敵な、きれいな方法です!最終的に選んだReact Beautiful DnD - それは、Github、良い命令ビデオと多くの例で17 K以上の星を持ちました.

元のプロファイルページでは、プロジェクトのテーブルを定期的に

何が反応美しいdndですか？

反応美しいDNDは、誰もが使用することができますリストのためのドラッグアンドドロップ機能を作成することを目的と反応パッケージです.メインdesign goal 物理学-彼らはユーザーが手で周りのオブジェクトを移動しているように感じて欲しい.また、キーボードを使用してドラッグアンドドロップを含むアクセシビリティ機能があります.
また、テーブルで、特に意味のUIは、私のためにそれを使用するための契約を封じたテーブルのコンポーネントを反応再生します.

私のウェブサイトに反応美しいdndを実装すること

私を作るためにStarredProjectsList コンポーネントDNDが可能、私はvideo course 反応した美しいdndについてexample 意味UI表コンポーネントの.また、パッケージをインストールすることを確認しました.npm install react-beautiful-dnd --save .
私があなたのプロジェクトのコンポーネントを実装するためのプロセスを徹底的に理解するために上記の2つのリソースを通過することをお勧めしますが、ここではAPIの主要コンポーネントのいくつかのハイライトをあげます.

DragDropContext

このcomponent は、ドラッグアンドドロップを使用することができますあなたの反応ツリーのどの部分を指定する必要があります.私は、私は全体の意味のUIをラップTable コンポーネント<DragDropContext /> . このコンポーネントの必要なプロップはonDragEnd , ドラッグ操作が完了すると、リストまたはテーブルの状態がどのように変更されるかを指示する関数.私のオープニングタグDragDropContext は以下の通りです.<DragDropContext onDragEnd={this.onDragEnd}> .
The onDragEnd メソッドは、starredプロジェクトのインデックスをドラッグし、starredProjects 状態.以下はメソッドの実装です.

  onDragEnd = result => {
    const { destination, source, reason } = result;

    // Not a thing to do...
    if (!destination || reason === 'CANCEL') {
      this.setState({
        draggingRowId: null,
      });
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    const starredProjects = Object.assign([], this.state.starredProjects);
    const project = this.state.starredProjects[source.index];
    starredProjects.splice(source.index, 1);
    starredProjects.splice(destination.index, 0, project);
    this.setState({
      starredProjects
    });
  }

捨てる

エー <Droppable/> コンテナです</Draggable/> アイテム.これは、</Draggable /> s.
のみ必要なプロップ<Droppable /> sは文字列です.droppableId . 私のラップ<Table.Body/> に<Droppable /> コンポーネントは、行をドラッグするデータのコンテナです.

千鳥の

エー <Draggable /> は、実際には上にドラッグされる反応コンポーネントです<Droppable /> それは常にaによって含まれなければならない<Droppable /> , しかし、それは他にも移動することができます<Droppable /> s.
必要な小道具<Draggable /> sは以下の通りです:draggableId and index . これらの柱に関する重要な注意事項
1)draggableId は文字列でなければなりません.私は当初私の整数を作り、私のテーブル行をドラッグすることができなかったときに困惑した.でも一度は.toString() プロップに機能する、それはすべて良かった.
2 )index propは連続整数でなければなりません[1,2,3,etc] . また、それぞれでユニークでなければならない<Droppable /> .
以下は私のコードのスニペットです<Table.Row> イン<Droppable/> アフターmap それぞれのSTARTプロジェクトを

{this.state.starredProjects.map((project, idx) => {
 return (
     <Draggable
        draggableId={project.id.toString()}
        index={idx}
        key={project.id}
     >
       {(provided, snapshot) => (
       <Ref innerRef={provided.innerRef}>
         <Table.Row
     ...

子供機能

についてのもう一つのquirk<Droppable /> and <Draggable /> コンポーネントはReact 子はAを必要とする機能でなければなりませんReactNode . この子関数が作成されない場合、コンポーネントはエラーになります.この関数は2つの引数を含みます:provided and snapshot . 両方のドキュメントを読むことをお勧めします <Draggable /> and <Droppable /> これらの2つの引数が何をするか、そして、彼らがとる小道具を完全に理解するために.
また、<Draggable /> and <Droppable /> コンポーネントはHTMLElement 与える.この要素はref コールバックまたは'Ref' 意味UIコンポーネント.このreact-beautiful-dnd guide の目的を説明する良い仕事をするref コールバックとどのようにエラーを避けるために.
私が使用した方法の例についてはprovided and snapshot 子関数の引数Ref マイテーブルのセマンティックUIコンポーネント<Droppable /> タグ

<Droppable droppableId="table">
    {(provided, snapshot) => (
       <Ref innerRef={provided.innerRef}>
          <Table.Body {...provided.droppableProps}>
          ...

DNDテーブルの操作

結論

全体的に、それは反応美しいプロセスで私のセマンティックUIテーブルを実装する楽しさと有益なプロセスだった.私はコンポーネントのAPIを学ぶことを楽しみました、そして、それは私にとって新しい概念で働くのが面白かったですref コールバック.
私は間違いなく見るvideo course 美しいDNDを反応させ、サンプルコードをオンラインでチェックする.また、私のリファレンスtable component file GitHubでDNDコンポーネントをどのように実装したかを完全に確認します.
今、テーブルコンポーネントで利用可能なUXに満足していますが、次のステップは、ユーザーがページを更新するときに、新しい順番でテーブルを再表示するようにバックエンドで持続するようにすることです.これはバックエンドで少しずつクリエイティブな操作を必要とします.
読んでいただきありがとうございます、ご質問やコメントがあれば私に知らせてください!