feat: 新增 Select, CityPicker 的 notFoundContent 属性

components/avatar/__tests__/__snapshots__/index.test.js.snap

@@ -43,7 +43,7 @@ exports[`<Avatar/> should render a <Avatar/> components 1`] = `
   >
     <img
       alt="cuke-avatar"
-      src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+      src="https://www.test.jpg"
     />
   </span>
   <span

components/avatar/__tests__/index.test.js

@@ -11,7 +11,7 @@ describe("<Avatar/>", () => {
       <div>
         <Avatar icon={<UserIcon />} />
         <Avatar text="黄瓜ui" />
-        <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+        <Avatar src="https://www.test.jpg" />
         <Avatar icon={<UserIcon />} />
         <Avatar icon={<UserIcon />} shape="square" />
         <Avatar text="大" size="large" />
@@ -50,8 +50,7 @@ describe("<Avatar/>", () => {
   });
 
   it("should render a image", () => {
-    const src =
-      "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png";
+    const src = "https://www.test.png";
     const wrapper = shallow(<Avatar src={src} alt="user" />);
     assert(wrapper.find(".cuke-avatar-image").length === 1);
     assert(wrapper.find("img").length === 1);

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -177,15 +177,15 @@ exports[`<Calendar/> should render a <Calendar/> components 1`] = `
         />
       </span>
       <span
-        class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
+        class="cuke-calendar-item cuke-calendar-current-month"
       >
         11
         <div
           class="cuke-calendar-item-content"
         />
       </span>
       <span
-        class="cuke-calendar-item cuke-calendar-current-month"
+        class="cuke-calendar-item cuke-calendar-current-month cuke-calendar-selected-date"
       >
         12
         <div

components/cityPicker/CityPickerCore.js

@@ -2,13 +2,15 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 import cls from "classnames";
 import Spin from "../spin";
