@ray-js/lamp-style-slider 0.0.2-beta-1

package/lib/components/slider/index.tyml

@@ -0,0 +1,90 @@
+<sjs src="./index.sjs" module="computed"></sjs>
+
+<view 
+  id="{{instanceId}}"
+  class="rayui-slider {{direction === 'vertical' ? 'vertical': 'horizontal'}} {{reverse ? 'reverse': 'no-reverse'}} {{disable ? 'disabled': ''}} {{className}}"
+  disable="{{disable}}"
+  
+  change:start="{{computed.startPropObserver(instanceId)}}"
+  change:end="{{computed.endPropObserver(instanceId)}}"
+  change:watchstart="{{computed.watchstartPropObserver(instanceId)}}"
+  change:watchend="{{computed.watchenddPropObserver(instanceId)}}"
+  change:hue="{{hue}}"
+  start="{{start}}"
+  end="{{end}}"
+  watchstart="{{watchStart}}"
+  watchend="{{watchEnd}}"
+  
+  data-hue="{{hue}}"
+  data-min="{{min}}"
+  data-max="{{max}}"
+  data-closed="{{closed}}"
+
+  data-step="{{step}}"
+
+  bind:touchstart="{{computed.handleTrackMouseDown(instanceId)}}"
+  bind:touchmove="{{computed.onMouseMove(instanceId)}}"
+  bind:touchend="{{computed.onTrackMouseUp(instanceId)}}"
+
+  data-startmin="{{startMin}}"
+  data-startmax="{{startMax}}"
+  
+  data-endmin="{{endMin}}"
+  data-endmax="{{endMax}}"
+
+  data-mode="{{mode}}"
+  data-barpad="{{barPad}}"
+  data-hidethumb="{{hideThumb}}"
+  data-showsteps="{{showSteps}}"
+  data-direction="{{direction}}"
+  data-reverse="{{reverse}}"
+  data-enabletouch="{{enableTouch}}"
+  data-enabletouchbar="{{enableTouchBar}}"
+  data-maxrangeoffset="{{maxRangeOffset}}"
+  data-texttemplate="{{textTemplate}}"
+  data-showtext="{{showText}}"
+  data-thumbstylecalc="{{thumbStyleCalc}}"
+
+  style="{{trackStyle}}"
+>
+  <view ty:if="{{disable}}" class="rayui-slider-mask"></view>
+  <view ty:if="{{showSteps}}" class="rayui-slider-steps">
+    <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{stepStyle}}" ty:for-item="step">
+    </view>
+  </view>
+  <view class="rayui-slider-bar"
+    style="{{barStyle}}"
+  >
+    <view ty:if="{{showText}}" class="rayui-slider-bar-text" style="{{textStyle}}">
+      {{text}}
+    </view>
+    <view class="rayui-slider-bar-steps_wrap">
+      <view ty:if="{{showSteps}}" class="rayui-slider-steps">
+        <view class="rayui-slider-steps-dot" ty:for="{{steps}}" style="{{activeStepStyle}}" ty:for-item="step">
+        </view>
+      </view>  
+    </view>
+  </view>
+  <view
+    class="rayui-slider-thumb rayui-slider-thumb-start"
+    data-name="start"
+    bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
+    bind:touchend="{{computed.onMouseUp(instanceId)}}"
+  >
+    <view 
+      data-name="start"
+      class="rayui-slider-thumb-render rayui-slider-thumb-start-render" style="{{thumbStartStyle}}"
+    ></view>
+  </view>
+  <view
+    class="rayui-slider-thumb rayui-slider-thumb-end"
+    data-name="end"
+    bind:touchstart="{{computed.handleMouseDown(instanceId)}}"
+    bind:touchend="{{computed.onMouseUp(instanceId)}}"
+  >
+    <view 
+      data-name="end"
+      class="rayui-slider-thumb-render rayui-slider-thumb-end-render" style="{{thumbEndStyle}}"
+    ></view>
+  </view>
+</view>

package/lib/index.config.js

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

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IProps } from './props';
+declare function OpacitySlider(props: IProps): JSX.Element;
+declare namespace OpacitySlider {
+    var defaultProps: IProps;
+}
+export default OpacitySlider;

package/lib/index.js

