tango-ui-cw 0.2.6 → 0.2.8

package/src/component/TColorPicker/index.jsx

@@ -1,107 +0,0 @@
-// 封装的 ColorPicker 组件
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./TColorPicker.module.css";
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-export default function ColorPicker(props) {
-  const {
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "",
-    disabled,
-    onChange,
-    showText
-  } = props;
-
-  const [color, setColor] = useState("#4caf50");
-
-  const handleChange = (e) => {
-    const value = e.target.value;
-    setColor(value);
-    if (onChange) onChange(value);
-  };
-
-  const className = `${styles.colorPicker} ${
-    disabled ? styles.colorPickerDisabled : ""
-  } ${userClassName}`;
-
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  const hexToRgb = (hex) => {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgb(${r}, ${g}, ${b})`;
-  };
-
-  const hexToHsl = (hex) => {
-    let r = parseInt(hex.slice(1, 3), 16) / 255;
-    let g = parseInt(hex.slice(3, 5), 16) / 255;
-    let b = parseInt(hex.slice(5, 7), 16) / 255;
-    let max = Math.max(r, g, b),
-      min = Math.min(r, g, b);
-    let h, s, l = (max + min) / 2;
-
-    if (max === min) {
-      h = s = 0;
-    } else {
-      let d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-        case r:
-          h = (g - b) / d + (g < b ? 6 : 0);
-          break;
-        case g:
-          h = (b - r) / d + 2;
-          break;
-        case b:
-          h = (r - g) / d + 4;
-          break;
-      }
-      h /= 6;
-    }
-
-    return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(
-      l * 100
-    )}%)`;
-  };
-
-  return (
-    <div className={styles.colorPickerWrapper} style={combinedStyle}>
-      <input
-        type="color"
-        value={color}
-        onChange={handleChange}
-        className={className}
-        disabled={disabled}
-      />
-      {showText && (
-        <div className={styles.colorText}>
-          <div>{color.toUpperCase()}</div>
-          <div>{hexToRgb(color)}</div>
-          <div>{hexToHsl(color)}</div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-ColorPicker.propTypes = {
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  showText: PropTypes.bool,
-};
-
-ColorPicker.defaultProps = {
-  sx: {},
-  style: {},
-  className: "",
-  disabled: false,
-  onChange: () => {},
-  showText: false,
-};

package/src/component/TDate/index.jsx

@@ -1,145 +0,0 @@
-import PropTypes from "prop-types";
-import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useFastStyle 函数
-
-export default function Date(props) {
-  const { type = "default", single = false, sx = {}, style: userStyle = {}, en = false } = props|| {};
- // 用于接收 sx 属性设置的样式
-  const sxStyle = useTangoStyle(sx);
-
-  // 合并 sx 和 style，确保 style 优先级更高
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  Date.propTypes = {
-    type: PropTypes.oneOf([
-      "line",
-      "full",
-      "full-line",
-      "year-week",
-      "year-week-line",
-      "week-time",
-      "no-s",
-      "no-s-line",
-      "us-full",
-      "us-full-line",
-    ]),
-    single: PropTypes.bool, // 控制显示“周”或“星期”
-    sx: PropTypes.object, // 自定义样式对象
-    style: PropTypes.object, // 用户传入的 style 属性
-    en: PropTypes.bool, // 控制英文格式
-  };
-
-  Date.defaultProps = {
-    type: "default", // 默认无 type 的格式
-    single: false, // 默认显示 "星期"
-    sx: {},
-    style: {},
-    en: false, // 默认不使用英文
-  };
-
-  // 各类时间格式
-  const formatDate = (type) => {
-    const date = new Date();
-    let locale = en ? "en-US" : "zh-CN";
-    let formattedWeekday = date.toLocaleString(locale, { weekday: "long" });
-    
-    // 如果 single 为 true，替换 "星期" 为 "周"，英文模式不需要转换
-    if (!en && single) {
-      formattedWeekday = formattedWeekday.replace("星期", "周");
-    }
-
-    switch (type) {
-      case "line":
-        return date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }).replaceAll("/", "-");
-      case "full":
-        return `${date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })}`;
-      case "full-line":
-        return `${date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })}`;
-      case "year-week":
-        return `${date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        })} ${formattedWeekday}`;
-      case "year-week-line":
-        return `${date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }).replaceAll("/", "-")} ${formattedWeekday}`;
-      case "week-time":
-        return `${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })}`;
-      case "no-s":
-        return `${date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-        })}`;
-      case "no-s-line":
-        return `${date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-        })}`;
-      case "us-full":
-        return `${date.toLocaleDateString("en-US", {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        })} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })}`;
-      case "us-full-line":
-        return `${date.toLocaleDateString("en-US", {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        }).replaceAll("/", "-")} ${formattedWeekday} ${date.toLocaleTimeString(locale, {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })}`;
-      default:
-        // 默认格式 年/月/日
-        return date.toLocaleDateString(locale, {
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-        });
-    }
-  };
-
-  return <div style={combinedStyle}>{formatDate(type)}</div>;
-};
-

package/src/component/TDatePicker/TDatePicker.module.css

@@ -1,12 +0,0 @@
-.datePicker {
-  padding: 6px 8px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  outline: none;
-}
-
-.datePickerDisabled {
-  background-color: #f0f0f0;
-  color: #999;
-}

package/src/component/TDatePicker/index.jsx

@@ -1,72 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./TDatePicker.module.css";
-import { useTangoStyle } from "../CSSFab/useTangoStyle";
-
-export default function DatePicker(props) {
-  const {
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "",
-    disabled,
-    onChange,
-    time,
-  } = props;
-
-  const [value, setValue] = useState("");
-
-  const formatDate = (date) => {
-    const d = new Date(date);
-    const year = d.getFullYear();
-    const month = (d.getMonth() + 1).toString().padStart(2, "0");
-    const day = d.getDate().toString().padStart(2, "0");
-    const hours = d.getHours().toString().padStart(2, "0");
-    const minutes = d.getMinutes().toString().padStart(2, "0");
-    return `${year}-${month}-${day} ${hours}:${minutes}`;
-  };
-
-  const handleChange = (e) => {
-    const val = e.target.value;
-    setValue(val);
-    const formattedValue = time ? formatDate(val) : val;
-    if (onChange) onChange(formattedValue, val);
-  };
-
-  const inputType = time ? "datetime-local" : "date";
-
-  const className = `${styles.datePicker} ${
-    disabled ? styles.datePickerDisabled : ""
-  } ${userClassName}`;
-
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  return (
-    <input
-      type={inputType}
-      value={value}
-      onChange={handleChange}
-      className={className}
-      style={combinedStyle}
-      disabled={disabled}
-    />
-  );
-}
-
-DatePicker.propTypes = {
-  sx: PropTypes.object,
-  style: PropTypes.object,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  time: PropTypes.bool,
-};
-
-DatePicker.defaultProps = {
-  sx: {},
-  style: {},
-  className: "",
-  disabled: false,
-  onChange: () => {},
-  time: false,
-};

package/src/component/TDrawer/TDrawer.module.css

@@ -1,203 +0,0 @@
-.drawerOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.drawerContainer {
-  background-color: #fff;
-  padding: 20px;
-  width: 320px;
-  height: 100vh;
-  position: relative;
-}
-
-.drawerHeader {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.drawerContent {
-  margin-bottom: 24px;
-}
-
-.drawerFooter {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  gap: 10px;
-  padding: 10px 20px;
-  background-color: #fff;
-}
-
-.drawerCloseBtn {
-  background-image: url('../../assets/关闭.png');
-  width: 15px;
-  height: 15px;
-  background-size: 100% 100%;
-  cursor: pointer;
-}
-
-/* 位置类 */
-.drawerRight {
-  right: 0;
-  top: 0;
-  position: fixed;
-  height: 100vh;
-  width: 320px;
-}
-
-.drawerLeft {
-  left: 0;
-  top: 0;
-  position: fixed;
-  height: 100vh;
-  width: 320px;
-}
-
-.drawerTop {
-  top: 0;
-  left: 0;
-  position: fixed;
-  width: 100vw;
-  height: 300px;
-}
-
-.drawerBottom {
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  width: 100vw;
-  height: 300px;
-}
-
-/* 动画类 */
-@keyframes comeInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes comeOutRight {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes comeInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes comeOutLeft {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes comeInTop {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes comeOutTop {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes comeInBottom {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes comeOutBottom {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
-.comeInRight {
-  animation: comeInRight 0.3s ease-in-out;
-}
-
-.comeOutRight {
-  animation: comeOutRight 0.3s ease-in-out;
-}
-
-.comeInLeft {
-  animation: comeInLeft 0.3s ease-in-out;
-}
-
-.comeOutLeft {
-  animation: comeOutLeft 0.3s ease-in-out;
-}
-
-.comeInTop {
-  animation: comeInTop 0.3s ease-in-out;
-}
-
-.comeOutTop {
-  animation: comeOutTop 0.3s ease-in-out;
-}
-
-.comeInBottom {
-  animation: comeInBottom 0.3s ease-in-out;
-}
-
-.comeOutBottom {
-  animation: comeOutBottom 0.3s ease-in-out;
-}

package/src/component/TDrawer/index.jsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./TDrawer.module.css";
-import TButton from "../TButton";
-
-export default function Drawer(props) {
-  const { children, title, onText, cancelText, open, onClose, type } = props;
-  const [showAnimation, setShowAnimation] = useState(false);
-  const [closing, setClosing] = useState(false);
-
- useEffect(() => {
-    if (open) {
-      setShowAnimation(true);
-      setClosing(false);
-    } else if (showAnimation) {
-      setClosing(true);
-      setTimeout(() => {
-        setShowAnimation(false);
-        setClosing(false);
-      }, 300);
-    }
-  }, [open]);
-
-  function ok() {
-    if (onClose) onClose();
-  }
-
-  return (
-    <>
-      {showAnimation && (
-        <div
-          className={`${styles.drawerOverlay} ${
-            closing ? styles.fadeOut : styles.fadeIn
-          }`}
-        >
-          <div
-            className={`${styles.drawerContainer} ${
-              styles[`drawer${type.charAt(0).toUpperCase() + type.slice(1)}`]
-            } ${
-              closing
-                ? styles[`comeOut${type.charAt(0).toUpperCase() + type.slice(1)}`]
-                : styles[`comeIn${type.charAt(0).toUpperCase() + type.slice(1)}`]
-            }`}
-          >
-            <div className={styles.drawerHeader}>
-              <h3>{title}</h3>
-              <div className={styles.drawerCloseBtn} onClick={onClose}></div>
-            </div>
-            <div className={styles.drawerContent}>{children}</div>
-            <div className={styles.drawerFooter}>
-              <TButton type="success" onClick={ok}>
-                {onText}
-              </TButton>
-              <TButton onClick={onClose}>{cancelText}</TButton>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-Drawer.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string,
-  onText: PropTypes.string,
-  cancelText: PropTypes.string,
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-  type: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-};
-
-Drawer.defaultProps = {
-  title: "基础标题",
-  onText: "确定",
-  cancelText: "取消",
-  open: false,
-  onClose: () => {},
-  type: "right",
-};

package/src/component/TInput/TInput.module.css

@@ -1,67 +0,0 @@
-.input {
-  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;
-}
-
-.input:hover {
-  border-color: #888;
-}
-
-.input:focus {
-  border-color: #4caf50;
-  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
-}
-
-.inputSmall {
-  height: 32px;
-  font-size: 12px;
-  padding: 6px 10px;
-}
-
-.inputMedium {
-  height: 40px;
-  font-size: 14px;
-}
-
-.inputLarge {
-  height: 48px;
-  font-size: 16px;
-  padding: 10px 14px;
-}
-
-.inputHuge {
-  height: 56px;
-  font-size: 18px;
-  padding: 12px 16px;
-}
-
-.inputDisabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.inputTextarea {
-  min-height: 32px;
-  font-size: 14px;
-}
-
-.inputError {
-  border-color: #d93025;
-  background-color: #fef2f2;
-  color: #d93025;
-}
-
-.inputError:focus {
-  box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
-}