@tiny-design/react 1.3.0 → 1.4.0

package/es/button/style/_index.scss

@@ -24,7 +24,7 @@ $btn-prefix: #{$prefix}-btn;
   line-height: $btn-line-height;
 
   &__loader {
-    @include loader();
+    @include loader;
   }
 
   &__icon-container, &__loader {
@@ -91,19 +91,27 @@ $btn-prefix: #{$prefix}-btn;
   }
 
   &_info {
-    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info));
+    @include button-style(#fff, var(--ty-color-info), var(--ty-color-info),
+      var(--ty-color-info-hover), var(--ty-color-info-hover), #fff,
+      var(--ty-color-info-active), var(--ty-color-info-active), #fff);
   }
 
   &_success {
-    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success));
+    @include button-style(#fff, var(--ty-color-success), var(--ty-color-success),
+      var(--ty-color-success-hover), var(--ty-color-success-hover), #fff,
+      var(--ty-color-success-active), var(--ty-color-success-active), #fff);
   }
 
   &_warning {
-    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning));
+    @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning),
+      var(--ty-color-warning-hover), var(--ty-color-warning-hover), #fff,
+      var(--ty-color-warning-active), var(--ty-color-warning-active), #fff);
   }
 
   &_danger {
-    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger));
+    @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger),
+      var(--ty-color-danger-hover), var(--ty-color-danger-hover), #fff,
+      var(--ty-color-danger-active), var(--ty-color-danger-active), #fff);
   }
 
   // Sizes
@@ -135,13 +143,10 @@ $btn-prefix: #{$prefix}-btn;
     position: relative;
     pointer-events: none;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
-      top: -1px;
-      right: -1px;
-      bottom: -1px;
-      left: -1px;
+      inset: -1px;
       z-index: 1;
       display: block;
       background: var(--ty-btn-loading-bg);
@@ -208,7 +213,7 @@ $btn-prefix: #{$prefix}-btn;
   &_danger {
     .#{$btn-prefix} {
       &:not(:first-child) {
-        border-left-color: rgba(255, 255, 255, 0.2);
+        border-left-color: rgb(255 255 255 / 20%);
       }
     }
   }

package/es/button/style/index.css

@@ -212,13 +212,19 @@
 }
 .ty-btn_info:hover {
   color: #fff;
+  background: var(--ty-color-info-hover);
+  border-color: var(--ty-color-info-hover);
 }
 .ty-btn_info:focus {
   color: #fff;
+  background: var(--ty-color-info-hover);
+  border-color: var(--ty-color-info-hover);
   z-index: 1;
 }
 .ty-btn_info:active {
   color: #fff;
+  background: var(--ty-color-info-active);
+  border-color: var(--ty-color-info-active);
 }
 .ty-btn_info:disabled {
   color: var(--ty-btn-disabled-color);
@@ -232,13 +238,19 @@
 }
 .ty-btn_success:hover {
   color: #fff;
+  background: var(--ty-color-success-hover);
+  border-color: var(--ty-color-success-hover);
 }
 .ty-btn_success:focus {
   color: #fff;
+  background: var(--ty-color-success-hover);
+  border-color: var(--ty-color-success-hover);
   z-index: 1;
 }
 .ty-btn_success:active {
   color: #fff;
+  background: var(--ty-color-success-active);
+  border-color: var(--ty-color-success-active);
 }
 .ty-btn_success:disabled {
   color: var(--ty-btn-disabled-color);
@@ -252,13 +264,19 @@
 }
 .ty-btn_warning:hover {
   color: #fff;
+  background: var(--ty-color-warning-hover);
+  border-color: var(--ty-color-warning-hover);
 }
 .ty-btn_warning:focus {
   color: #fff;
+  background: var(--ty-color-warning-hover);
+  border-color: var(--ty-color-warning-hover);
   z-index: 1;
 }
 .ty-btn_warning:active {
   color: #fff;
+  background: var(--ty-color-warning-active);
+  border-color: var(--ty-color-warning-active);
 }
 .ty-btn_warning:disabled {
   color: var(--ty-btn-disabled-color);
@@ -272,13 +290,19 @@
 }
 .ty-btn_danger:hover {
   color: #fff;
+  background: var(--ty-color-danger-hover);
+  border-color: var(--ty-color-danger-hover);
 }
 .ty-btn_danger:focus {
   color: #fff;
+  background: var(--ty-color-danger-hover);
+  border-color: var(--ty-color-danger-hover);
   z-index: 1;
 }
 .ty-btn_danger:active {
   color: #fff;
+  background: var(--ty-color-danger-active);
+  border-color: var(--ty-color-danger-active);
 }
 .ty-btn_danger:disabled {
   color: var(--ty-btn-disabled-color);
@@ -313,13 +337,10 @@
   position: relative;
   pointer-events: none;
 }
