@dckj-npm/dc-material 0.1.0 → 0.1.1

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,37 @@
+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", {
+    className: "navigation"
+  }, itemArray.map(function (item, index) {
+    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: 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/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", null, /*#__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/title/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 标题
+ */
+import Title1 from './title-1';
+import Title2 from './title-2';
+export type { Title1Props } from './title-1';
+export type { Title2Props } from './title-2';
+export { Title1, Title2 };

package/es/components/title/index.js

@@ -0,0 +1,7 @@
+/**
+ * 标题
+ */
+
+import Title1 from "./title-1";
+import Title2 from "./title-2";
+export { Title1, Title2 };

package/es/components/title/title-1.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './title-1.scss';
+export interface Title1Props {
+    /**
+     * 标题
+     */
+    title?: string;
+}
+declare const Title1: React.FC<Title1Props>;
+export default Title1;

package/es/components/title/title-1.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["title"];
+import React from 'react';
+import "./title-1.scss";
+var Title1 = function Title1(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '标题标题' : _ref$title,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "custom-title-1"
+  }, _otherProps), /*#__PURE__*/React.createElement("span", null, title));
+};
+Title1.displayName = 'Title1';
+export default Title1;

package/es/components/title/title-1.scss

@@ -0,0 +1,26 @@
+@import '../../variables.scss';
+
+.custom-title-1 {
+
+  & > 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;
+    }
+  }
+
+}

package/es/components/title/title-2.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './title-2.scss';
+export interface Title2Props {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 颜色
+     */
+    color?: string;
+    /**
+     * tip颜色
+     */
+    tipColor?: string;
+}
+declare const Title2: React.FC<Title2Props>;
+export default Title2;

package/es/components/title/title-2.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["title", "color", "tipColor"];
+import React from 'react';
+import "./title-2.scss";
+var Title2 = function Title2(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '标题标题' : _ref$title,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#144477' : _ref$color,
+    _ref$tipColor = _ref.tipColor,
+    tipColor = _ref$tipColor === void 0 ? '#388AF7' : _ref$tipColor,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var colorStyle = color ? {
+    color: color
+  } : {};
+  var tipColorStyle = tipColor ? {
+    'background-color': tipColor
+  } : {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "custom-title-2"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "tips",
+    style: tipColorStyle
+  }), /*#__PURE__*/React.createElement("span", {
+    style: colorStyle
+  }, title)));
+};
+Title2.displayName = 'Title2';
+export default Title2;

package/es/components/title/title-2.scss

@@ -0,0 +1,22 @@
+@import '../../variables.scss';
+
+.custom-title-2 {
+
+  & > div {
+    font-size: 16px;
+    font-weight: 500;
+    color: #144477;
+    display: flex;
+    gap: 3.5px;
+    align-items: center;
+
+    & > div.tips {
+      content: '';
+      display: inline-block;
+      width: 3.5px;
+      height: 14.5px;
+      background-color: #388AF7;
+    }
+  }
+
+}

package/es/index.d.ts

@@ -1,8 +1,12 @@
-export type { ColorfulButtonProps } from './components/colorful-button';
-export { default as ColorfulButton } from './components/colorful-button';
-export type { ColorfulInputProps } from './components/colorful-input';
-export { default as ColorfulInput } from './components/colorful-input';
+export type { ComponentProps } from './components/dc-slider';
+export { default as DCSlider } from './components/dc-slider';
+export type { NavigationProps } from './components/bottom-navigation';
+export { default as Navigation } from './components/bottom-navigation';
 export type { TeletextListProps } from './components/teletext-list';
 export { default as TeletextList } from './components/teletext-list';
+export type { Title1Props } from './components/title';
+export { Title1 } from './components/title';
+export type { Title2Props } from './components/title';
+export { Title2 } from './components/title';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -1,5 +1,7 @@
-export { default as ColorfulButton } from "./components/colorful-button";
-export { default as ColorfulInput } from "./components/colorful-input";
+export { default as DCSlider } from "./components/dc-slider";
+export { default as Navigation } from "./components/bottom-navigation";
 export { default as TeletextList } from "./components/teletext-list";
+export { Title1 } from "./components/title";
+export { Title2 } from "./components/title";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

package/es/style.js

