@dckj-npm/dc-material 0.1.357 → 0.1.358

package/es/components/message-list/message-list-item.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onClick", "title", "image", "gmtCreate", "children", "description", "isRead"];
+import React from 'react';
+import "./message-list-item.scss";
+import { convertChildren } from "../../utils/children-node-handle";
+
+/**
+ * 数据
+ */
+
+var MessageListItem = function MessageListItem(_ref) {
+  var _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    title = _ref.title,
+    image = _ref.image,
+    gmtCreate = _ref.gmtCreate,
+    children = _ref.children,
+    description = _ref.description,
+    isRead = _ref.isRead,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "message-list__panel__item",
+    onClick: onClick
+  }, _otherProps), convertChildren(children, 'image', {
+    src: image
+  }), isRead ? null : /*#__PURE__*/React.createElement("span", {
+    className: "badge"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "message-list__panel__item__text"
+  }, convertChildren(children, 'title', {
+    children: [title]
+  }), convertChildren(children, 'gmtCreate', {
+    children: [gmtCreate]
+  }), convertChildren(children, 'content', {
+    children: [description]
+  })));
+};
+MessageListItem.displayName = 'TeletextListItem';
+export default MessageListItem;

package/es/components/message-list/message-list-item.scss

@@ -0,0 +1,62 @@
+@import '../../variables.scss';
+
+.message-list__panel__item {
+  display: flex;
+  gap: 5px;
+  padding-bottom: 15px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  border-bottom: 1px solid #eeeeee;
+  position: relative;
+  &_image {
+    width: 90px;
+    height: 71px;
+    border-radius: 5px;
+    flex: 0 0 auto;
+    overflow: hidden;
+    position: relative;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .badge {
+    display: inline-block;
+    width: 7px; // 根据需要设置的大小
+    height: 7px;
+    border-radius: 50%;
+    background-color: #F44341; // 红色背景
+    position: absolute; // 绝对定位
+    top: 5px; // 根据需要调整位置
+    left: 38px; // 根据需要调整位置
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 3px;
+    //padding-top: 4px;
+
+    &__title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #000000;
+    }
+
+    &__description {
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      color: #686868;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      font-size: 12px;
+      text-overflow: ellipsis;
+    }
+
+  }
+
+
+}

package/es/components/message-list/message-list.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './index.scss';
+import { DataProps } from './message-list-item';
+export interface MessageListProps {
+    /**
+     * 全部的数据
+     */
+    dataList?: DataProps[];
+    /**
+     * 点击事件
+     * @param e
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 子节点
+     */
+    children: React.ReactChild;
+    /**
+     * 图片
+     */
+    images: string[];
+    /**
+     * 切换数据源
+     */
+    handleDataList: (key: number[]) => DataProps[];
+}
+declare const MessageList: React.FC<MessageListProps>;
+export default MessageList;

package/es/components/message-list/message-list.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "handleDataList", "onClick", "children", "images"];
+import React, { useEffect } from 'react';
+import "./index.scss";
+import { default as MessageListItem } from "./message-list-item";
+import { convertChildren } from "../../utils/children-node-handle";
+var MessageList = function MessageList(_ref) {
+  var dataList = _ref.dataList,
+    handleDataList = _ref.handleDataList,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    children = _ref.children,
+    images = _ref.images,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var _React$useState = React.useState(dataList || []),
+    currentDataList = _React$useState[0],
+    setCurrentDataList = _React$useState[1];
+  // const [currentKey, setCurrentKey] = React.useState('all')
+
+  // 切换数据源
+  var handleClick = function handleClick(key) {
+    handleDataList(key);
+    // setCurrentDataList(newDataList)
+    // setCurrentKey(key)
+  };
+  images = images || [];
+  useEffect(function () {
+    setCurrentDataList(dataList || []);
+  }, [dataList]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "message-list__panel"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "message-list__panel__tab"
+  }, convertChildren(children, 'tabMessage', {
+    onClickHandle: handleClick
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "message-list__panel__item-list"
+  }, currentDataList ? currentDataList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(MessageListItem, _extends({
+      key: index,
+      onClick: onClick
+    }, item, {
+      image: images[index % images.length]
+    }), children);
+  }) : /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u6570\u636E")));
+};
+MessageList.displayName = 'MessageList';
+export default MessageList;

