@ray-js/ray-ipc-half-horizontal-drag 0.0.5-beta-2 → 0.0.6-beta-2

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IProps, IPropDatas } from './props';
+import { IProps, Data } from './props';
 declare const HalfHorizontalDrag: React.FC<IProps>;
-export { type IProps, type IPropDatas };
+export { type IProps, type Data };
 export default HalfHorizontalDrag;

package/lib/index.js

@@ -1,103 +1,128 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.map.js";
 import React from 'react';
+import { View } from '@ray-js/ray';
 import clsx from 'clsx';
-import { View, ScrollView, Image } from '@ray-js/ray';
 import styles from './index.module.less';
 const NILL = () => null;
 const HalfHorizontalDrag = props => {
   const {
     className,
-    classNameBox,
     style,
-    datas,
-    onBgClick,
-    onRightClick,
+    data,
     showCloseBtn,
     onCloseClick = NILL,
-    closeBtnTitle,
+    closeBtnTitle = 'Close',
     closeBtnIcon
   } = props;
-  const onCurRightImage = (e, data) => {
-    onRightClick && onRightClick(data);
-    e.stopPropagation();
-  };
-  const onCurBgClick = (e, data) => {
-    onBgClick && onBgClick(data);
-  };
-  const datasRender = num => {
-    const classBox = clsx({
-      [styles.container_box_1]: num === 1,
-      [styles.container_box_2]: num === 2,
-      [styles.container_box_3]: num > 2,
-      [styles.container_box_1_width]: num === 1 && showCloseBtn,
-      [styles.container_box_2_width]: num === 2 && showCloseBtn
-    });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, datas.map(data => {
-      return /*#__PURE__*/React.createElement(View, {
-        className: `${styles.container_box} ${classBox} ${classNameBox}`,
-        key: data.id
-      }, /*#__PURE__*/React.createElement(View, {
-        className: styles.container_box_content,
-        onClick: e => onCurBgClick(e, data)
-      }, /*#__PURE__*/React.createElement(Image, {
-        className: styles.container_box_content_bg,
-        mode: "aspectFill",
-        src: data.bgImage
-      }), /*#__PURE__*/React.createElement(View, {
-        style: {
-          flex: 1,
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          position: 'relative'
-        }
-      }, /*#__PURE__*/React.createElement(View, {
-        style: {
-          flex: 1,
-          overflow: 'hidden'
-        }
-      }, /*#__PURE__*/React.createElement(View, {
-        className: `${styles.container_box_content_name}`
-      }, data.name), /*#__PURE__*/React.createElement(View, {
-        className: `${styles.container_box_content_subName}`
-      }, data.subName)), /*#__PURE__*/React.createElement(Image, {
-        className: styles.container_box_content_icon,
-        mode: "aspectFill",
-        src: data.rightIcon,
-        onClick: e => onCurRightImage(e, data)
-      }))));
-    }));
-  };
   const renderCloseBtn = () => {
-    if (!showCloseBtn) {
-      return null;
-    }
+    if (!showCloseBtn) return null;
     return /*#__PURE__*/React.createElement(View, {
-      className: styles.close_btn,
+      className: styles.closeBtn,
       onClick: onCloseClick
     }, closeBtnIcon, closeBtnTitle);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (() => {
-    if (!datas || !datas.length) return null;
-    if (datas.length === 2 || datas.length === 1) {
-      const Container = showCloseBtn ? ScrollView : View;
-      return /*#__PURE__*/React.createElement(Container, {
-        hideScrollbar: true,
-        className: `half_horizontal_drag ${styles.container} ${className || ''}`,
-        style: style,
-        scrollX: showCloseBtn
-      }, datasRender(datas.length), renderCloseBtn());
-    }
-    if (datas.length > 2) {
-      return /*#__PURE__*/React.createElement(ScrollView, {
-        hideScrollbar: true,
-        className: `half_horizontal_drag ${styles.container} ${className || ''}`,
-        style: style,
-        scrollX: true
-      }, datasRender(datas.length), renderCloseBtn());
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  })());
+  if (!data || !data.length) return null;
+  if (data.length === 1) {
+    const item = data[0];
+    const {
+      tag,
+      tagStyle,
+      tagClassName,
+      title,
+      onClick = NILL
+    } = item || {};
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.content, className, {
+        [styles.moreContent]: showCloseBtn
+      }),
+      style: _objectSpread({}, style)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: _objectSpread(_objectSpread({}, item.style), {}, {
+        backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+        background: item.background || undefined
+      }),
+      className: clsx(styles.one_data_item, styles.item, item.className, {
+        [styles.one_data_item_width]: showCloseBtn
+      }),
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(View, {
+      className: styles.icon
+    }, item.icon), /*#__PURE__*/React.createElement(View, {
+      className: styles.title
+    }, title), !!tag && /*#__PURE__*/React.createElement(View, {
+      style: _objectSpread({}, tagStyle),
+      className: clsx(styles.tag, tagClassName)
+    }, tag)), renderCloseBtn());
+  }
+  if (data.length === 2) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.content, styles.towContent, className, {
+        [styles.moreContent]: showCloseBtn
+      }),
+      style: _objectSpread({}, style)
+    }, data.map((item, idx) => {
+      const {
+        title,
+        tag,
+        tagStyle,
+        tagClassName,
+        onClick = NILL
+      } = item;
+      return /*#__PURE__*/React.createElement(View, {
+        key: idx // eslint-disable-line
+        ,
+        style: _objectSpread(_objectSpread({}, item.style), {}, {
+          backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+          background: item.background || undefined
+        }),
+        onClick: onClick,
+        className: clsx(styles.two_data_item, styles.item, item.className, {
+          [styles.two_data_item_width]: showCloseBtn
+        })
+      }, /*#__PURE__*/React.createElement(View, {
+        className: styles.icon
+      }, item.icon), /*#__PURE__*/React.createElement(View, {
+        className: styles.title
+      }, title), !!tag && /*#__PURE__*/React.createElement(View, {
+        style: _objectSpread({}, tagStyle),
+        className: clsx(styles.tag, tagClassName)
+      }, tag));
+    }), renderCloseBtn());
+  }
+  if (data.length >= 3) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.content, styles.moreContent, className),
+      style: _objectSpread({}, style)
+    }, data.map((item, idx) => {
+      const {
+        title,
+        tag,
+        tagStyle,
+        tagClassName,
+        onClick = NILL
+      } = item;
+      return /*#__PURE__*/React.createElement(View
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        key: idx,
+        style: _objectSpread(_objectSpread({}, item.style), {}, {
+          backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+          background: item.background || undefined
+        }),
+        className: clsx(styles.item, styles.more_data_item, item.className),
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement(View, {
+        className: styles.icon
+      }, item.icon), /*#__PURE__*/React.createElement(View, {
+        className: styles.title
+      }, title), !!tag && /*#__PURE__*/React.createElement(View, {
+        style: _objectSpread({}, tagStyle),
+        className: clsx(styles.tag, tagClassName)
+      }, tag));
+    }), renderCloseBtn());
+  }
+  return null;
 };
 HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
 export {};

