bee-cascader - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

build/rc/index.js

@@ -307,7 +307,5 @@ 'use strict';
       showClose: false, //是否显示清空按钮
-      inputValue: initInputValue, //输入框显示的值
-      option: initOptions //下拉面板中的数据源
+      inputValue: initInputValue //输入框显示的值
     };
     _this.defaultFieldNames = { label: 'label', value: 'value', children: 'children' };
-    _this.uniqueID = _this.uniqueID.bind(_this);
     return _this;
@@ -343,9 +341,2 @@ }
 
-  Rcascader.prototype.uniqueID = function uniqueID() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-    }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-  };
-
   Rcascader.prototype.getPopupDOMNode = function getPopupDOMNode() {
@@ -408,6 +399,9 @@ return this.trigger.getPopupDomNode();
     e.preventDefault();
+    this.handlePopupVisibleChange(false);
     this.setState({
       inputValue: '',
-      activeValue: []
+      activeValue: [],
+      value: []
     });
+    this.props.onChange && this.props.onChange('');
   };
@@ -423,3 +417,4 @@
         options = _state.options,
-        activeValue = _state.activeValue;
+        activeValue = _state.activeValue,
+        value = _state.value;
 
@@ -450,3 +445,4 @@ var _props3 = this.props,
         onItemDoubleClick: this.handleItemDoubleClick,
-        visible: this.state.popupVisible
+        visible: this.state.popupVisible,
+        value: this.state.value
       }));