-.ty-btn_loading:before {
+.ty-btn_loading::before {
   content: "";
   position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
+  inset: -1px;
   z-index: 1;
   display: block;
   background: var(--ty-btn-loading-bg);

package/es/pop-confirm/style/_index.scss

@@ -15,6 +15,10 @@
   }
 
   &__buttons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
     text-align: right;
   }
 

package/es/pop-confirm/style/index.css

@@ -11,6 +11,10 @@
   align-items: center;
 }
 .ty-pop-confirm__buttons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
   text-align: right;
 }
 .ty-pop-confirm__title {

package/es/slider/style/_index.scss

@@ -5,21 +5,13 @@
   box-sizing: border-box;
   cursor: pointer;
 
-  &_horizontal.#{$prefix}-slider {
-    margin-bottom: $slider-margin-bottom-with-marks;
-  }
-
-  &_vertical.#{$prefix}-slider {
-    margin-right: $slider-margin-bottom-with-marks;
-  }
-
   &_horizontal {
+    width: 100%;
     min-height: $slider-size;
     margin: 13px 7px;
     padding: 4px 0;
 
     .#{$prefix}-slider {
-
       &__rail {
         width: 100%;
         height: $slider-track-size;

package/es/slider/style/index.css

@@ -3,13 +3,8 @@
   box-sizing: border-box;
   cursor: pointer;
 }
-.ty-slider_horizontal.ty-slider {
-  margin-bottom: 30px;
-}
-.ty-slider_vertical.ty-slider {
-  margin-right: 30px;
-}
 .ty-slider_horizontal {
+  width: 100%;
   min-height: 12px;
   margin: 13px 7px;
   padding: 4px 0;

package/es/speed-dial/style/_index.scss

@@ -1,5 +1,4 @@
 @use "../../style/variables" as *;
-@use "sass:color";
 
 $speed-dial-fab-size: 56px;
 $speed-dial-action-size: 40px;
@@ -18,8 +17,8 @@ $speed-dial-actions-gap: 16px;
     height: $speed-dial-fab-size;
     border-radius: 50%;
     border: none;
-    background-color: var(--ty-speed-dial-bg, #{$primary-color});
-    color: var(--ty-speed-dial-color, #{$white-color});
+    background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
+    color: var(--ty-speed-dial-color, #fff);
     font-size: 24px;
     cursor: pointer;
     box-shadow: $box-shadow;
@@ -27,11 +26,11 @@ $speed-dial-actions-gap: 16px;
     outline: none;
 
     &:hover:not(.#{$prefix}-speed-dial__button_disabled) {
-      background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)});
+      background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow;
+      box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow;
     }
 
     &_open {
@@ -59,7 +58,7 @@ $speed-dial-actions-gap: 16px;
       position: absolute;
       top: 50%;
       left: 50%;
-      background-color: currentColor;
+      background-color: currentcolor;
       border-radius: 1px;
       translate: -50% -50%;
     }
@@ -183,7 +182,7 @@ $speed-dial-actions-gap: 16px;
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm;
+      box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow-sm;
     }
 
     &_disabled {

package/es/speed-dial/style/index.css

@@ -10,7 +10,7 @@
   height: 56px;
   border-radius: 50%;
   border: none;
-  background-color: var(--ty-speed-dial-bg, #6e41bf);
+  background-color: var(--ty-speed-dial-bg, var(--ty-color-primary));
   color: var(--ty-speed-dial-color, #fff);
   font-size: 24px;
   cursor: pointer;
@@ -19,10 +19,10 @@
   outline: none;
 }
 .ty-speed-dial__button:hover:not(.ty-speed-dial__button_disabled) {
-  background-color: var(--ty-speed-dial-bg-hover, rgb(92.3496062992, 54.2236220472, 160.9763779528));
+  background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active));
 }
 .ty-speed-dial__button:focus-visible {
-  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .ty-speed-dial__button_open .ty-speed-dial__icon-default {
   transform: rotate(45deg);
@@ -43,7 +43,7 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  background-color: currentColor;
+  background-color: currentcolor;
   border-radius: 1px;
   translate: -50% -50%;
 }
@@ -145,7 +145,7 @@
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
 .ty-speed-dial__action:focus-visible {
-  box-shadow: 0 0 0 3px rgba(110, 65, 191, 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgba(110, 65, 191, 0.2)), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 .ty-speed-dial__action_disabled {
   opacity: 0.5;

package/es/style/base.css

@@ -27,19 +27,26 @@
   --ty-color-fill-secondary: #f5f5f5;
   --ty-color-fill-tertiary: #f0f0f0;
   --ty-color-success: #52c41a;
+  --ty-color-success-hover: #73d13d;
+  --ty-color-success-active: #389e0d;
   --ty-color-success-bg: #f6ffed;
   --ty-color-success-border: #b7eb8f;
   --ty-color-success-text: #49b10e;
   --ty-color-warning: #ff9800;
+  --ty-color-warning-hover: #ffad33;
+  --ty-color-warning-active: #e68a00;
   --ty-color-warning-bg: #fffbe6;
   --ty-color-warning-border: #ffe58f;
   --ty-color-warning-text: #d48806;
   --ty-color-danger: #f44336;
+  --ty-color-danger-hover: #ff7875;
+  --ty-color-danger-active: #cf1322;
   --ty-color-danger-bg: #fff1f0;
   --ty-color-danger-border: #ffa39e;
   --ty-color-danger-text: #cf1322;
-  --ty-color-danger-hover: #ff7875;
   --ty-color-info: #1890ff;
+  --ty-color-info-hover: #40a9ff;
+  --ty-color-info-active: #096dd9;
   --ty-color-info-bg: #e6f7ff;
   --ty-color-info-border: #91d5ff;
   --ty-color-info-text: #096dd9;
@@ -294,19 +301,26 @@ html[data-tiny-theme=dark] {
   --ty-color-fill-secondary: #2a2a2a;
   --ty-color-fill-tertiary: #303030;
   --ty-color-success: #49aa19;
+  --ty-color-success-hover: #6abe39;
+  --ty-color-success-active: #3c8c14;
   --ty-color-success-bg: #162312;
   --ty-color-success-border: #274916;
   --ty-color-success-text: #6abe39;
   --ty-color-warning: #d89614;
+  --ty-color-warning-hover: #e8b339;
+  --ty-color-warning-active: #b37a10;
   --ty-color-warning-bg: #2b2111;
   --ty-color-warning-border: #594214;
   --ty-color-warning-text: #e8b339;
   --ty-color-danger: #d32029;
+  --ty-color-danger-hover: #e84749;
+  --ty-color-danger-active: #ab1a20;
   --ty-color-danger-bg: #2a1215;
   --ty-color-danger-border: #58181c;
   --ty-color-danger-text: #e84749;
-  --ty-color-danger-hover: #e84749;
   --ty-color-info: #177ddc;
+  --ty-color-info-hover: #3c9ae8;
+  --ty-color-info-active: #1268b3;
   --ty-color-info-bg: #111d2c;
   --ty-color-info-border: #15395b;
   --ty-color-info-text: #3c9ae8;
@@ -562,19 +576,26 @@ html[data-tiny-theme=dark] {
     --ty-color-fill-secondary: #2a2a2a;
     --ty-color-fill-tertiary: #303030;
     --ty-color-success: #49aa19;
+    --ty-color-success-hover: #6abe39;
+    --ty-color-success-active: #3c8c14;
     --ty-color-success-bg: #162312;
     --ty-color-success-border: #274916;
     --ty-color-success-text: #6abe39;
     --ty-color-warning: #d89614;
+    --ty-color-warning-hover: #e8b339;
+    --ty-color-warning-active: #b37a10;
     --ty-color-warning-bg: #2b2111;
     --ty-color-warning-border: #594214;
     --ty-color-warning-text: #e8b339;
     --ty-color-danger: #d32029;
+    --ty-color-danger-hover: #e84749;
+    --ty-color-danger-active: #ab1a20;
     --ty-color-danger-bg: #2a1215;
     --ty-color-danger-border: #58181c;
     --ty-color-danger-text: #e84749;
-    --ty-color-danger-hover: #e84749;
     --ty-color-info: #177ddc;
+    --ty-color-info-hover: #3c9ae8;
+    --ty-color-info-active: #1268b3;
     --ty-color-info-bg: #111d2c;
     --ty-color-info-border: #15395b;
     --ty-color-info-text: #3c9ae8;

package/es/tag/style/_index.scss

@@ -102,6 +102,30 @@
     background: var(--ty-tag-purple-bg);
     border-color: var(--ty-tag-purple-border);
   }
+
+  &_success {
+    color: var(--ty-color-success);
+    background: var(--ty-color-success-bg);
+    border-color: var(--ty-color-success-border);
+  }
+
+  &_info {
+    color: var(--ty-color-info);
+    background: var(--ty-color-info-bg);
+    border-color: var(--ty-color-info-border);
+  }
+
+  &_warning {
+    color: var(--ty-color-warning);
+    background: var(--ty-color-warning-bg);
+    border-color: var(--ty-color-warning-border);
+  }
+
+  &_danger {
+    color: var(--ty-color-danger);
+    background: var(--ty-color-danger-bg);
+    border-color: var(--ty-color-danger-border);
+  }
 }
 
 .#{$prefix}-checkable-tag {

package/es/tag/style/index.css

@@ -88,6 +88,26 @@
   background: var(--ty-tag-purple-bg);
   border-color: var(--ty-tag-purple-border);
 }
+.ty-tag_success {
+  color: var(--ty-color-success);
+  background: var(--ty-color-success-bg);
+  border-color: var(--ty-color-success-border);
+}
+.ty-tag_info {
+  color: var(--ty-color-info);
+  background: var(--ty-color-info-bg);
+  border-color: var(--ty-color-info-border);
+}
+.ty-tag_warning {
+  color: var(--ty-color-warning);
+  background: var(--ty-color-warning-bg);
+  border-color: var(--ty-color-warning-border);
+}
+.ty-tag_danger {
+  color: var(--ty-color-danger);
+  background: var(--ty-color-danger-bg);
+  border-color: var(--ty-color-danger-border);
+}
 
 .ty-checkable-tag {
   background-color: var(--ty-tag-checkable-bg);

package/es/tag/types.d.ts

@@ -8,8 +8,9 @@ interface CheckableTagProps extends BaseProps {
   onChange?: (checked: boolean, e: React.MouseEvent) => void;
   children?: React.ReactNode;
 }
+type StatusColor = 'success' | 'warning' | 'info' | 'danger';
 interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
-  color?: string;
+  color?: string | StatusColor;
   closable?: boolean;
   onClose?: React.MouseEventHandler;
   onClick?: React.MouseEventHandler;

package/es/tag/types.js

@@ -1,4 +1,3 @@
-//#region src/tag/types.ts
 const PresetColors = [
 	"magenta",
 	"red",
@@ -10,7 +9,13 @@ const PresetColors = [
 	"cyan",
 	"blue",
 	"geekblue",
-	"purple"
+	"purple",
+	...[
+		"success",
+		"info",
+		"warning",
+		"danger"
+	]
 ];
 //#endregion
 export { PresetColors };

package/es/tag/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/tag/types.ts"],"sourcesContent":["import React from 'react';\nimport { BaseProps } from '../_utils/props';\n\nexport interface CheckableTagProps extends BaseProps {\n  defaultChecked?: boolean;\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.MouseEvent) => void;\n  children?: React.ReactNode;\n}\n\nexport const PresetColors = [\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n];\n\nexport interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {\n  color?: string;\n  closable?: boolean;\n  onClose?: React.MouseEventHandler;\n  onClick?: React.MouseEventHandler;\n  defaultVisible?: boolean;\n  visible?: boolean;\n  children?: React.ReactNode;\n}\n"],"mappings":";AAUA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/tag/types.ts"],"sourcesContent":["import React from 'react';\nimport { BaseProps } from '../_utils/props';\n\nexport interface CheckableTagProps extends BaseProps {\n  defaultChecked?: boolean;\n  checked?: boolean;\n  onChange?: (checked: boolean, e: React.MouseEvent) => void;\n  children?: React.ReactNode;\n}\n\nexport type StatusColor = 'success' | 'warning' | 'info' | 'danger';\n\nexport const StatusColors: StatusColor[] = ['success', 'info', 'warning', 'danger'];\n\nexport const PresetColors = [\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n  ...StatusColors,\n];\n\nexport interface TagProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {\n  color?: string | StatusColor;\n  closable?: boolean;\n  onClose?: React.MouseEventHandler;\n  onClick?: React.MouseEventHandler;\n  defaultVisible?: boolean;\n  visible?: boolean;\n  children?: React.ReactNode;\n}\n"],"mappings":"AAcA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAdyC;EAAC;EAAW;EAAQ;EAAW;EAAS;CAelF"}

package/es/time-picker/style/_index.scss

@@ -29,6 +29,10 @@ $tp: #{$prefix}-time-picker;
     box-shadow: var(--ty-input-focus-shadow);
   }
 
+  &_pending &__input-field {
+    color: var(--ty-color-text-tertiary);
+  }
+
   &__input-field {
     flex: 1;
     border: none;
@@ -191,6 +195,15 @@ $tp: #{$prefix}-time-picker;
       }
     }
 
+    &_pending {
+      background: var(--ty-color-primary-bg);
+      color: var(--ty-color-text-tertiary);
+
+      &:hover {
+        background: var(--ty-color-primary-bg-hover);
+      }
+    }
+
     &_disabled {
       color: var(--ty-color-text-quaternary);
       cursor: not-allowed;

package/es/time-picker/style/index.css

@@ -21,6 +21,9 @@
   border-color: var(--ty-color-primary);
   box-shadow: var(--ty-input-focus-shadow);
 }
+.ty-time-picker_pending .ty-time-picker__input-field {
+  color: var(--ty-color-text-tertiary);
+}
 .ty-time-picker__input-field {
   flex: 1;
   border: none;
@@ -157,6 +160,13 @@
 .ty-time-picker__cell_selected:hover {
   background: var(--ty-color-primary-bg-hover);
 }
+.ty-time-picker__cell_pending {
+  background: var(--ty-color-primary-bg);
+  color: var(--ty-color-text-tertiary);
+}
+.ty-time-picker__cell_pending:hover {
+  background: var(--ty-color-primary-bg-hover);
+}
 .ty-time-picker__cell_disabled {
   color: var(--ty-color-text-quaternary);
   cursor: not-allowed;

package/es/time-picker/time-panel.js

@@ -4,14 +4,16 @@ import { jsx } from "react/jsx-runtime";
 //#region src/time-picker/time-panel.tsx
 const ITEM_HEIGHT = 28;
 const TimePanel = (props) => {
-	const { prefixCls, value, items, disabledItems = [], loop = false, onChange } = props;
+	const { prefixCls, value, pendingValue, items, disabledItems = [], loop = false, onChange } = props;
 	const panelRef = useRef(null);
 	const itemRefs = useRef(/* @__PURE__ */ new Map());
 	const isResetting = useRef(false);
 	const clickedRef = useRef(false);
 	const scrollToItemRef = useRef(null);
 	const oneGroupHeight = items.length * ITEM_HEIGHT;
+	const displayValue = pendingValue ?? value;
 	scrollToItemRef.current = (val) => {
+		if (val === null) return;
 		const panel = panelRef.current;
 		if (!panel) return;
 		if (loop) {
@@ -39,8 +41,8 @@ const TimePanel = (props) => {
 			clickedRef.current = false;
 			return;
 		}
-		scrollToItemRef.current?.(value);
-	}, [value]);
+		scrollToItemRef.current?.(displayValue);
+	}, [displayValue]);
 	const handleScroll = useCallback(() => {
 		if (!loop || isResetting.current) return;
 		const panel = panelRef.current;
@@ -62,6 +64,16 @@ const TimePanel = (props) => {
 		clickedRef.current = true;
 		onChange(num);
 	};
+	const isPending = pendingValue !== null;
+	const isCommitted = value !== null && pendingValue === null;
+	const cellCls = (num) => {
+		const isSelected = num === displayValue;
+		return classNames(`${prefixCls}__cell`, {
+			[`${prefixCls}__cell_selected`]: isSelected && isCommitted,
+			[`${prefixCls}__cell_pending`]: isSelected && isPending,
+			[`${prefixCls}__cell_disabled`]: disabledItems.includes(num)
+		});
+	};
 	if (loop) return /* @__PURE__ */ jsx("div", {
 		className: `${prefixCls}__column`,
 		ref: panelRef,
@@ -72,17 +84,11 @@ const TimePanel = (props) => {
 				0,
 				1,
 				2
-			].map((copyIdx) => items.map((num, i) => {
-				const isDisabled = disabledItems.includes(num);
-				return /* @__PURE__ */ jsx("li", {
-					className: classNames(`${prefixCls}__cell`, {
-						[`${prefixCls}__cell_selected`]: num === value,
-						[`${prefixCls}__cell_disabled`]: isDisabled
-					}),
-					onClick: () => handleClick(num),
-					children: String(num).padStart(2, "0")
-				}, `c${copyIdx}-${i}`);
-			}))
+			].map((copyIdx) => items.map((num, i) => /* @__PURE__ */ jsx("li", {
+				className: cellCls(num),
+				onClick: () => handleClick(num),
+				children: String(num).padStart(2, "0")
+			}, `c${copyIdx}-${i}`)))
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -90,20 +96,14 @@ const TimePanel = (props) => {
 		ref: panelRef,
 		children: /* @__PURE__ */ jsx("ul", {
 			className: `${prefixCls}__column-list`,
-			children: items.map((num) => {
-				const isDisabled = disabledItems.includes(num);
-				return /* @__PURE__ */ jsx("li", {
-					ref: (el) => {
-						if (el) itemRefs.current.set(num, el);
-					},
-					className: classNames(`${prefixCls}__cell`, {
-						[`${prefixCls}__cell_selected`]: num === value,
-						[`${prefixCls}__cell_disabled`]: isDisabled
-					}),
-					onClick: () => handleClick(num),
-					children: String(num).padStart(2, "0")
-				}, num);
-			})
+			children: items.map((num) => /* @__PURE__ */ jsx("li", {
+				ref: (el) => {
+					if (el) itemRefs.current.set(num, el);
+				},
+				className: cellCls(num),
+				onClick: () => handleClick(num),
+				children: String(num).padStart(2, "0")
+			}, num))
 		})
 	});
 };

package/es/time-picker/time-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-panel.js","names":[],"sources":["../../src/time-picker/time-panel.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport interface TimePanelProps {\n  value: number;\n  items: number[];\n  disabledItems?: number[];\n  loop?: boolean;\n  onChange: (num: number) => void;\n  prefixCls: string;\n}\n\nconst ITEM_HEIGHT = 28; // 4px padding-top + 20px line-height + 4px padding-bottom\n\nconst TimePanel = (props: TimePanelProps): React.ReactElement => {\n  const { prefixCls, value, items, disabledItems = [], loop = false, onChange } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Map<number, HTMLLIElement>>(new Map());\n  const isResetting = useRef(false);\n  const clickedRef = useRef(false);\n  const scrollToItemRef = useRef<((val: number) => void) | null>(null);\n\n  const oneGroupHeight = items.length * ITEM_HEIGHT;\n\n  scrollToItemRef.current = (val: number) => {\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    if (loop) {\n      const idx = items.indexOf(val);\n      if (idx === -1) return;\n      const top = oneGroupHeight + idx * ITEM_HEIGHT;\n      isResetting.current = true;\n      panel.scrollTo({ top, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    } else {\n      const el = itemRefs.current.get(val);\n      if (el) {\n        panel.scrollTo({ top: el.offsetTop, behavior: 'auto' });\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (clickedRef.current) {\n      clickedRef.current = false;\n      return;\n    }\n    scrollToItemRef.current?.(value);\n  }, [value]);\n\n  // Scroll reset for loop mode\n  const handleScroll = useCallback(() => {\n    if (!loop || isResetting.current) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    const st = panel.scrollTop;\n    if (st < oneGroupHeight || st >= 2 * oneGroupHeight) {\n      isResetting.current = true;\n      panel.scrollTo({ top: (st % oneGroupHeight) + oneGroupHeight, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    }\n  }, [loop, oneGroupHeight]);\n\n  const handleClick = (num: number) => {\n    if (disabledItems.includes(num)) return;\n    clickedRef.current = true;\n    onChange(num);\n  };\n\n  if (loop) {\n    const copies = [0, 1, 2];\n    return (\n      <div className={`${prefixCls}__column`} ref={panelRef} onScroll={handleScroll}>\n        <ul className={`${prefixCls}__column-list`}>\n          {copies.map((copyIdx) =>\n            items.map((num, i) => {\n              const isDisabled = disabledItems.includes(num);\n              const cls = classNames(`${prefixCls}__cell`, {\n                [`${prefixCls}__cell_selected`]: num === value,\n                [`${prefixCls}__cell_disabled`]: isDisabled,\n              });\n              return (\n                <li\n                  key={`c${copyIdx}-${i}`}\n                  className={cls}\n                  onClick={() => handleClick(num)}>\n                  {String(num).padStart(2, '0')}\n                </li>\n              );\n            })\n          )}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`${prefixCls}__column`} ref={panelRef}>\n      <ul className={`${prefixCls}__column-list`}>\n        {items.map((num) => {\n          const isDisabled = disabledItems.includes(num);\n          const cls = classNames(`${prefixCls}__cell`, {\n            [`${prefixCls}__cell_selected`]: num === value,\n            [`${prefixCls}__cell_disabled`]: isDisabled,\n          });\n          return (\n            <li\n              key={num}\n              ref={(el) => {\n                if (el) itemRefs.current.set(num, el);\n              }}\n              className={cls}\n              onClick={() => handleClick(num)}>\n              {String(num).padStart(2, '0')}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default TimePanel;\n"],"mappings":";;;;AAYA,MAAM,cAAc;AAEpB,MAAM,aAAa,UAA8C;CAC/D,MAAM,EAAE,WAAW,OAAO,OAAO,gBAAgB,EAAE,EAAE,OAAO,OAAO,aAAa;CAChF,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,WAAW,uBAAmC,IAAI,KAAK,CAAC;CAC9D,MAAM,cAAc,OAAO,MAAM;CACjC,MAAM,aAAa,OAAO,MAAM;CAChC,MAAM,kBAAkB,OAAuC,KAAK;CAEpE,MAAM,iBAAiB,MAAM,SAAS;AAEtC,iBAAgB,WAAW,QAAgB;EACzC,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,MAAO;AAEZ,MAAI,MAAM;GACR,MAAM,MAAM,MAAM,QAAQ,IAAI;AAC9B,OAAI,QAAQ,GAAI;GAChB,MAAM,MAAM,iBAAiB,MAAM;AACnC,eAAY,UAAU;AACtB,SAAM,SAAS;IAAE;IAAK,UAAU;IAAQ,CAAC;AACzC,+BAA4B;AAAE,gBAAY,UAAU;KAAS;SACxD;GACL,MAAM,KAAK,SAAS,QAAQ,IAAI,IAAI;AACpC,OAAI,GACF,OAAM,SAAS;IAAE,KAAK,GAAG;IAAW,UAAU;IAAQ,CAAC;;;AAK7D,iBAAgB;AACd,MAAI,WAAW,SAAS;AACtB,cAAW,UAAU;AACrB;;AAEF,kBAAgB,UAAU,MAAM;IAC/B,CAAC,MAAM,CAAC;CAGX,MAAM,eAAe,kBAAkB;AACrC,MAAI,CAAC,QAAQ,YAAY,QAAS;EAClC,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,MAAO;EAEZ,MAAM,KAAK,MAAM;AACjB,MAAI,KAAK,kBAAkB,MAAM,IAAI,gBAAgB;AACnD,eAAY,UAAU;AACtB,SAAM,SAAS;IAAE,KAAM,KAAK,iBAAkB;IAAgB,UAAU;IAAQ,CAAC;AACjF,+BAA4B;AAAE,gBAAY,UAAU;KAAS;;IAE9D,CAAC,MAAM,eAAe,CAAC;CAE1B,MAAM,eAAe,QAAgB;AACnC,MAAI,cAAc,SAAS,IAAI,CAAE;AACjC,aAAW,UAAU;AACrB,WAAS,IAAI;;AAGf,KAAI,KAEF,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;EAAW,KAAK;EAAU,UAAU;YAC/D,oBAAC,MAAD;GAAI,WAAW,GAAG,UAAU;aAHjB;IAAC;IAAG;IAAG;IAAE,CAIV,KAAK,YACX,MAAM,KAAK,KAAK,MAAM;IACpB,MAAM,aAAa,cAAc,SAAS,IAAI;AAK9C,WACE,oBAAC,MAAD;KAEE,WAPQ,WAAW,GAAG,UAAU,SAAS;OAC1C,GAAG,UAAU,mBAAmB,QAAQ;OACxC,GAAG,UAAU,mBAAmB;MAClC,CAAC;KAKE,eAAe,YAAY,IAAI;eAC9B,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI;KAC1B,EAJE,IAAI,QAAQ,GAAG,IAIjB;KAEP,CACH;GACE,CAAA;EACD,CAAA;AAIV,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU;EAAW,KAAK;YAC3C,oBAAC,MAAD;GAAI,WAAW,GAAG,UAAU;aACzB,MAAM,KAAK,QAAQ;IAClB,MAAM,aAAa,cAAc,SAAS,IAAI;AAK9C,WACE,oBAAC,MAAD;KAEE,MAAM,OAAO;AACX,UAAI,GAAI,UAAS,QAAQ,IAAI,KAAK,GAAG;;KAEvC,WAVQ,WAAW,GAAG,UAAU,SAAS;OAC1C,GAAG,UAAU,mBAAmB,QAAQ;OACxC,GAAG,UAAU,mBAAmB;MAClC,CAAC;KAQE,eAAe,YAAY,IAAI;eAC9B,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI;KAC1B,EAPE,IAOF;KAEP;GACC,CAAA;EACD,CAAA"}
+{"version":3,"file":"time-panel.js","names":[],"sources":["../../src/time-picker/time-panel.tsx"],"sourcesContent":["import { useRef, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\n\nexport interface TimePanelProps {\n  value: number | null;\n  pendingValue: number | null;\n  items: number[];\n  disabledItems?: number[];\n  loop?: boolean;\n  onChange: (num: number) => void;\n  prefixCls: string;\n}\n\nconst ITEM_HEIGHT = 28; // 4px padding-top + 20px line-height + 4px padding-bottom\n\nconst TimePanel = (props: TimePanelProps): React.ReactElement => {\n  const { prefixCls, value, pendingValue, items, disabledItems = [], loop = false, onChange } = props;\n  const panelRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<Map<number, HTMLLIElement>>(new Map());\n  const isResetting = useRef(false);\n  const clickedRef = useRef(false);\n  const scrollToItemRef = useRef<((val: number | null) => void) | null>(null);\n\n  const oneGroupHeight = items.length * ITEM_HEIGHT;\n\n  // The displayed value: pending takes priority, then committed\n  const displayValue = pendingValue ?? value;\n\n  scrollToItemRef.current = (val: number | null) => {\n    if (val === null) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    if (loop) {\n      const idx = items.indexOf(val);\n      if (idx === -1) return;\n      const top = oneGroupHeight + idx * ITEM_HEIGHT;\n      isResetting.current = true;\n      panel.scrollTo({ top, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    } else {\n      const el = itemRefs.current.get(val);\n      if (el) {\n        panel.scrollTo({ top: el.offsetTop, behavior: 'auto' });\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (clickedRef.current) {\n      clickedRef.current = false;\n      return;\n    }\n    scrollToItemRef.current?.(displayValue);\n  }, [displayValue]);\n\n  // Scroll reset for loop mode\n  const handleScroll = useCallback(() => {\n    if (!loop || isResetting.current) return;\n    const panel = panelRef.current;\n    if (!panel) return;\n\n    const st = panel.scrollTop;\n    if (st < oneGroupHeight || st >= 2 * oneGroupHeight) {\n      isResetting.current = true;\n      panel.scrollTo({ top: (st % oneGroupHeight) + oneGroupHeight, behavior: 'auto' });\n      requestAnimationFrame(() => { isResetting.current = false; });\n    }\n  }, [loop, oneGroupHeight]);\n\n  const handleClick = (num: number) => {\n    if (disabledItems.includes(num)) return;\n    clickedRef.current = true;\n    onChange(num);\n  };\n\n  const isPending = pendingValue !== null;\n  const isCommitted = value !== null && pendingValue === null;\n\n  const cellCls = (num: number) => {\n    const isSelected = num === displayValue;\n    return classNames(`${prefixCls}__cell`, {\n      [`${prefixCls}__cell_selected`]: isSelected && isCommitted,\n      [`${prefixCls}__cell_pending`]: isSelected && isPending,\n      [`${prefixCls}__cell_disabled`]: disabledItems.includes(num),\n    });\n  };\n\n  if (loop) {\n    const copies = [0, 1, 2];\n    return (\n      <div className={`${prefixCls}__column`} ref={panelRef} onScroll={handleScroll}>\n        <ul className={`${prefixCls}__column-list`}>\n          {copies.map((copyIdx) =>\n            items.map((num, i) => (\n              <li\n                key={`c${copyIdx}-${i}`}\n                className={cellCls(num)}\n                onClick={() => handleClick(num)}>\n                {String(num).padStart(2, '0')}\n              </li>\n            ))\n          )}\n        </ul>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`${prefixCls}__column`} ref={panelRef}>\n      <ul className={`${prefixCls}__column-list`}>\n        {items.map((num) => (\n          <li\n            key={num}\n            ref={(el) => {\n              if (el) itemRefs.current.set(num, el);\n            }}\n            className={cellCls(num)}\n            onClick={() => handleClick(num)}>\n            {String(num).padStart(2, '0')}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nexport default TimePanel;\n"],"mappings":"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"}