@ray-js/lamp-style-slider 0.0.3-beta-4 → 0.0.3-beta-6

package/lib/index.config.js

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

package/lib/index.d.ts

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

package/lib/index.js

@@ -1,7 +1,4 @@
 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';
@@ -12,37 +9,35 @@ import { formatPercent } from './utils';
 import styles from './index.module.less';
 import { defaultProps } from './props';
 function OpacitySlider(props) {
-  var preValue = useRef(-1);
-  var lastValue = useRef(null);
-  var timer = useRef(null);
-  var moveTimer = 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,
-    _props$rangeOffset = props.rangeOffset,
-    rangeOffset = _props$rangeOffset === void 0 ? 38 : _props$rangeOffset,
-    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,
-    _props$enableTouch = props.enableTouch,
-    enableTouch = _props$enableTouch === void 0 ? true : _props$enableTouch,
-    onTouchStart = props.onTouchStart,
-    onTouchMove = props.onTouchMove,
-    onTouchEnd = props.onTouchEnd;
-  var startRefValue = useRef(-1);
-  var handTouchMove = useThrottleFn(function (_ref2) {
-    var detail = _ref2.detail;
+  var _props$thumbColorForm, _props$thumbColorForm2;
+  const preValue = useRef(-1);
+  const lastValue = useRef(null);
+  const timer = useRef(null);
+  const moveTimer = useRef(null);
+  const isMove = useRef(false);
+  const {
+    label,
+    min = 0,
+    max = 1000,
+    rangeOffset = 38,
+    value,
+    style,
+    trackStyle = {},
+    thumbStyle = {},
+    textValue,
+    disable = false,
+    valueStyle,
+    trackBackgroundColor,
+    enableTouch = true,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  } = props;
+  const startRefValue = useRef(-1);
+  const handTouchMove = useThrottleFn(_ref2 => {
+    let {
+      detail
+    } = _ref2;
     if (!onTouchMove || disable) {
       return;
     }
@@ -67,25 +62,22 @@ function OpacitySlider(props) {
   }, {
     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 () {
+  const endRefValue = useRef(-1);
+  const instanceId = useRef(`Color_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`);
+  const [controllerValue, setControllerValue] = useState(-1);
+  useEffect(() => {
     if (!isMove.current && value !== controllerValue) {
       updateControlVal(value);
     }
   }, [value]);
-  var updateControlVal = useDebounceFn(function (val) {
+  const updateControlVal = useDebounceFn(val => {
     setControllerValue(val);
   }, {
     wait: 150
   }).run;
   return /*#__PURE__*/React.createElement(View, {
     style: style
-  }, label && function renderTextRow() {
+  }, label && (() => {
     return /*#__PURE__*/React.createElement(View, {
       className: styles.textRow
     }, /*#__PURE__*/React.createElement(Text, {
@@ -98,12 +90,12 @@ function OpacitySlider(props) {
     }, "\xB7"), /*#__PURE__*/React.createElement(Text, {
       className: styles.value,
       style: valueStyle
-    }, textValue || "".concat(formatPercent(controllerValue, {
-      min: min,
-      max: max,
+    }, textValue || `${formatPercent(controllerValue, {
+      min,
+      max,
       minPercent: min
-    }), "%")));
-  }(), /*#__PURE__*/React.createElement(View, {
+    })}%`));
+  })(), /*#__PURE__*/React.createElement(View, {
     style: _objectSpread({
       width: '646rpx',
       height: '56rpx',
@@ -114,14 +106,13 @@ function OpacitySlider(props) {
     instanceId: instanceId.current,
     min: 0,
     max: max - min,
-    closed: false,
     disable: disable,
     end: controllerValue - min,
     step: 1,
-    enableTouch: enableTouch,
-    maxRangeOffset: rangeOffset,
-    bindstart: function handleTouchStart(_ref) {
-      var detail = _ref.detail;
+    bindstart: _ref => {
+      let {
+        detail
+      } = _ref;
       if (!onTouchStart || disable) {
         return;
       }
@@ -133,8 +124,10 @@ function OpacitySlider(props) {
       startRefValue.current = detail.end;
     },
     bindmove: handTouchMove,
-    bindend: function handTouchEnd(_ref3) {
-      var detail = _ref3.detail;
+    bindend: _ref3 => {
+      let {
+        detail
+      } = _ref3;
       if (!onTouchEnd || disable) {
         return;
       }
@@ -142,7 +135,7 @@ function OpacitySlider(props) {
         return;
       }
       clearTimeout(moveTimer.current);
-      moveTimer.current = setTimeout(function () {
+      moveTimer.current = setTimeout(() => {
         isMove.current = false;
       }, 100);
       onTouchEnd && onTouchEnd(detail.end + min);
@@ -165,8 +158,12 @@ function OpacitySlider(props) {
       border: '8rpx solid #fff',
       borderRadius: '50%',
       boxShadow: 'rgb(255 255 255 / 10%) 0px 0px 1px',
-      background: "".concat(disable ? '#000' : 'transparent')
-    }, thumbStyle))
+      background: `${disable ? '#000' : 'transparent'}`
+    }, thumbStyle)),
+    thumbStyleRenderFormatter: {
+      background: props === null || props === void 0 ? void 0 : (_props$thumbColorForm = props.thumbColorFormatterConfig) === null || _props$thumbColorForm === void 0 ? void 0 : _props$thumbColorForm.formatter
+    },
+    thumbStyleRenderValueScale: props === null || props === void 0 ? void 0 : (_props$thumbColorForm2 = props.thumbColorFormatterConfig) === null || _props$thumbColorForm2 === void 0 ? void 0 : _props$thumbColorForm2.scale
   })));
 }
 OpacitySlider.defaultProps = defaultProps;

package/lib/props.d.ts

@@ -95,5 +95,14 @@ export interface IProps {
      * @default () => {}
      */
     onTouchEnd?: (value: number) => void;
+    /**
+     * @description.en style
+     * @description.zh 按钮hsv背景渲染,例如 "hsl(valuedeg 100% 50%)"
+     * @default null
+     */
+    thumbColorFormatterConfig?: {
+        formatter: string;
+        scale?: number;
+    };
 }
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable @typescript-eslint/no-empty-function */
 
-export var defaultProps = {
+export const defaultProps = {
   value: 1,
   trackStyle: {},
   enableTouch: true,
@@ -10,13 +10,7 @@ export var defaultProps = {
   style: {},
   min: 0,
   max: 1000,
-  onTouchStart: function onTouchStart() {
-    return null;
-  },
-  onTouchMove: function onTouchMove() {
-    return null;
-  },
-  onTouchEnd: function onTouchEnd() {
-    return null;
-  }
+  onTouchStart: () => null,
+  onTouchMove: () => null,
+  onTouchEnd: () => null
 };

package/lib/utils/index.js

@@ -1,11 +1,9 @@
-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;
+export const formatPercent = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  let {
+    min = 0,
+    max = 1000,
+    minPercent = 0
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return Math.min(100, Math.round((100 - minPercent) * (value - min) / (max - min) + minPercent));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-style-slider",
-  "version": "0.0.3-beta-4",
+  "version": "0.0.3-beta-6",
   "description": "照明样式的基础滑动条",
   "main": "lib/index",
   "files": [
@@ -12,12 +12,12 @@
     "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:tuya": "ray build ./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 ./example -t tuya --verbose",
+    "start:tuya": "ray start ./example --verbose",
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
@@ -31,9 +31,9 @@
     "@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/cli": "^1.4.9",
     "@ray-js/panel-sdk": "^1.1.4",
-    "@ray-js/ray": "^0.6.14",
+    "@ray-js/ray": "^1.4.9",
     "@ray-js/rn-transformer-helper": "^0.5.5",
     "@types/node": "^17.0.43",
     "core-js": "^3.19.1",
@@ -59,7 +59,7 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "0.2.36-beta-3"
+    "@ray-js/components-ty-slider": "0.2.36-beta-6"
   },
   "maintainers": [
     {