@dckj-npm/dc-material 0.1.356 → 0.1.358

package/lib/components/position/index.scss

@@ -0,0 +1,124 @@
+.location {
+  display: flex;
+  cursor: pointer;
+  color: #414141;
+  font-size: 13.5px;
+  &-address {
+    margin-right: 7px;
+  }
+  &-icon {
+    display: flex;
+    align-items: center;
+  }
+}
+.location-city-box {
+  font-size: 13px;
+  color: #000;
+  font-weight: 500;
+  border-radius: 4px;
+  border: 1px solid #CCCCCC;
+  width: 80px;
+  height: 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.location-list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  padding: 10px 10px 0 13px;
+  z-index: 999;
+  overflow-y: scroll;
+
+  &-head {
+    padding: 0 13px 0 13px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 15px;
+    &-img {
+      width: 8px;
+      height: 14px;
+    }
+  }
+  &-location {
+    margin-bottom: 15px;
+    &-img {
+      width: 10px;
+      height: 13px;
+      margin-right: 2px;
+    }
+    &-text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 4em;
+    }
+  }
+  &-hot {
+    margin-bottom: 21px;
+    &-title {
+      font-size: 14px;
+      color: #999999;
+      margin-bottom: 15px;
+    }
+    &-content {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-column-gap: 10px;
+      grid-row-gap: 15px;
+      &-item {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 4em;
+      }
+    }
+  }
+  &-city {
+    &-box {
+      &-type {
+        font-size: 14px;
+        color: #999999;
+        padding: 0;
+        line-height: 10px;
+        margin: 5px 0 20px 0;
+      }
+      &-name {
+        color: #000;
+        font-size: 13px;
+        padding: 0;
+        line-height: 12px;
+        margin-bottom: 20px;
+        font-weight: 500;
+      }
+    }
+  }
+  &-index-bar {
+    background-color: #F7F7F7;
+    position: fixed;
+    right: 12px;
+    border-radius: 5px;
+    padding: 5px 3px;
+    top: 280px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    &-name {
+      font-weight: 500;
+      font-size: 10px;
+    }
+  }
+}
+.location-list-index {
+  overflow-y: scroll;
+}

package/lib/components/position/position-left.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import './index.scss';
+import { Location } from "./entity";
+export interface LocationProps {
+    currentLocation: Location;
+    clickHandle: () => void;
+}
+declare const NavigationLeft: React.FC<LocationProps>;
+export default NavigationLeft;

package/lib/components/position/position-left.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _arror = _interopRequireDefault(require("../../assets/icon/position/arror.png"));
+var _excluded = ["currentLocation", "clickHandle"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var NavigationLeft = function navigationLeft(_ref) {
+  var currentLocation = _ref.currentLocation,
+    clickHandle = _ref.clickHandle,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: "location"
+  }, otherProps, {
+    onClick: function onClick() {
+      return clickHandle();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "location-address"
+  }, currentLocation.address), /*#__PURE__*/React.createElement("div", {
+    className: "location-icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _arror["default"],
+    width: "10",
+    height: "5",
+    alt: "icon"
+  }))));
+};
+var _default = exports["default"] = NavigationLeft;

package/lib/components/position/position-list.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import './index.scss';
+import { Location } from "./position";
+interface LocationProps {
+    itemArray: Location[];
+    open: boolean;
+    setIsOpen: () => void;
+    setCurrent: (data: Location) => void;
+    currentLocation: Location;
+}
+declare const ContentList: React.FC<LocationProps>;
+export default ContentList;