@@ -1,3 +1,3 @@
-import '@alifd/next/es/button/style';
-import '@alifd/next/es/input/style';
+import '@alifd/next/es/slider/style';
+import '@alilc/lowcode-materials/lib/style.js';
 import './index.scss';

package/lib/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/lib/components/bottom-navigation/bottom-navigation.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _lowcodeMaterials = require("@alilc/lowcode-materials");
+require("./index.scss");
+var _excluded = ["itemArray", "selectedColor"];
+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,
+    selectedColor = _ref.selectedColor,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_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", {
+    className: "navigation"
+  }, itemArray.map(function (item, index) {
+    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(_lowcodeMaterials.Image, {
+      src: item.icon,
+      style: {
+        width: '24.5px',
+        height: '24.5px'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, item.text));
+  }));
+};
+var _default = exports["default"] = Navigation;

package/lib/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/lib/components/bottom-navigation/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _bottomNavigation = _interopRequireDefault(require("./bottom-navigation"));
+var _default = exports["default"] = _bottomNavigation["default"];

package/lib/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/lib/components/dc-slider/index.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _slider = _interopRequireDefault(require("./slider"));
+var _default = exports["default"] = _slider["default"];

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

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

package/lib/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/lib/components/dc-slider/slider.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _slider = _interopRequireDefault(require("@alifd/next/lib/slider"));
+var React = _interopRequireWildcard(require("react"));
+var _lowcodeMaterials = require("@alilc/lowcode-materials");
+require("./index.scss");
+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 DCSlider = function DCSlider(props) {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_slider["default"], props, props.picUrls && props.picUrls.length > 0 ? props.picUrls.map(function (url, index) {
+    return /*#__PURE__*/React.createElement(_lowcodeMaterials.Image, {
+      src: url,
+      alt: "Slide",
+      key: index
+    });
+  }) : /*#__PURE__*/React.createElement("div", null, "\u56FE\u7247\u4E3A\u7A7A")));
+};
+var _default = exports["default"] = DCSlider;

package/lib/components/title/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 标题
+ */
+import Title1 from './title-1';
+import Title2 from './title-2';
+export type { Title1Props } from './title-1';
+export type { Title2Props } from './title-2';
+export { Title1, Title2 };

package/lib/components/title/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _title = _interopRequireDefault(require("./title-1"));
+exports.Title1 = _title["default"];
+var _title2 = _interopRequireDefault(require("./title-2"));
+exports.Title2 = _title2["default"];

package/lib/components/title/title-1.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './title-1.scss';
+export interface Title1Props {
+    /**
+     * 标题
+     */
+    title?: string;
+}
+declare const Title1: React.FC<Title1Props>;
+export default Title1;

package/lib/components/title/title-1.js

@@ -0,0 +1,21 @@
+"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("./title-1.scss");
+var _excluded = ["title"];
+var Title1 = function Title1(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '标题标题' : _ref$title,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "custom-title-1"
+  }, _otherProps), /*#__PURE__*/_react["default"].createElement("span", null, title));
+};
+Title1.displayName = 'Title1';
+var _default = exports["default"] = Title1;

package/lib/components/title/title-1.scss

@@ -0,0 +1,26 @@
+@import '../../variables.scss';
+
+.custom-title-1 {
+
+  & > 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;
+    }
+  }
+
+}

package/lib/components/title/title-2.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import './title-2.scss';
+export interface Title2Props {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 颜色
+     */
+    color?: string;
+    /**
+     * tip颜色
+     */
+    tipColor?: string;
+}
+declare const Title2: React.FC<Title2Props>;
+export default Title2;

package/lib/components/title/title-2.js

@@ -0,0 +1,36 @@
+"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("./title-2.scss");
+var _excluded = ["title", "color", "tipColor"];
+var Title2 = function Title2(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '标题标题' : _ref$title,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#144477' : _ref$color,
+    _ref$tipColor = _ref.tipColor,
+    tipColor = _ref$tipColor === void 0 ? '#388AF7' : _ref$tipColor,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var colorStyle = color ? {
+    color: color
+  } : {};
+  var tipColorStyle = tipColor ? {
+    'background-color': tipColor
+  } : {};
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "custom-title-2"
+  }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tips",
+    style: tipColorStyle
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    style: colorStyle
+  }, title)));
+};
+Title2.displayName = 'Title2';
+var _default = exports["default"] = Title2;