chore(date-picker): clean codes

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 - `n-message-provider` add `container-style` prop.
 - `n-message-provider` add `placement` prop.
 - `n-message` add class to distinguish type.
+- `n-date-picker` add `shortcuts` props, closes [#280](https://github.com/TuSimple/naive-ui/issues/280).
 
 ### Fixes
 
@@ -25,7 +26,6 @@
 - `n-message-provider` add `closable` prop, closes [#795](https://github.com/TuSimple/naive-ui/issues/795).
 - `n-tree-select` add `show-path` prop, closes[#625](https://github.com/TuSimple/naive-ui/issues/623).
 - `n-layout` add `sider-placement` prop, closes [#566](https://github.com/TuSimple/naive-ui/issues/566).
-- `n-date-picker` add `shortcuts` props, closes [#280](https://github.com/TuSimple/naive-ui/issues/280).
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 - `n-message-provider` 新增 `container-style` 属性
 - `n-message-provider` 新增 `placement` 属性
 - `n-message` 增加类用于区分类型
+- `n-date-picker` 新增 `shortcuts` 属性，关闭 [#280](https://github.com/TuSimple/naive-ui/issues/280)
 
 ### Fixes
 
@@ -25,7 +26,6 @@
 - `n-message-provider` 新增 `closable` 属性，关闭 [#795](https://github.com/TuSimple/naive-ui/issues/795)
 - `n-tree-select` 新增 `show-path` 属性，关闭[#625](https://github.com/TuSimple/naive-ui/issues/623)
 - `n-layout` 增加 `sider-placement` 属性，关闭 [#566](https://github.com/TuSimple/naive-ui/issues/566)
-- `n-date-picker` 新增 `shortcuts` 属性，关闭 [#280](https://github.com/TuSimple/naive-ui/issues/280)
 
 ### Fixes
 

src/date-picker/src/panel/date.tsx

@@ -109,25 +109,29 @@ export default defineComponent({
         {this.actions?.length || shortcuts ? (
           <div class={`${mergedClsPrefix}-date-panel-actions`}>
             <div class={`${mergedClsPrefix}-date-panel-actions__prefix`}>
-              {shortcuts && Object.keys(shortcuts).map((key) =>
-                <NxButton
-                  size="tiny"
-                  onMouseenter={() => {
-                    this.cachePendingValue()
-                    this.doUpdateValue(shortcuts[key], false)
-                  }}
-                  onClick={() => {
-                    this.doUpdateValue(shortcuts[key], false)
-                    this.clearPendingValue()
-                    this.handleConfirmClick()
-                  }}
-                  onMouseleave={() => {
-                    this.restorePendingValue()
-                  }}
-                >
-                  {{ default: () => key }}
-                </NxButton>
-              )}
+              {shortcuts &&
+                Object.keys(shortcuts).map((key) => {
+                  const shortcut = shortcuts[key]
+                  return Array.isArray(shortcut) ? null : (
+                    <NxButton
+                      size="tiny"
+                      onMouseenter={() => {
+                        this.cachePendingValue()
+                        this.doUpdateValue(shortcut, false)
+                      }}
+                      onClick={() => {
+                        this.doUpdateValue(shortcut, false)
+                        this.clearPendingValue()
+                        this.handleConfirmClick()
+                      }}
+                      onMouseleave={() => {
+                        this.restorePendingValue()
+                      }}
+                    >
+                      {{ default: () => key }}
+                    </NxButton>
+                  )
+                })}
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear') ? (

src/date-picker/src/panel/datetime.tsx

@@ -140,25 +140,29 @@ export default defineComponent({
         {this.actions?.length || shortcuts ? (
           <div class={`${mergedClsPrefix}-date-panel-actions`}>
             <div class={`${mergedClsPrefix}-date-panel-actions__prefix`}>
-              {shortcuts && Object.keys(shortcuts).map((key) =>
-                <NxButton
-                  size="tiny"
-                  onMouseenter={() => {
-                    this.cachePendingValue()
-                    this.doUpdateValue(shortcuts[key], false)
-                  }}
-                  onClick={() => {
-                    this.doUpdateValue(shortcuts[key], false)
-                    this.clearPendingValue()
-                    this.handleConfirmClick()
-                  }}
-                  onMouseleave={() => {
-                    this.restorePendingValue()
-                  }}
-                >
-                  {{ default: () => key }}
-                </NxButton>
-              )}
+              {shortcuts &&
+                Object.keys(shortcuts).map((key) => {
+                  const shortcut = shortcuts[key]
+                  return Array.isArray(shortcut) ? null : (
+                    <NxButton
+                      size="tiny"
+                      onMouseenter={() => {
+                        this.cachePendingValue()
+                        this.doUpdateValue(shortcut, false)
+                      }}
+                      onClick={() => {
+                        this.doUpdateValue(shortcut, false)
+                        this.clearPendingValue()
+                        this.handleConfirmClick()
+                      }}
+                      onMouseleave={() => {
+                        this.restorePendingValue()
+                      }}
+                    >
+                      {{ default: () => key }}
+                    </NxButton>
+                  )
+                })}
             </div>
             <div class={`${mergedClsPrefix}-date-panel-actions__suffix`}>
               {this.actions?.includes('clear') ? (

src/message/src/Message.tsx

@@ -35,7 +35,7 @@ const iconMap = {
 export default defineComponent({
   name: 'Message',
   props: messageProps,
-  setup(props) {
+  setup (props) {
     const {
       props: messageProviderProps,
       mergedClsPrefixRef
@@ -51,7 +51,7 @@ export default defineComponent({
     )
     return {
       mergedClsPrefix: mergedClsPrefixRef,
-      handleClose() {
+      handleClose () {
         props.onClose?.()
       },
       cssVars: computed(() => {
@@ -110,7 +110,7 @@ export default defineComponent({
       placement: messageProviderProps.placement
     }
   },
-  render() {
+  render () {
     const {
       icon,
       type,
@@ -130,7 +130,9 @@ export default defineComponent({
             : 'flex-end'
         }}
       >
-        <div class={`${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type`}>
+        <div
+          class={`${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type`}
+        >
           <div
             class={`${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type`}
           >
@@ -156,7 +158,7 @@ export default defineComponent({
   }
 })
 
-function createIconVNode(
+function createIconVNode (
   icon: undefined | (() => VNodeChild),
   type: MessageType,
   clsPrefix: string