@ray-js/ray-ipc-half-horizontal-drag 0.0.1-beta-1

package/README.md

@@ -0,0 +1,32 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/ray-ipc-half-horizontal-drag
+
+[![latest](https://img.shields.io/npm/v/@ray-js/ray-ipc-half-horizontal-drag/latest.svg)](https://www.npmjs.com/package/@ray-js/ray-ipc-half-horizontal-drag) [![download](https://img.shields.io/npm/dt/@ray-js/ray-ipc-half-horizontal-drag.svg)](https://www.npmjs.com/package/@ray-js/ray-ipc-half-horizontal-drag)
+
+> 水平方向可拖动，显示出下一个组件的小部分内容
+
+## Installation
+
+```sh
+$ npm install @ray-js/ray-ipc-half-horizontal-drag
+# or
+$ yarn add @ray-js/ray-ipc-half-horizontal-drag
+```
+
+## Develop
+
+```sh
+# install deps
+yarn
+
+# watch compile demo
+yarn start:tuya
+```
+
+## Usage
+
+```tsx
+import Foo from '@ray-js/ray-ipc-half-horizontal-drag';
+export default () => <Foo />;
+```

package/lib/index.config.js

@@ -0,0 +1,14 @@
+export const tuya = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: 'Ray 跨端组件'
+};
+export const wechat = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: 'Ray 跨端组件'
+};
+export const native = {
+  backgroundColor: 'transparent',
+  isBleOfflineOverlay: false,
+  useSafeAreaView: true,
+  navigationBarTitleText: 'Ray 跨端组件'
+};

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,73 @@
+import "core-js/modules/esnext.iterator.map.js";
+import React from 'react';
+import { View, ScrollView, Image } from '@ray-js/ray';
+import styles from './index.module.less';
+const HalfHorizontalDrag = props => {
+  const {
+    className,
+    classNameBox,
+    style,
+    datas,
+    onBgClick,
+    onRightClick
+  } = props;
+  const onCurRightImage = (e, data) => {
+    onRightClick && onRightClick(data);
+  };
+  const onCurBgClick = (e, data) => {
+    onBgClick && onBgClick(data);
+  };
+  const datasRender = num => {
+    let classBox;
+    if (num === 1) {
+      classBox = styles.container_box_2;
+    } else {
+      classBox = styles.container_box_3;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, datas.map(data => {
+      return /*#__PURE__*/React.createElement(View, {
+        className: `${styles.container_box} ${classBox} ${classNameBox}`,
+        key: data.name
+      }, /*#__PURE__*/React.createElement(View, {
+        className: styles.container_box_content
+      }, /*#__PURE__*/React.createElement(Image, {
+        className: styles.container_box_content_bg,
+        mode: "widthFix",
+        src: data.bgImage
+      }), /*#__PURE__*/React.createElement(View, {
+        style: {
+          flex: 1,
+          overflow: 'hidden'
+        },
+        onClick: e => onCurBgClick(e, data)
+      }, /*#__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: "widthFix",
+        src: data.rightIcon,
+        onClick: e => onCurRightImage(e, data)
+      })));
+    }));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (() => {
+    if (datas.length === 2 || datas.length === 1) {
+      return /*#__PURE__*/React.createElement(View, {
+        className: `half_horizontal_drag ${styles.container} ${className}`,
+        style: style
+      }, datasRender(1));
+    }
+    if (datas.length > 2) {
+      return /*#__PURE__*/React.createElement(ScrollView, {
+        className: `half_horizontal_drag ${styles.container} ${className}`,
+        style: style,
+        scrollX: true
+      }, datasRender(2));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  })());
+};
+HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
+export default HalfHorizontalDrag;

package/lib/index.module.less

@@ -0,0 +1,86 @@
+@class-prefix: ~'half_horizontal_drag';
+
+.@{class-prefix} {
+  color: #000;
+  font-size: 48rpx;
+  font-weight: bold;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+  height: 200rpx;
+  margin: 48rpx 0;
+}
+
+.container_box_2 {
+  flex: 1;
+}
+
+.container_box_3 {
+  width: 314rpx;
+}
+
+.container_box {
+  height: 100%;
+  overflow: hidden;
+  display: inline-block;
+  margin-left: 16rpx;
+  border-radius: 32rpx;
+
+  &:last-child {
+    margin-right: 32rpx;
+  }
+
+  &_content {
+    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%;
+      z-index: -1;
+    }
+
+    &_name {
+      font-size: 28rpx;
+      color: #fff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &_subName {
+      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;
+    }
+  }
+}
+
+.right_icon_bg {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 40rpx;
+  background: #fff;
+  margin-right: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/props.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export interface IProps {
+    /**
+     * @description.zh 数据
+     * @description.en datas
+     */
+    datas: IPropDatas[];
+    /**
+     * @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;
+}
+export interface IPropDatas {
+    /**
+     * @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/lib/props.js

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

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@ray-js/ray-ipc-half-horizontal-drag",
+  "version": "0.0.1-beta-1",
+  "description": "水平方向可拖动，显示出下一个组件的小部分内容",
+  "main": "lib/index",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "types": "lib/index.d.ts",
+  "maintainers": [
+    "tuya_npm",
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "scripts": {
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "build": "ray build --type=component",
+    "watch": "ray start --type=component --output ./example/src/lib",
+    "build:tuya": "ray build -t tuya ./example",
+    "build:wechat": "ray build ./example --target=wechat",
+    "build:web": "ray build ./example --target=web",
+    "build:native": "ray build ./example --target=native",
+    "start:native": "ray start ./example -t native --verbose",
+    "start:tuya": "ray start -t tuya ./example",
+    "start:wechat": "ray start ./example -t wechat --verbose",
+    "start:web": "ray start ./example -t web",
+    "prepublishOnly": "yarn build",
+    "release-it": "standard-version"
+  },
+  "peerDependencies": {
+    "@ray-js/ray": "^1.4.9"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/cli": "^1.4.9",
+    "@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"
+  },
+  "resolutions": {
+    "@ray-js/builder-mp": "1.4.15"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}