flet-box 0.0.0-stage → 1.0.2

package/src/widgets/TreeView.js

@@ -0,0 +1,370 @@
+/**
+ * @file TreeView.js
+ * @description Expandable tree with recursive node rendering.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
+
+export const TreeView = (props) => {
+  const {
+    nodes = [],
+    onSelect,
+    onToggle,
+    /** @deprecated Use onPress instead */
+    onPress: onPressProp,
+    expandedNodes = [],
+    indent = 20,
+    showIcons = true,
+    folderIcon = "folder",
+    folderOpenIcon = "folder_open",
+    fileIcon = "insert_drive_file",
+    expandIcon = "chevron_right",
+    collapseIcon = "expand_more",
+    defaultExpanded = false,
+    selectable = true,
+    selectedNodeId = null,
+
+    // Color props for consistency
+    bgColor = "transparent",
+    hoverBgColor = colors.gray100,
+    selectedBgColor = `${colors.primary}20`,
+    textColor = colors.text,
+    selectedTextColor = colors.primary,
+    iconColor = colors.textSecondary,
+    folderIconColor = colors.warning,
+    borderColor = colors.border,
+
+    // Spacing props
+    nodePadding = "6px 4px",
+    nodeGap = 4,
+    childrenGap = 2,
+    borderRadius = 6,
+
+    // Font props
+    fontSize = 14,
+    iconSize = 18,
+
+    // Animation
+    transitionDuration = "0.2s",
+
+    ...rest
+  } = props;
+
+  let expandedSet = new Set(expandedNodes);
+  let currentSelectedId = selectedNodeId;
+  let containerRef = null;
+  let isRendering = false;
+
+  // Initialize with default expanded if needed
+  if (defaultExpanded && expandedNodes.length === 0) {
+    const collectAllIds = (nodeList) => {
+      for (const node of nodeList) {
+        expandedSet.add(node.id);
+        if (node.children && node.children.length) {
+          collectAllIds(node.children);
+        }
+      }
+    };
+    collectAllIds(nodes);
+  }
+
+  const collectAllIds = (nodeList) => {
+    let ids = [];
+    for (const node of nodeList) {
+      ids.push(node.id);
+      if (node.children && node.children.length) {
+        ids = ids.concat(collectAllIds(node.children));
+      }
+    }
+    return ids;
+  };
+
+  const renderNode = (node, level = 0) => {
+    const hasChildren = node.children && node.children.length > 0;
+    const isExpanded = expandedSet.has(node.id);
+    const isSelected = currentSelectedId === node.id;
+
+    // Node wrapper
+    const nodeWrapper = WidgetFactory({
+      tag: "div",
+      display: "flex",
+      flexDirection: "column",
+    });
+
+    // Node row
+    const nodeRow = WidgetFactory({
+      tag: "div",
+      display: "flex",
+      alignItems: "center",
+      gap: `${nodeGap}px`,
+      cursor: selectable ? "pointer" : "default",
+      backgroundColor: isSelected ? selectedBgColor : bgColor,
+      padding: nodePadding,
+      borderRadius:
+        typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      marginLeft: `${level * indent}px`,
+      transition: `background-color ${transitionDuration} ease`,
+      hoverBackgroundColor: hoverBgColor,
+    });
+
+    // Add hover effect
+    if (selectable && !isSelected) {
+      nodeRow.addEventListener("mouseenter", () => {
+        nodeRow.style.backgroundColor = hoverBgColor;
+      });
+      nodeRow.addEventListener("mouseleave", () => {
+        nodeRow.style.backgroundColor = bgColor;
+      });
+    }
+
+    // Selection handler
+    if (selectable) {
+      nodeRow.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const selectCb = onSelect || onPressProp;
+        if (selectCb) {
+          currentSelectedId = node.id;
+          selectCb(node);
+          rerender();
+        }
+      });
+    }
+
+    // Expand/collapse button
+    if (hasChildren) {
+      const toggleBtn = WidgetFactory({
+        tag: "div",
+        width: "24px",
+        height: "24px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        borderRadius: "4px",
+        transition: `background-color ${transitionDuration} ease`,
+        child: WidgetFactory({
+          tag: "span",
+          className: "material-icons",
+          fontSize: `${iconSize}px`,
+          color: iconColor,
+          textContent: isExpanded ? collapseIcon : expandIcon,
+        }),
+      });
+
+      toggleBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (expandedSet.has(node.id)) {
+          expandedSet.delete(node.id);
+        } else {
+          expandedSet.add(node.id);
+        }
+        if (onToggle) onToggle(node.id, expandedSet.has(node.id));
+        rerender();
+      });
+
+      nodeRow.appendChild(toggleBtn);
+    } else {
+      const spacer = WidgetFactory({
+        tag: "div",
+        width: "24px",
+      });
+      nodeRow.appendChild(spacer);
+    }
+
+    // Node icon
+    if (showIcons) {
+      let iconName = node.icon;
+      if (!iconName) {
+        if (hasChildren) {
+          iconName = isExpanded ? folderOpenIcon : folderIcon;
+        } else {
+          iconName = fileIcon;
+        }
+      }
+
+      const iconSpan = WidgetFactory({
+        tag: "span",
+        className: "material-icons",
+        fontSize: `${iconSize + 2}px`,
+        color: node.iconColor || (hasChildren ? folderIconColor : iconColor),
+        textContent: iconName,
+      });
+      nodeRow.appendChild(iconSpan);
+    }
+
+    // Node label
+    const labelSpan = WidgetFactory({
+      tag: "span",
+      flex: 1,
+      fontSize: `${fontSize}px`,
+      fontWeight: isSelected ? "bold" : "normal",
+      color: isSelected ? selectedTextColor : textColor,
+      textContent: node.label,
+    });
+    nodeRow.appendChild(labelSpan);
+
+    // Badge
+    if (node.badge) {
+      const badge = WidgetFactory({
+        tag: "div",
+        backgroundColor: colors.danger,
+        borderRadius: "12px",
+        padding: "2px 8px",
+        child: WidgetFactory({
+          tag: "span",
+          fontSize: "10px",
+          color: "#ffffff",
+          fontWeight: "bold",
+          textContent: String(node.badge),
+        }),
+      });
+      nodeRow.appendChild(badge);
+    }
+
+    nodeWrapper.appendChild(nodeRow);
+
+    // Children
+    if (hasChildren && isExpanded) {
+      const childrenContainer = WidgetFactory({
+        tag: "div",
+        display: "flex",
+        flexDirection: "column",
+        gap: `${childrenGap}px`,
+      });
+
+      node.children.forEach((child) => {
+        childrenContainer.appendChild(renderNode(child, level + 1));
+      });
+      nodeWrapper.appendChild(childrenContainer);
+    }
+
+    return nodeWrapper;
+  };
+
+  const rerender = () => {
+    if (isRendering || !containerRef) return;
+    isRendering = true;
+
+    // Clear container
+    while (containerRef.firstChild) {
+      containerRef.removeChild(containerRef.firstChild);
+    }
+
+    // Build wrapper
+    const wrapper = WidgetFactory({
+      tag: "div",
+      display: "flex",
+      flexDirection: "column",
+      gap: `${childrenGap}px`,
+    });
+
+    nodes.forEach((node) => {
+      wrapper.appendChild(renderNode(node, 0));
+    });
+
+    containerRef.appendChild(wrapper);
+    isRendering = false;
+  };
+
+  // Main container using WidgetFactory
+  const container = WidgetFactory({
+    tag: "div",
+    widgetName: "TreeView",
+    width: "100%",
+    overflow: "auto",
+    ...rest,
+  });
+
+  containerRef = container;
+  rerender();
+
+  // ========== PUBLIC METHODS ==========
+
+  container.updateNodes = (newNodes, selectedId = null) => {
+    nodes.length = 0;
+    nodes.push(...newNodes);
+    if (selectedId !== undefined) currentSelectedId = selectedId;
+    rerender();
+  };
+
+  container.expandAll = () => {
+    const allIds = collectAllIds(nodes);
+    allIds.forEach((id) => expandedSet.add(id));
+    rerender();
+  };
+
+  container.collapseAll = () => {
+    expandedSet.clear();
+    rerender();
+  };
+
+  container.expandTo = (nodeId) => {
+    const findPath = (nodeList, targetId, path = []) => {
+      for (const node of nodeList) {
+        if (node.id === targetId) return [...path, node.id];
+        if (node.children) {
+          const res = findPath(node.children, targetId, [...path, node.id]);
+          if (res) return res;
+        }
+      }
+      return null;
+    };
+    const path = findPath(nodes, nodeId);
+    if (path) {
+      path.forEach((id) => expandedSet.add(id));
+      rerender();
+    }
+  };
+
+  container.collapseTo = (nodeId) => {
+    const findPath = (nodeList, targetId, path = []) => {
+      for (const node of nodeList) {
+        if (node.id === targetId) return [...path, node.id];
+        if (node.children) {
+          const res = findPath(node.children, targetId, [...path, node.id]);
+          if (res) return res;
+        }
+      }
+      return null;
+    };
+    const path = findPath(nodes, nodeId);
+    if (path) {
+      // Keep only the path to target, remove deeper expansions
+      const toKeep = new Set(path);
+      for (const id of expandedSet) {
+        if (!toKeep.has(id)) expandedSet.delete(id);
+      }
+      rerender();
+    }
+  };
+
+  container.getExpanded = () => Array.from(expandedSet);
+  container.getSelected = () => currentSelectedId;
+  container.setSelected = (nodeId) => {
+    currentSelectedId = nodeId;
+    rerender();
+    const selectCb = onSelect || onPressProp;
+    if (selectCb) {
+      const findNode = (nodeList, targetId) => {
+        for (const node of nodeList) {
+          if (node.id === targetId) return node;
+          if (node.children) {
+            const found = findNode(node.children, targetId);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+      const node = findNode(nodes, nodeId);
+      if (node) selectCb(node);
+    }
+  };
+
+  if (typeof rest.ref === "function") {
+    rest.ref(container);
+  }
+
+  return container;
+};
+
+export default TreeView;

package/src/widgets/Video.js

@@ -0,0 +1,92 @@
+/**
+ * @file Video.js
+ * @description `<video>` wrapper; media attributes are set as element properties.
+ */
+import { WidgetFactory } from "../widget-factory/index.js";
+
+export const Video = (props) => {
+  const {
+    src,
+    width = "100%",
+    height = "auto",
+    autoplay = false,
+    controls = true,
+    loop = false,
+    muted = false,
+    poster,
+    ref,
+    ...rest
+  } = props;
+
+  const video = WidgetFactory({
+    tag: "video",
+    widgetName: "Video",
+    src: src,
+    width: width,
+    height: height,
+    ...rest,
+  });
+
+  // Media attributes are element properties, not CSS — apply them directly.
+  video.controls = Boolean(controls);
+  video.loop = Boolean(loop);
+  video.muted = Boolean(muted);
+  video.autoplay = Boolean(autoplay);
+  if (poster) video.poster = poster;
+
+  // Save native methods
+  const nativePlay = video.play.bind(video);
+  const nativePause = video.pause.bind(video);
+
+  // Add custom methods BEFORE calling the ref
+  video.playVideo = () => {
+    nativePlay().catch((error) => console.warn("Video play failed:", error));
+    return video;
+  };
+
+  video.pauseVideo = () => {
+    nativePause();
+    return video;
+  };
+
+  video.stop = () => {
+    nativePause();
+    video.currentTime = 0;
+    return video;
+  };
+
+  video.restart = () => {
+    video.currentTime = 0;
+    nativePlay();
+    return video;
+  };
+
+  video.volumeUp = (step = 0.1) => {
+    video.volume = Math.min(1, video.volume + step);
+    return video;
+  };
+
+  video.volumeDown = (step = 0.1) => {
+    video.volume = Math.max(0, video.volume - step);
+    return video;
+  };
+
+  video.muteVideo = () => {
+    video.muted = true;
+    return video;
+  };
+
+  video.unmuteVideo = () => {
+    video.muted = false;
+    return video;
+  };
+
+  // Call the ref after adding the methods
+  if (ref && typeof ref === "function") {
+    ref(video);
+  }
+
+  return video;
+};
+
+export default Video;

package/src/widgets/index.js

@@ -0,0 +1,52 @@
+// src/widgets/index.js
+export { AdSense } from "./AdSense.js";
+export { AdMob } from "./AdMob.js";
+export { Container } from "./Container.js";
+export { Row } from "./Row.js";
+export { Column } from "./Column.js";
+export { Stack } from "./Stack.js";
+export { ListView } from "./ListView.js";
+export { GridView } from "./GridView.js";
+export { Text } from "./Text.js";
+export { Button } from "./Button.js";
+export { Icon } from "./Icon.js";
+export { Image } from "./Image.js";
+export { Avatar } from "./Avatar.js";
+export { Card } from "./Card.js";
+export { ListTile } from "./ListTile.js";
+export { ProgressBar } from "./ProgressBar.js";
+export { Rating } from "./Rating.js";
+export { Chip } from "./Chip.js";
+export { Badge } from "./Badge.js";
+export { Divider } from "./Divider.js";
+export { Accordion } from "./Accordion.js";
+export { Input } from "./Input.js";
+export { Radio } from "./Radio.js";
+export { Switch } from "./Switch.js";
+export { Checkbox } from "./Checkbox.js";
+export { Dropdown } from "./Dropdown.js";
+export { SnackBar } from "./SnackBar.js";
+export { Modal } from "./Modal.js";
+export { BottomSheet } from "./BottomSheet.js";
+export { AlertDialog } from "./AlertDialog.js";
+export { FloatingActionButton } from "./FloatingActionButton.js";
+export { CodeViewer } from "./CodeViewer.js";
+export { Inspector, printWidgetCode, inspectWidget } from "./Inspector.js";
+export { DraggBox } from "./DraggBox.js";
+export { DroppBox } from "./DroppBox.js";
+export { DataTable } from "./DataTable.js";
+export { Carousel } from "./Carousel.js";
+export { Tooltip } from "./Tooltip.js";
+export { Pagination } from "./Pagination.js";
+export { TreeView } from "./TreeView.js";
+export { Stepper } from "./Stepper.js";
+export { Skeleton } from "./Skeleton.js";
+export { Chart } from "./Chart.js";
+export { QRCode } from "./QRCode.js";
+export { Slider } from "./Slider.js";
+export { InstallButton } from "./InstallButton.js";
+export { Video } from "./Video.js";
+export { Audio } from "./Audio.js";
+export { CircularBar } from "./CircularBar.js";
+export { CircularChart } from "./CircularChart.js";
+export { Markdown } from './Markdown.js';