@dckj-npm/dc-material 0.1.0 → 0.1.3

package/es/components/bottom-navigation/bottom-navigation.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import './index.scss';
+interface Navigation {
+    text: string;
+    icon: string;
+    selectedIcon: string;
+}
+export interface NavigationProps {
+    itemArray: Navigation[];
+    selectedColor: string;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/es/components/bottom-navigation/bottom-navigation.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["itemArray", "selectedColor"];
+import * as React from 'react';
+import { Image } from '@alilc/lowcode-materials';
+import "./index.scss";
+var Navigation = function bottomNavigation(_ref) {
+  var itemArray = _ref.itemArray,
+    selectedColor = _ref.selectedColor,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _React$useState = React.useState(0),
+    activeNum = _React$useState[0],
+    setActiveNum = _React$useState[1];
+  var clickHandle = function clickHandle(index) {
+    // 更新激活tab
+    setActiveNum(index);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "navigation"
+  }, otherProps), itemArray.map(function (item, index) {
+    var _item$selectedIcon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "navigation-item",
+      onClick: function onClick() {
+        return clickHandle(index);
+      },
+      style: {
+        color: activeNum === index ? selectedColor !== null && selectedColor !== void 0 ? selectedColor : '#4598FF' : ''
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: activeNum === index ? (_item$selectedIcon = item.selectedIcon) !== null && _item$selectedIcon !== void 0 ? _item$selectedIcon : item.icon : item.icon,
+      style: {
+        width: '24.5px',
+        height: '24.5px'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, item.text));
+  }));
+};
+export default Navigation;

package/es/components/bottom-navigation/index.d.ts

@@ -0,0 +1,3 @@
+import Navigation from './bottom-navigation';
+export type { NavigationProps } from './bottom-navigation';
+export default Navigation;

package/es/components/bottom-navigation/index.js

@@ -0,0 +1,2 @@
+import Navigation from "./bottom-navigation";
+export default Navigation;

package/es/components/bottom-navigation/index.scss

@@ -0,0 +1,16 @@
+.navigation {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 50px 6px 50px;
+  position: fixed;
+  bottom: 0;
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}

package/es/components/colorful-button/colorful-button.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import './index.scss';
-export interface ColorfulButtonProps {
-    /**
-     * 类型
-     */
-    type?: "primary" | "secondary" | "normal";
-    color?: string;
-    style?: object;
-}
-declare const ColorfulButton: React.FC<ColorfulButtonProps>;
-export default ColorfulButton;
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulButtonProps {
+    /**
+     * 类型
+     */
+    type?: "primary" | "secondary" | "normal";
+    color?: string;
+    style?: object;
+}
+declare const ColorfulButton: React.FC<ColorfulButtonProps>;
+export default ColorfulButton;

package/es/components/colorful-button/index.d.ts

@@ -1,3 +1,3 @@
-import ColorfulButton from './colorful-button';
-export type { ColorfulButtonProps } from './colorful-button';
-export default ColorfulButton;
+import ColorfulButton from './colorful-button';
+export type { ColorfulButtonProps } from './colorful-button';
+export default ColorfulButton;

package/es/components/colorful-input/colorful-input.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import './index.scss';
-export interface ColorfulInputProps {
-    color?: string;
-    style?: object;
-}
-declare const ColorfulInput: React.FC<ColorfulInputProps>;
-export default ColorfulInput;
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulInputProps {
+    color?: string;
+    style?: object;
+}
+declare const ColorfulInput: React.FC<ColorfulInputProps>;
+export default ColorfulInput;

package/es/components/colorful-input/index.d.ts

@@ -1,3 +1,3 @@
-import ColorfulInput from './colorful-input';
-export type { ColorfulInputProps } from './colorful-input';
-export default ColorfulInput;
+import ColorfulInput from './colorful-input';
+export type { ColorfulInputProps } from './colorful-input';
+export default ColorfulInput;

package/es/components/dc-slider/index.d.ts

@@ -0,0 +1,3 @@
+import DCSlider from './slider';
+export type { ComponentProps } from './slider';
+export default DCSlider;

package/es/components/dc-slider/index.js

@@ -0,0 +1,2 @@
+import DCSlider from "./slider";
+export default DCSlider;

package/es/components/dc-slider/index.scss

@@ -0,0 +1,8 @@
+/* write style here */
+.ExampleComponent {
+
+}
+.img{
+  width: 100%;
+  height: 100%;
+}

package/es/components/dc-slider/slider.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './index.scss';
+export interface ComponentProps {
+    prefix: string;
+    animation: string;
+    arrows: true;
+    arrowSize: string;
+    arrowPosition: string;
+    arrowDirection: string;
+    autoplaySpeed: number;
+    dots: boolean;
+    dotsDirection: string;
+    draggable: boolean;
+    infinite: boolean;
+    slide: string;
+    slideDirection: string;
+    slidesToShow: number;
+    slidesToScroll: number;
+    speed: number;
+    triggerType: string;
+    centerPadding: string;
+    cssEase: string;
+    edgeFriction: number;
+    swipe: boolean;
+    touchMove: boolean;
+    touchThreshold: number;
+    useCSS: boolean;
+    waitForAnimate: boolean;
+    picUrls: string[];
+}
+declare const DCSlider: React.FC<ComponentProps>;
+export default DCSlider;