package/es/components/notice-bar/index.d.ts

@@ -0,0 +1,3 @@
+import NoticeBar from './notice-bar';
+export type { NoticeBarProps } from './notice-bar';
+export default NoticeBar;

package/es/components/notice-bar/index.js

@@ -0,0 +1,2 @@
+import NoticeBar from "./notice-bar";
+export default NoticeBar;

package/es/components/notice-bar/index.scss

@@ -0,0 +1,84 @@
+.notice-bar__panel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.07);
+    margin: 0;
+    padding: 10px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    .notice-bar__panel__item-img {
+        width: 46px;
+        margin-right: 7px;
+    }
+    .notice-bar__panel__item-more {
+      width: 60px;
+      height: 100%;
+      //background: pink;
+      cursor: pointer;
+
+      &-more {
+        flex-shrink: 0;
+        cursor: pointer;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+
+        &-text {
+          font-weight: 500;
+          font-size: 11px;
+          color: #666666;
+          margin-right: 2px;
+        }
+        &-img {
+          width: 5px;
+          height: 10px;
+        }
+      }
+    }
+    .notice-bar__panel__item-list {
+        width: calc(100% - 53px - 60px);
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        justify-content: start;
+        border-left: 1px solid #f1f1f1;
+        padding-left: 10px;
+        position: relative;
+        overflow: hidden;
+
+        .notice-bar__panel__item-loop {
+            width: 100%;
+            position: relative;
+            overflow: hidden; // 确保超出部分不显示
+            height: 20px; // 设置合适的高度
+          }
+
+          .notice-bar__panel__item-loop > div {
+            position: absolute; // 绝对定位
+            width: 100%;
+            height: 20px;
+            animation: scrollUp 4s linear infinite; // 动画持续时间和类型
+          }
+
+          @keyframes scrollUp {
+            0% {
+              transform: translateY(100%); // 从底部开始
+            }
+            100% {
+              transform: translateY(-200%); // 滚动到顶部
+            }
+          }
+
+
+    }
+
+
+}
+//动画
+.anim {
+  transition: all 0.5s;
+  margin-top: -24px;
+}

package/es/components/notice-bar/notice-bar-item.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './notice-bar-item.scss';
+interface NoticeBarItemProps {
+    /**
+     * 内容
+     */
+    content?: string;
+    /**
+     * 发布时间
+     */
+    releaseTime?: string;
+    /**
+     * 是否置顶
+     */
+    isTop?: number;
+}
+declare const NoticeBarItem: React.FC<NoticeBarItemProps>;
+export default NoticeBarItem;

package/es/components/notice-bar/notice-bar-item.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["content", "releaseTime", "isTop", "children"];
+import React from 'react';
+import "./notice-bar-item.scss";
+import { convertChildren } from "../../utils/children-node-handle";
+import { formatTime } from "../../utils/time-util";
+var NoticeBarItem = function NoticeBarItem(_ref) {
+  var content = _ref.content,
+    releaseTime = _ref.releaseTime,
+    isTop = _ref.isTop,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  releaseTime = formatTime(releaseTime);
+  console.log(convertChildren(children, isTop === 1 ? 'teletext-tagc-1' : 'teletext-tagc-2', {
+    name: isTop === 1 ? '置顶' : '最新'
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "notice-bar__panel__item"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "notice-bar__panel__item-left"
+  }, convertChildren(children, isTop === 1 ? 'teletext-tagc-1' : 'teletext-tagc-2', {
+    name: isTop === 1 ? '置顶' : '最新'
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "notice-bar__panal__item__content"
+  }, content)));
+};
+NoticeBarItem.displayName = 'NoticeBarItem';
+export default NoticeBarItem;

package/es/components/notice-bar/notice-bar-item.scss

