@kdcloudjs/kdesign 1.0.2

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

@@ -0,0 +1,60 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import CityPanelItem from './city-panel-item';
+import NoData from './no-data';
+
+var CityList = function CityList(props) {
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var groupKeys = props.groupKeys,
+      cityList = props.cityList,
+      handleSelect = props.onSelect;
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var tableCls = classNames("".concat(cityPickerPrefixCls, "-city-table"));
+  var tableGroupCls = classNames("".concat(cityPickerPrefixCls, "-city-table-group"));
+  var keyCls = classNames("".concat(cityPickerPrefixCls, "-city-table-key"));
+  var itemContainerCls = classNames("".concat(cityPickerPrefixCls, "-city-table-item-container"));
+  var hasData = cityList && cityList.some(function (citys) {
+    return citys.length > 0;
+  });
+
+  if (!hasData) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: tableCls
+    }, /*#__PURE__*/React.createElement(NoData, null));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: tableCls
+  }, groupKeys && groupKeys.length > 0 && _mapInstanceProperty(groupKeys).call(groupKeys, function (key, index) {
+    var list = cityList[index] || [];
+    return /*#__PURE__*/React.createElement("div", {
+      className: tableGroupCls,
+      key: key
+    }, /*#__PURE__*/React.createElement("div", {
+      className: keyCls
+    }, key), /*#__PURE__*/React.createElement("div", {
+      className: itemContainerCls
+    }, _mapInstanceProperty(list).call(list, function (city) {
+      return /*#__PURE__*/React.createElement(CityPanelItem, {
+        key: city.id,
+        city: city,
+        onSelect: handleSelect
+      });
+    })));
+  }), !groupKeys && cityList && _mapInstanceProperty(cityList).call(cityList, function (citys) {
+    return _mapInstanceProperty(citys).call(citys, function (city) {
+      return /*#__PURE__*/React.createElement(CityPanelItem, {
+        key: city.id,
+        city: city,
+        onSelect: handleSelect
+      });
+    });
+  }));
+};
+
+export default CityList;

package/es/city-picker/city-panel-item.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type City = {
+    id: string;
+    country?: string;
+    province?: string;
+    name?: string;
+};
+export interface CityPanelItemProps {
+    city: City;
+    onSelect?: (city: City) => void;
+}
+declare const CityPanelItem: React.FC<CityPanelItemProps>;
+export default CityPanelItem;

package/es/city-picker/city-panel-item.js

@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+
+var CityPanelItem = function CityPanelItem(props) {
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var city = props.city,
+      onSelect = props.onSelect;
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var cls = classNames("".concat(cityPickerPrefixCls, "-city-table-cell"));
+
+  var handleCitySelect = function handleCitySelect() {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(city);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    key: city.id,
+    title: city.name,
+    onClick: handleCitySelect
+  }, city.name);
+};
+
+export default CityPanelItem;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { City } from './city-panel-item';
+export declare type CityGroups = 'domestic' | 'foreign';
+export declare type Common = Record<CityGroups, Array<City>>;
+export declare type Group = Record<CityGroups, Array<string>>;
+export declare type List = Record<CityGroups, Citys>;
+export declare type Citys = {
+    [key: string]: Array<City>;
+};
+export interface CityPanelProps {
+    commons?: Common;
+    groups?: Group;
+    cityList?: List;
+    onSelect?: (city: City) => void;
+}
+declare const CityPanel: React.FC<CityPanelProps>;
+export default CityPanel;

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

