feat: 增加 CityPicker 组件

cuke-ui · Oct 1, 2018 · c77e261 · c77e261
1 parent fbff5fb
commit c77e261
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 1 deletion.
diff --git a/components/cityPicker/index.js b/components/cityPicker/index.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from "react";
+import cls from "classnames";
+
+export default class CityPicker extends PureComponent {
+	static defaultProps = {
+		prefixCls: "cuke-city-picker",
+		cityList: []
+	};
+	state = {
+		selectedCityGroup: "热门",
+		selectedCityName: ""
+	};
+
+	onCityGroupChange = selectedCityGroup => () => {
+		this.setState({ selectedCityGroup });
+
+		if (this.props.onCityGroupChange) {
+			this.props.onCityGroupChange(selectedCityGroup);
+		}
+	};
+	onCityChange = selectedCity => () => {
+		this.setState({ selectedCityName: selectedCity.name });
+		if (this.props.onCityChange) {
+			this.props.onCityChange(selectedCity);
+		}
+	};
+
+	render() {
+		const { cityList, prefixCls } = this.props;
+		const { selectedCityGroup, selectedCityName } = this.state;
+		const cityGroups =
+			cityList.length >= 1 ? cityList.map(({ group }) => group) : [];
+
+		return (
+			<div className={`${prefixCls}`}>
+				<div className={cls(`${prefixCls}-panel`)}>
+					<div className={cls(`${prefixCls}-panel-header`)}>
+						<ul className={cls(`${prefixCls}-panel-header-wrap`)}>
+							{cityGroups.map((cityGroup, i) => {
+								return (
+									<li
+										onClick={this.onCityGroupChange(cityGroup)}
+										className={cls("item", {
+											active: selectedCityGroup === cityGroup
+										})}
+										key={i}
+									>
+										<span>{cityGroup}</span>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+					<div className={cls(`${prefixCls}-panel-content`)}>
+						<ul className={cls(`${prefixCls}-panel-content-wrap`)}>
+							{cityList.length >= 1 &&
+								cityList
+									.find(item => item.group === selectedCityGroup)
+									.resources.map((city, i) => {
+										return (
+											<li
+												className={cls("city", {
+													selected: selectedCityName === city.name
+												})}
+												key={i}
+												onClick={this.onCityChange(city)}
+											>
+												{city.name}
+											</li>
+										);
+									})}
+						</ul>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
diff --git a/components/cityPicker/styles.less b/components/cityPicker/styles.less
@@ -0,0 +1,93 @@
+@import "../styles/vars.less";
+
+@prefixCls : cuke-city-picker;
+.@{prefixCls} {
+  width: 379px;
+  border: 1px solid @border-color;
+  box-shadow: @default-shadow;
+  &-title {
+    padding: 16px 0 5px;
+    text-align: center;
+  }
+  &-panel {
+    @address-select-section-header-height: 42px;
+    min-height: 221px;
+    background-color: #fff;
+    padding: 5px 17px 10px 17px;
+
+    &-header {
+      height: @address-select-section-header-height;
+      line-height: @address-select-section-header-height;
+      color: @font-color;
+      position: relative;
+
+      &::before {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        transform: scaleY(.5);
+        transform-origin: 50% 100%;
+        background-color: @border-color;
+        left: 0;
+        top: 100%;
+      }
+
+      &-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .item {
+          cursor: pointer;
+          transition: all @default-transition;
+          position: relative;
+
+          &:hover {
+            color: @primary-color;
+          }
+
+          &.active {
+            color: @primary-color;
+
+            &::after {
+              content: ' ';
+              position: absolute;
+              width: 100%;
+              height: 2px;
+              background-color: @primary-color;
+              left: 0;
+              bottom: -1px;
+            }
+          }
+        }
+      }
+    }
+    &-content {
+
+      &-wrap {
+        padding-top: 25px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        .city {
+          cursor: pointer;
+          margin-bottom: 16px;
+          transition: all @default-transition;
+
+          &:not(:nth-child(5n)) {
+            margin-right: 51px;
+          }
+
+          &:hover {
+            color: @primary-color;
+          }
+
+          &.selected {
+            color: @primary-color;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/components/index.js b/components/index.js
@@ -30,5 +30,6 @@ export { default as Checkbox } from "./checkbox";
 export { default as Icon } from "./icon";
 export { default as Switch } from "./switch";
 export { default as Tag } from "./tag";
+export { default as cityPicker } from "./cityPicker";
 
 export { default as version } from "./version";
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cuke-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "lib/index.js",
   "description": "A React.js UI components for Web",
   "repository": "https://github.com/cuke-ui/cuke-ui.git",

diff --git a/stories/dataDisplay.js b/stories/dataDisplay.js
@@ -8,6 +8,7 @@ import Row from "../components/row";
 import Col from "../components/col";
 import Timeline from "../components/timeline";
 import Tag from "../components/tag";
+import CityPicker from "../components/cityPicker";
 import { SuccessIcon, InfoIcon } from "../components/icon";
 import { withInfo } from "@storybook/addon-info";
 
@@ -16,6 +17,7 @@ import "../components/button/styles.less";
 import "../components/tabs/styles.less";
 import "../components/timeline/styles.less";
 import "../components/tag/styles.less";
+import "../components/cityPicker/styles.less";
 import "./styles/dataDisplay.less";
 import "./styles/tag.less";
 
@@ -353,4 +355,46 @@ storiesOf("数据展示", module)
 
 			</div>
 		))
+	)
+	.add(
+		"AddressPicker 城市选择框",
+		withInfo()(() => (
+			<div>
+				<h2>基本使用</h2>
+				<CityPicker cityList={[{
+					group:"热门",
+					resources:[{
+						id:1,
+						name:'成都'
+					}]
+				},{
+					group:"ABCDE",
+					resources:[{
+						id:1,
+						name:'成都'
+					},{
+						id:2,
+						name:'资阳'
+					}]
+				},{
+					group:"FGHIJ",
+					resources:[{
+						id:3,
+						name:'上海'
+					},{
+						id:4,
+						name:'乐至'
+					}]
+				},{
+					group:"KOMNO",
+					resources:[{
+						id:5,
+						name:'自贡'
+					},{
+						id:6,
+						name:'北京'
+					}]
+				}]}/>
+			</div>
+		))
 	);