add: ui-component layer

.eslintrc

@@ -17,7 +17,8 @@
     "no-extend-native": 0,
     "no-param-reassign": 0,
     "no-restricted-syntax": 0,
-    "no-eval": 0
+    "no-eval": 0,
+    "react/jsx-no-bind": 0
   },
   "parser": "babel-eslint",
   "parserOptions": {

src/components/layout/common.less

@@ -4,6 +4,7 @@ body {
   background-color: #f8f8f8;
 }
 // scrollbar
+
 ::-webkit-scrollbar-thumb {
   background-color: #e6e6e6;
 }
@@ -60,21 +61,6 @@ body {
   box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
 }
 
-:global .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .ant-modal {
-    top: 0;
-
-    .ant-modal-body {
-      max-height: 500px;
-      overflow-y: auto;
-    }
-  }
-}
-
 :global .ant-form-item-control {
   vertical-align: middle;
 }

src/components/ui/index.js

@@ -1,6 +1,7 @@
 import Ico from './ico.js'
 import Search from './search.js'
 import DropOption from './dropOption.js'
-import Layer from './layer.js'
 
-export { Ico, Search, DropOption, Layer }
+import layer from './layer.js'
+
+export { Ico, Search, DropOption, layer }

src/components/ui/layer.js

@@ -1,5 +1,84 @@
-const Layer = () => {
-  console.log('555')
+import { Modal, message } from 'antd'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import classnames from 'classnames'
+import styles from './layer.less'
+const { info, success, error, warning, confirm } = Modal
+
+const layer = {
+  prefixCls: 'ant-layer',
+  index: 1,
+  info,
+  success,
+  error,
+  warning,
+  confirm,
 }
 
-export default Layer
+layer.close = (index) => new Promise((resolve, reject) => {
+  const { prefixCls } = layer
+  let div = document.getElementById(`${prefixCls}-reference-${index}`)
+  if (index === undefined) {
+    const references = document.querySelectorAll(`.${prefixCls}-reference`)
+    div = references[references.length - 1]
+  }
+  if (!div) {
+    message.error('关闭失败，未找到Dom')
+    return
+  }
+  const unmountResult = ReactDOM.unmountComponentAtNode(div)
+  if (unmountResult && div.parentNode) {
+    div.parentNode.removeChild(div)
+    resolve(index)
+  } else {
+    reject(index)
+  }
+})
+
+
+layer.closeAll = () => {
+  const { prefixCls } = layer
+  const references = document.querySelectorAll(`.${prefixCls}-reference`)
+  let i = 0
+  while (i < references.length) {
+    layer.close()
+    i++
+  }
+}
+
+layer.open = (config) => {
+  const props = Object.assign({}, config)
+  const { content, ...modalProps } = props
+  const { className, wrapClassName = '', verticalCenter = true } = modalProps
+  const { prefixCls } = layer
+  const index = layer.index++
+  let div = document.createElement('div')
+  div.id = `${prefixCls}-reference-${index}`
+  div.className = `${prefixCls}-reference`
+  document.body.appendChild(div)
+
+  ReactDOM.render(
+    <Modal
+      visible
+      title="Title"
+      transitionName="zoom"
+      maskTransitionName="fade"
+      onCancel={() => {
+        layer.close(index)
+      }}
+      onOk={() => {
+        layer.close(index)
+      }}
+      {...modalProps}
+      wrapClassName={classnames({ [styles.verticalCenter]: verticalCenter, [wrapClassName]: true })}
+      className={classnames(prefixCls, className, [`${prefixCls}-${index}`])}
+    >
+      <div className={`${prefixCls}-body-wrapper`} style={{ maxHeight: document.body.clientHeight - 256 }}>
+        {content}
+      </div>
+    </Modal>, div)
+
+  return index
+}
+
+export default layer

src/components/ui/layer.less

@@ -0,0 +1,14 @@
+.verticalCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :global .ant-modal {
+    top: 0;
+    padding-bottom: 0;
+
+    .ant-modal-body {
+      overflow-y: auto;
+    }
+  }
+}

src/routes/ui/layer.js

@@ -1,53 +1,145 @@
 import React from 'react'
-// import { Layer } from '../../components/ui'
+import { layer } from '../../components/ui'
 import { Table, Row, Col, Button, Card } from 'antd'
 import './ico.less'
 