@@ -0,0 +1,177 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useContext, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import CityGroup from './city-group';
+import CityList from './city-list';
+import grouping from './utils/grouping';
+
+var CityPanel = function CityPanel(_ref) {
+  var _context, _context2;
+
+  var groups = _ref.groups,
+      commons = _ref.commons,
+      cityList = _ref.cityList,
+      onSelect = _ref.onSelect;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      globalLocale = _useContext.locale;
+
+  var cityPickerLang = globalLocale.getCompLangMsg({
+    componentName: 'CityPicker'
+  });
+
+  var _useState = useState('domestic'),
+      _useState2 = _slicedToArray(_useState, 2),
+      activedIndex = _useState2[0],
+      setActivedIndex = _useState2[1];
+
+  var _useState3 = useState({
+    domestic: [],
+    foreign: []
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      cityGroups = _useState4[0],
+      setCityGroups = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      groupKeys = _useState6[0],
+      setGroupKeys = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      activedGroupIndex = _useState8[0],
+      setActivedGroupIndex = _useState8[1];
+
+  var _useState9 = useState([commons ? commons.domestic : []]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      list = _useState10[0],
+      setList = _useState10[1];
+
+  useEffect(function () {
+    if (!groups) {
+      return;
+    }
+
+    var domestic = groups.domestic,
+        foreign = groups.foreign;
+    domestic = grouping(domestic);
+    foreign = grouping(foreign);
+
+    if (commons === null || commons === void 0 ? void 0 : commons.domestic) {
+      domestic.unshift(cityPickerLang.common);
+    }
+
+    if (commons === null || commons === void 0 ? void 0 : commons.foreign) {
+      foreign.unshift(cityPickerLang.common);
+    }
+
+    setCityGroups({
+      domestic: domestic,
+      foreign: foreign
+    });
+  }, [groups, commons]);
+  useEffect(function () {
+    if (commons) {
+      setList([commons[activedIndex]]);
+    } else {
+      var _groups = cityGroups[activedIndex];
+      var currentGroup = _groups[0];
+      var currentGroups = (currentGroup || '').split('');
+      var newList = [];
+      var currentList = cityList[activedIndex];
+      currentGroups.forEach(function (character) {
+        var temp = currentList[character] ? currentList[character] : [];
+        newList.push(temp);
+      });
+      setList(newList);
+      setGroupKeys(currentGroups);
+    }
+
+    setActivedGroupIndex(0);
+  }, [activedIndex, cityGroups, groups, cityList]);
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var containerCls = classNames("".concat(cityPickerPrefixCls, "-panel-container"));
+  var headerCls = classNames("".concat(cityPickerPrefixCls, "-header"));
+  var contentContainerCls = classNames("".concat(cityPickerPrefixCls, "-content-container"));
+  var domesticCls = classNames(_concatInstanceProperty(_context = "".concat(cityPickerPrefixCls, "-tab-item ")).call(_context, cityPickerPrefixCls, "-header-domestic"), {
+    active: activedIndex === 'domestic'
+  });
+  var internationalCls = classNames(_concatInstanceProperty(_context2 = "".concat(cityPickerPrefixCls, "-tab-item ")).call(_context2, cityPickerPrefixCls, "-header-internation"), {
+    active: activedIndex === 'foreign'
+  });
+
+  var handleDomesticClick = function handleDomesticClick() {
+    if (activedIndex === 'domestic') return;
+    setActivedIndex('domestic');
+  };
+
+  var handleInternationClick = function handleInternationClick() {
+    if (activedIndex === 'foreign') return;
+    setActivedIndex('foreign');
+  };
+  /**
+   * 分组变换事件
+   * @param index 分组索引
+   */
+
+
+  var handleGroupChange = function handleGroupChange(index) {
+    if (!cityList) {
+      return;
+    }
+
+    var groups = cityGroups[activedIndex];
+    var currentGroup = groups[index];
+
+    if (commons && currentGroup === cityPickerLang.common) {
+      setList([commons[activedIndex] || []]);
+      setGroupKeys(null);
+      return;
+    }
+
+    var currentGroups = (currentGroup || '').split('');
+    var newList = [];
+    var currentList = cityList[activedIndex];
+    currentGroups.forEach(function (character) {
+      var temp = currentList[character] ? currentList[character] : [];
+      newList.push(temp);
+    });
+    setList(newList);
+    setGroupKeys(currentGroups);
+    setActivedGroupIndex(index);
+  };
+
+  var handleSelectCity = function handleSelectCity(city) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(city);
+  };
+
+  var isClassified = commons && commons.domestic && commons.foreign;
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerCls
+  }, isClassified && /*#__PURE__*/React.createElement("div", {
+    className: headerCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: domesticCls,
+    onClick: handleDomesticClick
+  }, cityPickerLang.domestic), /*#__PURE__*/React.createElement("div", {
+    className: internationalCls,
+    onClick: handleInternationClick
+  }, cityPickerLang.internation)), /*#__PURE__*/React.createElement("div", {
+    className: contentContainerCls
+  }, /*#__PURE__*/React.createElement(CityGroup, {
+    groups: cityGroups[activedIndex],
+    activedIndex: activedGroupIndex,
+    changeIndex: handleGroupChange
+  }), /*#__PURE__*/React.createElement(CityList, {
+    groupKeys: groupKeys,
+    cityList: list,
+    onSelect: handleSelectCity
+  })));
+};
+
+export default CityPanel;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import CityPanelItem from './city-panel-item';
+import CityPanel, { Common, Group, List as CityList } from './city-panel';
+import SearchPanel from './city-search-panel';
+export interface CityPickerProps {
+    cityList?: CityList;
+    className?: string;
+    commons?: Common;
+    disabled?: boolean;
+    groups?: Group;
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    placeholder?: string;
+    showTitle?: boolean;
+    style?: React.CSSProperties;
+    title?: string;
+}
+export interface MenuType extends React.FC<CityPickerProps> {
+    PanelItem: typeof CityPanelItem;
+    Panel: typeof CityPanel;
+    SearchPanel: typeof SearchPanel;
+}
+declare const CityPicker: MenuType;
+export default CityPicker;

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