package/lib/index.module.less

@@ -1,119 +1,119 @@
-@class-prefix: ~'half_horizontal_drag';
-
-.@{class-prefix} {
-  color: #000;
-  font-size: 48rpx;
-  font-weight: bold;
-}
-
-.container {
-  display: flex;
-  flex-direction: row;
-  white-space: nowrap;
-  margin: 48rpx 0;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  
-  &::-webkit-scrollbar {
-    display: none;
+.content {
+  padding: 48rpx 0;
+  box-sizing: content-box;
+  &.towContent {
+    display: flex;
   }
-}
-
-.container_box_1 {
-  flex: 1;
-}
-
-.container_box_1_width {
-  flex: none;
-  width: 686rpx;
-}
-
-.container_box_2 {
-  flex: 1;
-}
-
-.container_box_2_width {
-  flex: none;
-  width: 335rpx;
-}
-
-.container_box_3 {
-  width: 314rpx;
-}
-
-.container_box {
-  height: 110rpx;
-  overflow: hidden;
-  display: inline-block;
-  margin-left: 16rpx;
-  border-radius: 32rpx;
-
-  &:last-child {
-    margin-right: 32rpx;
+  &.moreContent {
+    // padding: 48rpx 0;
+    padding-right: 32rpx;
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: visible;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  .one_data_item {
+    margin: 0 32rpx;
+  }
+  .one_data_item_width {
+    width: 686rpx;
+    min-width: 686rpx;
+    margin: 0 0 0 32rpx;
+  }
+  .two_data_item {
+    flex: 1;
+    margin-left: 32rpx;
+    &:last-child {
+      margin-right: 32rpx;
+    }
   }
-
-  &_content {
+  .two_data_item_width {
+    flex: none;
+    margin-left: 14rpx;
+    width: 336rpx;
+    min-width: 336rpx;
+    &:first-child {
+      margin-left: 32rpx;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .more_data_item {
+    width: 336rpx;
+    min-width: 336rpx;
+    margin-left: 12rpx;
+    &:first-child {
+      margin-left: 32rpx;
+    }
+    // &:last-child {
+    //   margin-right: 32rpx;
+    // }
+  }
+  .item {
+    position: relative;
+    border-radius: 32rpx;
+    height: 110rpx;
     display: flex;
-    flex-direction: row;
-    height: 100%;
-    padding: 18rpx 0 18rpx 24rpx;
-    justify-content: space-between;
     align-items: center;
-    position: relative;
-
-    &_bg {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
+    padding: 0 40rpx;
+    color: #000;
+    background: #fff;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    .icon {
+      width: 48rpx;
+      height: 48rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-
-    &_name {
+    .title {
+      flex: 1;
+      display: -webkit-box;             /* 必须结合以下两个属性使用 */
+      -webkit-box-orient: vertical;     /* 垂直箱子布局 */
+      margin-left: 24rpx;
+      -webkit-line-clamp: 2;            /* 显示的行数 */
+      overflow: hidden;                 /* 溢出隐藏 */
+      text-overflow: ellipsis;          /* 溢出显示省略号 */
       font-size: 28rpx;
-      color: #fff;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      line-height: 40rpx;
     }
-
-    &_subName {
+    .tag {
+      position: absolute;
+      right: -6rpx;
+      top: -20rpx;
+      color: #fff;
+      height: 40rpx;
+      line-height: 40rpx;
+      border-radius: 40rpx;
+      border-bottom-right-radius: 0px;
+      padding: 0 20rpx;
       font-size: 24rpx;
-      color: rgba(255, 255, 255, 0.7);
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &_icon {
-      margin: 0 8rpx;
-      width: 44rpx;
-      height: 44rpx;
-      margin-right: 10rpx;
+      background: linear-gradient(345deg, #B2B0B0 1%, #EBEBEB 100%);
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.4);
+      max-width: 128rpx;
+      white-space: nowrap;         /* 禁止换行 */
+      overflow: hidden;            /* 隐藏溢出内容 */
+      text-overflow: ellipsis;     /* 单行溢出显示省略号 */
     }
   }
 }
-
-.right_icon_bg {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 40rpx;
-  background: #fff;
-  margin-right: 10rpx;
+.closeBtn {
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.close_btn {
-  position: relative;
-  display: inline-block;
   margin-left: 14rpx;
-  margin-right: 32rpx;
+  background-color: red;
+  // margin-right: 32rpx;
   border-radius: 32rpx;
-  height: 110rpx;
-  line-height: 110rpx;
   background-color: rgba(240, 76, 76, 0.2);
-  vertical-align: top;
-  padding: 0 32rpx;
   color: #F04C4C;
+  padding: 0 32rpx;
   font-size: 28rpx;
+  font-weight: 500;
 }

package/lib/props.d.ts

@@ -1,43 +1,40 @@
-/// <reference types="react" />
+import React from 'react';
+export type Data = {
+    title: string;
+    backgroundImage?: string;
+    background?: string;
+    icon?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    tag?: string;
+    tagClassName?: string;
+    tagStyle?: React.CSSProperties;
+    onClick?: () => void;
+};
 export interface IProps {
     /**
      * @description.zh 数据
      * @description.en datas
      */
-    datas: IPropDatas[];
+    data: Data[];
     /**
      * @description.zh 类名
      * @description.en class name
      */
     className?: string;
-    /**
-     * @description.zh 盒子类名
-     * @description.en class name box
-     */
-    classNameBox?: string;
     /**
      * @description.zh 样式
      * @description.en Style
      */
     style?: React.CSSProperties;
     /**
-     * @description.zh 点击事件
-     * @description.en bg image
-     */
-    onBgClick?: (data: IPropDatas) => void;
-    /**
-     * @description.zh 点击事件
-     * @description.en bg image
-     */
-    onRightClick?: (data: IPropDatas) => void;
-    /**
-     * @description.zh 是否显示关闭按钮
+     * @description.zh 是否展示关闭按钮
      * @description.en Whether to display the close button
      */
     showCloseBtn?: boolean;
     /**
-     * @description.zh 点击关闭按钮触发的回调
-     * @description.en Callback triggered by clicking the close button
+     * @description.zh 点击关闭按钮的回调函数
+     * @description.en Callback function when the close button is clicked
      */
     onCloseClick?: (e: any) => void;
     /**
@@ -51,30 +48,3 @@ export interface IProps {
      */
     closeBtnIcon?: React.ReactElement;
 }
-export interface IPropDatas {
-    /**
-     * @description.zh 唯一标识
-     * @description.en id
-     */
-    id: string;
-    /**
-     * @description.zh 名称
-     * @description.en name
-     */
-    name?: string;
-    /**
-     * @description.zh 子名称
-     * @description.en sub name
-     */
-    subName?: string;
-    /**
-     * @description.zh 右侧图标
-     * @description.en right icon
-     */
-    rightIcon?: string;
-    /**
-     * @description.zh 背景图
-     * @description.en bg image
-     */
-    bgImage?: string;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ray-ipc-half-horizontal-drag",
-  "version": "0.0.5-beta-2",
+  "version": "0.0.6-beta-2",
   "description": "水平方向可拖动，显示出下一个组件的小部分内容",
   "main": "lib/index",
   "files": [
@@ -34,19 +34,20 @@
     "@ray-js/ray": "^1.4.9"
   },
   "dependencies": {
-    "clsx": "^1.2.1"
+    "clsx": "^1.2.1",
+    "uuid": "^11.0.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
+    "@ray-js/panel-sdk": "^1.13.0-storage.7",
     "@ray-js/ray": "^1.4.9",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",
     "lint-staged": "^10.2.11",
-    "standard-version": "9.3.2",
-    "@ray-js/panel-sdk": "^1.13.0-storage.7"
+    "standard-version": "9.3.2"
   },
   "resolutions": {
     "@ray-js/builder-mp": "1.4.15"