tango-ui-cw 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.js +10 -10
  3. package/dist/index.mjs +889 -757
  4. package/package.json +1 -1
  5. package/src/component/CSSFab/useTangoStyle.jsx +182 -182
  6. package/src/component/MaterialButton/{MaterialButton.css → MaterialButton.module.css} +64 -64
  7. package/src/component/MaterialButton/index.jsx +69 -58
  8. package/src/component/MaterialInput/{MaterialInput.css → MaterialInput.module.css} +37 -33
  9. package/src/component/MaterialInput/index.jsx +34 -29
  10. package/src/component/TButton/TButton.module.css +184 -0
  11. package/src/component/TButton/index.jsx +81 -74
  12. package/src/component/TColorPicker/{TColorPicker.css → TColorPicker.module.css} +24 -24
  13. package/src/component/TColorPicker/index.jsx +107 -106
  14. package/src/component/TDate/index.jsx +146 -148
  15. package/src/component/TDatePicker/TDatePicker.module.css +12 -0
  16. package/src/component/TDatePicker/index.jsx +72 -72
  17. package/src/component/TDrawer/{TDrawer.css → TDrawer.module.css} +203 -202
  18. package/src/component/TDrawer/index.jsx +80 -74
  19. package/src/component/TInput/{TInput.css → TInput.module.css} +67 -80
  20. package/src/component/TInput/index.jsx +95 -102
  21. package/src/component/TLayout/TLayout.css +88 -88
  22. package/src/component/TLayout/index.jsx +77 -77
  23. package/src/component/TLine/TLine.module.css +52 -0
  24. package/src/component/TLine/index.jsx +48 -57
  25. package/src/component/TMark/{TMark.css → TMark.module.css} +6 -6
  26. package/src/component/TMark/index.jsx +69 -78
  27. package/src/component/TModal/{TModal.css → TModal.module.css} +109 -108
  28. package/src/component/TModal/index.jsx +75 -69
  29. package/src/component/TNotice/{TNotice.css → TNotice.module.css} +50 -52
  30. package/src/component/TNotice/index.jsx +37 -38
  31. package/src/component/TNotice/useNotice.jsx +54 -54
  32. package/src/component/TSearch/{TSearch.css → TSearch.module.css} +80 -90
  33. package/src/component/TSearch/index.jsx +86 -100
  34. package/src/component/TSpace/TSpace.module.css +43 -0
  35. package/src/component/TSpace/index.jsx +60 -60
  36. package/src/component/TTable/{TTable.css → TTable.module.css} +26 -26
  37. package/src/component/TTable/index.jsx +73 -77
  38. package/src/component/TTooltip/TTooltip.module.css +66 -0
  39. package/src/component/TTooltip/index.jsx +33 -25
  40. package/src/component/Tango/store.js +105 -105
  41. package/src/component/Tools/WaterMark/WaterMark.jsx +78 -78
  42. package/src/component/TButton/TButton.css +0 -270
  43. package/src/component/TDate/TDate.css +0 -0
  44. package/src/component/TDatePicker/TDatePicker.css +0 -13
  45. package/src/component/TLine/TLine.css +0 -54
  46. package/src/component/TSpace/TSpace.css +0 -43
  47. package/src/component/TTooltip/TTooltip.css +0 -105
