Tree view · API
Control and interact with the tree view from LiveView or the client.
Set expanded (Client binding)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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>
Set expanded (Client JS)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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([]);
Set expanded (Server)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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
Set selected (Client binding)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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>
Set selected (Client JS)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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([]);
Set selected (Server)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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
Get expanded (Server)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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
Get selected (Server)
Corex
corex
lib
tree_view.ex
tree_view_demo.ex
mix.exs
<.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