@dckj-npm/dc-material 0.1.15 → 0.1.16

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[];
+    currentLocation: Location;
+    open: boolean;
+    setIsOpen: () => void;
+    setCurrent: (data: Location) => void;
+}
+declare const ContentList: React.FC<LocationProps>;
+export default ContentList;

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import "./index.scss";
+var ContentList = function navigationList(_ref) {
+  var open = _ref.open,
+    itemArray = _ref.itemArray,
+    currentLocation = _ref.currentLocation,
+    setIsOpen = _ref.setIsOpen,
+    setCurrent = _ref.setCurrent;
+  var changeHandle = function changeHandle(position) {
+    console.log('changeHandle', position);
+    // 设置当前选中位置
+    setCurrent(position);
+    // 关闭位置列表
+    setIsOpen();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "location-list",
+    style: {
+      display: open ? 'block' : 'none'
+    }
+  }, itemArray.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return changeHandle(item);
+      },
+      className: "location-list-item"
+    }, item.address);
+  }));
+};
+export default ContentList;

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["itemArray", "defaultLocation", "__designMode"];
+import * as React from 'react';
+import { default as List } from "./position-list";
+import { default as Position } from "./position-left";
+var Navigation = function bottomNavigation(_ref) {
+  var itemArray = _ref.itemArray,
+    defaultLocation = _ref.defaultLocation,
+    __designMode = _ref.__designMode,
+    otherProps = _objectWithoutPropertiesLoose(_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);
+    console.log('isopen', isOpen);
+  };
+  // React.useEffect(() => {
+  //   console.log('defaultLocation', defaultLocation)
+  //   if (defaultLocation) {
+  //     setCurrent(defaultLocation)
+  //   }
+  // })
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Position, _extends({
+    currentLocation: current
+  }, otherProps, {
+    clickHandle: function clickHandle() {
+      return openList();
+    }
+  })), /*#__PURE__*/React.createElement(List, {
+    open: isOpen,
+    currentLocation: current,
+    itemArray: itemArray,
+    setIsOpen: openList,
+    setCurrent: function setCurrent(value) {
+      return _setCurrent(value);
+    }
+  }));
+};
+export default Navigation;

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

@@ -0,0 +1,3 @@
+import SearchBar from "./search-bar";
+export type { SearchBarProps } from './search-bar';
+export default SearchBar;

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

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

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

@@ -0,0 +1,6 @@
+.search-bar-box {
+    width: 260px;
+    .next-search {
+        width: 260px;
+    }
+}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SearchBarProps {
+    defaultValue: string;
+    onSearch: () => void;
+}
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<any>>;
+export default SearchBar;

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

@@ -0,0 +1,21 @@
+import _Search from "@alifd/next/es/search";
+import * as React from 'react';
+import { forwardRef } from "react";
+var ExampleComponent = function ExampleComponent(props, ref) {
+  var defaultValue = props.defaultValue,
+    onSearch = props.onSearch;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "search-bar-box",
+    onClick: function onClick() {
+      onSearch();
+    }
+  }, /*#__PURE__*/React.createElement(_Search, {
+    size: "medium",
+    shape: "simple",
+    placeholder: defaultValue
+  }));
+};
+var SearchBar = /*#__PURE__*/forwardRef(ExampleComponent);
+SearchBar.displayName = 'SearchBar';
+export default SearchBar;

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

@@ -0,0 +1,6 @@
+/**
+ * 标签tag
+ */
+import Tab from './tab';
+export type { TabProps } from './tab';
+export default Tab;

package/es/components/tab/index.js

@@ -0,0 +1,5 @@
+/**
+ * 标签tag
+ */
+import Tab from "./tab";
+export default Tab;

package/es/components/tab/index.scss

@@ -0,0 +1,21 @@
+.tabs__container {
+  display: inline-block;
+  padding: 7px 15px;
+  border-radius: 14px;
+  background-color: #FFFFFF;
+  color: #666666;
+  font-size: 15px;
+  cursor: pointer;
+  &--selected {
+    background-color: #ED794A;
+    color: #FFFFFF;
+  }
+  &--small {
+    padding: 7px 15px;
+    border-radius: 14px;
+  }
+  &--large {
+    padding: 14px 30px;
+    border-radius: 28px;
+  }
+}

