tango-ui-cw 0.2.6 → 0.2.8

package/src/component/TNotice/useNotice.jsx

@@ -1,53 +0,0 @@
-import { createRoot } from "react-dom/client"; // 使用 React 18 的 createRoot
-import ClayNotice from "./index"; // 引入 ClayNotice 组件
-import successIcon from "../../assets/Notice/成功.png";
-import failIcon from "../../assets/Notice/失败.png";
-import cautionIcon from "../../assets/Notice/警告.png";
-
-// 创建全局通知容器
-let root; // 用于缓存 React 根实例
-
-export function useNotice() {
-  // 初始化通知容器
-  const initializeContainer = () => {
-    let container = document.getElementById("notification-container");
-    if (!container) {
-      container = document.createElement("div");
-      container.id = "notification-container";
-      document.body.appendChild(container);
-    }
-
-    if (!root) {
-      root = createRoot(container); // 仅初始化一次 createRoot
-    }
-
-    return container;
-  };
-
-  // 通知生成函数
-  const addNotice = (type, message) => {
-    initializeContainer(); // 确保容器已初始化
-
-    const iconMap = {
-      success: successIcon,
-      fail: failIcon,
-      caution: cautionIcon,
-    };
-
-    const icon = iconMap[type] || successIcon;
-
-    // 创建通知组件
-    const notice = (
-      <ClayNotice key={Date.now()} type={type} icon={icon} message={message} />
-    );
-
-    // 渲染通知
-    root.render(notice);
-  };
-
-  return {
-    success: (message) => addNotice("success", message),
-    fail: (message) => addNotice("fail", message),
-    caution: (message) => addNotice("caution", message),
-  };
-}

package/src/component/TSearch/TSearch.module.css

@@ -1,80 +0,0 @@
-.searchContainer {
-  position: relative;
-}
-
-.searchInput {
-  width: 300px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  padding: 8px 12px;
-  font-size: 14px;
-  color: black;
-  outline: none;
-  transition: all 0.3s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-}
-
-.searchInput:hover {
-  border-color: #888;
-}
-
-.searchInput:focus {
-  border-color: #4caf50;
-  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
-}
-
-.searchInput_small {
-  height: 32px;
-  font-size: 12px;
-  padding: 6px 10px;
-}
-
-.searchInput_medium {
-  height: 40px;
-  font-size: 14px;
-}
-
-.searchInput_large {
-  height: 48px;
-  font-size: 16px;
-  padding: 10px 14px;
-}
-
-.searchInput_huge {
-  height: 56px;
-  font-size: 18px;
-  padding: 12px 16px;
-}
-
-.searchInputDisabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.searchButton {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-family: Arial, sans-serif;
-  border: none;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: all 0.3s;
-  letter-spacing: 2px;
-  background: #4caf50;
-  color: white;
-}
-
-.searchButton:hover {
-  transition: 0.3s;
-  animation: btn-content 1s;
-  outline: 0.1em solid transparent;
-  outline-offset: 0.2em;
-  box-shadow: 0 0 5px #4caf50;
-}

package/src/component/TSearch/index.jsx

@@ -1,86 +0,0 @@
-import React, { useRef } from "react";
-import PropTypes from "prop-types";
-import styles from "./TSearch.module.css";
-
-export default function Search(props) {
-  const {
-    size = "medium",
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "", // 允许用户自定义 className
-    onSearch,
-    value,
-    defaultValue = "",
-    disabled = false,
-    placeholder = "",
-    path = "",
-  } = props;
-
-  const inputRef = useRef(null);
-
-  const className = `${styles.searchInput} ${styles[`searchInput_${size}`]} ${
-    disabled ? styles.searchInputDisabled : ""
-  } ${userClassName}`;
-
-  const combinedStyle = { ...sx, ...userStyle };
-  const isControlled = value !== undefined && onSearch !== undefined;
-
-  return (
-    <div className={styles.searchContainer} style={{ width: 300 }}>
-      <input
-        className={className}
-        style={combinedStyle}
-        ref={!isControlled ? inputRef : undefined}
-        onKeyDown={(e) =>
-          e.key === "Enter" &&
-          onSearch(isControlled ? value : inputRef.current.value)
-        }
-        value={isControlled ? value : undefined}
-        defaultValue={!isControlled ? defaultValue : undefined}
-        disabled={disabled}
-        placeholder={placeholder}
-      />
-      <button
-        className={styles.searchButton}
-        onClick={() => onSearch(isControlled ? value : inputRef.current.value)}
-      >
-        {path ? (
-          <img
-            src={path}
-            alt="search-icon"
-            style={{ width: 16, height: 16, marginTop: 2, marginBottom: -3 }}
-          />
-        ) : (
-          "搜索"
-        )}
-      </button>
-    </div>
-  );
-};
-
-Search.propTypes = {
-  size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  onSearch: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  value: PropTypes.string,
-  defaultValue: PropTypes.string,
-  disabled: PropTypes.bool,
-  placeholder: PropTypes.string,
-  path: PropTypes.string,
-};
-
-Search.defaultProps = {
-  size: "medium",
-  sx: {},
-  style: {},
-  onSearch: () => {},
-  className: "",
-  value: undefined,
-  defaultValue: "",
-  disabled: false,
-  placeholder: "请输入内容",
-  path: "",
-};
-

package/src/component/TSpace/TSpace.module.css