@@ -0,0 +1,144 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.slice.js";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useRef, useState, useEffect } from 'react';
+import { View, Text } from '@ray-js/ray';
+import { useDebounceFn, useThrottleFn } from 'ahooks';
+import { formatPercent } from './utils';
+import styles from './index.module.less';
+import Slider from './components/slider';
+import { defaultProps } from './props';
+function OpacitySlider(props) {
+  var preValue = useRef(-1);
+  var lastValue = useRef(null);
+  var timer = useRef(null);
+  var isMove = useRef(false);
+  var label = props.label,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 1000 : _props$max,
+    value = props.value,
+    style = props.style,
+    _props$trackStyle = props.trackStyle,
+    trackStyle = _props$trackStyle === void 0 ? {} : _props$trackStyle,
+    _props$thumbStyle = props.thumbStyle,
+    thumbStyle = _props$thumbStyle === void 0 ? {} : _props$thumbStyle,
+    textValue = props.textValue,
+    _props$disable = props.disable,
+    disable = _props$disable === void 0 ? false : _props$disable,
+    valueStyle = props.valueStyle,
+    trackBackgroundColor = props.trackBackgroundColor,
+    onTouchStart = props.onTouchStart,
+    onTouchMove = props.onTouchMove,
+    onTouchEnd = props.onTouchEnd;
+  var startRefValue = useRef(-1);
+  var handTouchMove = useThrottleFn(function (_ref2) {
+    var detail = _ref2.detail;
+    if (!onTouchMove || disable) {
+      return;
+    }
+    isMove.current = true;
+    lastValue.current = detail.end + min;
+    if (detail.end + min === preValue.current) {
+      return;
+    }
+    if (timer.current) {
+      return;
+    }
+    onTouchMove && onTouchMove(detail.end + min);
+    setControllerValue(detail.end + min);
+    preValue.current = detail.end + min;
+    clearTimeout(timer.current);
+    timer.current = null;
+    if (lastValue.current !== preValue.current) {
+      onTouchMove && onTouchMove(lastValue.current + min);
+    }
+  }, {
+    wait: 80
+  }).run;
+  var endRefValue = useRef(-1);
+  var instanceId = useRef("Color_".concat(String(+new Date()).slice(-4), "_").concat(String(Math.random()).slice(-2)));
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    controllerValue = _useState2[0],
+    setControllerValue = _useState2[1];
+  useEffect(function () {
+    if (!isMove.current && value !== controllerValue) {
+      updateControlVal(value);
+    }
+  }, [value]);
+  var updateControlVal = useDebounceFn(function (val) {
+    setControllerValue(val);
+  }, {
+    wait: 150
+  }).run;
+  return /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, label && function renderTextRow() {
+    return /*#__PURE__*/React.createElement(View, {
+      className: styles.textRow
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: styles.label
+    }, label), /*#__PURE__*/React.createElement(Text, {
+      className: styles.label,
+      style: {
+        margin: '0 4px'
+      }
+    }, "\xB7"), /*#__PURE__*/React.createElement(Text, {
+      className: styles.value,
+      style: valueStyle
+    }, textValue || "".concat(formatPercent(controllerValue, {
+      min: min,
+      max: 1000,
+      minPercent: min
+    }), "%")));
+  }(), /*#__PURE__*/React.createElement(View, {
+    style: trackStyle
+  }, /*#__PURE__*/React.createElement(Slider, {
+    instanceId: instanceId.current,
+    min: 0,
+    max: max - min,
+    closed: false,
+    disable: disable,
+    end: controllerValue - min,
+    step: 1,
+    enableTouch: true,
+    maxRangeOffset: 38,
+    bindstart: function handleTouchStart(_ref) {
+      var detail = _ref.detail;
+      if (!onTouchStart || disable) {
+        return;
+      }
+      if (detail.end === startRefValue.current) {
+        return;
+      }
+      isMove.current = false;
+      onTouchStart && onTouchStart(detail.end);
+      startRefValue.current = detail.end;
+    },
+    bindmove: handTouchMove,
+    bindend: function handTouchEnd(_ref3) {
+      var detail = _ref3.detail;
+      if (!onTouchEnd || disable) {
+        return;
+      }
+      if (detail.end + min === endRefValue.current) {
+        return;
+      }
+      isMove.current = false;
+      onTouchEnd && onTouchEnd(detail.end + min);
+      endRefValue.current = detail.end + min;
+    },
+    trackStyle: _objectSpread(_objectSpread({}, trackStyle), {}, {
+      background: trackBackgroundColor
+    }),
+    thumbEndStyle: _objectSpread({
+      background: "".concat(disable ? '#000' : 'transparent')
+    }, thumbStyle)
+  })));
+}
+OpacitySlider.defaultProps = defaultProps;
+export default OpacitySlider;

package/lib/index.module.less

@@ -0,0 +1,27 @@
+.lampSliderMask {
+  color: #000;
+  font-size: 48rpx;
+  font-weight: bold;
+}
+.textRow {
+  display: flex;
+  justify-content: start;
+  margin: 0 0 32rpx 0rpx;
+
+  .label {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 19px;
+    color: #fff;
+    opacity: .9;
+  }
+
+  .value {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: left;
+    opacity: .9;
+  }
+}

package/lib/props.d.ts

