@wis

packages/modal/README.md

+# `@wisdom-components/modal`
+
+> TODO: description
+
+## Usage
+
+```
+const modal = require('@wisdom-components/modal');
+
+// TODO: DEMONSTRATE API
+```

packages/modal/package.json

+{
+  "name": "@wisdom-components/modal",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "src/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/modal/src/demos/Base.js

+import React from 'react';
+import PandaModal from '../index';
+import { Button } from 'antd'
+
+const iconArr = [{ "text": "assets\\images\\Device", "list": [{ "text": "二供.svg", "value": "assets/images/Device/二供.svg" }, { "text": "二供泵房.svg", "value": "assets/images/Device/二供泵房.svg" }, { "text": "压力表.svg", "value": "assets/images/Device/压力表.svg" }, { "text": "微型泵房.svg", "value": "assets/images/Device/微型泵房.svg" }, { "text": "水厂.svg", "value": "assets/images/Device/水厂.svg" }, { "text": "水源井.svg", "value": "assets/images/Device/水源井.svg" }, { "text": "水表.svg", "value": "assets/images/Device/水表.svg" }, { "text": "水质.svg", "value": "assets/images/Device/水质.svg" }, { "text": "水龄控制仪.svg", "value": "assets/images/Device/水龄控制仪.svg" }, { "text": "流量计.svg", "value": "assets/images/Device/流量计.svg" }, { "text": "节水控制仪.svg", "value": "assets/images/Device/节水控制仪.svg" }, { "text": "调峰泵房.svg", "value": "assets/images/Device/调峰泵房.svg" }, { "text": "送水泵.svg", "value": "assets/images/Device/送水泵.svg" }, { "text": "通用设备.svg", "value": "assets/images/Device/通用设备.svg" }, { "text": "通用设备_备用.svg", "value": "assets/images/Device/通用设备_备用.svg" }, { "text": "预制泵站.svg", "value": "assets/images/Device/预制泵站.svg" }] }, { "text": "assets\\images\\tree", "list": [{ "text": "二供S.svg", "value": "assets/images/Device/二供.svg" }, { "text": "二供泵房S.svg", "value": "assets/images/Device/二供泵房.svg" }, { "text": "压力表S.svg", "value": "assets/images/Device/压力表.svg" }, { "text": "微型泵房S.svg", "value": "assets/images/Device/微型泵房.svg" }, { "text": "水厂S.svg", "value": "assets/images/Device/水厂.svg" }, { "text": "水源井S.svg", "value": "assets/images/Device/水源井.svg" }, { "text": "水表S.svg", "value": "assets/images/Device/水表.svg" }, { "text": "水质S.svg", "value": "assets/images/Device/水质.svg" }, { "text": "水龄控制仪S.svg", "value": "assets/images/Device/水龄控制仪.svg" }, { "text": "流量计S.svg", "value": "assets/images/Device/流量计.svg" }, { "text": "节水控制仪S.svg", "value": "assets/images/Device/节水控制仪.svg" }, { "text": "调峰泵房S.svg", "value": "assets/images/Device/调峰泵房.svg" }, { "text": "送水泵S.svg", "value": "assets/images/Device/送水泵.svg" }, { "text": "通用设备S.svg", "value": "assets/images/Device/通用设备.svg" }, { "text": "通用设备_备用S.svg", "value": "assets/images/Device/通用设备_备用.svg" }, { "text": "预制泵站S.svg", "value": "assets/images/Device/预制泵站.svg" }] }]
+
+class ModalDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: iconArr,
+            visible: false,
+            footer: null,
+            iconName: "",//图标名称
+        }
+    }
+
+    iconBtn = () => {
+        this.setState({
+            visible: true
+        })
+    }
+
+    choiceBtn = (name) => {
+        console.log(name)
+    }
+
+    render() {
+        return (
+            <div key={'demoBox'}>
+                <Button key={'Button1'} onClick={this.iconBtn}>点击选择图片</Button>
+                <PandaModal data={this.state.data} visible={this.state.visible} onOk={this.choiceBtn} />
+            </div>
+        );
+    }
+}
+export default ModalDemo
\ No newline at end of file

packages/modal/src/index.js