@@ -0,0 +1,175 @@
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import React, { useContext, useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import CityPanelItem from './city-panel-item';
+import CityPanel from './city-panel';
+import SearchPanel from './city-search-panel';
+import usePopper from '../_utils/usePopper';
+
+var CityPicker = function CityPicker(_ref) {
+  var cityList = _ref.cityList,
+      className = _ref.className,
+      commons = _ref.commons,
+      disabled = _ref.disabled,
+      groups = _ref.groups,
+      inputClassName = _ref.inputClassName,
+      inputStyle = _ref.inputStyle,
+      placeholder = _ref.placeholder,
+      showTitle = _ref.showTitle,
+      style = _ref.style,
+      title = _ref.title;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputVal = _useState2[0],
+      setInputVal = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      additionalVal = _useState4[0],
+      setAdditionalVal = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      popperVisible = _useState6[0],
+      setPopperVisible = _useState6[1];
+
+  var inputRef = useRef(null);
+  var allCity = useRef([]);
+  useEffect(function () {
+    var _context;
+
+    if (!cityList) {
+      return;
+    }
+
+    var domestic = cityList.domestic,
+        foreign = cityList.foreign;
+    allCity.current = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_Object$values(domestic)), _toConsumableArray(_Object$values(foreign))).reduce(function (arr, current) {
+      return _concatInstanceProperty(arr).call(arr, current);
+    }, []);
+  }, [cityList]);
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var containerCls = classNames("".concat(cityPickerPrefixCls, "-container"), className);
+  var contentCls = classNames("".concat(cityPickerPrefixCls, "-content"));
+  var titleCls = classNames("".concat(cityPickerPrefixCls, "-title"));
+  var additionalInfoCls = classNames("".concat(cityPickerPrefixCls, "-info"));
+  var inputCls = classNames("".concat(cityPickerPrefixCls, "-input"), inputClassName);
+  var arrowCls = classNames('kdicon kdicon-arrow-down', "".concat(cityPickerPrefixCls, "-arrow"), {
+    'arrow-up': popperVisible
+  });
+
+  var handleContainerClick = function handleContainerClick() {
+    var _a;
+
+    if (document.activeElement === inputRef.current) {
+      return;
+    }
+
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+
+  var handleCitySelect = function handleCitySelect(city) {
+    var _context2, _context3;
+
+    setInputVal(city.name || '');
+    var otherInfoStr = city.country === '中国' ? "".concat(city.province) : _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(city.province)).call(_context3, city.province ? ',' : '')).call(_context2, city.country);
+    setAdditionalVal(otherInfoStr);
+    setPopperVisible(false);
+  };
+
+  var handleFocus = function handleFocus() {
+    if (popperVisible) {
+      return;
+    }
+
+    setPopperVisible(true);
+  };
+
+  var handleChange = function handleChange(evt) {
+    var value = evt.target.value;
+    setAdditionalVal('');
+    setInputVal(value);
+  };
+
+  var handlePopperVisibleChange = function handlePopperVisibleChange(visible) {
+    if (!visible) {
+      setPopperVisible(false);
+    }
+  };
+
+  var inputSelector = /*#__PURE__*/React.createElement("div", {
+    className: containerCls,
+    style: style,
+    onClick: handleContainerClick
+  }, showTitle && /*#__PURE__*/React.createElement("div", {
+    className: titleCls
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: contentCls
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "text",
+    readOnly: disabled,
+    onChange: handleChange,
+    placeholder: placeholder,
+    style: inputStyle,
+    className: inputCls,
+    title: inputVal,
+    value: inputVal,
+    onFocus: handleFocus
+  }), /*#__PURE__*/React.createElement("span", {
+    className: additionalInfoCls
+  }, additionalVal), /*#__PURE__*/React.createElement("i", {
+    className: arrowCls
+  })));
+  var cityPanel = /*#__PURE__*/React.createElement(CityPanel, {
+    commons: commons,
+    groups: groups,
+    cityList: cityList,
+    onSelect: handleCitySelect
+  });
+
+  var getSearchResults = function getSearchResults() {
+    var _context4;
+
+    if (!allCity.current || allCity.current.length === 0 || !inputVal) {
+      return [];
+    }
+
+    return _filterInstanceProperty(_context4 = allCity.current).call(_context4, function (city) {
+      var _a;
+
+      return (_a = city.name) === null || _a === void 0 ? void 0 : _startsWithInstanceProperty(_a).call(_a, inputVal);
+    });
+  };
+
+  var searchPanel = /*#__PURE__*/React.createElement(SearchPanel, {
+    keyword: inputVal,
+    data: getSearchResults(),
+    onSelect: handleCitySelect
+  });
+  var popperProps = {
+    visible: popperVisible,
+    placement: 'bottomLeft',
+    trigger: 'focus',
+    onVisibleChange: handlePopperVisibleChange
+  };
+  var panel = inputVal.length > 0 ? searchPanel : cityPanel;
+  return usePopper(inputSelector, panel, popperProps);
+};
+
+CityPicker.displayName = 'CityPicker';
+CityPicker.PanelItem = CityPanelItem;
+CityPicker.Panel = CityPanel;
+CityPicker.SearchPanel = SearchPanel;
+export default CityPicker;

