chore: Move submit button into panel

Author: zombieJ

assets/index.less

@@ -129,6 +129,15 @@
     }
   }
 
+  &-now {
+    text-align: left;
+    overflow: hidden;
+  }
+
+  &-ok {
+    float: right;
+  }
+
   // ================== Year & Month Panel ==================
   &-year-panel,
   &-month-panel {

src/Picker.tsx

@@ -81,6 +81,11 @@ export interface PickerSharedProps<DateType> extends React.AriaAttributes {
   // WAI-ARIA
   role?: string;
   name?: string;
+
+  /** @private Internal usage. Do not use in your production env */
+  components?: {
+    button: React.ComponentType;
+  };
 }
 
 type OmitPanelProps<Props> = Omit<
@@ -158,6 +163,9 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
+  const needConfirmButton: boolean =
+    (picker === 'date' && !!showTime) || picker === 'time';
+
   // ============================= State =============================
   const formatList = toArray(
     getDefaultFormat(format, picker, showTime, use12Hours),
@@ -266,7 +274,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
   // ============================= Input =============================
   const [inputProps, { focused, typing }] = usePickerInput({
-    blurToCancel: !!(picker === 'date' && showTime),
+    blurToCancel: needConfirmButton,
     open: mergedOpen,
     triggerOpen,
     forwardKeyDown,
@@ -375,8 +383,11 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   }
 
   // ============================ Return =============================
-  const onContextSelect = (date: DateType, type: 'key' | 'mouse') => {
-    if (type !== 'key' && (picker !== 'date' || !showTime)) {
+  const onContextSelect = (
+    date: DateType,
+    type: 'key' | 'mouse' | 'submit',
+  ) => {
+    if (type === 'submit' || (type !== 'key' && !needConfirmButton)) {
       // triggerChange will also update selected values
       triggerChange(date);
       triggerOpen(false, true);

src/PickerPanel.tsx

@@ -69,11 +69,17 @@ export interface PickerPanelSharedProps<DateType> {
   onChange?: (value: DateType) => void;
   onPanelChange?: OnPanelChange<DateType>;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onOk?: () => void;
 
   /** @private This is internal usage. Do not use in your production env */
   hideHeader?: boolean;
   /** @private This is internal usage. Do not use in your production env */
   onPickerValueChange?: (date: DateType) => void;
+
+  /** @private Internal usage. Do not use in your production env */
+  components?: {
+    button: React.ComponentType;
+  };
 }
 
 export interface PickerPanelBaseProps<DateType>
@@ -135,6 +141,8 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     onPanelChange,
     onMouseDown,
     onPickerValueChange,
+    onOk,
+    components,
   } = props as MergedPickerPanelProps<DateType>;
 
   if (process.env.NODE_ENV !== 'production') {
@@ -229,20 +237,20 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
 
   const triggerSelect = (
     date: DateType,
-    type: 'key' | 'mouse',
+    type: 'key' | 'mouse' | 'submit',
     forceTriggerSelect: boolean = false,
   ) => {
     if (mergedMode === picker || forceTriggerSelect) {
       setInnerValue(date);
 
-      if (onContextSelect) {
-        onContextSelect(date, type);
-      }
-
       if (onSelect) {
         onSelect(date);
       }
 
+      if (onContextSelect) {
+        onContextSelect(date, type);
+      }
+
       if (onChange && !isEqual(generateConfig, date, mergedValue)) {
         onChange(date);
       }
@@ -418,17 +426,35 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   let nowNode: React.ReactNode;
   let todayNode: React.ReactNode;
 
-  if (showTime && !inRange) {
+  if ((mergedMode === 'date' && showTime) || mergedMode === 'time') {
+    const Button = components ? components.button : 'button';
+
     nowNode = (
       <div className={`${prefixCls}-now`}>
         <a
           className={`${prefixCls}-now-btn`}
           onClick={() => {
-            triggerSelect(generateConfig.getNow(), 'mouse', true);
+            triggerSelect(generateConfig.getNow(), 'submit', true);
           }}
         >
           {locale.now}
         </a>
+
+        <div className={`${prefixCls}-ok`}>
+          <Button
+            disabled={!value}
+            onClick={() => {
+              if (value) {
+                triggerSelect(value, 'submit', true);
+                if (onOk) {
+                  onOk();
+                }
+              }
+            }}
+          >
+            {locale.ok}
+          </Button>
+        </div>
       </div>
     );
   } else if (showToday && mergedMode === 'date' && picker === 'date') {

src/interface.ts

@@ -53,7 +53,7 @@ export type NullableDateType<DateType> = DateType | null | undefined;
 
 export type OnSelect<DateType> = (
   value: DateType,
-  type: 'key' | 'mouse',
+  type: 'key' | 'mouse' | 'submit',
 ) => void;
 
 export interface PanelSharedProps<DateType> {