【级联选择器】根据组件2.1交互修改样式

Author: fengjingxuan8

src/components/c-cascader/demos/basic.md

@@ -68,13 +68,13 @@ export default class Demo extends React.Component {
 					options={addressOptions}
 					onChange={this.onChange}
 					placeholder="Please select"
-					showSearch={{filter:this.filter }} />
+          />
 				<div style={{ marginBottom: 24, marginTop: 40 }}>任意选项支持选择</div>
 				<CCascader
 					options={addressOptions}
 					onChange={this.onChange}
 					placeholder="Please select"
-					showSearch={{filter:this.filter }}
+					showSearch={{ filter:this.filter }}
 					changeOnSelect/>
 			</div>
 		);

src/components/c-cascader/demos/customer-render.md

@@ -49,16 +49,6 @@ const addressOptions =  [
   },
 ];
 
-const defaultOptions = [{
-  label: '浙江',
-  value: 'zj',
-}, {
-  label: '杭州',
-  value: 'hangzhou',
-}, {
-  label: '余杭',
-  value: 'yuhang',
-}];
 export default function Demo() {
 	const onChange = value => {
 		console.log(value);

src/components/c-cascader/demos/multiple.md

@@ -11,7 +11,6 @@ import { CCascader } from 'cloud-react';
 const addressOptions = [{
   label: '福建',
   value: 'fj',
-	disabled: true,
   children: [{
     label: '福州',
     value: 'fuzhou',
@@ -61,27 +60,23 @@ const addressOptions = [{
   }],
 }];
 
-const defaultOptions = [{
-  label: '浙江',
-  value: 'zj',
-}, {
-  label: '杭州',
-  value: 'hangzhou',
-}, {
-  label: '余杭',
-  value: 'yuhang',
-}];
 export default function Demo() {
 	const [ value, setValue ] = useState([]);
-
+  const maxTagCount = addressOptions.reduce((acc, item) => {
+    if (item.children && item.children.length){
+      acc = acc + item.children.length;
+    } else {
+      acc += 1;
+    }
+    return acc;
+  }, 0)
 	const onChange = value => {
 		setValue(value);
 	}
 
 	const filter = (inputValue, path) => {
 		return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 	}
-
 	return (
 		<div>
 			<div style={{ marginBottom: 24 }}>多选级联组件</div>
@@ -92,15 +87,23 @@ export default function Demo() {
 				value={value}
 				multiple
 				showSearch={{ filter: filter }}
-				maxTagCount={2}/>
+				maxTagCount={1}/>
 			<div style={{ marginBottom: 24, marginTop: 40 }}>多选级联组件不可用</div>
 			<CCascader
 				options={addressOptions}
 				placeholder="Please select"
 				value={value}
 				disabled
 				multiple
-				maxTagCount={2}/>
+				maxTagCount={1}/>
+      <div style={{ marginBottom: 24, marginTop: 40 }}>多选级联组件，全部展开</div>
+			<CCascader
+				options={addressOptions}
+				onChange={onChange}
+				placeholder="Please select"
+				value={value}
+				multiple
+				maxTagCount={maxTagCount}/>
 		</div>
     );
 }

src/components/c-cascader/demos/triggerType.md

@@ -49,16 +49,6 @@ const addressOptions =  [
   },
 ];
 
-const defaultOptions = [{
-  label: '浙江',
-  value: 'zj',
-}, {
-  label: '杭州',
-  value: 'hangzhou',
-}, {
-  label: '余杭',
-  value: 'yuhang',
-}];
 export default function Demo() {
 	const onChange = value => {
 		console.log(value);

src/components/c-cascader/index.less

@@ -164,15 +164,18 @@ input::-webkit-search-cancel-button {
     appearance: none;
     height: 30px;
     cursor: pointer;
-    caret-color: rgba(0, 0, 0, 0);
+    &:read-only {
+      caret-color: rgba(0, 0, 0, 0);
+    }
+
     // width: 100%;
   }
 
   &-multiple &-selector {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    padding: 1px 4px;
+    padding: 0 12px 0 8px;
     max-height: 350px;
     overflow: auto;
     font-size: 12px;
@@ -241,14 +244,17 @@ input::-webkit-search-cancel-button {
     }
   }
 
+  &-multiple &-selection-overflow-item {
+    height: 30px;
+  }
   &-multiple &-selection-item {
     position: relative;
     display: flex;
     flex: none;
     box-sizing: border-box;
     max-width: 100%;
     height: 24px;
-    margin-top: 0px;
+    margin-top: 3px;
     margin-bottom: 0px;
     line-height: 22px;
     background: @gray-3;
@@ -322,13 +328,6 @@ input::-webkit-search-cancel-button {
     box-sizing: border-box;
   }
 
-  &-multiple &-selector {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 1px 4px;
-  }
-
   &-menus {
     display: flex;
     flex-wrap: nowrap;
@@ -349,6 +348,7 @@ input::-webkit-search-cancel-button {
     list-style: none;
     border-right: 1px solid @gray-4;
     -ms-overflow-style: -ms-autohiding-scrollbar;
+    overflow: auto;
 
     &-item {
       min-width: 100px;

src/components/c-cascader/index.md

@@ -31,6 +31,8 @@ group:
 | clearIcon      | 清空图标 | ReactNode | <Icon type="close-fill-1" style={{ fontSize: '14px' }} />|
 | popupPlacement | 弹框位置 | bottomRight topRight bottomLeft topLeft | bottomLeft |
 | notFoundContent | 下拉列表为空时显示的内容 | string \| ReactNode | -- |
+| showSearch     | 搜索配置               | object   | -- |
+
 
  ## 代码演示