package/lib/components/position/position-list.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+require("./index.scss");
+var _img = _interopRequireDefault(require("../../assets/icon/position/img.png"));
+var _location = _interopRequireDefault(require("../../assets/icon/position/location.png"));
+var _searchBar = _interopRequireDefault(require("../search-bar/search-bar"));
+var _textUtil = require("../../utils/textUtil");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var ContentList = function NavigationList(_ref) {
+  var open = _ref.open,
+    itemArray = _ref.itemArray,
+    setIsOpen = _ref.setIsOpen,
+    setCurrent = _ref.setCurrent,
+    currentLocation = _ref.currentLocation;
+  var indexKeys = [];
+  /**
+   * 处理城市列表
+   * @param itemArrays
+   * @param searchValue
+   */
+  var handleItem = function handleItem(itemArrays, searchValue) {
+    if (!itemArrays) {
+      return {};
+    }
+    var groupName = (0, _textUtil.groupCitiesByInitial)(itemArrays);
+    indexKeys = Object.keys(groupName);
+    if (searchValue) {
+      // 根据关键字过滤
+      indexKeys.forEach(function (item) {
+        var cityArray = groupName[item];
+        var filterCity = cityArray.filter(function (locationItem) {
+          return locationItem.address.indexOf(searchValue) != -1;
+        });
+        if (!filterCity || filterCity.length == 0) {
+          // 如果不存在关键字匹配，则删掉整个key
+          delete groupName[item];
+        } else {
+          groupName[item] = filterCity;
+        }
+      });
+    }
+    return groupName;
+  };
+  var _useState = (0, _react.useState)(handleItem(itemArray)),
+    cityList = _useState[0],
+    setCityList = _useState[1];
+  console.log('cityList', cityList);
+  var changeHandle = function changeHandle(position) {
+    console.log('changeHandle', position);
+    // 设置当前选中位置
+    setCurrent(position);
+    // 关闭位置列表
+    setIsOpen();
+  };
+  var indexClickHandle = function indexClickHandle(index) {
+    var indexStr = 'index-' + index;
+    var dom = document.getElementById(indexStr);
+    if (dom) {
+      dom.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  };
+  var handleSearch = function handleSearch(name) {
+    var data = handleItem(itemArray, name);
+    setCityList(data);
+  };
+  var hotCityArray = itemArray ? itemArray.filter(function (item) {
+    return item.isHot;
+  }) : [];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "location-list",
+    style: {
+      display: open ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "location-list-head"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _img["default"],
+    className: "location-list-head-img",
+    onClick: setIsOpen
+  }), /*#__PURE__*/React.createElement(_searchBar["default"], {
+    onConfirm: function onConfirm(value) {
+      return handleSearch(value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "location-city-box location-list-location"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _location["default"],
+    className: "location-list-location-img"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "location-list-location-text",
+    onClick: setIsOpen
+  }, currentLocation.address)), hotCityArray && hotCityArray.length ? /*#__PURE__*/React.createElement("div", {
+    className: "location-list-hot"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "location-list-hot-title"
+  }, "\u70ED\u95E8\u57CE\u5E02"), /*#__PURE__*/React.createElement("div", {
+    className: "location-list-hot-content"
+  }, hotCityArray ? hotCityArray.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "location-city-box location-list-hot-content-item",
+      onClick: function onClick() {
+        return changeHandle(item);
+      }
+    }, item.address);
+  }) : '')) : '', /*#__PURE__*/React.createElement("div", {
+    className: "location-list-city"
+  }, cityList ? Object.keys(cityList).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "location-list-city-box"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "location-list-city-box-type",
+      id: "index-" + item
+    }, item), cityList[item].map(function (cityInfo) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "location-list-city-box-name",
+        onClick: function onClick() {
+          return changeHandle(cityInfo);
+        }
+      }, cityInfo.address);
+    }));
+  }) : ''), /*#__PURE__*/React.createElement("div", {
+    className: "location-list-index-bar"
+  }, cityList ? Object.keys(cityList).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "location-list-index-bar-name",
+      onClick: function onClick() {
+        return indexClickHandle(item);
+      }
+    }, item);
+  }) : ''));
+};
+var _default = exports["default"] = ContentList;

