@kdcloudjs/kdesign 1.0.2

package/es/checkbox/style/index.css

@@ -0,0 +1,376 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+.kd-checkbox {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 12px;
+  color: #212121;
+  height: 36px;
+}
+.kd-checkbox-no-child {
+  height: 16px;
+  width: 16px;
+}
+.kd-checkbox-small {
+  height: 32px;
+}
+.kd-checkbox-middle {
+  height: 36px;
+}
+.kd-checkbox-large {
+  height: 40px;
+}
+.kd-checkbox-group > *:not(:last-child) {
+  margin-right: 8px;
+}
+.kd-checkbox-input {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  cursor: inherit;
+  opacity: 0;
+}
+.kd-checkbox-children {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 999;
+}
+.kd-checkbox-children .kd-input-underline {
+  background-color: transparent;
+  border-bottom: none;
+}
+.kd-checkbox-square {
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
+  padding: 0 20px;
+  -webkit-transition: color 0.3s, border-color 0.3s;
+  transition: color 0.3s, border-color 0.3s;
+}
+.kd-checkbox-square:not(.kd-checkbox-square-disabled)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  opacity: 0.2;
+  -webkit-box-shadow: 0 0 0 0 #5582f3;
+          box-shadow: 0 0 0 0 #5582f3;
+}
+.kd-checkbox-square:hover {
+  color: #5582f3;
+  border-color: #5582f3;
+}
+.kd-checkbox-square-triangle,
+.kd-checkbox-square-triangle-checked {
+  position: absolute;
+  content: '';
+  height: 0;
+  width: 0;
+  right: 0;
+  bottom: 0;
+  border-style: solid;
+  border-width: 0 0 18px 18px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: #5582f3;
+}
+.kd-checkbox-square-triangle {
+  -webkit-animation: kdZoomBounceLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomBounceLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
+  visibility: hidden;
+  opacity: 0;
+}
+.kd-checkbox-square-inner {
+  position: absolute;
+  height: 9px;
+  width: 11px;
+  color: #fff;
+  font-size: 12px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-transform: translate(-100%, 100%);
+          transform: translate(-100%, 100%);
+}
+.kd-checkbox-square-inner-icon {
+  font-size: inherit;
+  line-height: 100%;
+  -webkit-animation: kdZoomLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+          animation: kdZoomLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-checkbox-square-triangle-disabled {
+  border-bottom-color: #b2b2b2;
+}
+.kd-checkbox-square-disabled,
+.kd-checkbox-square-disabled:hover {
+  border-color: #d9d9d9;
+  color: #212121;
+  cursor: not-allowed !important;
+}
+.kd-checkbox-square-checked {
+  border-color: #5582f3;
+}
+.kd-checkbox-square-checked:not(.kd-checkbox-square-checked-disabled)::after {
+  -webkit-animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+}
+.kd-checkbox-square-checked .kd-checkbox-square-triangle-checked:not(.kd-checkbox-square-disabled) {
+  -webkit-animation: kdZoomBounceEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+          animation: kdZoomBounceEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-checkbox-square-checked .kd-checkbox-square-inner-icon:not(.kd-checkbox-square-disabled) {
+  -webkit-animation: kdZoomEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+          animation: kdZoomEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-checkbox-square-checked-disabled {
+  background-color: #b2b2b2 !important;
+  border-color: #b2b2b2 !important;
+  cursor: not-allowed !important;
+}
+.kd-checkbox-square-wrapper {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 16px;
+  width: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  opacity: 0;
+}
+.kd-checkbox-default {
+  border: none;
+  padding: 0;
+  -webkit-transition: color 0.3s, border-color 0.3s;
+  transition: color 0.3s, border-color 0.3s;
+}
+.kd-checkbox-default:hover,
+.kd-checkbox-default:hover .kd-checkbox-default-wrapper {
+  color: #5582f3;
+  border-color: #5582f3;
+  cursor: pointer;
+}
+.kd-checkbox-default-disabled,
+.kd-checkbox-default-disabled:hover,
+.kd-checkbox-default-disabled:hover .kd-checkbox-default-wrapper {
+  color: #212121;
+  border-color: #d9d9d9;
+  cursor: not-allowed !important;
+}
+.kd-checkbox-default-wrapper {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: color 0.3s, border-color 0.3s;
+  transition: color 0.3s, border-color 0.3s;
+}
+.kd-checkbox-default-wrapper:not(.kd-checkbox-default-wrapper-disabled)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  opacity: 0.2;
+  -webkit-box-shadow: 0 0 0 0 #5582f3;
+          box-shadow: 0 0 0 0 #5582f3;
+}
+.kd-checkbox-default-wrapper-size {
+  height: 16px;
+  width: 16px;
+}
+.kd-checkbox-default-margin {
+  margin-right: 8px;
+}
+.kd-checkbox-default-no-child {
+  height: 100%;
+  width: 100%;
+}
+.kd-checkbox-default-checked-disabled {
+  background-color: #b2b2b2 !important;
+  border-color: #b2b2b2 !important;
+  cursor: not-allowed !important;
+}
+.kd-checkbox-default-checked {
+  background-color: #5582f3;
+  border-color: #5582f3;
+  -webkit-transition: background-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+  transition: background-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-checkbox-default-checked:not(.kd-checkbox-default-checked-disabled)::after {
+  -webkit-animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: fadeEffect calc(0.3s + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+}
+.kd-checkbox-default-inner:not(.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner) {
+  -webkit-animation: kdZoomBounceDefaultEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
+          animation: kdZoomBounceDefaultEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
+}
+.kd-checkbox-default-inner {
+  position: absolute;
+  color: #fff;
+  font-size: 14px;
+  height: 100%;
+  width: 100%;
+  top: 5%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.kd-checkbox-default-inner-icon {
+  font-size: inherit;
+  line-height: 100%;
+}
+.kd-checkbox-default-indeterminate {
+  background-color: #5582f3;
+  border-color: #5582f3;
+}
+.kd-checkbox-default-indeterminate::before {
+  background-color: #fff;
+  position: absolute;
+  width: 70%;
+  height: 2px;
+  border-radius: 1px;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  left: 50%;
+  content: ' ';
+}

package/es/checkbox/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/checkbox/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/checkbox/style/index.less

@@ -0,0 +1,246 @@
+@import '../../style/themes/index';
+@checkbox-prefix-cls: ~'@{kd-prefix}-checkbox';
+@checkbox-group-prefix-cls: ~'@{kd-prefix}-group';
+
+.@{checkbox-prefix-cls} {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+  font-size: @checkbox-font-size;
+  color: @checkbox-font-color;
+  height: @checkbox-middle-size-height;
+  &-no-child {
+    height: @checkbox-default-input-height;
+    width: @checkbox-default-input-width;
+  }
+  &-small {
+    height: @checkbox-small-size-height;
+  }
+  &-middle {
+    height: @checkbox-middle-size-height;
+  }
+  &-large {
+    height: @checkbox-large-size-height;
+  }
+  &-group > *:not(:last-child) {
+    margin-right: @checkbox-group-margin-right;
+  }
+  &-input {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    cursor: inherit;
+    opacity: 0;
+  }
+  &-children {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    .kd-input-underline {
+      background-color: transparent;
+      border-bottom: none;
+    }
+  }
+}
+
+.@{checkbox-prefix-cls}-square {
+  border-radius: 2px;
+  border: 1px solid @checkbox-border-color;
+  padding: @checkbox-square-padding;
+  transition: color @transition-duration, border-color @transition-duration;
+  &:not(&-disabled)::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    opacity: 0.2;
+    box-shadow: 0 0 0 0 @theme-color;
+  }
+  &:hover {
+    color: @checkbox-checked-font-color;
+    border-color: @checkbox-checked-border-color;
+  }
+  &-triangle,
+  &-triangle-checked {
+    position: absolute;
+    content: '';
+    height: 0;
+    width: 0;
+    right: 0;
+    bottom: 0;
+    border-style: solid;
+    border-width: 0 0 @checkbox-square-triangle-height @checkbox-square-triangle-width;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-bottom-color: @checkbox-checked-border-color;
+  }
+  &-triangle {
+    animation: kdZoomBounceLeaveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
+    transition: all @transition-duration @ease;
+    visibility: hidden;
+    opacity: 0;
+  }
+  &-inner {
+    position: absolute;
+    height: 9px;
+    width: 11px;
+    color: @checkbox-square-input-icon-color;
+    font-size: @checkbox-square-input-icon-size;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-100%, 100%);
+  }
+  &-inner-icon {
+    font-size: inherit;
+    line-height: 100%;
+    animation: kdZoomLeaveEffect calc(@transition-duration - 0.1s) @ease-out;
+  }
+  &-triangle-disabled {
+    border-bottom-color: @checkbox-disabled-bg-color;
+  }
+
+  &-disabled,
+  &-disabled:hover {
+    border-color: @checkbox-border-color;
+    color: @checkbox-font-color;
+    cursor: not-allowed !important;
+  }
+  &-checked {
+    border-color: @checkbox-checked-border-color;
+    &:not(&-disabled)::after {
+      animation: fadeEffect calc(@transition-duration + 0.1s) @ease-out forwards,
+        waveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
+    }
+    .@{checkbox-prefix-cls}-square-triangle-checked:not(.@{checkbox-prefix-cls}-square-disabled) {
+      animation: kdZoomBounceEffect calc(@transition-duration - 0.1s) @ease;
+    }
+    .@{checkbox-prefix-cls}-square-inner-icon:not(.@{checkbox-prefix-cls}-square-disabled) {
+      animation: kdZoomEffect calc(@transition-duration - 0.1s) @ease-out;
+    }
+  }
+  &-checked-disabled {
+    background-color: @checkbox-disabled-bg-color !important;
+    border-color: @checkbox-disabled-bg-color !important;
+    cursor: not-allowed !important;
+  }
+  &-wrapper {
+    display: inline-flex;
+    height: @checkbox-default-input-height;
+    width: 0;
+    box-sizing: border-box;
+    opacity: 0;
+  }
+}
+
+.@{checkbox-prefix-cls}-default {
+  border: none;
+  padding: @checkbox-default-padding;
+  transition: color @transition-duration, border-color @transition-duration;
+  &:hover,
+  &:hover &-wrapper {
+    color: @checkbox-checked-font-color;
+    border-color: @checkbox-checked-border-color;
+    cursor: pointer;
+  }
+  &-disabled,
+  &-disabled:hover,
+  &-disabled:hover &-wrapper {
+    color: @checkbox-font-color;
+    border-color: @checkbox-border-color;
+    cursor: not-allowed !important;
+  }
+
+  &-wrapper {
+    position: relative;
+    display: inline-flex;
+    background-color: @checkbox-bg-color;
+    border: @checkbox-default-input-border-width solid @checkbox-border-color;
+    border-radius: @checkbox-default-input-border-radius;
+    box-sizing: border-box;
+    transition: color @transition-duration, border-color @transition-duration;
+    &:not(&-disabled)::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      opacity: 0.2;
+      box-shadow: 0 0 0 0 @theme-color;
+    }
+  }
+  &-wrapper-size {
+    height: @checkbox-default-input-height;
+    width: @checkbox-default-input-width;
+  }
+
+  &-margin {
+    margin-right: @checkbox-default-input-margin-right;
+  }
+  &-no-child {
+    height: 100%;
+    width: 100%;
+  }
+  &-checked-disabled {
+    background-color: @checkbox-disabled-bg-color !important;
+    border-color: @checkbox-disabled-bg-color !important;
+    cursor: not-allowed !important;
+  }
+  &-checked {
+    background-color: @checkbox-checked-border-color;
+    border-color: @checkbox-checked-border-color;
+    transition: background-color calc(@transition-duration - 0.1s) @ease-out,
+      border-color calc(@transition-duration - 0.1s) @ease-out;
+    &:not(&-disabled)::after {
+      animation: fadeEffect calc(@transition-duration + 0.1s) @ease-out forwards,
+        waveEffect calc(@transition-duration - 0.1s) @ease-out forwards;
+    }
+    .@{checkbox-prefix-cls}-default-inner:not(&-disabled .@{checkbox-prefix-cls}-default-inner) {
+      animation: kdZoomBounceDefaultEffect calc(@transition-duration - 0.1s) @ease !important;
+    }
+  }
+  &-inner {
+    position: absolute;
+    color: @checkbox-default-input-icon-color;
+    font-size: @checkbox-default-input-icon-size;
+    height: 100%;
+    width: 100%;
+    top: 5%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &-inner-icon {
+    font-size: inherit;
+    line-height: 100%;
+  }
+  &-indeterminate {
+    background-color: @checkbox-checked-border-color;
+    border-color: @checkbox-checked-border-color;
+  }
+  &-indeterminate::before {
+    background-color: @checkbox-bg-color;
+    position: absolute;
+    width: 70%;
+    height: 2px;
+    border-radius: 1px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    content: ' ';
+  }
+}

package/es/city-picker/city-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CityGroupProps {
+    groups: Array<string>;
+    activedIndex?: number;
+    changeIndex?: (index: number) => void;
+}
+declare const CityGroup: React.FC<CityGroupProps>;
+export default CityGroup;

package/es/city-picker/city-group.js

@@ -0,0 +1,46 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+
+var CityGroup = function CityGroup(props) {
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var groups = props.groups,
+      _props$activedIndex = props.activedIndex,
+      current = _props$activedIndex === void 0 ? 0 : _props$activedIndex,
+      changeIndex = props.changeIndex;
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var containerCls = classNames("".concat(cityPickerPrefixCls, "-group-container"));
+
+  var handleClick = function handleClick(groupIndex) {
+    changeIndex && changeIndex(groupIndex);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerCls
+  }, _mapInstanceProperty(groups).call(groups, function (item, index) {
+    var _context;
+
+    var itemCls = classNames("".concat(cityPickerPrefixCls, "-group-item"), {
+      active: current === index,
+      last: index === groups.length - 1
+    });
+
+    var handleTitleClick = function handleTitleClick() {
+      handleClick(index);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: itemCls,
+      title: item,
+      key: _concatInstanceProperty(_context = "".concat(item, "_")).call(_context, index),
+      onClick: handleTitleClick
+    }, item);
+  }));
+};
+
+export default CityGroup;

package/es/city-picker/city-list.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { City } from './city-panel-item';
+declare type CityList = {
+    [key: string]: Array<City>;
+};
+export interface CityListProps {
+    groupKeys?: Array<string> | null;
+    cityList?: Array<Array<City>>;
+    onSelect?: (city: City) => void;
+}
+declare const CityList: React.FC<CityListProps>;
+export default CityList;