package/es/components/tab/tab.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import './index.scss';
+export interface TabProps {
+    /**
+     * 选中背景颜色
+     */
+    selectedBGColor: string;
+    /**
+     * 选中字体颜色
+     */
+    selectedFontColor: string;
+    /**
+     * 尺寸 small | large
+     */
+    size: string;
+    /**
+     * 点击事件
+     * @param e
+     */
+    onClickHandle?: (e: string) => void;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/es/components/tab/tab.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["selectedBGColor", "selectedFontColor", "size", "onClickHandle"];
+import * as React from 'react';
+import "./index.scss";
+var Tab = function Tab(_ref) {
+  var selectedBGColor = _ref.selectedBGColor,
+    selectedFontColor = _ref.selectedFontColor,
+    size = _ref.size,
+    onClickHandle = _ref.onClickHandle,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var tabList = [{
+    key: 'all',
+    label: '全部'
+  }, {
+    key: 'read',
+    label: '已读'
+  }, {
+    key: 'unRead',
+    label: '未读'
+  }];
+  var _React$useState = React.useState('all'),
+    tab = _React$useState[0],
+    setTab = _React$useState[1];
+  var handleClick = function handleClick(key) {
+    console.log(key);
+    // 切换tab
+    setTab(key);
+    // 触发父组件传递的点击处理函数
+    onClickHandle && onClickHandle(key);
+  };
+  return tabList.map(function (item) {
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: "tabs__container\n         " + (tab === item.key ? 'tabs__container--selected' : '') + "\n         " + (size == 'large' ? 'tabs__container--large' : 'tabs__container--small')
+    }, otherProps, {
+      onClick: function onClick() {
+        return handleClick(item.key);
+      },
+      style: {
+        backgroundColor: tab === item.key ? selectedBGColor : '',
+        color: tab === item.key ? selectedFontColor : ''
+      }
+    }), item.label);
+  });
+};
+export default Tab;

package/es/components/tab-container/index.d.ts

@@ -0,0 +1,3 @@
+import { TabContainer } from '../tab-container/tab-container';
+export type { TabContainerProps } from '../tab-container/tab-container';
+export default TabContainer;

package/es/components/tab-container/index.js

@@ -0,0 +1,2 @@
+import { TabContainer } from "../tab-container/tab-container";
+export default TabContainer;

package/es/components/tab-container/index.scss

@@ -0,0 +1,17 @@
+.fusion-ui-tab {
+    display: block;
+    background-color: #fff;
+  
+    &.next-medium {
+      .next-tabs-content {
+        padding: 16px;
+      }
+    }
+  
+    &.next-small {
+      .next-tabs-content {
+        padding: 12px;
+      }
+    }
+  }
+  

package/es/components/tab-container/tab-container.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Tab } from '@alifd/next';
+export interface TabContainerProps extends React.ComponentProps<typeof Tab> {
+    className?: string;
+}
+export declare const TabContainer: {
+    (props: TabContainerProps): JSX.Element;
+    displayName: string;
+};

package/es/components/tab-container/tab-container.js

@@ -0,0 +1,14 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className"];
+import React from 'react';
+import cx from 'classnames';
+export var TabContainer = function TabContainer(props) {
+  var className = props.className,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(_Tab, _extends({
+    className: cx(className, 'fusion-ui-tab')
+  }, restProps));
+};
+TabContainer.displayName = 'TabContainer';

package/es/components/tab-container-item/index.d.ts

@@ -0,0 +1,3 @@
+import { TabContainerItem } from './tab-container-item';
+export type { TabContainerItemProps } from './tab-container-item';
+export default TabContainerItem;

package/es/components/tab-container-item/index.js

@@ -0,0 +1,2 @@
+import { TabContainerItem } from "./tab-container-item";
+export default TabContainerItem;

package/es/components/tab-container-item/tab-container-item.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Tab } from '@alifd/next';
+export interface TabContainerItemProps extends React.ComponentProps<typeof Tab> {
+    className?: string;
+}
+export declare const TabContainerItem: {
+    (props: TabContainerItemProps): JSX.Element;
+    displayName: string;
+};

package/es/components/tab-container-item/tab-container-item.js

@@ -0,0 +1,14 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className"];
+import React from 'react';
+import cx from 'classnames';
+export var TabContainerItem = function TabContainerItem(props) {
+  var className = props.className,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(_Tab.Item, _extends({
+    className: cx(className, 'fusion-ui-tab')
+  }, restProps));
+};
+TabContainerItem.displayName = 'TabContainerItem';

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

@@ -0,0 +1,6 @@
+/**
+ * 标签tag
+ */
+import Tag from './tag';
+export type { TagProps } from './tag';
+export default Tag;

package/es/components/tag/index.js

@@ -0,0 +1,5 @@
+/**
+ * 标签tag
+ */
+import Tag from "./tag";
+export default Tag;

package/es/components/tag/index.scss

@@ -0,0 +1,16 @@
+.tags__container {
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: white;
+  font-size: 11px;
+
+}
+.orange {
+  color: #F1770E;
+  background-color: rgba(241, 119, 14, 0.1);
+}
+
+.blue {
+  color: #2972DD;
+  background-color: rgba(41, 114, 221, 0.1);
+}