package/es/components/dc-slider/slider.js

@@ -0,0 +1,14 @@
+import _Slider from "@alifd/next/es/slider";
+import * as React from 'react';
+import { Image } from '@alilc/lowcode-materials';
+import "./index.scss";
+var DCSlider = function DCSlider(props) {
+  return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(_Slider, props, props.picUrls && props.picUrls.length > 0 ? props.picUrls.map(function (url, index) {
+    return /*#__PURE__*/React.createElement(Image, {
+      src: url,
+      alt: "Slide",
+      key: index
+    });
+  }) : /*#__PURE__*/React.createElement("div", null, "\u56FE\u7247\u4E3A\u7A7A")));
+};
+export default DCSlider;

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

@@ -0,0 +1,3 @@
+import Position from './position';
+export type { NavigationProps } 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,16 @@
+.navigation {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 50px 6px 50px;
+  position: fixed;
+  bottom: 0;
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import './index.scss';
+interface Navigation {
+    text: string;
+    icon: string;
+    selectedIcon: string;
+}
+export interface NavigationProps {
+    itemArray: Navigation[];
+    selectedColor: string;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/es/components/position/position.js

@@ -0,0 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["itemArray", "selectedColor"];
+import * as React from 'react';
+import { Image } from '@alilc/lowcode-materials';
+import "./index.scss";
+var Navigation = function bottomNavigation(_ref) {
+  var itemArray = _ref.itemArray,
+    selectedColor = _ref.selectedColor,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _React$useState = React.useState(0),
+    activeNum = _React$useState[0],
+    setActiveNum = _React$useState[1];
+  var clickHandle = function clickHandle(index) {
+    // 更新激活tab
+    setActiveNum(index);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "navigation"
+  }, otherProps), itemArray.map(function (item, index) {
+    var _item$selectedIcon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "navigation-item",
+      onClick: function onClick() {
+        return clickHandle(index);
+      },
+      style: {
+        color: activeNum === index ? selectedColor !== null && selectedColor !== void 0 ? selectedColor : '#4598FF' : ''
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: activeNum === index ? (_item$selectedIcon = item.selectedIcon) !== null && _item$selectedIcon !== void 0 ? _item$selectedIcon : item.icon : item.icon,
+      style: {
+        width: '24.5px',
+        height: '24.5px'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, item.text));
+  }));
+};
+export default Navigation;

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

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

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

@@ -1,5 +1,5 @@
-/**
- * 图文列表
+/**
+ * 图文列表
  */
 
 import TeletextList from "./teletext-list";

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

@@ -1,114 +1,16 @@
-@import '../../variables.scss';
-
-.teletext-list__panel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .teletext-list__panel__title {
-
-    & > span {
-      position: relative;
-      font-size: 17px;
-      font-weight: 500;
-      color: #000000;
-      z-index: 1;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        width: 100%;
-        height: 5px;
-        background: linear-gradient(-30deg, #95CDFE, #61A0FE);
-        border-radius: 5px;
-        opacity: 0.6;
-        z-index: 0;
-      }
-    }
-
-  }
-
-  .teletext-list__panel__item-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .teletext-list__panel__item {
-      display: flex;
-      gap: 5px;
-      padding-bottom: 10px;
-      justify-content: space-between;
-
-      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);
-            }
-
-          }
-
-        }
-
-      }
-
-    }
-  }
-
-}
-
-
+@import '../../variables.scss';
+
+.teletext-list__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .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,38 @@
+import React from 'react';
+import './teletext-list-item.scss';
+/**
+ * 数据
+ */
+interface TeletextListItemProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 图片地址
+     */
+    image?: string;
+    /**
+     * 图片位置
+     */
+    imagePlacement?: "left" | "right" | "none";
+    /**
+     * 说明
+     */
+    description?: string;
+    /**
+     * 标签列表
+     */
+    tags?: {
+        /**
+         * 标签名称
+         */
+        name: string;
+        /**
+         * 标签颜色
+         */
+        color: string;
+    }[];
+}
+declare const TeletextListItem: React.FC<TeletextListItemProps>;
+export default TeletextListItem;

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

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["title", "image", "imagePlacement", "description", "tags"];
+import React from 'react';
+import "./teletext-list-item.scss";
+
+/**
+ * 数据
+ */
+
+var TeletextListItem = function TeletextListItem(_ref) {
+  var title = _ref.title,
+    image = _ref.image,
+    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"
+  }, _otherProps), image && imagePlacement === 'left' ? /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item_image"
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "img",
+    src: image
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text__title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text__description"
+  }, description), tags ? /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text__tags"
+  }, tags === null || tags === void 0 ? void 0 : tags.map(function (tag, tagIndex) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: tagIndex,
+      className: tag.color
+    }, tag.name);
+  })) : null), image && imagePlacement === 'right' ? /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item_image"
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "img",
+    src: 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: space-between;
+
+  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);
+        }
+
+      }
+
+    }
+
+  }
+
+}