Tree view · API

    <.action phx-click={Corex.TreeView.set_expanded_value("tree-api-set-expanded-client", ["repo-corex", "repo-lib"])}>Expand lib</.action>
<.action phx-click={Corex.TreeView.set_expanded_value("tree-api-set-expanded-client", [])}>Collapse all</.action>
<.tree_view id="tree-api-set-expanded-client" class="tree-view" expanded_value={[]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    <.action phx-click={JS.dispatch("corex:tree-view:set-expanded-value", to: "#tree-api-set-expanded-js", detail: %{value: ["repo-corex", "repo-lib"]}, bubbles: false)}>Expand lib</.action>
<.action phx-click={JS.dispatch("corex:tree-view:set-expanded-value", to: "#tree-api-set-expanded-js", detail: %{value: []}, bubbles: false)}>Collapse all</.action>
<.tree_view id="tree-api-set-expanded-js" class="tree-view" expanded_value={[]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const el = document.getElementById("tree-api-set-expanded-js");
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-expanded-value", {
    bubbles: false,
    detail: { value: ["repo-corex", "repo-lib"] },
  })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-expanded-value", {
    bubbles: false,
    detail: { value: [] },
  })
);

  

    const el: HTMLElement | null = document.getElementById("tree-api-set-expanded-js");
const setExpanded = (value: string[]) =>
  el?.dispatchEvent(
    new CustomEvent("corex:tree-view:set-expanded-value", {
      bubbles: false,
      detail: { value },
    })
  );
setExpanded(["repo-corex", "repo-lib"]);
setExpanded([]);

  

    <.action phx-click="tree_api_set_expanded" value="repo-corex,repo-lib">Expand lib</.action>
<.action phx-click="tree_api_set_expanded" value="">Collapse all</.action>
<.tree_view id="tree-api-set-expanded-server" class="tree-view" expanded_value={[]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_set_expanded", %{"value" => raw}, socket) do
  list = if raw == "", do: [], else: String.split(raw, ",", trim: true)
  {:noreply, Corex.TreeView.set_expanded_value(socket, "tree-api-set-expanded-server", list)}
end

  

    <.action phx-click={Corex.TreeView.set_selected_value("tree-api-set-selected-client", ["repo-lib-tree-view-ex"])}>Select tree_view.ex</.action>
<.action phx-click={Corex.TreeView.set_selected_value("tree-api-set-selected-client", [])}>Clear</.action>
<.tree_view id="tree-api-set-selected-client" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    <.action phx-click={JS.dispatch("corex:tree-view:set-selected-value", to: "#tree-api-set-selected-js", detail: %{value: ["repo-lib-tree-view-ex"]}, bubbles: false)}>Select tree_view.ex</.action>
<.action phx-click={JS.dispatch("corex:tree-view:set-selected-value", to: "#tree-api-set-selected-js", detail: %{value: []}, bubbles: false)}>Clear</.action>
<.tree_view id="tree-api-set-selected-js" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    const el = document.getElementById("tree-api-set-selected-js");
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-selected-value", {
    bubbles: false,
    detail: { value: ["repo-lib-tree-view-ex"] },
  })
);
el?.dispatchEvent(
  new CustomEvent("corex:tree-view:set-selected-value", {
    bubbles: false,
    detail: { value: [] },
  })
);

  

    const el: HTMLElement | null = document.getElementById("tree-api-set-selected-js");
const setSelected = (value: string[]) =>
  el?.dispatchEvent(
    new CustomEvent("corex:tree-view:set-selected-value", {
      bubbles: false,
      detail: { value },
    })
  );
setSelected(["repo-lib-tree-view-ex"]);
setSelected([]);

  

    <.action phx-click="tree_api_set_selected" value="repo-lib-tree-view-ex">Select tree_view.ex</.action>
<.action phx-click="tree_api_set_selected" value="">Clear</.action>
<.tree_view id="tree-api-set-selected-server" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_set_selected", %{"value" => raw}, socket) do
  list = if raw == "", do: [], else: String.split(raw, ",", trim: true)
  {:noreply, Corex.TreeView.set_selected_value(socket, "tree-api-set-selected-server", list)}
end

  

    <.action phx-click="tree_api_get_expanded">Get expanded</.action>
<.tree_view id="tree-api-get-expanded-server" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_get_expanded", _params, socket) do
  {:noreply, Corex.TreeView.expanded_value(socket, "tree-api-get-expanded-server", respond_to: :server)}
end

def handle_event("tree_view_expanded_value_response", %{"id" => id, "value" => value}, socket) do
  desc = "#{id}\n#{inspect(value)}"
  {:noreply, Corex.Toast.create(socket, "layout-toast", "tree_expanded", desc, :info, duration: 5000)}
end

  

    <.action phx-click="tree_api_get_selected">Get selected</.action>
<.tree_view id="tree-api-get-selected-server" class="tree-view" expanded_value={["repo-corex", "repo-lib"]} value={["repo-lib-tree-view-ex"]} items={Corex.Tree.new([
      %{label: "corex", value: "repo-corex", children: [
        %{label: "lib", value: "repo-lib", children: [
          %{label: "tree_view.ex", value: "repo-lib-tree-view-ex"},
          %{label: "tree_view_demo.ex", value: "repo-lib-tree-view-demo-ex"}
        ]},
        %{label: "mix.exs", value: "repo-mix-exs"}
      ]}
    ])}>
  <:label>Corex</:label>
  <:branch_indicator><.heroicon name="hero-chevron-right" /></:branch_indicator>
</.tree_view>

  

    def handle_event("tree_api_get_selected", _params, socket) do
  {:noreply, Corex.TreeView.value(socket, "tree-api-get-selected-server", respond_to: :server)}
end

def handle_event("tree_view_value_response", %{"id" => id, "value" => value}, socket) do
  desc = "#{id}\n#{inspect(value)}"
  {:noreply, Corex.Toast.create(socket, "layout-toast", "tree_selected", desc, :info, duration: 5000)}
end