@@ -453,0 +449,0 @@ } else {

CHANGELOG.md

@@ -0,1 +1,6 @@
+<a name="2.1.2"></a>
+## [2.1.2](https://github.com/tinper-bee/bee-cascader/compare/v2.1.1...v2.1.2) (2019-03-28)
+
+
+
 <a name="2.1.1"></a>
@@ -2,0 +7,0 @@ ## [2.1.1](https://github.com/tinper-bee/bee-cascader/compare/v2.1.0...v2.1.1) (2019-03-19)

demo/index-demo-base.js

@@ -1,17 +0,15 @@
-import {Col, Row} from 'bee-layout';
-import {Panel} from 'bee-panel';
-import Button from 'bee-button';
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { Con, Row, Col } from 'bee-layout';
+import { Panel } from 'bee-panel';
+import Drawer from 'bee-drawer';
+import Clipboard from 'bee-clipboard'; 
+import Button from '../src';
 
 
-const CARET = <i className="uf uf-arrow-down"></i>;
 
-const CARETUP = <i className="uf uf-arrow-up"></i>;
-
-
 {demolist}
 
 class Demo extends Component {
-    constructor(props) {
+    constructor(props){
         super(props);
@@ -21,34 +19,44 @@ this.state = {
         }
-        this.handleClick = this.handleClick.bind(this);
     }
-
-    handleClick() {
-        this.setState({open: !this.state.open})
+    handleClick=()=> {
+        this.setState({ open: !this.state.open })
     }
+    fCloseDrawer=()=>{
+        this.setState({
+            open: false
+        })
+    }
 
-    render() {
-        const {title, example, code, desc, scss_code} = this.props;
-        let caret = this.state.open ? CARETUP : CARET;
-        let text = this.state.open ? "隐藏代码" : "查看代码";
+    render () {
+        const { title, example, code, desc, scss_code  } = this.props;
 
         const header = (
             <div>
-                {example}
-                <Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
-                    {caret}
-                    {text}
-                </Button>
+                <p className='component-title'>{ title }</p>
+                <p>{ desc }</p>
+                <span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
             </div>
         );
         return (
-            <Col md={12} id={title.trim()} >
-                <h3>{title}</h3>
-                <p>{desc}</p>
-                <Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
-                       footerStyle={{padding: 0}}>
-                    <pre><code className="hljs javascript">{code}</code></pre>
-                    {!!scss_code ? <pre><code className="hljs css">{scss_code}</code></pre> : null}
-                </Panel>
-            </Col>
-        )
+            <Col md={12} id={title.trim()} className='component-demo'>
+            <Panel header={header}>
+                {example}
+            </Panel>
+           
+            <Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
+            <div className='component-code-copy'> JS代码 
+                <Clipboard action="copy" text={code}/>
+            </div>
+            <pre className="pre-js">
+                <code className="hljs javascript">{ code }</code>
+            </pre >
+            {!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码 
+                <Clipboard action="copy" text={scss_code}/>
+            </div>:null }
+                { !!scss_code ? <pre className="pre-css">
+                 <code className="hljs css">{ scss_code }</code>
+                 </pre> : null }
+            </Drawer>
+        </Col>
+    )
     }
@@ -58,19 +66,17 @@ }
 class DemoGroup extends Component {
-    constructor(props) {
+    constructor(props){
         super(props)
     }
-
-    render() {
+    render () {
         return (
             <Row>
-                {DemoArray.map((child, index) => {
+            {DemoArray.map((child,index) => {
 
-                    return (
-                        <Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
-                              desc={child.desc} key={index}/>
-                    )
+                return (
+            <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
+    )
 
-                })}
-            </Row>
-        )
+    })}
+    </Row>
+    )
     }
@@ -77,0 +83,0 @@ }

demo/index.js

@@ -1,13 +0,11 @@
-import {Col, Row} from 'bee-layout';
-import {Panel} from 'bee-panel';
-import Button from 'bee-button';
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { Con, Row, Col } from 'bee-layout';
+import { Panel } from 'bee-panel';
+import Drawer from 'bee-drawer';
+import Clipboard from 'bee-clipboard'; 
+import Button from '../src';
 
 
-const CARET = <i className="uf uf-arrow-down"></i>;
 
-const CARETUP = <i className="uf uf-arrow-up"></i>;
-
-
 var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var Demo7 = require("./demolist/Demo7");var DemoArray = [{"example":<Demo1 />,"title":" 基础级联菜单","code":"/**\r\n *\r\n * @title 基础级联菜单\r\n * @description 级联选择对数据有较严格要求，请参照示例的格式使用options，每项数据至少包含 value、label 两项，子集为 children，以此类推。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\nclass Demo1 extends Component {\r\n\r\n\tonChange = (value, selectedOptions) => {\r\n    \tconsole.log(value, selectedOptions);\r\n\t}\r\n\t\r\n \trender(){\r\n \t\treturn(\r\n\t\t\t<Row>\r\n\t\t\t\t<Col md={4}>\r\n\t\t\t\t\t<div className=\"height-150\">\r\n\t\t\t\t\t\t<Cascader \r\n\t\t\t\t\t\t\toptions = {options} \r\n\t\t\t\t\t\t\tonChange = {this.onChange}\r\n\t\t\t\t\t\t\tplaceholder = \"请选择\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Col>\r\n\t\t\t</Row>\r\n \t\t)\r\n \t}\r\n}\r\n","desc":" 级联选择对数据有较严格要求，请参照示例的格式使用options，每项数据至少包含 value、label 两项，子集为 children，以此类推。"},{"example":<Demo2 />,"title":" 默认值","code":"/**\r\n *\r\n * @title 默认值\r\n * @description 默认值通过数组的方式指定。注：需要给数组的每一项指定label和value属性。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\n\r\nconst defaultOptions = [{\r\n    label: '基础组件',\r\n    value: 'jczj',\r\n}, {\r\n    label: '导航',\r\n    value: 'dh',\r\n}, {\r\n    label: '菜单',\r\n    value: 'cd',\r\n}];\r\n\r\nclass Demo2 extends Component {\r\n\r\n\tonChange = (value, selectedOptions) => {\r\n        console.log(value, selectedOptions);\r\n\t}\r\n\t\r\n \trender(){\r\n \t\treturn(\r\n\t\t\t<Row>\r\n\t\t\t\t<Col md={4}>\r\n\t\t\t\t\t<div className=\"height-150\">\r\n                        <Cascader \r\n                            defaultValue={defaultOptions}\r\n\t\t\t\t\t\t\toptions = {options} \r\n\t\t\t\t\t\t\tonChange = {this.onChange}\r\n\t\t\t\t\t\t\tplaceholder = \"请选择\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Col>\r\n\t\t\t</Row>\r\n \t\t)\r\n \t}\r\n}\r\n","desc":" 默认值通过数组的方式指定。注：需要给数组的每一项指定label和value属性。"},{"example":<Demo3 />,"title":" 移入展开","code":"/**\r\n *\r\n * @title 移入展开\r\n * @description 鼠标hover时展开菜单子选项\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\n\r\nclass Demo3 extends Component {\r\n\r\n    onChange = (value) => {\r\n        console.log(value)\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Cascader expandTrigger=\"hover\" options={options} onChange={this.onChange} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 鼠标hover时展开菜单子选项"},{"example":<Demo4 />,"title":" 禁用状态","code":"/**\r\n *\r\n * @title 禁用状态\r\n * @description 通过`disabled`参数设置是否禁用。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n    label: '浙江',\r\n    value: 'zj',\r\n    children: [{\r\n            label: '杭州',\r\n            value: 'hz',\r\n            children: [{\r\n                label: '西湖',\r\n                value: 'xh',\r\n                children: [{\r\n                    label: '白娘子',\r\n                    value: 'bnz'\r\n                },{\r\n                    label: '许仙',\r\n                    value: 'xx'\r\n                }]\r\n            }]\r\n        }]\r\n    },\r\n    {\r\n        label: '江苏',\r\n    value: 'js',\r\n    children: [{\r\n            label: '南京',\r\n            value: 'nj',\r\n            children: [{\r\n                label: '中华门',\r\n                value: 'zhm'\r\n            }]\r\n        }]\r\n    },\r\n    {\r\n        label: '山东',\r\n    value: 'sd'\r\n    }\r\n];\r\n\r\nclass Demo4 extends Component {  \r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Cascader disabled options={options} placeholder=\"请选择地址\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 通过`disabled`参数设置是否禁用。"},{"example":<Demo5 />,"title":" 选择即改变","code":"/**\r\n *\r\n * @title 选择即改变\r\n * @description 设置属性 `changeOnSelect` 点任何一级都可以选择。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\nimport { Cascader,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n\tlabel: '基础组件',\r\n\tvalue: 'jczj',\r\n\tchildren: [{\r\n\t\tlabel: '导航',\r\n\t\tvalue: 'dh',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '面包屑',\r\n\t\t\tvalue: 'mbx'\r\n\t\t},{\r\n\t\t\tlabel: '分页',\r\n\t\t\tvalue: 'fy'\r\n\t\t},{\r\n\t\t\tlabel: '标签',\r\n\t\t\tvalue: 'bq'\r\n\t\t},{\r\n\t\t\tlabel: '菜单',\r\n\t\t\tvalue: 'cd'\r\n\t\t}]\r\n\t},{\r\n\t\tlabel: '反馈',\r\n\t\tvalue: 'fk',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '模态框',\r\n\t\t\tvalue: 'mtk'\r\n\t\t},{\r\n\t\t\tlabel: '通知',\r\n\t\t\tvalue: 'tz'\r\n\t\t}]\r\n \t},\r\n \t{\r\n\t\tlabel: '表单',\r\n \t    value: 'bd'\r\n \t}]\r\n\t},{\r\n\t\tlabel: '应用组件',\r\n\t\tvalue: 'yyzj',\r\n\t\tchildren: [{\r\n\t\t\tlabel: '参照',\r\n\t\t\tvalue: 'ref',\r\n\t\t\tchildren: [{\r\n\t\t\t\tlabel: '树参照',\r\n\t\t\t\tvalue: 'reftree'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '表参照',\r\n\t\t\t\tvalue: 'reftable'\r\n\t\t\t},{\r\n\t\t\t\tlabel: '穿梭参照',\r\n\t\t\t\tvalue: 'reftransfer'\r\n\t\t\t}]\r\n\t\t}]\r\n\t}\r\n];\r\n\r\nclass Demo5 extends Component {  \r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Cascader changeOnSelect options={options} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 设置属性 `changeOnSelect` 点任何一级都可以选择。"},{"example":<Demo6 />,"title":" 动态改变options","code":"/**\r\n *\r\n * @title 动态改变options\r\n * @description 通过动态设置`options`参数，即可灵活改变数据源。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\n\nimport { Cascader, Button,  Row, Col  } from 'tinper-bee';\r\n\r\nconst baseOptions = [{\r\n    label: '基础组件',\r\n    value: 'jczj',\r\n    children: [{\r\n        label: '导航',\r\n        value: 'dh',\r\n        children: [{\r\n            label: '面包屑',\r\n            value: 'mbx'\r\n        },{\r\n            label: '分页',\r\n            value: 'fy'\r\n        },{\r\n            label: '标签',\r\n            value: 'bq'\r\n        },{\r\n            label: '菜单',\r\n            value: 'cd'\r\n        }]\r\n    },{\r\n        label: '反馈',\r\n        value: 'fk',\r\n        children: [{\r\n            label: '模态框',\r\n            value: 'mtk'\r\n        },{\r\n            label: '通知',\r\n            value: 'tz'\r\n        }]\r\n        },\r\n        {\r\n        label: '表单',\r\n            value: 'bd'\r\n        }]\r\n    },{\r\n        label: '应用组件',\r\n        value: 'yyzj',\r\n        children: [{\r\n            label: '参照',\r\n            value: 'ref',\r\n            children: [{\r\n                label: '树参照',\r\n                value: 'reftree'\r\n            },{\r\n                label: '表参照',\r\n                value: 'reftable'\r\n            },{\r\n                label: '穿梭参照',\r\n                value: 'reftransfer'\r\n            }]\r\n        }]\r\n    }\r\n];\r\n\r\nclass Demo6 extends Component {  \r\n    state = {\r\n        options: baseOptions\r\n    }\r\n    \r\n    changeOptions = () => {\r\n        this.setState({\r\n            options: [{\r\n                label: '北京',\r\n                value: 'bj',\r\n                children: [{\r\n                        label: '故宫',\r\n                        value: 'gg',\r\n                    },{\r\n                        label: '天坛',\r\n                        value: 'tt',\r\n                    },{\r\n                        label: '王府井',\r\n                        value: 'wfj',\r\n                    }]\r\n                },\r\n                {\r\n                    label: '江苏',\r\n                    value: 'js',\r\n                    children: [{\r\n                            label: '南京',\r\n                            value: 'nj',\r\n                            children: [{\r\n                                label: '中华门',\r\n                                value: 'zhm'\r\n                            }]\r\n                        }]\r\n                    },\r\n                    {\r\n                        label: '山东',\r\n                    value: 'sd'\r\n                }\r\n            ]\r\n        })\r\n    }\r\n\r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150\">\r\n                        <Button colors=\"primary\" onClick={this.changeOptions} style={{marginBottom:8+'px'}}>点击改变选项数组</Button>\r\n                        <Cascader options={this.state.options} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 通过动态设置`options`参数，即可灵活改变数据源。"},{"example":<Demo7 />,"title":" 不同尺寸的Cascader","code":"/**\r\n *\r\n * @title 不同尺寸的Cascader\r\n * @description 通过设置`size`属性为 \"lg\" 和 \"sm\" 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。\r\n *\r\n */\r\n\r\nimport React, { Component } from 'react';\r\n\n\nimport { Cascader, Button,  Row, Col  } from 'tinper-bee';\r\n\r\nconst options = [{\r\n    label: '基础组件',\r\n    value: 'jczj',\r\n    children: [{\r\n        label: '导航',\r\n        value: 'dh',\r\n        children: [{\r\n            label: '面包屑',\r\n            value: 'mbx'\r\n        },{\r\n            label: '分页',\r\n            value: 'fy'\r\n        },{\r\n            label: '标签',\r\n            value: 'bq'\r\n        },{\r\n            label: '菜单',\r\n            value: 'cd'\r\n        }]\r\n    },{\r\n        label: '反馈',\r\n        value: 'fk',\r\n        children: [{\r\n            label: '模态框',\r\n            value: 'mtk'\r\n        },{\r\n            label: '通知',\r\n            value: 'tz'\r\n        }]\r\n        },\r\n        {\r\n        label: '表单',\r\n            value: 'bd'\r\n        }]\r\n    },{\r\n        label: '应用组件',\r\n        value: 'yyzj',\r\n        children: [{\r\n            label: '参照',\r\n            value: 'ref',\r\n            children: [{\r\n                label: '树参照',\r\n                value: 'reftree'\r\n            },{\r\n                label: '表参照',\r\n                value: 'reftable'\r\n            },{\r\n                label: '穿梭参照',\r\n                value: 'reftransfer'\r\n            }]\r\n        }]\r\n    }\r\n];\r\n\r\nclass Demo7 extends Component {  \r\n\r\n    render(){\r\n        return (\r\n            <Row>\r\n                <Col md={4}>\r\n                    <div className=\"height-150 demo7\">\r\n                        <Cascader size=\"sm\" options={options} placeholder=\"请选择\"/>\r\n                        <Cascader options={options} placeholder=\"请选择\"/>\r\n                        <Cascader size=\"lg\" options={options} placeholder=\"请选择\"/>\r\n                    </div>\r\n                </Col>\r\n            </Row>\r\n        )\r\n    }\r\n}\r\n\r\n","desc":" 通过设置`size`属性为 \"lg\" 和 \"sm\" 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。","scss_code":".demo7{\r\n    span{\r\n        margin-bottom: 16px;\r\n    }\r\n    .u-form-control.lg{\r\n        width: 183px;\r\n    }\r\n}"}]
@@ -17,3 +15,3 @@
 class Demo extends Component {
-    constructor(props) {
+    constructor(props){
         super(props);
@@ -23,34 +21,44 @@ this.state = {
         }
-        this.handleClick = this.handleClick.bind(this);
     }
-
-    handleClick() {
-        this.setState({open: !this.state.open})
+    handleClick=()=> {
+        this.setState({ open: !this.state.open })
     }
+    fCloseDrawer=()=>{
+        this.setState({
+            open: false
+        })
+    }
 
-    render() {
-        const {title, example, code, desc, scss_code} = this.props;
-        let caret = this.state.open ? CARETUP : CARET;
-        let text = this.state.open ? "隐藏代码" : "查看代码";
+    render () {
+        const { title, example, code, desc, scss_code  } = this.props;
 
         const header = (
             <div>
-                {example}
-                <Button style={{"marginTop": "10px"}} shape="block" onClick={this.handleClick}>
-                    {caret}
-                    {text}
-                </Button>
+                <p className='component-title'>{ title }</p>
+                <p>{ desc }</p>
+                <span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
             </div>
         );
         return (
-            <Col md={12} id={title.trim()} >
-                <h3>{title}</h3>
-                <p>{desc}</p>
-                <Panel collapsible headerContent expanded={this.state.open} colors='bordered' header={header}
-                       footerStyle={{padding: 0}}>
-                    <pre><code className="hljs javascript">{code}</code></pre>
-                    {!!scss_code ? <pre><code className="hljs css">{scss_code}</code></pre> : null}
-                </Panel>
-            </Col>
-        )
+            <Col md={12} id={title.trim()} className='component-demo'>
+            <Panel header={header}>
+                {example}
+            </Panel>
+           
+            <Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
+            <div className='component-code-copy'> JS代码 
+                <Clipboard action="copy" text={code}/>
+            </div>
+            <pre className="pre-js">
+                <code className="hljs javascript">{ code }</code>
+            </pre >
+            {!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码 
+                <Clipboard action="copy" text={scss_code}/>
+            </div>:null }
+                { !!scss_code ? <pre className="pre-css">
+                 <code className="hljs css">{ scss_code }</code>
+                 </pre> : null }
+            </Drawer>
+        </Col>
+    )
     }
@@ -60,19 +68,17 @@ }
 class DemoGroup extends Component {
-    constructor(props) {
+    constructor(props){
         super(props)
     }
-
-    render() {
+    render () {
         return (
             <Row>
-                {DemoArray.map((child, index) => {
+            {DemoArray.map((child,index) => {
 
-                    return (
-                        <Demo example={child.example} title={child.title} code={child.code} scss_code={child.scss_code}
-                              desc={child.desc} key={index}/>
-                    )
+                return (
+            <Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
+    )
 
-                })}
-            </Row>
-        )
+    })}
+    </Row>
+    )
     }
@@ -79,0 +85,0 @@ }

docs/api.md

@@ -1,2 +0,2 @@
-# Cascader
+# 级联菜单 Cascader
 
@@ -3,0 +3,0 @@ 级联选择框。

package.json

 {
  "name": "bee-cascader",
- "version": "2.1.1",
+ "version": "2.1.2",
  "description": "Cascader ui component for react",
@@ -56,2 +56,4 @@ "keywords": [
   "bee-button": "latest",
+  "bee-clipboard": "^2.0.0",
+  "bee-drawer": "0.0.2",
   "bee-layout": "latest",
@@ -58,0 +60,0 @@ "bee-panel": "latest",

src/rc/index.jsx

@@ -80,6 +80,4 @@ /**
       inputValue: initInputValue,   //输入框显示的值
-      option : initOptions   //下拉面板中的数据源
     };
     this.defaultFieldNames = { label: 'label', value: 'value', children: 'children' };
-    this.uniqueID = this.uniqueID.bind(this);
   }
@@ -112,10 +110,2 @@
 
-  uniqueID() {
-    function s4(){
-        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-    }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
-            s4() + '-' + s4() + s4() + s4();
-  }
-
   getPopupDOMNode() {
@@ -337,11 +327,14 @@ return this.trigger.getPopupDomNode();
     e.stopPropagation();
-		e.preventDefault();
+    e.preventDefault();
+    this.handlePopupVisibleChange(false);
     this.setState({
       inputValue: '',
-      activeValue: []
+      activeValue: [],
+      value: []
     })
+    this.props.onChange&&this.props.onChange('');
   }
 
   render() {
-    const { showClose, popupVisible, inputValue, options, activeValue } = this.state;
+    const { showClose, popupVisible, inputValue, options, activeValue, value } = this.state;
     const {
@@ -373,2 +366,3 @@ prefixCls,
           visible={this.state.popupVisible}
+          value={this.state.value}
         />
@@ -375,0 +369,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2079439

increased by39.15%

Lines of code

23450

increased by40.84%

Worsened metrics

Dev dependency count

13

increased by18.18%

Number of low supply chain risk alerts

24

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes