@ray-js/lamp-style-slider 0.0.3 → 0.0.5

package/README.md

@@ -4,7 +4,7 @@ English | [简体中文](./README-zh_CN.md)
 
 [![latest](https://img.shields.io/npm/v/@ray-js/lamp-style-slider/latest.svg)](https://www.npmjs.com/package/@ray-js/lamp-style-slider) [![download](https://img.shields.io/npm/dt/@ray-js/lamp-style-slider.svg)](https://www.npmjs.com/package/@ray-js/lamp-style-slider)
 
-> 照明样式的基础滑动条
+> Basic sliding bars of lighting styles
 
 ## Installation
 
@@ -16,81 +16,120 @@ $ yarn add @ray-js/lamp-style-slider
 
 ## Usage
 
-```ts
-// 属性
-export interface IProps {
-  /**
-   * @description.zh 禁止滑动
-   * @description.en Ban sliding
-   * @default false
-   */
-  disable?: boolean;
-  /**
-   * @description.zh 滑动槽样式
-   * @description.en
-   * @default {}
-   */
-  trackStyle?: React.CSSProperties;
-  /**
-   * @description.zh slider值
-   * @description.en slider value
-   * @default 0
-   */
-  value: number;
-  /**
-   * @description.zh slider 展示的颜色值 对应hsv的hue
-   * @description.en slider value
-   * @default 0
-   */
-  hue: number; // 0 - 359
-  /**
-   * @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 const defaultProps: IProps = {
-  value: 0,
-  onTouchStart: () => null,
-  onTouchMove: () => null,
-  onTouchEnd: () => null,
+### 1. Color temperature slider
+
+```tsx
+import OpacitySlider from '@ray-js/lamp-style-slider';
+
+const [value, setValue] = useState(1000);
+const handleMove = v => {
+  // console.log('move====', v);
 };
+
+<OpacitySlider
+  style={{
+    paddingLeft: 16,
+  }}
+  label="色温"
+  valueStyle={{ color: 'blue' }}
+  disable={false}
+  value={value}
+  onTouchMove={handleMove}
+  trackBackgroundColor="linear-gradient(270deg, #CDECFE 1.22%, #FFFFFF 45.36%, #FFFFFF 53.27%, #FFCA5C 98.32%)"
+/>
 ```
 
+### 2. Brightness slider
+
 ```tsx
-import LampSlider from '@ray-js/lamp-style-slider';
-
-export default () => {
-  const [value, setValue] = useState(100);
-
-  useEffect(() => {
-    // 模拟dp上报
-    setTimeout(() => {
-      setValue(321);
-    }, 3000);
-  }, []);
-
-  return (
-    <LampSlider
-      value={saturation}
-      onTouchMove={val => {
-        setValue(val);
-      }}
-    />
-  );
+import OpacitySlider from '@ray-js/lamp-style-slider';
+
+const [value, setValue] = useState(1000);
+const handleMove = v => {
+  // console.log('move====', v);
 };
+
+<OpacitySlider
+  style={{
+    paddingLeft: 16,
+  }}
+  label="亮度"
+  valueStyle={{ color: 'blue' }}
+  min={1}
+  disable={false}
+  value={value}
+  onTouchMove={handleMove}
+  trackBackgroundColor="linear-gradient(270deg, #FFFFFF 2.57%, rgba(255, 255, 255, 0) 100.64%)"
+  thumbColorFormatterConfig={{
+    formatter: 'hsl(0deg 0% value%)',
+    scale: 0.1,
+  }}
+/>
 ```
+
+### 3. Hue slider
+
+```tsx
+import OpacitySlider from '@ray-js/lamp-style-slider';
+
+const [value, setValue] = useState(1000);
+const handleMove = v => {
+  // console.log('move====', v);
+};
+
+<OpacitySlider
+  style={{
+    paddingLeft: 16,
+  }}
+  label="hue"
+  valueStyle={{ color: 'blue' }}
+  trackStyle={{ height: '100rpx' }}
+  thumbStyle={{
+    height: '100rpx',
+    borderRadius: '20rpx',
+    width: '40rpx',
+    boxShadow: 'rgb(0 0 0 / 53%) 0px 1px 7px',
+  }}
+  min={0}
+  max={360}
+  disable={false}
+  value={value}
+  onTouchMove={handleMove}
+  trackBackgroundColor="linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), linear-gradient(90.01deg, #FF0000 0.01%, #F8CB0E 12.14%, #80FE06 21.83%, #08FB2B 32.75%, #04FAFC 46.38%, #0243FC 58.38%, #8700F9 70.04%, #FC00EF 80.06%, #F00A5B 89.92%, #FF0000 99.99%)"
+  thumbColorFormatterConfig={{
+    formatter: 'hsl(valuedeg 100% 50%)',
+  }}
+/>
+```
+### 4. Saturation slider
+
+```tsx
+import OpacitySlider from '@ray-js/lamp-style-slider';
+
+const [value, setValue] = useState(1000);
+const handleMove = v => {
+  // console.log('move====', v);
+};
+
+<OpacitySlider
+  style={{
+    paddingLeft: 16,
+  }}
+  label="saturation"
+  valueStyle={{ color: 'blue' }}
+  min={0}
+  max={100}
+  disable={false}
+  value={value}
+  onTouchMove={handleMove}
+  trackBackgroundColor={`linear-gradient(90deg, rgba(255, 255, 255, 0), ${hsv2rgbString(
+    0,
+    100,
+    100
+  )})`}
+  thumbColorFormatterConfig={{
+    formatter: 'hsl(0deg 100% value%)',
+    scale: 0.5,
+  }}
+/>
+```

package/lib/index.js

@@ -2,7 +2,7 @@ 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/slider';
+import Slider from '@ray-js/components-ty-slider/lib/SjsSlider';
 import { toStyle } from '@ray-js/components-ty-slider';
 import { useDebounceFn, useThrottleFn } from 'ahooks';
 import { formatPercent } from './utils';
@@ -19,7 +19,6 @@ function OpacitySlider(props) {
     label,
     min = 0,
     max = 1000,
-    rangeOffset = 38,
     value,
     style,
     trackStyle = {},
@@ -109,6 +108,7 @@ function OpacitySlider(props) {
     disable: disable,
     end: controllerValue - min,
     step: 1,
+    enableTouch: enableTouch,
     bindstart: _ref => {
       let {
         detail
@@ -158,7 +158,7 @@ function OpacitySlider(props) {
       border: '8rpx solid #fff',
       borderRadius: '50%',
       boxShadow: 'rgb(255 255 255 / 10%) 0px 0px 1px',
-      background: `${disable ? '#000' : 'transparent'}`
+      background: `${'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

package/lib/props.d.ts

@@ -12,34 +12,34 @@ export interface IProps {
      */
     valueStyle?: React.CSSProperties;
     /**
-    * @description.zh slider的背景颜色
-    * @description.en Slider track background color
-    * @default '''
-    */
+     * @description.zh slider的背景颜色
+     * @description.en Slider track background color
+     * @default '''
+     */
     trackBackgroundColor?: string;
     /**
-    * @description.zh 整体外层样式
-    * @description.en Style
-    * @default {}
-    */
+     * @description.zh 整体外层样式
+     * @description.en Style
+     * @default {}
+     */
     style?: React.CSSProperties;
     /**
-    * @description.zh 禁止滑动
-    * @description.en Ban sliding
-    * @default false
-    */
+     * @description.zh 禁止滑动
+     * @description.en Ban sliding
+     * @default false
+     */
     disable?: boolean;
     /**
-    * @description.zh 值的标签，不传不显示标签和值
-    * @description.en label
-    * @default ''
-    */
+     * @description.zh 值的标签，不传不显示标签和值
+     * @description.en label
+     * @default ''
+     */
     label?: string;
     /**
-    * @description.zh 自定义值显示，不传默认按百分比显示
-    * @description.en custom textValue
-    * @default '''
-    */
+     * @description.zh 自定义值显示，不传默认按百分比显示
+     * @description.en custom textValue
+     * @default '''
+     */
     textValue?: string;
     /**
      * @description.zh 滑动条Track样式
@@ -58,12 +58,6 @@ export interface IProps {
      * @default 0
      */
     value: number;
-    /**
-     * @description.zh 滑块偏移量
-     * @description.en thumb offset
-     * @default 38
-     */
-    rangeOffset?: number;
     /**
      * @description.zh slider最小值
      * @description.en slider min value
@@ -71,10 +65,10 @@ export interface IProps {
      */
     min?: number;
     /**
-    * @description.zh slider值 最大值
-    * @description.en slider max value
-    * @default 1000
-    */
+     * @description.zh slider值 最大值
+     * @description.en slider max value
+     * @default 1000
+     */
     max?: number;
     /**
      * @description.zh 是否支持点击

package/lib/props.js

@@ -6,7 +6,6 @@ export const defaultProps = {
   trackStyle: {},
   enableTouch: true,
   trackBackgroundColor: 'transparent',
-  rangeOffset: 38,
   style: {},
   min: 0,
   max: 1000,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-style-slider",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "照明样式的基础滑动条",
   "main": "lib/index",
   "files": [
@@ -59,7 +59,7 @@
     ]
   },
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.2.36"
+    "@ray-js/components-ty-slider": "^0.2.40"
   },
   "maintainers": [
     {