feat(time-picker): add actions prop

tusen-ai · Jul 9, 2021 · 21d645e · 21d645e
1 parent f64d37a
commit 21d645e
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 22 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,13 +1,18 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-time-picker` add `actions` prop, closes [#401](https://github.com/TuSimple/naive-ui/issues/401).
+
 ## 2.15.4 (2021-07-09)
 
 ### Feats
 
 - `n-steps` add icon customization in `'finish'` and `'error'` status.
 - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type.
-- `n-empty` export `icon` slot.
-- `useDialog` option add `maskClosable` prop, closes [#420](https://github.com/TuSimple/naive-ui/issues/420).
+- `n-time-picker` add `actions` prop, closes [#401](https://github.com/TuSimple/naive-ui/issues/401).
 
 ### Fixes
 

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.4 (2021-07-09)
 
 ### 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
@@ -15,6 +15,7 @@ format
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| actions | `Array<'now'> \| null` | `['now']` | Operations supported in Time Picker. |
 | clearable | `boolean` | `false` |  |
 | default-value | `number \| null` | `null` |  |
 | disabled | `boolean` | `false` |  |

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
@@ -9,12 +9,14 @@ basic
 size
 disabled-time
 format
+actions
 ```
 
 ## Props
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| actions | `Array<'now'> \| null` | `['now']` | 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
@@ -14,6 +14,10 @@ import PanelCol, { Item } from './PanelCol'
 export default defineComponent({
   name: 'TimePickerPanel',
   props: {
+    actions: {
+      type: Array as PropType<Array<'now'>>,
+      default: () => ['now']
+    },
     showHour: {
       type: Boolean,
       default: true
@@ -156,10 +160,10 @@ export default defineComponent({
               class={[
                 `${mergedClsPrefix}-time-picker-col`,
                 {
-                  [`${mergedClsPrefix}-time-picker-col--invalid`]: this
-                    .isHourInvalid,
-                  [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this
-                    .transitionDisabled
+                  [`${mergedClsPrefix}-time-picker-col--invalid`]:
+                    this.isHourInvalid,
+                  [`${mergedClsPrefix}-time-picker-col--transition-disabled`]:
+                    this.transitionDisabled
                 }
               ]}
             >
@@ -189,10 +193,10 @@ export default defineComponent({
               class={[
                 `${mergedClsPrefix}-time-picker-col`,
                 {
-                  [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this
-                    .transitionDisabled,
-                  [`${mergedClsPrefix}-time-picker-col--invalid`]: this
-                    .isMinuteInvalid
+                  [`${mergedClsPrefix}-time-picker-col--transition-disabled`]:
+                    this.transitionDisabled,
+                  [`${mergedClsPrefix}-time-picker-col--invalid`]:
+                    this.isMinuteInvalid
                 }
               ]}
             >
@@ -222,10 +226,10 @@ export default defineComponent({
               class={[
                 `${mergedClsPrefix}-time-picker-col`,
                 {
-                  [`${mergedClsPrefix}-time-picker-col--invalid`]: this
-                    .isSecondInvalid,
-                  [`${mergedClsPrefix}-time-picker-col--transition-disabled`]: this
-                    .transitionDisabled
+                  [`${mergedClsPrefix}-time-picker-col--invalid`]:
+                    this.isSecondInvalid,
+                  [`${mergedClsPrefix}-time-picker-col--transition-disabled`]:
+                    this.transitionDisabled
                 }
               ]}
             >
@@ -252,14 +256,16 @@ 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>
+          {this.actions?.includes('now') ? (
+            <NButton
+              size="tiny"
+              theme={mergedTheme.peers.Button}
+              themeOverrides={mergedTheme.peerOverrides.Button}
+              onClick={this.onNowClick}
+            >
+              {{ default: () => this.nowText }}
+            </NButton>
+          ) : null}
           <NButton
             size="tiny"
             type="primary"

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