Repository: arco-design/arco-design (ts)

Issue:
timepicker disabledHours设置了仍然可以选中0时
- [ ] I'm sure this does not appear in [the issue list of the repository](https://github.com/arco-design/arco-design/issues)

## Basic Info 
- **Package Name And Version:** @arco-design/web-react@2.28.2
- **Browser:** chrome97.0.4692.71
- **Reproduction Link:** https://codesandbox.io/s/relaxed-khorana-82e5e

## Extra info
建议：在设置了disableHour之后，默认选中的是disableHour的第一个元素而不是0，好像就可以解决这个bug，感谢～

## What is expected?
把“0时”disabled了，但实际如果不选择时的话默认会选中“0时”


<!-- generated by arco-issue. DO NOT REMOVE -->

Pull request:
enhancement(Timepicker): use not disabled value as default
<!--
  Thanks so much for your PR and contribution.

  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design/blob/main/CONTRIBUTING.md
-->

<!-- Put an `x` in "[ ]" to check a box) -->

## Types of changes

<!-- What types of changes does this PR introduce -->
<!-- Only support choose one type, if there are multiple types, you can add the `Type` column in the Changelog. -->

- [ ] New feature
- [ ] Bug fix
- [x] Enhancement
- [ ] Documentation change
- [ ] Coding style change
- [ ] Component style change
- [ ] Refactoring
- [ ] Test cases
- [ ] Continuous integration
- [ ] Typescript definition change
- [ ] Breaking change
- [ ] Others 

## Background and context

<!-- Explain what problem does the PR solve -->
<!-- Link to related open issues if applicable -->
修复了即使 `0` 时、`0` 分、`0` 秒被禁用，默认值仍是 `00:00:00` 的问题。

| Before | After |
:-------------------------:|:-------------------------:
| ![Kapture 2022-03-26 at 17 10 38](https://user-images.githubusercontent.com/56376387/160232868-351b729a-6a2d-4b7b-8e67-91975d558f82.gif) | ![Kapture 2022-03-26 at 17 13 50](https://user-images.githubusercontent.com/56376387/160232956-0bc7a47c-3584-418a-845c-27c71b0916b4.gif) |

## Solution

<!-- Describe how the problem is fixed in detail -->

## How is the change tested?

<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->
<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->
新增了一个相应的测试用例。

## Changelog

| Component | Changelog(CN) | Changelog(EN) | Related issues |
| --------- | ------------- | ------------- | -------------- |
|     Timepicker      |       当 `TimePicker` 组件禁用部分选项时，在点击时自动寻找可用值。        |       When the `TimePicker` component disables some options, it automatically looks for available values on click.        |        close #494       |

<!-- If there are multiple types, you can add the `Type` column in the Changelog, the value of the column is the same as `Types of changes` -->
## Checklist:

- [x] Test suite passes (`npm run test`)
- [x] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
- [x] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others should be submitted to `main` branch)

## Other information

<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->


Patch:
diff --git a/components/TimePicker/time-picker.tsx b/components/TimePicker/time-picker.tsx
index 2477f51c..5a6b69c1 100644
--- a/components/TimePicker/time-picker.tsx
+++ b/components/TimePicker/time-picker.tsx
@@ -105,9 +105,60 @@ function TimePicker(props: InnerTimePickerProps) {
   const selectedMinute = valueShow && valueShow.minute();
   const selectedSecond = valueShow && valueShow.second();
 
+  const getDefaultStr = useCallback(
+    (type: 'hour' | 'minute' | 'second') => {
+      switch (type) {
+        case 'hour':
+          return typeof disabledHours === 'function'
+            ? padStart(
+                HOURS.find((h) => disabledHours().indexOf(h) === -1),
+                2,
+                '0'
+              )
+            : padStart(HOURS[0], 2, '0');
+        case 'minute':
+          return typeof disabledMinutes === 'function'
+            ? padStart(
+                MINUTES.find((m) => disabledMinutes(selectedHour).indexOf(m) === -1),
+                2,
+                '0'
+              )
+            : padStart(MINUTES[0], 2, '0');
+        case 'second':
+          return typeof disabledSeconds === 'function'
+            ? padStart(
+                SECONDS.find(
+                  (s) => disabledSeconds(selectedHour, selectedMinute).indexOf(s) === -1
+                ),
+                2,
+                '0'
+              )
+            : padStart(SECONDS[0], 2, '0');
+
+        default:
+          return '00';
+      }
+    },
+    [
+      HOURS,
+      MINUTES,
+      SECONDS,
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds,
+      selectedHour,
+      selectedMinute,
+    ]
+  );
+
   function onHandleSelect(selectedValue: number | string, unit: string) {
     const isUpperCase = getColumnsFromFormat(format).list.indexOf('A') !== -1;
-    const _valueShow = valueShow || dayjs('00:00:00', 'HH:mm:ss');
+    const _valueShow =
+      valueShow ||
+      dayjs(
+        `${getDefaultStr('hour')}:${getDefaultStr('minute')}:${getDefaultStr('second')}`,
+        'HH:mm:ss'
+      );
     let hour = _valueShow.hour();
     const minute = _valueShow.minute();
     const second = _valueShow.second();


Test patch:
diff --git a/components/TimePicker/__test__/index.test.tsx b/components/TimePicker/__test__/index.test.tsx
index 85c77358..6958bb0e 100644
--- a/components/TimePicker/__test__/index.test.tsx
+++ b/components/TimePicker/__test__/index.test.tsx
@@ -209,4 +209,19 @@ describe('TimePicker', () => {
     expect(onChange.mock.calls).toHaveLength(1);
     expect(onChange.mock.calls[0][0]).toBe('00:00:00');
   });
+
+  // https://github.com/arco-design/arco-design/issues/494
+  it('should get non-disabled value as default', () => {
+    const component = mount(
+      <TimePicker
+        disabledHours={() => [0, 1, 2]}
+        disabledMinutes={() => [1, 2]}
+        disabledSeconds={() => [0]}
+      />
+    );
+    component.find('.arco-picker').simulate('click');
+    getCells(component, 1).at(0).simulate('click');
+    component.find('.arco-timepicker-footer-btn-wrapper button').at(1).simulate('click');
+    expect(getInputValue(component, 0)).toBe('03:00:01');
+  });
 });