@ray-js/ray-ipc-half-horizontal-drag 0.0.6-beta-2 → 0.0.7-beta.0

package/lib/index.js

@@ -1,128 +1,15 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import "core-js/modules/esnext.iterator.map.js";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["renderMode"];
 import React from 'react';
-import { View } from '@ray-js/ray';
-import clsx from 'clsx';
-import styles from './index.module.less';
-const NILL = () => null;
-const HalfHorizontalDrag = props => {
-  const {
-    className,
-    style,
-    data,
-    showCloseBtn,
-    onCloseClick = NILL,
-    closeBtnTitle = 'Close',
-    closeBtnIcon
-  } = props;
-  const renderCloseBtn = () => {
-    if (!showCloseBtn) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      className: styles.closeBtn,
-      onClick: onCloseClick
-    }, closeBtnIcon, closeBtnTitle);
-  };
-  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;
+import WebViewHalfHorizontalDrag from './webview';
+import LynxHalfHorizontalDrag from './lynx';
+const HalfHorizontalDrag = _ref => {
+  let {
+      renderMode = 'webview'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (renderMode === 'lynx') return /*#__PURE__*/React.createElement(LynxHalfHorizontalDrag, props);
+  return /*#__PURE__*/React.createElement(WebViewHalfHorizontalDrag, props);
 };
 HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
 export {};

package/lib/lynx/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IProps } from '../props';
+declare const LynxHalfHorizontalDrag: React.FC<IProps>;
+export default LynxHalfHorizontalDrag;

package/lib/lynx/index.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["background"];
+import "core-js/modules/esnext.iterator.map.js";
+import React from 'react';
+import { ScrollView, Text, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import styles from './index.module.less';
+
+// Ray's newer host supports hideScrollbar; older supported Ray declarations omit it.
+// Keep this native-only prop local rather than changing installed dependency types.
+
+const LynxScrollView = ScrollView;
+const isText = value => typeof value === 'string' || typeof value === 'number';
+
+// Keep gradients on the explicit property: this build chain drops background shorthand gradients.
+const getBackgroundStyle = function () {
+  let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+      background
+    } = style,
+    rest = _objectWithoutProperties(style, _excluded);
+  if (typeof background === 'string' && background.includes('gradient(')) {
+    return _objectSpread(_objectSpread({}, rest), {}, {
+      backgroundImage: background.trim().replace(/;$/, '')
+    });
+  }
+  return style;
+};
+const LynxHalfHorizontalDrag = _ref => {
+  let {
+    data,
+    className,
+    style,
+    showCloseBtn = false,
+    closeBtnTitle = 'Close',
+    closeBtnIcon,
+    onCloseClick,
+    onScroll
+  } = _ref;
+  if (!data || data.length === 0) return null;
+  const scrollable = data.length >= 3 || showCloseBtn;
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(styles.root, className),
+    style: style
+  }, /*#__PURE__*/React.createElement(LynxScrollView, {
+    className: styles.viewport,
+    scrollX: scrollable,
+    scrollY: false,
+    hideScrollbar: true,
+    onScroll: onScroll
+  }, /*#__PURE__*/React.createElement(View, {
+    className: clsx(styles.track, !scrollable && styles.staticTrack)
+  }, data.map((item, index) => /*#__PURE__*/React.createElement(View, {
+    key: index // eslint-disable-line react/no-array-index-key
+    ,
+    className: clsx(styles.item, scrollable ? styles.scrollingItem : styles.staticItem, data.length === 1 && scrollable && styles.singleScrollingItem, index === 0 && styles.firstItem, index === data.length - 1 && !showCloseBtn && styles.lastItem, item.className),
+    style: getBackgroundStyle(_objectSpread(_objectSpread({}, item.style), {}, {
+      backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+      background: item.background || undefined
+    })),
+    onClick: item.onClick
+  }, /*#__PURE__*/React.createElement(View, {
+    className: styles.icon
+  }, item.icon), /*#__PURE__*/React.createElement(View, {
+    className: styles.title
+  }, isText(item.title) ? /*#__PURE__*/React.createElement(Text, {
+    className: styles.titleText,
+    "text-maxline": 2
+  }, item.title) : item.title), !!item.tag && /*#__PURE__*/React.createElement(View, {
+    className: clsx(styles.tag, item.tagClassName),
+    style: getBackgroundStyle(item.tagStyle)
+  }, isText(item.tag) ? /*#__PURE__*/React.createElement(Text, {
+    className: styles.tagText,
+    "text-maxline": 1
+  }, item.tag) : item.tag))), showCloseBtn && /*#__PURE__*/React.createElement(View, {
+    className: styles.closeBtn,
+    onClick: onCloseClick
+  }, closeBtnIcon, isText(closeBtnTitle) ? /*#__PURE__*/React.createElement(Text, {
+    className: styles.closeText
+  }, closeBtnTitle) : closeBtnTitle))));
+};
+export default LynxHalfHorizontalDrag;

