Skip to content

W
wisdom-components
Commit af55f03c authored by 李纪文's avatar 李纪文
Browse files
Options

@wis

parent 6f1bcc23
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 11 deletions
packages/modal/README.md 0 → 100644
View file @ af55f03c
# `@wisdom-components/modal`
> TODO: description
## Usage
```
const modal = require('@wisdom-components/modal');
// TODO: DEMONSTRATE API
```
packages/modal/package.json 0 → 100644
View file @ af55f03c
{
"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 0 → 100644
View file @ af55f03c
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 0 → 100644
View file @ af55f03c
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 0 → 100644
View file @ af55f03c
.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 0 → 100644
View file @ af55f03c
---
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 0 → 100644
View file @ af55f03c
<?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
View file @ af55f03c
# Change Log # Change Log
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
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) ## [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 **Note:** Version bump only for package @wisdom-components/tabledemo
## 1.0.1 (2021-01-09) ## 1.0.1 (2021-01-09)
**Note:** Version bump only for package @wisdom-components/tabledemo **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) # [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 ### Features
......
packages/tableDemo/src/index.js
View file @ af55f03c
...@@ -4,5 +4,5 @@ module.exports = tableDemo; ...@@ -4,5 +4,5 @@ module.exports = tableDemo;
function tableDemo() { function tableDemo() {
// TODO // TODO
console.log("this is table") console.log('this is table');
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment