@dckj-npm/dc-material 0.1.10 → 0.1.11

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-panel"
+  }, otherProps), itemArray.map(function (item, index) {
+    var _item$selectedIcon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "navigation-panel-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,19 @@
+.navigation-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 0px 6px 0px;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  background-color: #fff;
+  box-sizing: border-box;
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+  }
+}

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

@@ -0,0 +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;

package/es/components/colorful-button/colorful-button.js

@@ -0,0 +1,25 @@
+import _Button from "@alifd/next/es/button";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["type", "color", "style"];
+import * as React from 'react';
+import "./index.scss";
+var ColorfulButton = function ColorfulButton(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'primary' : _ref$type,
+    color = _ref.color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_Button, _extends({
+    type: type
+  }, _otherProps), "fusion button");
+};
+ColorfulButton.displayName = 'ColorfulButton';
+export default ColorfulButton;

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

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

package/es/components/colorful-button/index.js

@@ -0,0 +1,2 @@
+import ColorfulButton from "./colorful-button";
+export default ColorfulButton;

package/es/components/colorful-button/index.scss

@@ -0,0 +1,5 @@
+@import '../../variables.scss';
+
+#{$biz-css-prefix}-colorful-button {
+  border: 2px dashed blue;
+}

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

@@ -0,0 +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;

package/es/components/colorful-input/colorful-input.js

@@ -0,0 +1,19 @@
+import _Input from "@alifd/next/es/input";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["color", "style"];
+import * as React from 'react';
+import "./index.scss";
+var ColorfulInput = function ColorfulInput(_ref) {
+  var color = _ref.color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_Input, _otherProps);
+};
+export default ColorfulInput;

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

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

package/es/components/colorful-input/index.js

@@ -0,0 +1,2 @@
+import ColorfulInput from "./colorful-input";
+export default ColorfulInput;

package/es/components/colorful-input/index.scss

@@ -0,0 +1,5 @@
+@import '../../variables.scss';
+
+#{$biz-css-prefix}-colorful-button {
+  border: 2px dashed blue;
+}

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/grid-nav/grid-nav.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface GridNavProps {
+    dataSourceSetting: [];
+    columns: number;
+    iconSize: string;
+    fontWeight: string;
+    fontSize: number;
+    fontColor: string;
+    lineHeight: string;
+    lineNum: number;
+}
+declare const GridNav: React.ForwardRefExoticComponent<GridNavProps & React.RefAttributes<any>>;
+export default GridNav;

package/es/components/grid-nav/grid-nav.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { forwardRef } from 'react';
+var ExampleComponent = function ExampleComponent(props, ref) {
+  var columns = props.columns,
+    _props$iconSize = props.iconSize,
+    iconSize = _props$iconSize === void 0 ? 'medium' : _props$iconSize,
+    _props$fontWeight = props.fontWeight,
+    fontWeight = _props$fontWeight === void 0 ? 'normal' : _props$fontWeight,
+    _props$fontSize = props.fontSize,
+    fontSize = _props$fontSize === void 0 ? 14 : _props$fontSize,
+    _props$fontColor = props.fontColor,
+    fontColor = _props$fontColor === void 0 ? '#333' : _props$fontColor,
+    _props$lineHeight = props.lineHeight,
+    lineHeight = _props$lineHeight === void 0 ? 'auto' : _props$lineHeight,
+    _props$lineNum = props.lineNum,
+    lineNum = _props$lineNum === void 0 ? 1 : _props$lineNum,
+    dataSourceSetting = props.dataSourceSetting;
+  console.log('dataSourceSetting的值为', dataSourceSetting);
+
+  // 设置图标尺寸
+  var iconStyle = {};
+  switch (iconSize) {
+    case 'large':
+      iconStyle = {
+        width: '64px',
+        height: '64px'
+      };
+      break;
+    case 'medium':
+      iconStyle = {
+        width: '48px',
+        height: '48px'
+      };
+      break;
+    case 'small':
+      iconStyle = {
+        width: '32px',
+        height: '32px'
+      };
+      break;
+    default:
+      iconStyle = {
+        width: '48px',
+        height: '48px'
+      };
+  }
+
+  // 设置字重
+  var fontStyle = {
+    fontWeight: fontWeight,
+    fontSize: fontSize,
+    color: fontColor,
+    lineHeight: lineHeight
+  };
+
+  // 设置行数
+  var fontLineStyle = {};
+  fontLineStyle = {
+    maxWidth: '80px',
+    overflow: 'hidden',
+    // whiteSpace: lineNum === 1 ? 'nowrap' : 'none',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitLineClamp: lineNum,
+    WebkitBoxOrient: 'vertical'
+  };
+  var fontAllStyle = _extends({}, fontStyle, fontLineStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "grid-navigation",
+    style: {
+      gridTemplateColumns: "repeat(" + columns + ", 1fr)"
+    }
+  }, dataSourceSetting.map(function (item, index) {
+    return item ? /*#__PURE__*/React.createElement("a", {
+      key: index,
+      href: item.link || '#',
+      className: "grid-item"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item.icon || 'https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png',
+      alt: item.title || '导航',
+      style: iconStyle
+    }), /*#__PURE__*/React.createElement("span", {
+      style: fontAllStyle
+    }, item.title || '无标题')) : null;
+  }));
+};
+var GridNav = /*#__PURE__*/forwardRef(ExampleComponent);
+GridNav.displayName = 'GridNav';
+export default GridNav;