@@ -1,74 +1,80 @@
1
- import React, { useEffect, useState } from "react";
2
- import PropTypes from "prop-types";
3
- import "./TDrawer.css";
4
- import TButton from "../TButton/index";
5
-
6
- export default function Drawer(props) {
7
- const { children, title, onText, cancelText, open, onClose, type } = props;
8
- const [showAnimation, setShowAnimation] = useState(false);
9
- const [closing, setClosing] = useState(false);
10
-
11
- Drawer.propTypes = {
12
- children: PropTypes.node.isRequired,
13
- title: PropTypes.string,
14
- onText: PropTypes.string,
15
- cancelText: PropTypes.string,
16
- open: PropTypes.bool,
17
- onClose: PropTypes.func,
18
- type: PropTypes.oneOf(["top", "bottom", "left", "right"]),
19
- };
20
-
21
- Drawer.defaultProps = {
22
- title: "基础标题",
23
- onText: "确定",
24
- cancelText: "取消",
25
- open: false,
26
- onClose: () => {},
27
- type: "right",
28
- };
29
-
30
- useEffect(() => {
31
- if (open) {
32
- setShowAnimation(true);
33
- setClosing(false);
34
- } else if (showAnimation) {
35
- setClosing(true);
36
- setTimeout(() => {
37
- setShowAnimation(false);
38
- setClosing(false);
39
- }, 300);
40
- }
41
- }, [open]);
42
-
43
- function ok() {
44
- console.log("确定按钮");
45
- if (onClose) onClose();
46
- }
47
-
48
- return (
49
- <>
50
- {showAnimation && (
51
- <div className={`drawer-overlay ${closing ? "fade-out" : "fade-in"}`}>
52
- <div
53
- className={`drawer-container drawer-${type} ${
54
- closing ? `come-out-${type}` : `come-in-${type}`
55
- }`}
56
- >
57
- <div className="drawer-header">
58
- <h3>{title}</h3>
59
- <div className="drawer-closeBtn" onClick={onClose}></div>
60
- </div>
61
- <div className="drawer-content">{children}</div>
62
- <div className="drawer-footer">
63
- <TButton type="success" onClick={ok}>
64
- {onText}
65
- </TButton>
66
- <TButton onClick={onClose}>{cancelText}</TButton>
67
- </div>
68
- </div>
69
- </div>
70
- )}
71
- </>
72
- );
73
- };
74
-
1
+ import React, { useEffect, useState } from "react";
2
+ import PropTypes from "prop-types";
3
+ import styles from "./TDrawer.module.css";
4
+ import TButton from "../TButton";
5
+
6
+ export default function Drawer(props) {
7
+ const { children, title, onText, cancelText, open, onClose, type } = props;
8
+ const [showAnimation, setShowAnimation] = useState(false);
9
+ const [closing, setClosing] = useState(false);
10
+
11
+ useEffect(() => {
12
+ if (open) {
13
+ setShowAnimation(true);
14
+ setClosing(false);
15
+ } else if (showAnimation) {
16
+ setClosing(true);
17
+ setTimeout(() => {
18
+ setShowAnimation(false);
19
+ setClosing(false);
20
+ }, 300);
21
+ }
22
+ }, [open]);
23
+
24
+ function ok() {
25
+ if (onClose) onClose();
26
+ }
27
+
28
+ return (
29
+ <>
30
+ {showAnimation && (
31
+ <div
32
+ className={`${styles.drawerOverlay} ${
33
+ closing ? styles.fadeOut : styles.fadeIn
34
+ }`}
35
+ >
36
+ <div
37
+ className={`${styles.drawerContainer} ${
38
+ styles[`drawer${type.charAt(0).toUpperCase() + type.slice(1)}`]
39
+ } ${
40
+ closing
41
+ ? styles[`comeOut${type.charAt(0).toUpperCase() + type.slice(1)}`]
42
+ : styles[`comeIn${type.charAt(0).toUpperCase() + type.slice(1)}`]
43
+ }`}
44
+ >
45
+ <div className={styles.drawerHeader}>
46
+ <h3>{title}</h3>
47
+ <div className={styles.drawerCloseBtn} onClick={onClose}></div>
48
+ </div>
49
+ <div className={styles.drawerContent}>{children}</div>
50
+ <div className={styles.drawerFooter}>
51
+ <TButton type="success" onClick={ok}>
52
+ {onText}
53
+ </TButton>
54
+ <TButton onClick={onClose}>{cancelText}</TButton>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ )}
59
+ </>
60
+ );
61
+ };
62
+
63
+ TDrawer.propTypes = {
64
+ children: PropTypes.node.isRequired,
65
+ title: PropTypes.string,
66
+ onText: PropTypes.string,
67
+ cancelText: PropTypes.string,
68
+ open: PropTypes.bool,
69
+ onClose: PropTypes.func,
70
+ type: PropTypes.oneOf(["top", "bottom", "left", "right"]),
71
+ };
72
+
73
+ TDrawer.defaultProps = {
74
+ title: "基础标题",
75
+ onText: "确定",
76
+ cancelText: "取消",
77
+ open: false,
78
+ onClose: () => {},
79
+ type: "right",
80
+ };
@@ -1,80 +1,67 @@
1
- .input {
2
- width: 300px;
3
- height: 40px;
4
- border-radius: 8px;
5
- border: 1px solid #ccc;
6
- padding: 8px 12px;
7
- font-size: 14px;
8
- color: black;
9
- outline: none;
10
- transition: all 0.3s ease;
11
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
12
- background-color: #fff;
13
- }
14
-
15
- .input:hover {
16
- border-color: #888;
17
- }
18
-
19
- .input:focus {
20
- border-color: #4caf50; /* Modern blue accent */
21
- box-shadow: 0 0 5px rgba(0, 120, 212, 0.5); /* Subtle glow on focus */
22
- }
23
-
24
- .input-small {
25
- height: 32px;
26
- font-size: 12px;
27
- padding: 6px 10px;
28
- }
29
-
30
- .input-medium {
31
- height: 40px;
32
- font-size: 14px;
33
- }
34
-
35
- .input-large {
36
- height: 48px;
37
- font-size: 16px;
38
- padding: 10px 14px;
39
- }
40
-
41
- .input-huge {
42
- height: 56px;
43
- font-size: 18px;
44
- padding: 12px 16px;
45
- }
46
-
47
- .input-disabled {
48
- background-color: #f5f5f5;
49
- color: #999;
50
- border-color: #ddd;
51
- cursor: not-allowed;
52
- box-shadow: none;
53
- }
54
-
55
- .input-textarea {
56
- min-height: 32px;
57
- font-size: 14px;
58
- }
59
-
60
- .input-error {
61
- border-color: #d93025;
62
- background-color: #fef2f2;
63
- color: #d93025;
64
- }
65
-
66
- .input-error:focus {
67
- box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
68
- }
69
- /* .search-button {
70
- position: absolute;
71
- right: 10px;
72
- top: 0%;
73
- transform: translateY(-50%);
74
- padding: 5px 10px;
75
- background: #007bff;
76
- color: #fff;
77
- border: none;
78
- border-radius: 4px;
79
- cursor: pointer;
80
- } */
1
+ .input {
2
+ width: 300px;
3
+ border-radius: 8px;
4
+ border: 1px solid #ccc;
5
+ padding: 8px 12px;
6
+ font-size: 14px;
7
+ color: black;
8
+ outline: none;
9
+ transition: all 0.3s ease;
10
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
11
+ background-color: #fff;
12
+ }
13
+
14
+ .input:hover {
15
+ border-color: #888;
16
+ }
17
+
18
+ .input:focus {
19
+ border-color: #4caf50;
20
+ box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
21
+ }
22
+
23
+ .inputSmall {
24
+ height: 32px;
25
+ font-size: 12px;
26
+ padding: 6px 10px;
27
+ }
28
+
29
+ .inputMedium {
30
+ height: 40px;
31
+ font-size: 14px;
32
+ }
33
+
34
+ .inputLarge {
35
+ height: 48px;
36
+ font-size: 16px;
37
+ padding: 10px 14px;
38
+ }
39
+
40
+ .inputHuge {
41
+ height: 56px;
42
+ font-size: 18px;
43
+ padding: 12px 16px;
44
+ }
45
+
46
+ .inputDisabled {
47
+ background-color: #f5f5f5;
48
+ color: #999;
49
+ border-color: #ddd;
50
+ cursor: not-allowed;
51
+ box-shadow: none;
52
+ }
53
+
54
+ .inputTextarea {
55
+ min-height: 32px;
56
+ font-size: 14px;
57
+ }
58
+
59
+ .inputError {
60
+ border-color: #d93025;
61
+ background-color: #fef2f2;
62
+ color: #d93025;
63
+ }
64
+
65
+ .inputError:focus {
66
+ box-shadow: 0 0 5px rgba(217, 48, 37, 0.5);
67
+ }
@@ -1,102 +1,95 @@
1
- import React from "react";
2
- import PropTypes from "prop-types";
3
- import "./TInput.css"; // 引入样式文件
4
- import { useTangoStyle } from "../CSSFab/useTangoStyle"; // 导入 useTangoStyle 函数
5
-
6
- export default function Input(props) {
7
- const {
8
- type = "default",
9
- size = "medium",
10
- sx = {},
11
- style: userStyle = {},
12
- className: userClassName = "", // 允许用户自定义 className
13
- onClick,
14
- onChange,
15
- value,
16
- defaultValue = "",
17
- disabled = false,
18
- placeholder = "",
19
- maxlength
20
- } = props;
21
-
22
- // 使用类名控制输入框的样式
23
- const className = `input input-${type} input-${size} ${
24
- disabled ? "input-disabled" : ""
25
- } ${userClassName}` ;
26
-
27
- // 用于接收 sx 属性设置的属性样式
28
- const sxStyle = useTangoStyle(sx);
29
-
30
- // 合并 sx 和 style,确保 style 优先级更高
31
- const combinedStyle = { ...sxStyle, ...userStyle };
32
-
33
- // 定义 HTML input type 属性
34
- const inputType = type === "password" ? "password" : "text";
35
-
36
- // 判断是否走受控模式
37
- const isControlled = value !== undefined && onChange !== undefined;
38
-
39
- // 定义属性类型
40
- Input.propTypes = {
41
- type: PropTypes.oneOf(["default", "textarea", "password"]),
42
- size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
43
- sx: PropTypes.object, // 自定义样式对象
44
- style: PropTypes.object, // 用户传入的 style 属性,保证 style 属性优先级最高
45
- onClick: PropTypes.func, // 点击事件
46
- onChange: PropTypes.func, // 输入值变化事件
47
- className: PropTypes.string, // 添加 className PropTypes
48
- value: PropTypes.string, // 输入框的值
49
- defaultValue: PropTypes.string, // 输入框的初始值(非受控模式)
50
- disabled: PropTypes.bool, // 是否禁用
51
- placeholder: PropTypes.string, // 占位符
52
- maxlength: PropTypes.number,
53
- };
54
-
55
- // 默认属性
56
- Input.defaultProps = {
57
- type: "default",
58
- size: "medium",
59
- sx: {},
60
- style: {},
61
- onClick: () => {},
62
- className: "", // 默认值为空字符串
63
- onChange: undefined,
64
- value: undefined,
65
- defaultValue: "",
66
- disabled: false,
67
- placeholder: "",
68
- maxlength: 524288,
69
- };
70
-
71
- return (
72
- <div>
73
- {type === "textarea" ? (
74
- <textarea
75
- className={className}
76
- style={combinedStyle} // 应用解析后的内联样式
77
- onClick={onClick}
78
- onChange={onChange && ((e) => onChange(e.target.value))} // 如果提供 onChange,则绑定事件
79
- value={isControlled ? value : undefined} // 受控模式
80
- defaultValue={!isControlled ? defaultValue : undefined} // 非受控模式
81
- disabled={disabled}
82
- placeholder={placeholder}
83
- maxLength={maxlength}
84
- />
85
- ) : (
86
- <input
87
- className={className}
88
- style={combinedStyle} // 应用解析后的内联样式
89
- type={inputType}
90
- onClick={onClick}
91
- onChange={onChange && ((e) => onChange(e.target.value))} // 如果提供 onChange,则绑定事件
92
- value={isControlled ? value : undefined} // 受控模式
93
- defaultValue={!isControlled ? defaultValue : undefined} // 非受控模式
94
- disabled={disabled}
95
- placeholder={placeholder}
96
- maxLength={maxlength}
97
- />
98
- )}
99
- </div>
100
- );
101
- };
102
-
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+ import styles from "./TInput.module.css"; // 模块化 CSS
4
+ import { useTangoStyle } from "../CSSFab/useTangoStyle";
5
+
6
+ export default function Input(props) {
7
+ const {
8
+ type = "default",
9
+ size = "medium",
10
+ sx = {},
11
+ style: userStyle = {},
12
+ className: userClassName = "", // 允许用户自定义 className
13
+ onClick,
14
+ onChange,
15
+ value,
16
+ defaultValue = "",
17
+ disabled = false,
18
+ placeholder = "",
19
+ maxlength
20
+ } = props;
21
+
22
+
23
+ const isControlled = value !== undefined && onChange !== undefined;
24
+
25
+ const baseClass = styles.input;
26
+ const sizeClass = styles[`input${size.charAt(0).toUpperCase() + size.slice(1)}`] || "";
27
+ const disabledClass = disabled ? styles.inputDisabled : "";
28
+ const combinedClassName = `${baseClass} ${sizeClass} ${disabledClass} ${userClassName}`.trim();
29
+
30
+ const sxStyle = useTangoStyle(sx);
31
+ const combinedStyle = { ...sxStyle, ...userStyle };
32
+
33
+ const inputType = type === "password" ? "password" : "text";
34
+
35
+ return (
36
+ <div>
37
+ {type === "textarea" ? (
38
+ <textarea
39
+ className={combinedClassName}
40
+ style={combinedStyle}
41
+ onClick={onClick}
42
+ onChange={onChange && ((e) => onChange(e.target.value))}
43
+ value={isControlled ? value : undefined}
44
+ defaultValue={!isControlled ? defaultValue : undefined}
45
+ disabled={disabled}
46
+ placeholder={placeholder}
47
+ maxLength={maxlength}
48
+ />
49
+ ) : (
50
+ <input
51
+ className={combinedClassName}
52
+ style={combinedStyle}
53
+ type={inputType}
54
+ onClick={onClick}
55
+ onChange={onChange && ((e) => onChange(e.target.value))}
56
+ value={isControlled ? value : undefined}
57
+ defaultValue={!isControlled ? defaultValue : undefined}
58
+ disabled={disabled}
59
+ placeholder={placeholder}
60
+ maxLength={maxlength}
61
+ />
62
+ )}
63
+ </div>
64
+ );
65
+ };
66
+
67
+ TInput.propTypes = {
68
+ type: PropTypes.oneOf(["default", "textarea", "password"]),
69
+ size: PropTypes.oneOf(["small", "medium", "large", "huge"]),
70
+ sx: PropTypes.object,
71
+ style: PropTypes.object,
72
+ onClick: PropTypes.func,
73
+ onChange: PropTypes.func,
74
+ className: PropTypes.string,
75
+ value: PropTypes.string,
76
+ defaultValue: PropTypes.string,
77
+ disabled: PropTypes.bool,
78
+ placeholder: PropTypes.string,
79
+ maxlength: PropTypes.number,
80
+ };
81
+
82
+ TInput.defaultProps = {
83
+ type: "default",
84
+ size: "medium",
85
+ sx: {},
86
+ style: {},
87
+ onClick: () => {},
88
+ className: "",
89
+ onChange: undefined,
90
+ value: undefined,
91
+ defaultValue: "",
92
+ disabled: false,
93
+ placeholder: "",
94
+ maxlength: 524288,
95
+ };