+import Empty from "../empty";
 
 export default class CityPickerCore extends PureComponent {
   static defaultProps = {
     prefixCls: "cuke-city-picker-core",
     disabledGroups: [],
     loading: false,
-    cityList: []
+    cityList: [],
+    notFoundContent: <Empty />
   };
   static propTypes = {
     cityList: PropTypes.arrayOf(
@@ -26,7 +28,8 @@ export default class CityPickerCore extends PureComponent {
       PropTypes.string,
       PropTypes.number
     ]),
-    activeGroup: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    activeGroup: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    notFoundContent: PropTypes.any
   };
   state = {
     selectedCityGroup:
@@ -59,70 +62,76 @@ export default class CityPickerCore extends PureComponent {
       disabledGroups,
       defaultCityName, //eslint-disable-line
       loading,
+      notFoundContent,
       tip,
       ...attr
     } = this.props;
     const { selectedCityGroup, selectedCityName } = this.state;
     const cityGroups =
       cityList.length >= 1 ? cityList.map(({ group }) => group) : [];
 
+    const currentCityList =
+      (
+        cityList.find(
+          (item, i) =>
+            item.group === selectedCityGroup || i === selectedCityGroup
+        ) || {}
+      ).resources || [];
+
     return (
       <div className={cls(prefixCls, className)} {...attr}>
         <Spin size="large" spinning={loading} tip={tip}>
           <div className={cls(`${prefixCls}-panel`)}>
-            <div className={cls(`${prefixCls}-panel-header`)}>
-              <ul className={cls(`${prefixCls}-panel-header-wrap`)}>
-                {cityGroups.map((cityGroup, i) => {
-                  const isDisabled = disabledGroups.some(
-                    group => group === cityGroup || group === i
-                  );
-                  return (
-                    <li
-                      onClick={
-                        isDisabled
-                          ? undefined
-                          : this.onCityGroupChange(cityGroup, i)
-                      }
-                      className={cls(`${prefixCls}-item`, {
-                        [`${prefixCls}-active`]:
-                          !isDisabled &&
-                          (selectedCityGroup === cityGroup ||
-                            selectedCityGroup === i),
-                        [`${prefixCls}-disabled`]: isDisabled
-                      })}
-                      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, i) =>
-                          item.group === selectedCityGroup ||
-                          i === selectedCityGroup
-                      ) || {}
-                    ).resources || []
-                  ).map((city, i) => {
+            {cityGroups.length >= 1 && (
+              <div className={cls(`${prefixCls}-panel-header`)}>
+                <ul className={cls(`${prefixCls}-panel-header-wrap`)}>
+                  {cityGroups.map((cityGroup, i) => {
+                    const isDisabled = disabledGroups.some(
+                      group => group === cityGroup || group === i
+                    );
                     return (
                       <li
-                        className={cls(`${prefixCls}-city`, {
-                          [`${prefixCls}-city-selected`]:
-                            selectedCityName === city.name
+                        onClick={
+                          isDisabled
+                            ? undefined
+                            : this.onCityGroupChange(cityGroup, i)
+                        }
+                        className={cls(`${prefixCls}-item`, {
+                          [`${prefixCls}-active`]:
+                            !isDisabled &&
+                            (selectedCityGroup === cityGroup ||
+                              selectedCityGroup === i),
+                          [`${prefixCls}-disabled`]: isDisabled
                         })}
                         key={i}
-                        onClick={this.onCityChange(city)}
                       >
-                        {city.name}
+                        <span>{cityGroup}</span>
                       </li>
                     );
                   })}
+                </ul>
+              </div>
+            )}
+            <div className={cls(`${prefixCls}-panel-content`)}>
+              <ul className={cls(`${prefixCls}-panel-content-wrap`)}>
+                {cityList.length >= 1
+                  ? currentCityList.length >= 1
+                    ? currentCityList.map((city, i) => {
+                        return (
+                          <li
+                            className={cls(`${prefixCls}-city`, {
+                              [`${prefixCls}-city-selected`]:
+                                selectedCityName === city.name
+                            })}
+                            key={i}
+                            onClick={this.onCityChange(city)}
+                          >
+                            {city.name}
+                          </li>
+                        );
+                      })
+                    : notFoundContent
+                  : notFoundContent}
               </ul>
             </div>
           </div>

components/cityPicker/__tests__/index.test.js

@@ -6,6 +6,8 @@ import CityPicker from "../index";
 import Input from "../../input";
 import CityPickerCore from "../CityPickerCore";
 import Spin from "../../spin";
+import Empty from "../../empty";
+import Button from "../../button";
 
 const cityList = [
   {
@@ -289,6 +291,18 @@ describe("<CityPicker/>", () => {
     expect(onPanelVisibleChange).not.toHaveBeenCalled();
   });
 
+  it("should render not found content when cityList is Empty", () => {
+    const wrapper = shallow(<CityPickerCore cityList={[]} />);
+    assert(wrapper.find(Empty).length === 1);
+    assert(wrapper.find(".cuke-city-picker-panel-header").length === 0);
+  });
+
+  it("should render custom not found content", () => {
+    const wrapper = shallow(
+      <CityPickerCore cityList={[]} notFoundContent={<Button>111</Button>} />
+    );
+    assert(wrapper.find(Button).length === 1);
+  });
   // it("should cannot trigger panel visible change when disabled groups", () => {
   //   const onPanelVisibleChange = jest.fn();
   //   const wrapper = mount(

components/datePicker/__tests__/__snapshots__/index.test.js.snap

@@ -581,12 +581,12 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
         10
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+        class="cuke-date-picker-item cuke-date-picker-current-month"
       >
         11
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month"
+        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
       >
         12
       </span>
@@ -928,12 +928,12 @@ exports[`<DatePicker/> should render custom size 1`] = `
           10
         </span>
         <span
-          class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+          class="cuke-date-picker-item cuke-date-picker-current-month"
         >
           11
         </span>
         <span
-          class="cuke-date-picker-item cuke-date-picker-current-month"
+          class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
         >
           12
         </span>
@@ -1271,12 +1271,12 @@ exports[`<DatePicker/> should render custom size 1`] = `
           10
         </span>
         <span
-          class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+          class="cuke-date-picker-item cuke-date-picker-current-month"
         >
           11
         </span>
         <span
-          class="cuke-date-picker-item cuke-date-picker-current-month"
+          class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
         >
           12
         </span>
@@ -1614,12 +1614,12 @@ exports[`<DatePicker/> should render custom size 1`] = `
           10
         </span>
         <span
-          class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+          class="cuke-date-picker-item cuke-date-picker-current-month"
         >
           11
         </span>
         <span
-          class="cuke-date-picker-item cuke-date-picker-current-month"
+          class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
         >
           12
         </span>

components/empty/styles.less

@@ -4,6 +4,7 @@
 @prefixCls : cuke-empty;
 
 .@{prefixCls} {
+  width: 100%;
   text-align: center;
   height: @cuke-empty-height;
   .flex-center();
@@ -13,6 +14,9 @@
     margin-bottom: @cuke-empty-offset;
     font-size: @cuke-empty-icon-size;
     height: @cuke-empty-icon-height;
+    svg {
+      stroke-width: 1px;
+    }
   }
   &-description {
     font-size: @font-size;

components/select/Select.js

@@ -6,6 +6,7 @@ import Input from "../input";
 import { DownIcon } from "../icon";
 import { debounce } from "../utils";
 import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
+import Empty from "../empty";
 
 const sizes = {
   default: "default",
@@ -28,7 +29,8 @@ export default class Select extends PureComponent {
     getPopupContainer: () => document.body,
     position: "bottom",
     disabled: false,
-    allowClear: false
+    allowClear: false,
+    notFoundContent: <Empty height={120} />
   };
   static propTypes = {
     prefixCls: PropTypes.string.isRequired,
@@ -140,6 +142,7 @@ export default class Select extends PureComponent {
       size,
       style,
       allowClear,
+      notFoundContent,
       onPanelVisibleChange, //eslint-disable-line
       ...attr
     } = this.props;
@@ -189,13 +192,15 @@ export default class Select extends PureComponent {
               top
             }}
           >
-            {React.Children.map(children, (element, index) => {
-              return React.cloneElement(element, {
-                key: index,
-                selectedValue,
-                onChange: this.onChange
-              });
-            })}
+            {children
+              ? React.Children.map(children, (element, index) => {
+                  return React.cloneElement(element, {
+                    key: index,
+                    selectedValue,
+                    onChange: this.onChange
+                  });
+                })
+              : notFoundContent}
           </div>,
           getPopupContainer()
         )}

components/select/__tests__/index.test.js

@@ -3,6 +3,8 @@ import assert from "power-assert";
 import { render, shallow } from "enzyme";
 import toJson from "enzyme-to-json";
 import Select from "../index";
+import Empty from "../../empty";
+import Button from "../../button";
 
 describe("<Select/>", () => {
   it("should render a <Select/> components", () => {
@@ -175,4 +177,17 @@ describe("<Select/>", () => {
     wrapper.find(".cuke-select-input").simulate("click");
     expect(onPanelVisibleChange).not.toHaveBeenCalled();
   });
+
+  it("should render not found content when option is Empty", () => {
+    const wrapper = shallow(<Select value="黄瓜" />);
+    assert(wrapper.find(Empty).length === 1);
+    assert(wrapper.find(".cuke-select-option").length === 0);
+  });
+
+  it("should render custom not found content", () => {
+    const wrapper = shallow(
+      <Select value="黄瓜" notFoundContent={<Button>111</Button>} />
+    );
+    assert(wrapper.find(Button).length === 1);
+  });
 });