@ray-js/lamp-style-slider 0.0.6-beta-6 → 0.0.6-beta-8

package/lib/index.js

@@ -2,8 +2,8 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useRef, useState, useEffect } from 'react';
 import { View, Text } from '@ray-js/ray';
-import Slider from '@ray-js/components-ty-slider/lib/SjsSlider';
-import { toStyle } from '@ray-js/components-ty-slider';
+import Slider from '@ray-js/components-ty-slider';
+import PerfText from '@ray-js/components-ty-perf-text';
 import { useDebounceFn, useThrottleFn } from 'ahooks';
 import { formatPercent } from './utils';
 import styles from './index.module.less';
@@ -31,33 +31,32 @@ function OpacitySlider(props) {
     enableTouch = true,
     onTouchStart,
     onTouchMove,
-    onTouchEnd
+    onTouchEnd,
+    textShowType = 'ray'
   } = props;
+  console.log('🚀 ~ index ~ value:', value);
   const startRefValue = useRef(-1);
-  const handTouchMove = useThrottleFn(_ref2 => {
-    let {
-      detail
-    } = _ref2;
+  const handTouchMove = useThrottleFn(value => {
     if (!onTouchMove || disable) {
       return;
     }
     isMove.current = true;
-    lastValue.current = detail.end + min;
-    if (detail.end + min === preValue.current) {
+    lastValue.current = value;
+    if (value === preValue.current) {
       return;
     }
     if (timer.current) {
       return;
     }
-    onTouchMove && onTouchMove(detail.end + min);
+    onTouchMove && onTouchMove(value);
     if (!textValue && label) {
-      setControllerValue(detail.end + min);
+      setControllerValue(value);
     }
-    preValue.current = detail.end + min;
+    preValue.current = value;
     clearTimeout(timer.current);
     timer.current = null;
     if (lastValue.current !== preValue.current) {
-      onTouchMove && onTouchMove(lastValue.current + min);
+      onTouchMove && onTouchMove(lastValue.current);
     }
   }, {
     wait: 80
@@ -75,11 +74,16 @@ function OpacitySlider(props) {
   }, {
     wait: 150
   }).run;
+  const eventName = `OpacitySlider_${instanceId.current}`;
   return /*#__PURE__*/React.createElement(View, {
     style: style
-  }, label && controllerValue !== -1 && (() => {
+  }, label && (() => {
     return /*#__PURE__*/React.createElement(View, {
-      className: styles.textRow
+      className: styles.textRow,
+      style: {
+        opacity: controllerValue === -1 ? 0 : 1,
+        transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+      }
     }, /*#__PURE__*/React.createElement(Text, {
       className: styles.label,
       style: labelStyle
@@ -88,7 +92,15 @@ function OpacitySlider(props) {
       style: {
         margin: '0 4px'
       }
-    }, "\xB7"), /*#__PURE__*/React.createElement(Text, {
+    }, "\xB7"), textShowType === 'sjs' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PerfText, {
+      instanceId: eventName,
+      className: styles.value,
+      defaultValue: controllerValue,
+      valueStart: -100 * min / (max - min),
+      valueScale: 100 / (max - min),
+      eventName: eventName,
+      style: valueStyle
+    }), "%") : /*#__PURE__*/React.createElement(Text, {
       className: styles.value,
       style: valueStyle
     }, textValue || `${formatPercent(controllerValue, {
@@ -105,57 +117,52 @@ function OpacitySlider(props) {
     }, trackStyle)
   }, /*#__PURE__*/React.createElement(Slider, {
     instanceId: props.instanceId || instanceId.current,
-    min: 0,
-    max: max - min,
-    disable: disable,
-    end: controllerValue - min,
+    min: min,
+    max: max,
+    disabled: disable,
+    moveEventName: eventName,
+    value: value,
     step: 1,
     enableTouch: enableTouch,
-    bindstart: _ref => {
-      let {
-        detail
-      } = _ref;
+    onBeforeChange: value => {
       if (!onTouchStart || disable) {
         return;
       }
-      if (detail.end === startRefValue.current) {
+      if (value === startRefValue.current) {
         return;
       }
       isMove.current = false;
-      onTouchStart && onTouchStart(detail.end);
-      startRefValue.current = detail.end;
+      onTouchStart && onTouchStart(value);
+      startRefValue.current = value;
     },
-    bindmove: handTouchMove,
+    onChange: handTouchMove,
     hideThumbButton: controllerValue === -1,
-    bindend: _ref3 => {
-      let {
-        detail
-      } = _ref3;
+    onAfterChange: value => {
       if (!onTouchEnd || disable) {
         return;
       }
-      if (detail.end + min === endRefValue.current) {
+      if (value === endRefValue.current) {
         return;
       }
       clearTimeout(moveTimer.current);
       moveTimer.current = setTimeout(() => {
         isMove.current = false;
       }, 100);
-      onTouchEnd && onTouchEnd(detail.end + min);
-      endRefValue.current = detail.end + min;
+      onTouchEnd && onTouchEnd(value);
+      endRefValue.current = value;
     },
-    trackStyle: toStyle(_objectSpread(_objectSpread({
+    trackStyle: _objectSpread(_objectSpread({
       width: '646rpx',
       height: '56rpx',
       position: 'relative',
       borderRadius: '28rpx'
     }, trackStyle), {}, {
       background: trackBackgroundColor
-    })),
-    barStyle: toStyle({
-      background: 'transparent'
     }),
-    thumbStyle: toStyle(_objectSpread({
+    barStyle: {
+      background: 'transparent'
+    },
+    thumbStyle: _objectSpread({
       width: '62rpx',
       height: '62rpx',
       border: '8rpx solid #fff',
@@ -163,7 +170,7 @@ function OpacitySlider(props) {
       boxShadow: 'rgb(255 255 255 / 10%) 0px 0px 1px',
       background: `${'transparent'}`,
       transition: 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
-    }, thumbStyle)),
+    }, thumbStyle),
     thumbStyleRenderFormatter: {
       background: props === null || props === void 0 ? void 0 : (_props$thumbColorForm = props.thumbColorFormatterConfig) === null || _props$thumbColorForm === void 0 ? void 0 : _props$thumbColorForm.formatter
     },

package/lib/index.module.less

@@ -23,5 +23,6 @@
     letter-spacing: 0px;
     text-align: left;
     opacity: .9;
+    display: inherit;
   }
 }

package/lib/props.d.ts

@@ -109,5 +109,11 @@ export interface IProps {
         formatter: string;
         scale?: number;
     };
+    /**
+     * @description.en text show type
+     * @description.zh 文本显示类型
+     * @default 'ray'
+     */
+    textShowType?: 'ray' | 'sjs';
 }
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   max: 1000,
   onTouchStart: () => null,
   onTouchMove: () => null,
-  onTouchEnd: () => null
+  onTouchEnd: () => null,
+  textShowType: 'ray'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-style-slider",
-  "version": "0.0.6-beta-6",
+  "version": "0.0.6-beta-8",
   "description": "照明样式的基础滑动条",
   "main": "lib/index",
   "files": [
@@ -59,6 +59,7 @@
     ]
   },
   "dependencies": {
+    "@ray-js/components-ty-perf-text": "^0.0.9",
     "@ray-js/components-ty-slider": "^0.3.8"
   },
   "resolutions": {
@@ -71,4 +72,4 @@
       "email": "tuyafe@tuya.com"
     }
   ]
-}
+}