+import React from 'react';
+import { Modal, Divider, Card } from 'antd';
+
+import './modal.less';
+import defaultSrc from './水源井.svg';
+
+class pandaModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: this.props.data,
+            visible: this.props.visible || false,
+            title: this.props.title || "图片选择",
+            footer: this.props.footer || null,
+            onCancel: this.props.onCancel || (() => {
+                this.setState({
+                    visible: false
+                })
+            }),
+            onOk: this.props.onOk || (() => { }),
+            afterClose: this.props.afterClose || (() => { }),//Modal关闭的回调
+            iconName: this.props.iconName || "",//图标名称
+            selectIcon: this.props.iconName || "",//选中的名称
+        }
+    }
+
+    componentWillReceiveProps = (nextProps) => {
+        this.setState({
+            visible: true
+        })
+    }
+
+    render() {
+        const gridStyle = {
+            width: '25%',
+            textAlign: 'center',
+        };
+        const iconStr = this.state.data.map((item, index) => {
+            return <div className={'modalCenter'} key={'case_' + index}>
+                <Divider orientation="left">{item.text}</Divider>
+                {
+                    item.list.map((list, i) => {
+                        return <Card.Grid style={gridStyle} className={this.state.selectIcon == list.text.split('.')[0] ? 'cardList active' : 'cardList'}><div className={'iconList'} onClick={(() => {this.state.onOk(list); this.setState({selectIcon: list.text.split(".")[0]})})}><img src={defaultSrc} /><span>{list.text.split(".")[0]}</span></div></Card.Grid>
+                    })
+                }
+            </div>
+        })
+        // const iconStr = <div key={'case_'}>
+        //         <Divider orientation="left">Left Text</Divider>
+        //         <Card.Grid style={gridStyle}>Content</Card.Grid>
+        //         <Card.Grid hoverable={false} style={gridStyle}>
+        //         Content
+        //         </Card.Grid>
+        //         <Card.Grid style={gridStyle}>Content</Card.Grid>
+        //         <Card.Grid style={gridStyle}>Content</Card.Grid>
+        //         <Card.Grid style={gridStyle}>Content</Card.Grid>
+        //         <Card.Grid style={gridStyle}>Content</Card.Grid>
+        //         <Card.Grid style={gridStyle}>Content</Card.Grid>
+        //     </div>
+        return <Modal key={'modalBox'} title={this.state.title} visible={this.state.visible} onOk={this.state.onOk} onCancel={this.state.onCancel} footer={this.state.footer} width={800}>
+            <div key={'modalIconBox'} className={'modalIconBox'}>{iconStr}</div>
+        </Modal>
+    }
+}
+export default pandaModal;

packages/modal/src/modal.less

+.modalIconBox {
+    height: 500px;
+    overflow: auto;
+    width: 100%;
+}
+.cardList {
+    .iconList {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 12px;
+        img {
+            height: 30px;
+        }
+        span {
+            margin-top: 5px;
+        }
+    }
+}
+.cardList.active {
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+}
+

packages/modal/src/modal.md

+---
+title: ProModal - 标准模态
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# ProModal 标准模态图片选择
+<code src="./demos/Base.js">
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| data | 图片数据源 | any\[] | - |  |
+| title | 标题名称 | string | `图片选择` |  |
+| footer | 模态底部 | ReactNode | null |  |
+| onCancel | 关闭模态 | function | null |  |
+| onCancel | 确定按钮 | function | null |  |
+| afterClose | 关闭之后 | function | null |  |
+| iconName | 图片名称 | string | `` |  |

packages/modal/src/水源井.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1685FF;}
+</style>
+<path class="st0" d="M21,13c0,0,1.2,2.1-0.3,5.2c0,0,1.4,1.7,5,3.1c0,0,2.8,1,3.5-1.7c0,0,3.5-7.1-2.9-14.5c0,0-0.7-1.4-1.7,0.7
+	l-1,4C23.4,9.4,23,12.3,21,13z"/>
+<path class="st0" d="M17,21c0,0-2.1,1.2-5.2-0.3c0,0-1.7,1.4-3.1,5c0,0-1,2.8,1.7,3.5c0,0,7.1,3.5,14.5-2.9c0,0,1.4-0.7-0.7-1.7
+	l-4-1C20.6,23.5,17.7,23,17,21z"/>
+<path class="st0" d="M9,17.2c0,0-1.2-2.1,0.3-5.2c0,0-1.4-1.7-5-3.1c0,0-2.8-1-3.5,1.7c0,0-3.5,7.1,2.9,14.5c0,0,0.7,1.4,1.7-0.7
+	l1-4C6.5,20.8,7,17.7,9,17.2z"/>
+<path class="st0" d="M12.8,9c0,0,2.1-1.2,5.2,0.3c0,0,1.7-1.4,3.1-5c0,0,1-2.8-1.7-3.5c0,0-7.1-3.5-14.5,2.9c0,0-1.4,0.7,0.7,1.7
+	l4,1C9.2,6.6,12.3,7,12.8,9z"/>
+<circle class="st0" cx="14.9" cy="15.1" r="3.3"/>
+</svg>

packages/tableDemo/CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## [1.0.2](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/tabledemo@1.0.1...@wisdom-components/tabledemo@1.0.2) (2021-01-09)
 
 **Note:** Version bump only for package @wisdom-components/tabledemo
 
-
-
-
-
 ## 1.0.1 (2021-01-09)
 
 **Note:** Version bump only for package @wisdom-components/tabledemo
 
-
-
-
-
 # [1.1.0](https://g.civnet.cn:8443/test/wisdom-components/compare/@wisdom-components/pro-list@1.0.1...@wisdom-components/pro-list@1.1.0) (2020-10-29)
 
 ### Features

packages/tableDemo/src/index.js

@@ -4,5 +4,5 @@ module.exports = tableDemo;
 
 function tableDemo() {
   // TODO
-    console.log("this is table")
+  console.log('this is table');
 }