@@ -0,0 +1,26 @@
+.notice-bar__panel__item {
+    width: calc(100vw - 110px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    .notice-bar__panel__item-left {
+        display: flex;
+        align-items: center;
+        .notice-bar__panal__item__content{
+          color: #676767;
+          font-size: 12px;
+          width: 180px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-left: 4px;
+        }
+    }
+    .notice-bar__panel__item-releaseTime {
+         color: #676767;
+         font-size: 11px;
+         opacity: 0.5;
+    }
+
+}

package/es/components/notice-bar/notice-bar.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import './index.scss';
+interface DataProps {
+    /**
+     * 内容
+     */
+    content?: string;
+    /**
+     * 发布时间
+     */
+    releaseTime?: string;
+    /**
+     * 是否置顶
+     */
+    isTop?: number;
+}
+export interface NoticeBarProps {
+    /**
+     * 数据
+     */
+    dataList?: DataProps[];
+    /**
+     * 点击事件
+     * @param e
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 子节点
+     */
+    children: React.ReactChild;
+    /**
+     * 左侧图标
+     */
+    icon: string;
+    /**
+     * 点击事件
+     * @param e
+     */
+    handleMoreClick?: (e: any) => void;
+    /**
+     * 更多
+     */
+    moreText: string;
+}
+declare const NoticeBar: React.FC<NoticeBarProps>;
+export default NoticeBar;

package/es/components/notice-bar/notice-bar.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "onClick", "icon", "children", "handleMoreClick", "moreText"];
+import React from 'react';
+import "./index.scss";
+import NoticeBarItem from "./notice-bar-item";
+import arr from "../../assets/icon/teletext-list/arr.png";
+var NoticeBar = function NoticeBar(_ref) {
+  var dataList = _ref.dataList,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    icon = _ref.icon,
+    children = _ref.children,
+    handleMoreClick = _ref.handleMoreClick,
+    moreText = _ref.moreText,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var stickyItems = (dataList || []).filter(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.isTop) === 1;
+  });
+  var loopItems = (dataList || []).filter(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.isTop) === 0;
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "notice-bar__panel"
+  }, _otherProps), /*#__PURE__*/React.createElement("img", {
+    className: "notice-bar__panel__item-img",
+    src: icon,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "notice-bar__panel__item-list"
+  }, stickyItems ? stickyItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(NoticeBarItem, _extends({
+      key: index,
+      onClick: onClick
+    }, item), children);
+  }) : /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
+    className: "notice-bar__panel__item-loop"
+  }, /*#__PURE__*/React.createElement("div", null, loopItems.length > 0 ? loopItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(NoticeBarItem, _extends({
+      key: index,
+      onClick: onClick
+    }, item), children);
+  }) : /*#__PURE__*/React.createElement("div", null, "No items to display")))), /*#__PURE__*/React.createElement("div", {
+    className: "notice-bar__panel__item-more"
+  }, moreText ? /*#__PURE__*/React.createElement("div", {
+    className: "notice-bar__panel__item-more-more"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "notice-bar__panel__item-more-more-text",
+    onClick: handleMoreClick
+  }, moreText), /*#__PURE__*/React.createElement("img", {
+    src: arr,
+    className: "notice-bar__panel__item-more-more-img"
+  })) : ''));
+};
+NoticeBar.displayName = 'NoticeBar';
+export default NoticeBar;

package/es/components/position/entity.d.ts

@@ -0,0 +1,5 @@
+export interface Location {
+    lat: string;
+    lng: string;
+    address: string;
+}

package/es/components/position/entity.js

@@ -0,0 +1 @@
+export {};

package/es/components/position/index.d.ts

@@ -0,0 +1,3 @@
+import Position from './position';
+export type { LocationProps } from './position';
+export default Position;

package/es/components/position/index.js

@@ -0,0 +1,2 @@
+import Position from "./position";
+export default Position;

package/es/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/es/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/es/components/position/position-left.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["currentLocation", "clickHandle"];
+import * as React from 'react';
+import "./index.scss";
+import arror from "../../assets/icon/position/arror.png";
+var NavigationLeft = function navigationLeft(_ref) {
+  var currentLocation = _ref.currentLocation,
+    clickHandle = _ref.clickHandle,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _extends({
+    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,
+    width: "10",
+    height: "5",
+    alt: "icon"
+  }))));
+};
+export default NavigationLeft;

package/es/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;