-const IcoPage = () => <div className="content-inner">
-  <Row gutter={32}>
-    <Col lg={8} md={12}>
-      <Card title="默认">
-        <Button type="primary">打开Layer</Button>
-      </Card>
-    </Col>
-  </Row>
-  <h2 style={{ margin: '16px 0' }}>Props</h2>
-  <Row>
-    <Col lg={18} md={24}>
-      <Table
-        rowKey={(record, key) => key}
-        pagination={false}
-        bordered
-        scroll={{ x: 800 }}
-        columns={[
-          {
-            title: '参数',
-            dataIndex: 'props',
-          },
-          {
-            title: '说明',
-            dataIndex: 'desciption',
-          },
-          {
-            title: '类型',
-            dataIndex: 'type',
-          },
-          {
-            title: '默认值',
-            dataIndex: 'default',
-          },
-        ]}
-        dataSource={[
-          {
-            props: 'type',
-            desciption: '图标类型',
-            type: 'String',
-            default: '-',
-          },
-        ]}
-      />
-    </Col>
-  </Row>
-</div>
+let Enum = {
+  default: 1,
+}
+
+const IcoPage = () => {
+  const handleButtonClick = (key) => {
+    if (key === Enum.default) {
+      layer.open({
+        title: '默认弹层',
+        content: <div style={{ height: 360 }}>弹层内容</div>,
+      })
+    } else if (key === Enum.default) {
+      layer.open({
+        title: '默认弹层',
+        content: <div style={{ height: 360 }}>弹层内容</div>,
+      })
+    }
+  }
+  return (<div className="content-inner">
+    <Row gutter={32}>
+      <Col lg={8} md={12}>
+        <Card title="默认">
+          <Button type="primary" onClick={handleButtonClick.bind(null, Enum.default)}>打开一个Layer</Button>
+        </Card>
+      </Col>
+    </Row>
+    <h2 style={{ margin: '16px 0' }}>API</h2>
+    <div style={{ margin: '16px 0' }}>
+      <h2 style={{ margin: '4px 0' }}>layer.open(config)</h2>
+      config对象与<a href="https://ant.design/components/modal-cn/#API" target="_blank">Modal</a>的参数基本一致，config属性如下。
+      注意：1.visible属性一般不需要设置；2.afterClose无效，layer.close()可代替;3.layer.open()返回一个唯一的layer Id
+    </div>
+    <Row>
+      <Col lg={18} md={24}>
+        <Table
+          rowKey={(record, key) => key}
+          pagination={false}
+          bordered
+          scroll={{ x: 800 }}
+          columns={[
+            {
+              title: '参数',
+              dataIndex: 'props',
+            },
+            {
+              title: '说明',
+              dataIndex: 'desciption',
+            },
+            {
+              title: '类型',
+              dataIndex: 'type',
+            },
+            {
+              title: '默认值',
+              dataIndex: 'default',
+            },
+          ]}
+          dataSource={[
+            {
+              props: 'title',
+              desciption: '标题',
+              type: 'string|ReactNode',
+              default: '标题',
+            },
+            {
+              props: 'confirmLoading',
+              desciption: '确定按钮 loading	',
+              type: 'boolean',
+              default: '无',
+            },
+            {
+              props: 'closable',
+              desciption: '是否显示右上角的关闭按钮',
+              type: 'boolean',
+              default: '无',
+            },
+            {
+              props: 'onOk',
+              desciption: '点击确定回调',
+              type: 'function(e)',
+              default: '无',
+            },
+            {
+              props: 'onCancel',
+              desciption: '点击遮罩层或右上角叉或取消按钮的回调',
+              type: 'function(e)',
+              default: '"无"',
+            },
+            {
+              props: 'width',
+              desciption: '宽度',
+              type: 'string|number',
+              default: '520',
+            },
+            {
+              props: 'okText',
+              desciption: '确认按钮文字',
+              type: 'string',
+              default: '无',
+            },
+            {
+              props: 'cancelText',
+              desciption: '取消按钮文字',
+              type: 'string',
+              default: '无',
+            },
+            {
+              props: 'maskClosable',
+              desciption: '点击蒙层是否允许关闭',
+              type: 'boolean',
+              default: 'true',
+            },
+            {
+              props: 'style',
+              desciption: '可用于设置浮层的样式，调整浮层位置等',
+              type: 'object',
+              default: '-',
+            },
+            {
+              props: 'wrapClassName',
+              desciption: '对话框外层容器的类名',
+              type: 'string',
+              default: '-',
+            },
+          ]}
+        />
+      </Col>
+    </Row>
+    <div style={{ margin: '16px 0' }}>
+      <h2 style={{ margin: '4px 0' }}>layer.close(index)</h2>
+      当index有值时，关闭指定Id的layer;当index无值时，关闭最顶层layer
+    </div>
+    <div style={{ margin: '16px 0' }}>
+      <h2 style={{ margin: '4px 0' }}>layer.closeAll()</h2>
+      关闭所有的layer
+    </div>
+  </div>)
+}
 
 export default IcoPage