feat(dialog/notification): use colorful buttons and add accept type …

…in dialog (#41) * use remove icon in danger and error * feat(dialog/notification): use colorful buttons and add accept type in dialog BREAKING CHANGE: remove `primary` options in dialog re #38
webapp-suite · Jan 29, 2019 · eda4016 · eda4016
1 parent fc14984
commit eda4016
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 51 deletions.
diff --git a/src/components/Button/index.less b/src/components/Button/index.less
@@ -168,7 +168,6 @@
 
   &_danger {
     background-color: @ui-color-red;
-    border: 1px solid @ui-color-red;
     color: @ui-color-white;
     &:hover {
       background-color: @ui-color-red-dark;

diff --git a/src/components/dialog/DialogButtons.js b/src/components/dialog/DialogButtons.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import cx from 'classnames'
 import Button from '../Button'
 import FocusTrap from '../_utils/FocusTrap'
+import { typeMap } from './config'
 
 class DialogButtons extends React.Component {
   constructor (props) {
@@ -30,26 +31,23 @@ class DialogButtons extends React.Component {
     setTimeout(() => this.props?.onCancel?.(), 400)
   }
   renderButtons = props => {
-    const { className, accpetLabel, cancelLabel, focused, primary } = props
-    const btnType = {
-      [primary]: 'primary'
-    }
+    const { className, acceptLabel, cancelLabel, focused, type } = props
     return (
       <div className={cx(`${prefixCls}-dialog__buttons`, className)}>
-        {!!accpetLabel &&
+        {!!acceptLabel &&
           <Button
-            type={btnType['accept'] || 'tertiary'}
+            type={typeMap[type]?.btnType || 'tertiary'}
             onClick={this.handleAcceptClick}
             autoFocus={focused === 'accept'}
             focus
             block
           >
-            {accpetLabel}
+            {acceptLabel}
           </Button>
         }
         {!!cancelLabel &&
           <Button
-            type={btnType['cancel'] || 'tertiary'}
+            type="tertiary"
             onClick={this.handleCancelClick}
             autoFocus={focused === 'cancel'}
             focus
@@ -74,9 +72,9 @@ DialogButtons.contextTypes = {
 
 DialogButtons.propTypes = {
   className: PropTypes.string,
-  accpetLabel: PropTypes.string,
+  acceptLabel: PropTypes.string,
   cancelLabel: PropTypes.string,
-  primary: PropTypes.oneOf(['accept', 'cancel']),
+  type: PropTypes.oneOf(['confirm', 'accept', 'warning', 'danger', 'success', 'info', 'error']),
   focused: PropTypes.oneOf(['accept', 'cancel', null]),
   onClose: PropTypes.func,
   onAccept: PropTypes.func,

diff --git a/src/components/dialog/DialogHeader.js b/src/components/dialog/DialogHeader.js
@@ -2,19 +2,11 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import Icon from '../Icon'
-
-const iconMap = {
-  'confirm': 'question',
-  'warning': 'warning',
-  'danger': 'warning',
-  'success': 'accept',
-  'info': 'info',
-  'error': 'warning'
-}
+import { typeMap } from './config'
 
 const DialogHeader = (props, context) => {
   const { className, icon, type, ...other } = props
-  const iconType = icon || iconMap[type]
+  const iconType = icon || typeMap[type]?.icon
   return (
     <div className={cx(`${prefixCls}-dialog__header`, className)} {...other}>
       <Icon type={iconType} className={cx(`${prefixCls}-dialog__header-icon`, `${prefixCls}-dialog__header-icon_${type}`)} />
@@ -25,7 +17,7 @@ const DialogHeader = (props, context) => {
 DialogHeader.propTypes = {
   className: PropTypes.string,
   icon: PropTypes.string,
-  type: PropTypes.oneOf(['confirm', 'warning', 'danger', 'success', 'info', 'error'])
+  type: PropTypes.oneOf(['confirm', 'accept', 'warning', 'danger', 'success', 'info', 'error'])
 }
 
 DialogHeader.defaultProps = {

diff --git a/src/components/dialog/config.js b/src/components/dialog/config.js
@@ -0,0 +1,29 @@
+export const typeMap = {
+  confirm: {
+    icon: 'question',
+    btnType: 'primary'
+  },
+  accept: {
+    icon: 'checked-alt',
+    btnType: 'accept'
+  },
+  warning: {
+    icon: 'warning',
+    btnType: 'warning'
+  },
+  danger: {
+    icon: 'remove',
+    btnType: 'danger'
+  },
+  success: {
+    icon: 'accept'
+  },
+  info: {
+    icon: 'info',
+    btnType: 'primary'
+  },
+  error: {
+    icon: 'remove',
+    btnType: 'danger'
+  }
+}
diff --git a/src/components/dialog/docs/dialog.dox b/src/components/dialog/docs/dialog.dox
@@ -25,8 +25,7 @@ class DialogBasic extends Component {
 
 /**
  * @title 对话框种类
- * @desc 按照提示的由弱到强，共提供了 `confirm` , `warning` 和 `danger` 这三种类型的对话框。
- * @note `danger` 类型对话框可以嵌套在 `warning` 类型对话框 `ACCEPT` 里面，让与用户的交互有由弱到强的层次感。
+ * @desc 按照提示的种类，共提供了 `confirm` , `accept`, `warning` 和 `danger` 这四种基础对话框。
  */
 import dialog from 'earth-ui/lib/dialog'
 import Button from 'earth-ui/lib/Button'
@@ -39,6 +38,7 @@ class DialogTypes extends Component {
     return (
       <div>
         <Button type="secondary" onClick={() => this.handleClick('confirm')}>Confirm</Button>
+        <Button type="secondary" onClick={() => this.handleClick('accept')}>Accept</Button>
         <Button type="secondary" onClick={() => this.handleClick('warning')}>Warning</Button>
         <Button type="secondary" onClick={() => this.handleClick('danger')}>Danger</Button>
       </div>
@@ -49,11 +49,12 @@ class DialogTypes extends Component {
 /**
  * @title null
  * @renderModel run
+ * @desc `danger` 类型对话框可以嵌套在 `warning` 类型对话框 `ACCEPT` 里面，让与用户的交互有由弱到强的层次感。
  */
 import dialog from 'earth-ui/lib/dialog'
 import Button from 'earth-ui/lib/Button'
 
-class DialogWarining extends Component {
+class DialogWarning extends Component {
   handleClick = () => {
     ;dialog.warning('This will delete the thing.', 'Delete It', {
     	onAccept: function() {
@@ -92,9 +93,9 @@ class DialogButtonsLabel extends Component {
 }
 
 /**
- * @title 自定义按钮类型
+ * @title 自定义聚焦按钮
  * @renderModel run
- * @desc 对话框的按钮默认为 `tertiary` (灰色) 类型, 但你可以将 `ACCEPT` 和 `CANCEL` 按钮定制为 `primary` 类型. 你也可以根据需要去切换默认的聚焦按钮为 `ACCEPT` 还是 `CANCEL` 按钮。
+ * @desc 对话框的默认的聚焦按钮为 `CANCEL`, 你也可以根据需要去切换 `ACCEPT` 或 `CANCEL` 按钮。
  * @note 在该示例中，没有指定 `CANCEL` 按钮的名称，那么 `options` (`{...}`) 作为第三个参数即可。
  */
 import dialog from 'earth-ui/lib/dialog'
@@ -103,7 +104,6 @@ import Button from 'earth-ui/lib/Button'
 class DialogButtonsType extends Component {
   handleClick = () => {
     ;dialog.confirm('Will you try?', 'Join Now', {
-      primary: 'accept',
       focused: 'accept'
     });
   }
@@ -124,7 +124,6 @@ class DialogIcon extends Component {
   handleClick = () => {
     ;dialog.confirm('Proceed to Checkout?', 'Check Out', {
       icon: 'cart',
-      primary: 'accept',
       focused: 'accept'
     });
   }

diff --git a/src/components/dialog/index.js b/src/components/dialog/index.js
@@ -20,7 +20,7 @@ let render = props => {
 
   render = nextProps => {
     props = Object.assign({}, props, nextProps)
-    const { open, backdrop, lock, type, message, options, accpetLabel, cancelLabel } = props
+    const { open, backdrop, lock, type, message, options, acceptLabel, cancelLabel } = props
     if (isOpen && open) {
       return messageQueue.push(props)
     }
@@ -34,7 +34,14 @@ let render = props => {
             dangerouslySetInnerHTML={{ __html: marked(message) }}
           />
         </DialogBody>
-        <DialogButtons focused={options?.focused} onClose={handleClose} accpetLabel={accpetLabel} cancelLabel={cancelLabel} {...options} />
+        <DialogButtons
+          type={type}
+          focused={options?.focused}
+          onClose={handleClose}
+          acceptLabel={acceptLabel}
+          cancelLabel={cancelLabel}
+          {...options}
+        />
       </Dialog>
     ), container)
     props.open || handleClose()
@@ -51,18 +58,18 @@ const getDialogParams = args => {
   })
   return {
     message: stringArray[0] || 'Dialog message must be provided.',
-    accpetLabel: stringArray[1] || 'OK',
+    acceptLabel: stringArray[1] || 'OK',
     cancelLabel: stringArray[2] || 'CANCEL',
     options
   }
 }
 
 const dialog = {
   confirm () {
-    const { message, accpetLabel, cancelLabel, options } = getDialogParams(arguments)
+    const { message, acceptLabel, cancelLabel, options } = getDialogParams(arguments)
     render({
       message,
-      accpetLabel,
+      acceptLabel,
       cancelLabel,
       options,
       type: 'confirm',
@@ -71,11 +78,24 @@ const dialog = {
       open: true
     })
   },
+  accept () {
+    const { message, acceptLabel, cancelLabel, options } = getDialogParams(arguments)
+    render({
+      message,
+      acceptLabel,
+      cancelLabel,
+      options,
+      type: 'accept',
+      backdrop: true,
+      lock: true,
+      open: true
+    })
+  },
   warning () {
-    const { message, accpetLabel, cancelLabel, options } = getDialogParams(arguments)
+    const { message, acceptLabel, cancelLabel, options } = getDialogParams(arguments)
     render({
       message,
-      accpetLabel,
+      acceptLabel,
       cancelLabel,
       options,
       type: 'warning',
@@ -85,10 +105,10 @@ const dialog = {
     })
   },
   danger () {
-    const { message, accpetLabel, cancelLabel, options } = getDialogParams(arguments)
+    const { message, acceptLabel, cancelLabel, options } = getDialogParams(arguments)
     render({
       message,
-      accpetLabel,
+      acceptLabel,
       cancelLabel,
       options,
       type: 'danger',

diff --git a/src/components/dialog/index.less b/src/components/dialog/index.less
@@ -117,15 +117,15 @@ body.@{prefix-cls}-dialog_open {
     &_confirm, &_info {
       color: @ui-color-blue;
     }
+    &_accept, &_success {
+      color: @ui-color-green;
+    }
     &_warning {
       color: @ui-color-orange;
     }
     &_danger, &_error {
       color: @ui-color-red;
     }
-    &_success {
-      color: @ui-color-green;
-    }
   }
 }
 

diff --git a/src/components/notification/index.js b/src/components/notification/index.js
@@ -21,7 +21,7 @@ let render = props => {
 
   render = nextProps => {
     props = Object.assign({}, props, nextProps)
-    const { open, backdrop, lock, type, accpetLabel, options, message, autoClose, duration } = props
+    const { open, backdrop, lock, type, acceptLabel, options, message, autoClose, duration } = props
     if (isOpen && open) {
       // messageQueue will be [] if there is only one notification.
       return messageQueue.push(props)
@@ -43,7 +43,7 @@ let render = props => {
             dangerouslySetInnerHTML={{ __html: marked(message) }}
           />
         </DialogBody>
-        {!!accpetLabel && <DialogButtons focused={options?.focused} accpetLabel={accpetLabel} {...options} />}
+        {!!acceptLabel && <DialogButtons type={type} focused={options?.focused} acceptLabel={acceptLabel} {...options} />}
       </Dialog>
     ), container)
   }
@@ -61,7 +61,7 @@ const getNotificationParams = args => {
   })
   return {
     message: stringArray[0] || 'Notification message must be provided.',
-    accpetLabel: stringArray[1] || 'OK',
+    acceptLabel: stringArray[1] || 'OK',
     duration,
     options
   }
@@ -72,7 +72,7 @@ const notification = {
     const { message, duration, options } = getNotificationParams(arguments)
     render({
       message,
-      accpetLabel: null,
+      acceptLabel: null,
       options,
       type: 'success',
       backdrop: false,
@@ -83,10 +83,10 @@ const notification = {
     })
   },
   info () {
-    const { message, accpetLabel, options } = getNotificationParams(arguments)
+    const { message, acceptLabel, options } = getNotificationParams(arguments)
     render({
       message,
-      accpetLabel,
+      acceptLabel,
       options,
       type: 'info',
       backdrop: true,
@@ -96,10 +96,10 @@ const notification = {
     })
   },
   warning () {
-    const { message, accpetLabel, options } = getNotificationParams(arguments)
+    const { message, acceptLabel, options } = getNotificationParams(arguments)
     render({
       message,
-      accpetLabel,
+      acceptLabel,
       options,
       type: 'warning',
       backdrop: true,
@@ -109,10 +109,10 @@ const notification = {
     })
   },
   error () {
-    const { message, accpetLabel, options } = getNotificationParams(arguments)
+    const { message, acceptLabel, options } = getNotificationParams(arguments)
     render({
       message,
-      accpetLabel,
+      acceptLabel,
       options,
       type: 'error',
       backdrop: true,