feat: Auto adjust input width by format

Author: zombieJ

assets/index.less

@@ -1,7 +1,7 @@
 @prefix-cls: rc-picker;
 
 .@{prefix-cls} {
-  display: inline;
+  display: inline-flex;
 
   &-panel {
     border: 1px solid #666;
@@ -221,7 +221,12 @@
   // ======================== Input =========================
   &-input {
     position: relative;
-    display: inline;
+    display: inline-flex;
+    width: 100%;
+
+    > input {
+      width: 100%;
+    }
   }
 
   &-clear {

examples/uncontrolled.tsx

@@ -14,7 +14,15 @@ export default () => (
         locale={zhCN}
         picker="week"
         allowClear
+        style={{ width: 300 }}
       />
+      <Picker<Moment>
+        generateConfig={momentGenerateConfig}
+        locale={zhCN}
+        picker="week"
+        allowClear
+      />
+      <button type="button">233</button>
     </div>
   </div>
 );

src/Picker.tsx

@@ -25,7 +25,7 @@ import { isEqual } from './utils/dateUtil';
 import { toArray } from './utils/miscUtil';
 import PanelContext, { ContextOperationRefProps } from './PanelContext';
 import { PickerMode } from './interface';
-import { getDefaultFormat } from './utils/uiUtil';
+import { getDefaultFormat, getInputSize } from './utils/uiUtil';
 
 export interface PickerSharedProps<DateType> {
   dropdownClassName?: string;
@@ -433,6 +433,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
               autoFocus={autoFocus}
               placeholder={placeholder}
               ref={inputRef}
+              size={getInputSize(picker, formatList[0])}
             />
             {suffixNode}
             {clearNode}

src/utils/uiUtil.ts

@@ -147,6 +147,11 @@ export function getDefaultFormat(
   return mergedFormat;
 }
 
+export function getInputSize(picker: PickerMode | undefined, format: string) {
+  const defaultSize = picker === 'time' ? 9 : 11;
+  return Math.max(defaultSize, format.length + 2);
+}
+
 // ====================== Mode ======================
 const getYearNextMode = (next: PanelMode): PanelMode => {
   if (next === 'month' || next === 'date') {