tango-ui-cw 0.1.0 → 0.2.0

package/src/component/TDatePicker/index.jsx

@@ -1,72 +1,72 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import "./TDatePicker.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);
-
-    // 如果选择了时间，格式化并调用 onChange
-    const formattedValue = time ? formatDate(val) : val;
-    if (onChange) onChange(formattedValue, val); // 格式化后传递给 onChange
-  };
-
-  const inputType = time ? "datetime-local" : "date";
-  const className = `date-picker ${disabled ? "date-picker-disabled" : ""} ${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,
-};
+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.css → TDrawer.module.css}

@@ -1,202 +1,203 @@
-.drawer-overlay {
-  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;
-}
-
-.drawer-container {
-  background-color: #fff;
-  padding: 20px;
-  width: 320px;
-  height:100vh;
-  position: relative;
-}
-
-.drawer-header {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.drawer-content {
-  margin-bottom: 24px;
-}
-
-.drawer-footer {
-  position: absolute;
-  bottom: 0;
-  right: 0; /* 确保按钮贴靠右侧 */
-  display: flex;
-  gap: 10px; /* 按钮间隔 */
-  padding: 10px 20px;
-  background-color: #fff;
-}
-
-.drawer-closeBtn {
-  background-image: url('../../assets/关闭.png');
-  width: 15px;
-  height: 15px;
-  background-size: 100% 100%;
-  cursor: pointer;
-}
-/* Drawer 位置 */
-.drawer-right {
-  height: 100vh;
-  width: 320px;
-  position: fixed;
-  top: 0;
-  right: 0;
-}
-
-.drawer-left {
-  height: 100vh;
-  width: 320px;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-.drawer-top {
-  height: 300px;
-  width: 100vw;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-.drawer-bottom {
-  height: 300px;
-  width: 100vw;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-}
-
-/* 动画 */
-@keyframes come-in-right {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes come-out-right {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes come-in-left {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes come-out-left {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes come-in-top {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes come-out-top {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes come-in-bottom {
-  from {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes come-out-bottom {
-  from {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-}
-
-.come-in-right {
-  animation: come-in-right 0.3s ease-in-out;
-}
-
-.come-out-right {
-  animation: come-out-right 0.3s ease-in-out;
-}
-
-.come-in-left {
-  animation: come-in-left 0.3s ease-in-out;
-}
-
-.come-out-left {
-  animation: come-out-left 0.3s ease-in-out;
-}
-
-.come-in-top {
-  animation: come-in-top 0.3s ease-in-out;
-}
-
-.come-out-top {
-  animation: come-out-top 0.3s ease-in-out;
-}
-
-.come-in-bottom {
-  animation: come-in-bottom 0.3s ease-in-out;
-}
-
-.come-out-bottom {
-  animation: come-out-bottom 0.3s ease-in-out;
-}
+.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;
+}