package/es/components/tag/tag.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import './index.scss';
+export interface TagProps {
+    /**
+     * 标签名称
+     */
+    name: string;
+    /**
+     * 标签颜色
+     */
+    color: string;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/es/components/tag/tag.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["name", "color"];
+import * as React from 'react';
+import "./index.scss";
+var Tag = function Tag(_ref) {
+  var name = _ref.name,
+    color = _ref.color,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: "tags__container " + (color ? color : '')
+  }, otherProps), name);
+};
+export default Tag;

package/es/components/teletext-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 图文列表
+ */
+import TeletextList from './teletext-list';
+export type { TeletextListProps } from './teletext-list';
+export { TeletextList, };

package/es/components/teletext-list/index.js

@@ -0,0 +1,6 @@
+/**
+ * 图文列表
+ */
+
+import TeletextList from "./teletext-list";
+export { TeletextList };

package/es/components/teletext-list/index.scss

@@ -0,0 +1,17 @@
+@import '../../variables.scss';
+
+.teletext-list__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 12px;
+
+  .teletext-list__panel__item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+}
+
+

package/es/components/teletext-list/teletext-list-item.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import './teletext-list-item.scss';
+/**
+ * 数据
+ */
+export interface TeletextListItemProps {
+    /**
+     * 点击事件
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 图片地址
+     */
+    image?: string;
+    /**
+     * 图片位置
+     */
+    imagePlacement?: "left" | "right" | "none";
+    /**
+     * 说明
+     */
+    description?: string;
+    /**
+     * 标签列表
+     */
+    tags?: {
+        /**
+         * 标签名称
+         */
+        name: string;
+        /**
+         * 标签颜色
+         */
+        color: string;
+    }[] | string;
+}
+declare const TeletextListItem: React.FC<TeletextListItemProps>;
+export default TeletextListItem;

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onClick", "title", "image", "children", "imagePlacement", "description", "tags"];
+import React from 'react';
+import "./teletext-list-item.scss";
+import { convertChildren } from "../../utils/children-node-handle";
+
+/**
+ * 数据
+ */
+
+var TeletextListItem = function TeletextListItem(_ref) {
+  var _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    title = _ref.title,
+    image = _ref.image,
+    children = _ref.children,
+    imagePlacement = _ref.imagePlacement,
+    description = _ref.description,
+    tags = _ref.tags,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "teletext-list__panel__item",
+    onClick: onClick
+  }, _otherProps), image && imagePlacement === 'left' ? convertChildren(children, 'image', {
+    src: image,
+    className: 'teletext-list__panel__item_image'
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text"
+  }, convertChildren(children, 'title', {
+    children: [title]
+  }), convertChildren(children, 'content', {
+    children: [description]
+  }), tags ? /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text__tags"
+  }, (Array.isArray(tags) ? tags : tags.split(',')).map(function (tag, tagIndex) {
+    return convertChildren(children, 'teletext-tagc-1', {
+      name: tag.name,
+      key: tagIndex
+    });
+  })) : null), image && imagePlacement === 'right' ? convertChildren(children, 'image', {
+    src: image,
+    className: 'teletext-list__panel__item_image'
+  }) : null);
+};
+TeletextListItem.displayName = 'TeletextListItem';
+export default TeletextListItem;

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

@@ -0,0 +1,74 @@
+@import '../../variables.scss';
+
+.teletext-list__panel__item {
+  display: flex;
+  gap: 5px;
+  padding-bottom: 10px;
+  justify-content: flex-start;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  .teletext-list__panel__item_image {
+    width: 90px;
+    height: 71px;
+    border-radius: 5px;
+    flex: 0 0 auto;
+    overflow: hidden;
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+  }
+
+  .teletext-list__panel__item__text {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+
+    .teletext-list__panel__item__text__title {
+      font-size: 15px;
+      font-weight: 500;
+      color: #000000;
+    }
+
+    .teletext-list__panel__item__text__description {
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      color: #686868;
+      -webkit-box-orient: vertical;
+      display: -webkit-box;
+      font-size: 12px;
+      text-overflow: ellipsis;
+    }
+
+    .teletext-list__panel__item__text__tags {
+      display: flex;
+      gap: 6px;
+
+      & > span {
+        padding: 2px 6px;
+        border-radius: 4px;
+        background-color: black;
+        color: white;
+        font-size: 11px;
+
+        &.orange {
+          color: #F1770E;
+          background-color: rgba(241, 119, 14, 0.1);
+        }
+
+        &.blue {
+          color: #2972DD;
+          background-color: rgba(41, 114, 221, 0.1);
+        }
+
+      }
+
+    }
+
+  }
+
+}