package/es/components/grid-nav/index.d.ts

@@ -0,0 +1,3 @@
+import GridNav from "./grid-nav";
+export type { GridNavProps } from './grid-nav';
+export default GridNav;

package/es/components/grid-nav/index.js

@@ -0,0 +1,2 @@
+import GridNav from "./grid-nav";
+export default GridNav;

package/es/components/grid-nav/index.scss

@@ -0,0 +1,36 @@
+/* write style here */
+.grid-navigation {
+    padding: 10px;
+    width: 100%;
+    display: grid;
+    gap: 16px; /* 宫格之间的间距 */
+    // grid-template-columns: repeat(60px, minmax(1fr));
+  }
+  
+  .grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    text-decoration: none;
+    color: #333;
+    position: relative;
+    img {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 4px;
+    }
+  
+    span {
+      font-size: 14px;
+      // overflow: hidden;
+      // text-overflow: ellipsis;
+      // white-space: nowrap;
+      // max-width: 60px;
+    }
+  
+    &:hover {
+      color: #007bff;
+    }
+  }
+  

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

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import MenuList from './menu-list';
+export type { MenuListDataProps, MenuListProps } from './types';
+export default MenuList;

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

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+
+import MenuList from "./menu-list";
+export default MenuList;

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

@@ -0,0 +1,16 @@
+@import '../../variables.scss';
+
+.menu-list__panel {
+  border-radius: 10px;
+  background-color: white;
+
+  .menu-list__panel__item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 1px 22px;
+  }
+
+}
+
+

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MenuListDataProps } from "./types";
+import "./menu-list-item.scss";
+declare const MenuListItem: React.FC<MenuListDataProps>;
+export default MenuListItem;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import "./menu-list-item.scss";
+var MenuListItem = function MenuListItem(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '菜单名称' : _ref$title,
+    _ref$iconUrl = _ref.iconUrl,
+    iconUrl = _ref$iconUrl === void 0 ? '' : _ref$iconUrl,
+    handleClick = _ref.handleClick;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item",
+    onClick: handleClick
+  }, iconUrl ? /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item_icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    src: iconUrl
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item_title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item_right"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"
+  }))));
+};
+MenuListItem.displayName = 'MenuListItem';
+export default MenuListItem;

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

@@ -0,0 +1,49 @@
+@import '../../variables.scss';
+
+.menu-list__panel__item {
+  display: flex;
+  gap: 7px;
+  justify-content: space-between;
+  align-items: center;
+  height: 45px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .menu-list__panel__item_icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & > img {
+      height: 15px;
+    }
+  }
+
+  .menu-list__panel__item_title {
+    font-size: 15px;
+    color: #666666;
+    font-weight: 500;
+    margin-right: auto;
+  }
+
+  .menu-list__panel__item_right {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & > svg {
+      height: 16px;
+      font-size: 12px;
+      color: #666666;
+      font-weight: 500;
+    }
+
+
+  }
+
+
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import { MenuListProps } from "./types";
+declare const MenuList: React.FC<MenuListProps>;
+export default MenuList;

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList"];
+import React from 'react';
+import "./index.scss";
+import MenuListItem from "./menu-list-item";
+var MenuList = function MenuList(_ref) {
+  var dataList = _ref.dataList,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "menu-list__panel"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "menu-list__panel__item-list"
+  }, dataList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(MenuListItem, {
+      key: index,
+      title: item.title,
+      iconUrl: item.iconUrl,
+      handleClick: item.handleClick
+    });
+  })));
+};
+MenuList.displayName = 'MenuList';
+export default MenuList;

package/es/components/menu-list/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 数据
+ */
+export interface MenuListDataProps {
+    /**
+     * 菜单名称
+     */
+    title: string;
+    /**
+     * 菜单图标地址
+     */
+    iconUrl?: string;
+    /**
+     * 点击事件
+     */
+    handleClick?: Function;
+}
+export interface MenuListProps {
+    /**
+     * 数据
+     */
+    dataList?: MenuListDataProps[];
+}

package/es/components/menu-list/types.js

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

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,21 @@
+.location {
+  display: flex;
+  cursor: pointer;
+  &-address {
+    margin-right: 7px;
+  }
+}
+.location-list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #fff;
+  padding: 10px 15px;
+  z-index: 999;
+  &-item {
+    padding: 10px 0;
+    border-bottom: solid 1px #eee;
+  }
+}

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;