package/lib/lynx/index.module.less

@@ -0,0 +1,197 @@
+// Only used by the explicit Lynx renderer. Legacy CSS is kept byte-for-byte.
+.root {
+  --half-drag-height: 110rpx;
+  --half-drag-tag-inset: 20rpx;
+  --half-drag-item-width: 336rpx;
+  --half-drag-single-width: 686rpx;
+  --half-drag-side: 32rpx;
+  --half-drag-gap: 12rpx;
+  --half-drag-close-gap: 14rpx;
+  --half-drag-radius: 32rpx;
+  --half-drag-icon-size: 48rpx;
+  --half-drag-title-gap: 24rpx;
+  --half-drag-font-size: 28rpx;
+  --half-drag-line-height: 40rpx;
+  width: 100%;
+  min-width: 0;
+  height: var(--half-drag-height);
+  box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  padding-top: 48rpx;
+}
+.viewport {
+  width: 100%;
+  height: calc(var(--half-drag-height) + var(--half-drag-tag-inset));
+  margin-top: calc(0px - var(--half-drag-tag-inset));
+  flex-shrink: 0;
+}
+.track {
+  overflow: visible;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  height: calc(var(--half-drag-height) + var(--half-drag-tag-inset));
+  padding-top: var(--half-drag-tag-inset);
+  box-sizing: border-box;
+}
+.staticTrack {
+  width: 100%;
+}
+.item {
+  overflow: visible;
+  position: relative;
+  flex-shrink: 0;
+  height: var(--half-drag-height);
+  border-radius: var(--half-drag-radius);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 40rpx;
+  box-sizing: border-box;
+  color: #000;
+  background-color: #fff;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.scrollingItem {
+  width: var(--half-drag-item-width);
+  margin-left: var(--half-drag-gap);
+}
+.singleScrollingItem {
+  width: var(--half-drag-single-width);
+}
+.staticItem {
+  flex: 1;
+  min-width: 0;
+  margin-left: var(--half-drag-side);
+}
+.firstItem {
+  margin-left: var(--half-drag-side);
+}
+.lastItem {
+  margin-right: var(--half-drag-side);
+}
+.icon {
+  width: var(--half-drag-icon-size);
+  height: var(--half-drag-icon-size);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  margin-left: var(--half-drag-title-gap);
+  overflow: hidden;
+  font-size: var(--half-drag-font-size);
+  line-height: var(--half-drag-line-height);
+}
+.titleText {
+  width: 100%;
+  max-height: calc(var(--half-drag-line-height) + var(--half-drag-line-height));
+  font-size: var(--half-drag-font-size);
+  line-height: var(--half-drag-line-height);
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tag {
+  position: absolute;
+  right: -6rpx;
+  top: calc(0px - var(--half-drag-tag-inset));
+  height: 40rpx;
+  line-height: 40rpx;
+  border-radius: 40rpx;
+  border-bottom-right-radius: 0;
+  padding: 0 20rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  background-color: #ebebeb;
+  background-image: linear-gradient(345deg, #b2b0b0 1%, #ebebeb 100%);
+  color: rgba(0, 0, 0, 0.4);
+  max-width: 128rpx;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tagText {
+  max-width: 128rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.closeText {
+  font-size: var(--half-drag-font-size);
+  white-space: nowrap;
+}
+.closeBtn {
+  height: var(--half-drag-height);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--half-drag-close-gap);
+  margin-right: var(--half-drag-side);
+  border-radius: var(--half-drag-radius);
+  color: #f04c4c;
+  background-color: rgba(240, 76, 76, 0.2);
+  padding: 0 32rpx;
+  font-size: var(--half-drag-font-size);
+  font-weight: 500;
+}
+@media (min-width: 600px) {
+  .root {
+    --half-drag-height: 55px;
+    --half-drag-tag-inset: 10px;
+    --half-drag-item-width: 168px;
+    --half-drag-single-width: 343px;
+    --half-drag-side: 16px;
+    --half-drag-gap: 6px;
+    --half-drag-close-gap: 7px;
+    --half-drag-radius: 16px;
+    --half-drag-icon-size: 24px;
+    --half-drag-title-gap: 12px;
+    --half-drag-font-size: 16px;
+    --half-drag-line-height: 20px;
+    padding-top: 24px;
+  }
+  .item {
+    padding: 0 20px;
+  }
+  .tag {
+    right: -3px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 10px;
+    font-size: 14px;
+    max-width: 64px;
+  }
+  .tagText {
+    max-width: 64px;
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+  }
+  .closeBtn {
+    padding: 0 16px;
+  }
+}
+@media (min-width: 920px) {
+  .root {
+    --half-drag-font-size: 18px;
+  }
+  .tag {
+    font-size: 16px;
+  }
+  .tagText {
+    font-size: 16px;
+  }
+}

package/lib/props.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { ScrollView } from '@ray-js/ray';
 export type Data = {
-    title: string;
+    title: React.ReactNode;
     backgroundImage?: string;
     background?: string;
     icon?: React.ReactNode;
@@ -12,6 +13,10 @@ export type Data = {
     onClick?: () => void;
 };
 export interface IProps {
+    /** Explicit page renderer; defaults to the unchanged WebView implementation. */
+    renderMode?: 'webview' | 'lynx';
+    /** Lynx horizontal ScrollView event, used for integration diagnostics. */
+    onScroll?: React.ComponentProps<typeof ScrollView>['onScroll'];
     /**
      * @description.zh 数据
      * @description.en datas

package/lib/webview.d.ts

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

package/lib/webview.js

@@ -0,0 +1,129 @@
+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 styles from './index.module.less';
+const NILL = () => null;
+const HalfHorizontalDrag = props => {
+  const {
+    className,
+    style,
+    data,
+    showCloseBtn,
+    onCloseClick = NILL,
+    closeBtnTitle = 'Close',
+    closeBtnIcon
+  } = props;
+  const renderCloseBtn = () => {
+    if (!showCloseBtn) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      className: styles.closeBtn,
+      onClick: onCloseClick
+    }, closeBtnIcon, closeBtnTitle);
+  };
+  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 {};
+export default HalfHorizontalDrag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ray-ipc-half-horizontal-drag",
-  "version": "0.0.6-beta-2",
+  "version": "0.0.7-beta.0",
   "description": "水平方向可拖动，显示出下一个组件的小部分内容",
   "main": "lib/index",
   "files": [
@@ -28,7 +28,9 @@
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
-    "release-it": "standard-version"
+    "release-it": "standard-version",
+    "test": "node --test tests/render-mode.test.cjs",
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "@ray-js/ray": "^1.4.9"
@@ -41,7 +43,7 @@
     "@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/panel-sdk": "^1.16.1",
     "@ray-js/ray": "^1.4.9",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",