tango-ui-cw 0.1.0 → 0.2.1

package/src/component/TColorPicker/index.jsx

@@ -1,106 +1,107 @@
-// 封装的 ColorPicker 组件
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import "./TColorPicker.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 = `color-picker ${disabled ? "color-picker-disabled" : ""} ${userClassName}`;
-
-  const sxStyle = useTangoStyle(sx);
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  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,
-  };
-
-  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; // achromatic
-    } 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="color-picker-wrapper" style={combinedStyle}>
-      <input
-        type="color"
-        value={color}
-        onChange={handleChange}
-        className={className}
-        disabled={disabled}
-      />
-      {showText && (
-        <div className="color-text">
-          <div>{color.toUpperCase()}</div>
-          <div>{hexToRgb(color)}</div>
-          <div>{hexToHsl(color)}</div>
-        </div>
-      )}
-    </div>
-  );
-  
-};
-
+// 封装的 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,148 +1,146 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./TDate.css";
-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>;
-};
-
+import React from "react";
+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

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