package/lib/components/position/position.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Location } from "./entity";
+export interface LocationProps {
+    itemArray: Location[];
+    defaultLocation: Location;
+}
+declare const Navigation: React.FC<LocationProps>;
+export default Navigation;

package/lib/components/position/position.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _positionList = _interopRequireDefault(require("./position-list"));
+var _positionLeft = _interopRequireDefault(require("./position-left"));
+var _excluded = ["itemArray", "defaultLocation", "__designMode"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Navigation = function BottomNavigation(_ref) {
+  var itemArray = _ref.itemArray,
+    defaultLocation = _ref.defaultLocation,
+    __designMode = _ref.__designMode,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _React$useState = React.useState(defaultLocation),
+    current = _React$useState[0],
+    _setCurrent = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  var openList = function openList() {
+    if (__designMode == 'design') {
+      // 设计态不打开列表
+      return;
+    }
+    setIsOpen(!isOpen);
+  };
+  // React.useEffect(() => {
+  //   console.log('defaultLocation', defaultLocation)
+  //   if (defaultLocation) {
+  //     setCurrent(defaultLocation)
+  //   }
+  // })
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_positionLeft["default"], (0, _extends2["default"])({
+    currentLocation: current
+  }, otherProps, {
+    clickHandle: function clickHandle() {
+      return openList();
+    }
+  })), /*#__PURE__*/React.createElement(_positionList["default"], {
+    open: isOpen,
+    currentLocation: current,
+    itemArray: itemArray,
+    setIsOpen: openList,
+    setCurrent: function setCurrent(value) {
+      return _setCurrent(value);
+    }
+  }));
+};
+var _default = exports["default"] = Navigation;

package/lib/components/radio-group/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 单选按钮组
+ */
+import RadioGroup from './radio-group';
+import RadioGroupItem from './radio-group-item';
+export type { RadioGroupProps } from './radio-group';
+export type { RadioGroupItemProps } from './radio-group-item';
+export { RadioGroup as CustomRadioGroup, RadioGroupItem as CustomRadioGroupItem, };

package/lib/components/radio-group/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _radioGroup = _interopRequireDefault(require("./radio-group"));
+exports.CustomRadioGroup = _radioGroup["default"];
+var _radioGroupItem = _interopRequireDefault(require("./radio-group-item"));
+exports.CustomRadioGroupItem = _radioGroupItem["default"];

package/lib/components/radio-group/index.scss

@@ -0,0 +1,40 @@
+@import '../../variables.scss';
+
+.radio-group__panel {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+
+  .radio-group-item__button {
+    flex: 0 0 auto;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 250ms;
+    font-size: 12px;
+    padding: 5px 11px;
+    border-radius: 25rem;
+  }
+
+  .radio-group-item__text {
+    flex: 0 0 auto;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 250ms;
+    font-size: 12px;
+    padding: 5px 0;
+
+    .radio-group-item__text__line {
+      width: 100%;
+      height: 1px;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      position: absolute;
+    }
+
+  }
+
+
+}
+
+

package/lib/components/radio-group/radio-group-item.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import './index.scss';
+export type RadioGroupItemType = 'button' | 'text';
+export interface RadioGroupItemProps {
+    /**
+     * 选项
+     */
+    label: string;
+    /**
+     * 值
+     */
+    value: string;
+    /**
+     * 是否选中
+     */
+    checked: boolean;
+    /**
+     * 选中颜色
+     */
+    selectColor?: string;
+    /**
+     * 选中的文字颜色
+     */
+    selectTextColor?: string;
+    /**
+     * 未选中颜色
+     */
+    unSelectColor?: string;
+    /**
+     * 未选中的文字颜色
+     */
+    unSelectTextColor?: string;
+    /**
+     * 类型
+     */
+    type?: RadioGroupItemType;
+    /**
+     * 名称
+     */
+    name: string;
+    /**
+     * 改变事件
+     * @param value
+     */
+    onChange: (value: string) => void;
+}
+declare const RadioGroupItem: React.FC<RadioGroupItemProps>;
+export default RadioGroupItem;