@@ -0,0 +1,87 @@
+/// <reference types="react" />
+export interface IProps {
+    /**
+     * @description.zh value文字样式
+     * @description.en Value style
+     * @default false
+     */
+    valueStyle?: React.CSSProperties;
+    /**
+    * @description.zh slider的背景颜色
+    * @description.en Slider track background color
+    * @default false
+    */
+    trackBackgroundColor?: string;
+    /**
+    * @description.zh 整体外层样式
+    * @description.en Style
+    * @default false
+    */
+    style?: React.CSSProperties;
+    /**
+    * @description.zh 禁止滑动
+    * @description.en Ban sliding
+    * @default false
+    */
+    disable?: boolean;
+    /**
+    * @description.zh 值的标签，不传不显示标签和值
+    * @description.en label
+    * @default false
+    */
+    label?: string;
+    /**
+    * @description.zh 自定义值显示，不传默认按百分比显示
+    * @description.en custom textValue
+    * @default false
+    */
+    textValue?: string;
+    /**
+     * @description.zh 滑动条Track样式
+     * @description.en Sliding track style
+     * @default {}
+     */
+    trackStyle?: React.CSSProperties;
+    /**
+     * @description.en Fingers sliding block style
+     * @description.zh 手指滑块样式
+     */
+    thumbStyle?: React.CSSProperties;
+    /**
+     * @description.zh slider值 对应hsv的saturation 范围 1 - 1000
+     * @description.en slider value
+     * @default 0
+     */
+    value: number;
+    /**
+     * @description.zh slider最小值
+     * @description.en slider min value
+     * @default 0
+     */
+    min?: number;
+    /**
+    * @description.zh slider值 最大值
+    * @description.en slider max value
+    * @default 0
+    */
+    max?: number;
+    /**
+     * @description.zh slider 手指点击时触发
+     * @description.en slider Value changes
+     * @default () => {}
+     */
+    onTouchStart?: (value: number) => void;
+    /**
+     * @description.zh slider 手指拖动时触发
+     * @description.en slider Value changes
+     * @default () => {}
+     */
+    onTouchMove: (value: number) => void;
+    /**
+     * @description.zh slider 手指离开时触发
+     * @description.en Values change after the trigger
+     * @default () => {}
+     */
+    onTouchEnd?: (value: number) => void;
+}
+export declare const defaultProps: IProps;

package/lib/props.js

@@ -0,0 +1,20 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+export var defaultProps = {
+  value: 1,
+  trackStyle: {},
+  trackBackgroundColor: 'transparent',
+  style: {},
+  min: 0,
+  max: 1000,
+  onTouchStart: function onTouchStart() {
+    return null;
+  },
+  onTouchMove: function onTouchMove() {
+    return null;
+  },
+  onTouchEnd: function onTouchEnd() {
+    return null;
+  }
+};

package/lib/typings/index.d.ts

@@ -0,0 +1,13 @@
+declare module '*.less';
+declare global {
+  interface Window {
+    devToolsExtension?: () => any;
+    ty: Ty;
+  }
+}
+
+interface Ty {
+  [key]: any;
+}
+
+declare const ty: Ty;

package/lib/utils/index.d.ts

@@ -0,0 +1,7 @@
+interface PercentOption {
+    min?: number;
+    max?: number;
+    minPercent?: number;
+}
+export declare const formatPercent: (value?: number, { min, max, minPercent }?: PercentOption) => number;
+export {};

package/lib/utils/index.js

@@ -0,0 +1,11 @@
+export var formatPercent = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 1000 : _ref$max,
+    _ref$minPercent = _ref.minPercent,
+    minPercent = _ref$minPercent === void 0 ? 0 : _ref$minPercent;
+  return Math.min(100, Math.round((100 - minPercent) * (value - min) / (max - min) + minPercent));
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@ray-js/lamp-style-slider",
+  "version": "0.0.2-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",
+    "build:tuya": "ray build ./example --target=tuya",
+    "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 ./example -t tuya --verbose",
+    "start:wechat": "ray start ./example -t wechat --verbose",
+    "start:web": "ray start ./example -t web",
+    "prepublishOnly": "yarn build",
+    "release-it": "standard-version",
+    "copy": "sh copy.sh"
+  },
+  "peerDependencies": {
+    "@ray-js/panel-sdk": "^1.1.4"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/babel-preset-standard": "^0.6.14",
+    "@ray-js/cli": "^0.6.14",
+    "@ray-js/panel-sdk": "^1.1.4",
+    "@ray-js/ray": "^0.6.14",
+    "@ray-js/rn-transformer-helper": "^0.5.5",
+    "@types/node": "^17.0.43",
+    "core-js": "^3.19.1",
+    "eslint-config-tuya-panel": "^0.4.1",
+    "husky": "^1.2.0",
+    "lint-staged": "^10.2.11",
+    "standard-version": "9.3.2"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged && npm run copy"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {}
+}