feat(time-picker): add actions prop (#463)

* feat(time-picker): add actions prop * feat(time-picker): add confirm * fix(change-log): time-picker zh * Update CHANGELOG.en-US.md * Update CHANGELOG.zh-CN.md Co-authored-by: Jiwen Bai <[email protected]> Co-authored-by: 07akioni <[email protected]>
tusen-ai · Jul 23, 2021 · 036cff0 · 036cff0
1 parent 9570c56
commit 036cff0
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 19 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-time-picker` add `actions` prop, closes [#401](https://github.com/TuSimple/naive-ui/issues/401).
+
 ## 2.15.6 (2021-07-23)
 
 ### Feats

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-time-picker` 增加 `actions` 属性, 关闭 [#401](https://github.com/TuSimple/naive-ui/issues/401)
+
 ## 2.15.6 (2021-07-23)
 
 ### Feats

diff --git a/src/time-picker/demos/enUS/actions.demo.md b/src/time-picker/demos/enUS/actions.demo.md
@@ -0,0 +1,19 @@
+# Actions
+
+```html
+<n-space vertical>
+  <n-time-picker v-model:value="ts1" :actions="['now']" />
+  <n-time-picker v-model:value="ts2" :actions="null" />
+</n-space>
+```
+
+```js
+export default {
+  data () {
+    return {
+      ts1: null,
+      ts2: 861333934000
+    }
+  }
+}
+```
diff --git a/src/time-picker/demos/enUS/index.demo-entry.md b/src/time-picker/demos/enUS/index.demo-entry.md
@@ -10,12 +10,14 @@ size
 disabled-time
 step-time
 format
+actions
 ```
 
 ## Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| actions | `Array<'now' \| 'confirm'> \| null` | `['now', 'confirm']` | Operations supported in Time Picker. |
 | clearable | `boolean` | `false` | Whether the value is clearable. |
 | default-value | `number \| null` | `null` | Default value in uncontrolled mode. |
 | disabled | `boolean` | `false` | Whether to disable. |

diff --git a/src/time-picker/demos/zhCN/actions.demo.md b/src/time-picker/demos/zhCN/actions.demo.md
@@ -0,0 +1,19 @@
+# 操作
+
+```html
+<n-space vertical>
+  <n-time-picker v-model:value="ts1" :actions="['now']" />
+  <n-time-picker v-model:value="ts2" :actions="null" />
+</n-space>
+```
+
+```js
+export default {
+  data () {
+    return {
+      ts1: null,
+      ts2: 861333934000
+    }
+  }
+}
+```
diff --git a/src/time-picker/demos/zhCN/index.demo-entry.md b/src/time-picker/demos/zhCN/index.demo-entry.md
@@ -10,12 +10,14 @@ size
 disabled-time
 step-time
 format
+actions
 ```
 
 ## Props
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| actions | `Array<'now' \| 'confirm'> \| null` | `['now', 'confirm']` | Time Picker 中支持的操作 |
 | clearable | `boolean` | `false` | 是否可清空 |
 | default-value | `number \| null` | `null` | 非受控模式下的默认值 |
 | disabled | `boolean` | `false` | 是否禁用 |

diff --git a/src/time-picker/src/Panel.tsx b/src/time-picker/src/Panel.tsx
@@ -15,6 +15,10 @@ import { MaybeArray } from '../../_utils'
 export default defineComponent({
   name: 'TimePickerPanel',
   props: {
+    actions: {
+      type: Array as PropType<Array<'now' | 'confirm'>>,
+      default: () => ['now', 'confirm']
+    },
     showHour: {
       type: Boolean,
       default: true
@@ -273,25 +277,29 @@ export default defineComponent({
           ) : null}
         </div>,
         <div class={`${mergedClsPrefix}-time-picker-actions`}>
-          <NButton
-            size="tiny"
-            theme={mergedTheme.peers.Button}
-            themeOverrides={mergedTheme.peerOverrides.Button}
-            onClick={this.onNowClick}
-          >
-            {{ default: () => this.nowText }}
-          </NButton>
-          <NButton
-            size="tiny"
-            type="primary"
-            class={`${mergedClsPrefix}-time-picker-actions__confirm`}
-            theme={mergedTheme.peers.Button}
-            themeOverrides={mergedTheme.peerOverrides.Button}
-            disabled={this.isValueInvalid}
-            onClick={this.onConfirmClick}
-          >
-            {{ default: () => this.confirmText }}
-          </NButton>
+          {this.actions?.includes('now') ? (
+            <NButton
+              size="tiny"
+              theme={mergedTheme.peers.Button}
+              themeOverrides={mergedTheme.peerOverrides.Button}
+              onClick={this.onNowClick}
+            >
+              {{ default: () => this.nowText }}
+            </NButton>
+          ) : null}
+          {this.actions?.includes('confirm') ? (
+            <NButton
+              size="tiny"
+              type="primary"
+              class={`${mergedClsPrefix}-time-picker-actions__confirm`}
+              theme={mergedTheme.peers.Button}
+              themeOverrides={mergedTheme.peerOverrides.Button}
+              disabled={this.isValueInvalid}
+              onClick={this.onConfirmClick}
+            >
+              {{ default: () => this.confirmText }}
+            </NButton>
+          ) : null}
         </div>,
         <NBaseFocusDetector onFocus={this.onFocusDetectorFocus} />
       ]

diff --git a/src/time-picker/src/TimePicker.tsx b/src/time-picker/src/TimePicker.tsx
@@ -78,6 +78,7 @@ const timePickerProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  actions: Array as PropType<Array<'now' | 'confirm'>>,
   defaultValue: {
     type: Number as PropType<number | null>,
     default: null
@@ -689,6 +690,7 @@ export default defineComponent({
                             ? withDirectives(
                                 <Panel
                                   ref="panelInstRef"
+                                  actions={this.actions}
                                   style={this.cssVars as CSSProperties}
                                   seconds={this.seconds}
                                   minutes={this.minutes}