package/lib/components/radio-group/radio-group-item.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+require("./index.scss");
+var _excluded = ["label", "value", "checked", "type", "name", "selectColor", "selectTextColor", "unSelectColor", "unSelectTextColor", "onChange"];
+var styleFunction = function styleFunction(type, bgColors, textColors, checked) {
+  var bgColor = checked ? bgColors[1] : bgColors[0];
+  var textColor = checked ? textColors[1] : textColors[0];
+  if (type === 'button') {
+    return {
+      'backgroundColor': bgColor,
+      'color': textColor
+    };
+  }
+  if (type === 'text') {
+    return {
+      'color': textColor,
+      'position': checked ? 'relative' : 'static'
+    };
+  }
+  return {};
+};
+var RadioGroupItem = function RadioGroupItem(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '标签' : _ref$label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 'value' : _ref$value,
+    checked = _ref.checked,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    name = _ref.name,
+    _ref$selectColor = _ref.selectColor,
+    selectColor = _ref$selectColor === void 0 ? '#F5743F' : _ref$selectColor,
+    _ref$selectTextColor = _ref.selectTextColor,
+    selectTextColor = _ref$selectTextColor === void 0 ? 'white' : _ref$selectTextColor,
+    _ref$unSelectColor = _ref.unSelectColor,
+    unSelectColor = _ref$unSelectColor === void 0 ? '#F0F0F0' : _ref$unSelectColor,
+    _ref$unSelectTextColo = _ref.unSelectTextColor,
+    unSelectTextColor = _ref$unSelectTextColo === void 0 ? '#727272' : _ref$unSelectTextColo,
+    onChange = _ref.onChange,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var handleChange = function handleChange(event) {
+    onChange(event.target.value);
+  };
+  // 获取特殊的样式
+  var customStyle = styleFunction(type, [unSelectColor, selectColor], [unSelectTextColor, selectTextColor], checked);
+  if (_otherProps.style) {
+    _otherProps.style = (0, _extends2["default"])({}, _otherProps.style, customStyle);
+  } else {
+    _otherProps.style = (0, _extends2["default"])({}, customStyle);
+  }
+  var className = type === 'button' ? 'radio-group-item__button' : 'radio-group-item__text';
+  return /*#__PURE__*/_react["default"].createElement("label", (0, _extends2["default"])({
+    key: value,
+    className: className
+  }, _otherProps), type === 'text' && checked && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "radio-group-item__text__line",
+    style: {
+      'background-color': selectColor
+    }
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "radio",
+    style: {
+      'display': 'none'
+    },
+    name: name,
+    value: value,
+    checked: checked,
+    onChange: handleChange
+  }), label);
+};
+RadioGroupItem.displayName = 'RadioGroupItem';
+var _default = exports["default"] = RadioGroupItem;

package/lib/components/radio-group/radio-group.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import './index.scss';
+export interface RadioType {
+    label: string;
+    value: string;
+}
+export type RadioGroupItemType = 'button' | 'text';
+export interface RadioGroupProps {
+    /**
+     * 选项
+     */
+    options: Array<RadioType>;
+    /**
+     * 默认值
+     */
+    defaultValue?: string;
+    /**
+     * 是否换行
+     */
+    isWrap?: boolean;
+    /**
+     * 选中颜色
+     */
+    selectColor?: string;
+    /**
+     * 选中的文字颜色
+     */
+    selectTextColor?: string;
+    /**
+     * 未选中颜色
+     */
+    unSelectColor?: string;
+    /**
+     * 未选中的文字颜色
+     */
+    unSelectTextColor?: string;
+    /**
+     * 改变事件
+     * @param value
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 类型
+     */
+    type?: RadioGroupItemType;
+    /**
+     * 名称
+     */
+    name?: string;
+}
+declare const RadioGroup: React.FC<RadioGroupProps>;
+export default RadioGroup;