@@ -1,43 +0,0 @@
-.space,
-.space_default {
-  width: auto;
-  height: auto;
-}
-
-.space_inline {
-  display: inline-block;
-}
-
-.space_fixed {
-  position: fixed;
-}
-
-.space_absolute {
-  position: absolute;
-}
-
-.space_relative {
-  position: relative;
-}
-
-.space_circle {
-  border-radius: 50%;
-}
-
-.space_triangle {
-  width: 0;
-  height: 0;
-  border-left: 50px solid transparent;
-  border-right: 50px solid transparent;
-  border-bottom: 100px solid #4caf50;
-}
-
-.space_halfCircle {
-  width: 100px;
-  height: 50px;
-  background: #4caf50;
-  border-top-left-radius: 100px;
-  border-top-right-radius: 100px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}

package/src/component/TSpace/index.jsx

@@ -1,60 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styles from "./TSpace.module.css";
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-const Space = React.forwardRef((props, ref) => {
-  const {
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "",
-    onClick,
-    children,
-    type = "default",
-  } = props;
-
-  const className = `${styles.space} ${styles[`space_${type}`] || ""} ${userClassName}`;
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...userStyle };
-  
-  return (
-    <div
-      ref={ref}
-      style={combinedStyle}
-      onClick={onClick}
-      className={className}
-    >
-      {children}
-    </div>
-  );
-});
-
-// 定义 PropTypes
-Space.propTypes = {
-  type: PropTypes.oneOf([
-    "default",
-    "inline",
-    "circle",
-    "triangle",
-    "halfCircle",
-    "fixed",
-    "absolute",
-    "relative",
-  ]),
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-// 默认属性
-Space.defaultProps = {
-  type: "default",
-  sx: {},
-  style: {},
-  onClick: () => {},
-  className: "",
-};
-
-export { Space };  // 使用命名导出

package/src/component/TTable/TTable.module.css

@@ -1,26 +0,0 @@
-.wrapper {
-  overflow-x: auto;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-  color: #333;
-}
-
-.thead {
-  background-color: #4caf50;
-  color: white;
-}
-
-.table th,
-.table td {
-  border: 1px solid #ddd;
-  padding: 10px;
-  text-align: left;
-}
-
-.table tbody tr:hover {
-  background-color: #f1f1f1;
-}

package/src/component/TTable/index.jsx

@@ -1,72 +0,0 @@
-import PropTypes from "prop-types";
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-import styles from "./TTable.module.css";
-
-export default function Table({
-  dataSource,
-  columns,
-  sx = {},
-  style = {},
-  className = "",
-}) {
- const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...style };
-
-  return (
-    <div
-      className={`${styles.wrapper} ${className}`}
-      style={{
-        ...combinedStyle,
-        borderRadius: combinedStyle.borderRadius || 0,
-        overflow: "hidden",
-        border: "1px solid #ddd",
-      }}
-    >
-      <table className={styles.table}>
-        <thead className={styles.thead}>
-          <tr>
-            {columns?.map((col) => (
-              <th key={col.key || col.dataIndex}>{col.title}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {dataSource.map((row) => (
-            <tr key={row.key}>
-              {columns.map((col) => (
-                <td key={col.key || col.dataIndex}>
-                  {col.render
-                    ? col.render(row[col.dataIndex], row, dataSource.indexOf(row))
-                    : row[col.dataIndex]}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-Table.propTypes = {
-  dataSource: PropTypes.array.isRequired,
-  columns: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      dataIndex: PropTypes.string.isRequired,
-      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      render: PropTypes.func,
-    })
-  ).isRequired,
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  className: PropTypes.string,
-};
-
-Table.defaultProps = {
-  dataSource: [],
-  sx: {},
-  style: {},
-  className: "",
-};
-

package/src/component/TTooltip/TTooltip.module.css

@@ -1,66 +0,0 @@
-.tooltipWrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip {
-  position: absolute;
-  padding: 8px 15px;
-  font-size: 16px;
-  color: white;
-  background-color: black;
-  border-radius: 8px;
-  white-space: nowrap;
-  z-index: 999;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-/* 添加 Tooltip 的倒三角 */
-.tooltip::after {
-  content: "";
-  position: absolute;
-  border-width: 8px;
-  border-style: solid;
-}
-
-/* Placement 样式：top */
-.tooltipTop .tooltip {
-  bottom: 130%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 8px;
-}
-.tooltipTop .tooltip::after {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-color: black transparent transparent transparent;
-}
-
-/* Placement 样式：bottom */
-.tooltipBottom .tooltip {
-  top: 130%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 8px;
-}
-.tooltipBottom .tooltip::after {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-color: transparent transparent black transparent;
-}
-
-/* Placement 样式：right */
-.tooltipRight .tooltip {
-  top: 50%;
-  left: 110%;
-  transform: translateY(-50%);
-  margin-left: 8px;
-}
-.tooltipRight .tooltip::after {
-  top: 50%;
-  left: -8px;
-  transform: translateY(-50%);
-  border-color: transparent black transparent transparent;
-}

package/src/component/TTooltip/index.jsx

@@ -1,33 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./TTooltip.module.css";
-
-export default function Tooltip({ children, tooltipText, placement = "top" }) {
- const [hovered, setHovered] = useState(false);
-
-  return (
-    <div
-      className={`${styles.tooltipWrapper} ${styles[`tooltip${placement[0].toUpperCase() + placement.slice(1)}`]}`}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      {children}
-      {hovered && (
-        <div className={styles.tooltip}>
-          {tooltipText}
-        </div>
-      )}
-    </div>
-  );
-};
-
-Tooltip.propTypes = {
-  children: PropTypes.node.isRequired,
-  tooltipText: PropTypes.string.isRequired,
-  placement: PropTypes.oneOf(["top", "bottom", "right"]),
-};
-
-Tooltip.defaultProps = {
-  placement: "top",
-};
-