package/es/city-picker/city-search-panel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { City } from './city-panel-item';
+export interface SearchPanelProps {
+    keyword: string;
+    data: Array<City>;
+    onSelect?: (city: City) => void;
+}
+declare const SearchPanel: React.FC<SearchPanelProps>;
+export default SearchPanel;

package/es/city-picker/city-search-panel.js

@@ -0,0 +1,51 @@
+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';
+import NoData from './no-data';
+
+var SearchPanel = function SearchPanel(_ref) {
+  var _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      _ref$keyword = _ref.keyword,
+      keyword = _ref$keyword === void 0 ? '' : _ref$keyword,
+      handleSelect = _ref.onSelect;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var containerCls = classNames("".concat(cityPickerPrefixCls, "-search-panel"));
+  var hasData = data && data.length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerCls
+  }, hasData ? _mapInstanceProperty(data).call(data, function (city) {
+    var _context;
+
+    var itemContainerCls = classNames("".concat(cityPickerPrefixCls, "-search-panel-item"));
+    var itemLeftCls = classNames("".concat(cityPickerPrefixCls, "-search-panel-item-left"));
+    var itemRightCls = classNames("".concat(cityPickerPrefixCls, "-search-panel-item-right"));
+
+    var handleClick = function handleClick() {
+      handleSelect === null || handleSelect === void 0 ? void 0 : handleSelect(city);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: itemContainerCls,
+      onClick: handleClick,
+      key: city.id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: itemLeftCls
+    }, /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: city.name.replace(keyword, _concatInstanceProperty(_context = "<span class=\"".concat(cityPickerPrefixCls, "-search-keyword\">")).call(_context, keyword, "</span>"))
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      className: itemRightCls
+    }, /*#__PURE__*/React.createElement("span", null, city.province), /*#__PURE__*/React.createElement("span", null, city.country === '中国' ? '' : city.country)));
+  }) : /*#__PURE__*/React.createElement(NoData, null));
+};
+
+export default SearchPanel;

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

@@ -0,0 +1,3 @@
+import CityPicker from './city-picker';
+export * from './city-picker';
+export default CityPicker;

package/es/city-picker/index.js

@@ -0,0 +1,3 @@
+import CityPicker from './city-picker';
+export * from './city-picker';
+export default CityPicker;

package/es/city-picker/no-data.d.ts

@@ -0,0 +1,2 @@
+declare const NoData: () => JSX.Element;
+export default NoData;

package/es/city-picker/no-data.js

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+
+var NoData = function NoData() {
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      globalLocale = _useContext.locale;
+
+  var cityPickerLang = globalLocale.getCompLangMsg({
+    componentName: 'CityPicker'
+  });
+  var cityPickerPrefixCls = getPrefixCls(prefixCls, 'city-picker');
+  var cls = classNames("".concat(cityPickerPrefixCls, "-no-data"));
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls
+  }, cityPickerLang.noData);
+};
+
+export default NoData;

package/es/city-picker/style/css.js

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