tango-ui-cw 0.1.0 → 0.2.0

package/src/component/TDrawer/index.jsx

@@ -1,74 +1,80 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import "./TDrawer.css";
-import TButton from "../TButton/index";
-
-export default function Drawer(props) {
-  const { children, title, onText, cancelText, open, onClose, type } = props;
-  const [showAnimation, setShowAnimation] = useState(false);
-  const [closing, setClosing] = useState(false);
-
-  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",
-  };
-
-  useEffect(() => {
-    if (open) {
-      setShowAnimation(true);
-      setClosing(false);
-    } else if (showAnimation) {
-      setClosing(true);
-      setTimeout(() => {
-        setShowAnimation(false);
-        setClosing(false);
-      }, 300);
-    }
-  }, [open]);
-
-  function ok() {
-    console.log("确定按钮");
-    if (onClose) onClose();
-  }
-
-  return (
-    <>
-      {showAnimation && (
-        <div className={`drawer-overlay ${closing ? "fade-out" : "fade-in"}`}>
-          <div
-            className={`drawer-container drawer-${type} ${
-              closing ? `come-out-${type}` : `come-in-${type}`
-            }`}
-          >
-            <div className="drawer-header">
-              <h3>{title}</h3>
-              <div className="drawer-closeBtn" onClick={onClose}></div>
-            </div>
-            <div className="drawer-content">{children}</div>
-            <div className="drawer-footer">
-              <TButton type="success" onClick={ok}>
-                {onText}
-              </TButton>
-              <TButton onClick={onClose}>{cancelText}</TButton>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
+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>
+      )}
+    </>
+  );
+};
+
+TDrawer.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"]),
+};
+
+TDrawer.defaultProps = {
+  title: "基础标题",
+  onText: "确定",
+  cancelText: "取消",
+  open: false,
+  onClose: () => {},
+  type: "right",
+};

package/src/component/TInput/{TInput.css → TInput.module.css}

@@ -1,80 +1,67 @@
-.input {
-  width: 300px;
-  height: 40px;
-  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; /* Modern blue accent */
-  box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Subtle glow on focus */
-}
-
-.input-small {
-  height: 32px;
-  font-size: 12px;
-  padding: 6px 10px;
-}
-
-.input-medium {
-  height: 40px;
-  font-size: 14px;
-}
-
-.input-large {
-  height: 48px;
-  font-size: 16px;
-  padding: 10px 14px;
-}
-
-.input-huge {
-  height: 56px;
-  font-size: 18px;
-  padding: 12px 16px;
-}
-
-.input-disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  border-color: #ddd;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.input-textarea {
-  min-height: 32px;
-  font-size: 14px;
-}
-
-.input-error {
-  border-color: #d93025;
-  background-color: #fef2f2;
-  color: #d93025;
-}
-
-.input-error:focus {
-  box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
-}
-/* .search-button {
-  position: absolute;
-  right: 10px;
-  top: 0%;
-  transform: translateY(-50%);
-  padding: 5px 10px;
-  background: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-} */
+.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);
+}

package/src/component/TInput/index.jsx

@@ -1,102 +1,95 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./TInput.css"; // 引入样式文件
-import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTangoStyle 函数
-
-export default function Input(props) {
-  const {
-    type = "default",
-    size = "medium",
-    sx = {},
-    style: userStyle = {},
-    className: userClassName = "", // 允许用户自定义 className
-    onClick,
-    onChange,
-    value,
-    defaultValue = "",
-    disabled = false,
-    placeholder = "",
-    maxlength
-  } = props;
-
-  // 使用类名控制输入框的样式
-  const className = `input input-${type} input-${size} ${
-    disabled ? "input-disabled" : ""
-  } ${userClassName}` ;
-
-  // 用于接收 sx 属性设置的属性样式
-  const sxStyle = useTangoStyle(sx);
-
-  // 合并 sx 和 style，确保 style 优先级更高
-  const combinedStyle = { ...sxStyle, ...userStyle };
-
-  // 定义 HTML 的 input type 属性
-  const inputType = type === "password" ? "password" : "text";
-
-  // 判断是否走受控模式
-  const isControlled = value !== undefined && onChange !== undefined;
-
-  // 定义属性类型
-  Input.propTypes = {
-    type: PropTypes.oneOf(["default", "textarea", "password"]),
-    size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
-    sx: PropTypes.object, // 自定义样式对象
-    style: PropTypes.object, // 用户传入的 style 属性，保证 style 属性优先级最高
-    onClick: PropTypes.func, // 点击事件
-    onChange: PropTypes.func, // 输入值变化事件
-        className: PropTypes.string, // 添加 className PropTypes
-    value: PropTypes.string, // 输入框的值
-    defaultValue: PropTypes.string, // 输入框的初始值（非受控模式）
-    disabled: PropTypes.bool, // 是否禁用
-    placeholder: PropTypes.string, // 占位符
-    maxlength: PropTypes.number, 
-  };
-
-  // 默认属性
-  Input.defaultProps = {
-    type: "default",
-    size: "medium",
-    sx: {},
-    style: {},
-    onClick: () => {},
-    className: "", // 默认值为空字符串
-    onChange: undefined,
-    value: undefined,
-    defaultValue: "",
-    disabled: false,
-    placeholder: "",
-    maxlength: 524288,
-  };
-
-  return (
-    <div>
-      {type === "textarea" ? (
-        <textarea
-          className={className}
-          style={combinedStyle} // 应用解析后的内联样式
-          onClick={onClick}
-          onChange={onChange && ((e) => onChange(e.target.value))} // 如果提供 onChange，则绑定事件
-          value={isControlled ? value : undefined} // 受控模式
-          defaultValue={!isControlled ? defaultValue : undefined} // 非受控模式
-          disabled={disabled}
-          placeholder={placeholder}
-          maxLength={maxlength} 
-        />
-      ) : (
-        <input
-          className={className}
-          style={combinedStyle} // 应用解析后的内联样式
-          type={inputType}
-          onClick={onClick}
-          onChange={onChange && ((e) => onChange(e.target.value))} // 如果提供 onChange，则绑定事件
-          value={isControlled ? value : undefined} // 受控模式
-          defaultValue={!isControlled ? defaultValue : undefined} // 非受控模式
-          disabled={disabled}
-          placeholder={placeholder}
-          maxLength={maxlength} 
-        />
-      )}
-    </div>
-  );
-};
-
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./TInput.module.css"; // 模块化 CSS
+import { useTangoStyle } from "../CSSFab/useTangoStyle";
+
+export default function Input(props) {
+  const {
+    type = "default",
+    size = "medium",
+    sx = {},
+    style: userStyle = {},
+    className: userClassName = "", // 允许用户自定义 className
+    onClick,
+    onChange,
+    value,
+    defaultValue = "",
+    disabled = false,
+    placeholder = "",
+    maxlength
+  } = props;
+
+  
+  const isControlled = value !== undefined && onChange !== undefined;
+
+  const baseClass = styles.input;
+  const sizeClass = styles[`input${size.charAt(0).toUpperCase() + size.slice(1)}`] || "";
+  const disabledClass = disabled ? styles.inputDisabled : "";
+  const combinedClassName = `${baseClass} ${sizeClass} ${disabledClass} ${userClassName}`.trim();
+
+  const sxStyle = useTangoStyle(sx);
+  const combinedStyle = { ...sxStyle, ...userStyle };
+
+  const inputType = type === "password" ? "password" : "text";
+
+  return (
+    <div>
+      {type === "textarea" ? (
+        <textarea
+          className={combinedClassName}
+          style={combinedStyle}
+          onClick={onClick}
+          onChange={onChange && ((e) => onChange(e.target.value))}
+          value={isControlled ? value : undefined}
+          defaultValue={!isControlled ? defaultValue : undefined}
+          disabled={disabled}
+          placeholder={placeholder}
+          maxLength={maxlength}
+        />
+      ) : (
+        <input
+          className={combinedClassName}
+          style={combinedStyle}
+          type={inputType}
+          onClick={onClick}
+          onChange={onChange && ((e) => onChange(e.target.value))}
+          value={isControlled ? value : undefined}
+          defaultValue={!isControlled ? defaultValue : undefined}
+          disabled={disabled}
+          placeholder={placeholder}
+          maxLength={maxlength}
+        />
+      )}
+    </div>
+  );
+};
+
+TInput.propTypes = {
+  type: PropTypes.oneOf(["default", "textarea", "password"]),
+  size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
+  sx: PropTypes.object,
+  style: PropTypes.object,
+  onClick: PropTypes.func,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string,
+  maxlength: PropTypes.number,
+};
+
+TInput.defaultProps = {
+  type: "default",
+  size: "medium",
+  sx: {},
+  style: {},
+  onClick: () => {},
+  className: "",
+  onChange: undefined,
+  value: undefined,
+  defaultValue: "",
+  disabled: false,
+  placeholder: "",
+  maxlength: 524288,
+};