@ray-js/lamp-saturation-slider 0.0.1-beta-1

package/README.md

@@ -0,0 +1,62 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/lamp-saturation-slider
+
+[![latest](https://img.shields.io/npm/v/@ray-js/lamp-saturation-slider/latest.svg)](https://www.npmjs.com/package/@ray-js/lamp-saturation-slider) [![download](https://img.shields.io/npm/dt/@ray-js/lamp-saturation-slider.svg)](https://www.npmjs.com/package/@ray-js/lamp-saturation-slider)
+
+> 照明饱和度 Slider
+
+## Installation
+
+```sh
+$ npm install @ray-js/lamp-saturation-slider
+# or
+$ yarn add @ray-js/lamp-saturation-slider
+```
+
+## Usage
+
+```ts
+  // 滑动条拖动时持续触发
+  onChange?: (value: RGB) => void;
+  // 滑动条拖动后，松手触发
+  onAfterChange?: (value: RGB) => void;
+  // 滑动条值
+  value: number;
+  // 滑动条默认RGB值
+  defaultColor: RGB;
+```
+
+```tsx
+import LampSaturationSlider from '@ray-js/lamp-saturation-slider';
+export default () => {
+  const value = 0;
+  const [rgbSaturationValue, setRgbSaturationValue] = useState({
+    r: 255,
+    g: 0,
+    b: 0,
+  });
+  const [rgbValue, setRgbValue] = useState({
+    r: 255,
+    g: 0,
+    b: 0,
+  });
+  return (
+    <View className={styles.view}>
+      <DemoBlock title="基础用法">
+        <Text className={styles.demoBlockTitleText}>
+          RGB:{`${rgbSaturationValue.r},${rgbSaturationValue.g},${rgbSaturationValue.b}`}
+        </Text>
+
+        <LampSaturationSlider
+          value={value}
+          defaultColor={rgbValue}
+          onChange={val => {
+            setRgbSaturationValue(val);
+          }}
+        />
+      </DemoBlock>
+    </View>
+  );
+};
+```

package/lib/index.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _rayPanelUtils=require("@ray-js/ray-panel-utils");var _components=require("@ray-js/components");var _props=require("./props");var _jsxFileName="/drone/src/src/index.tsx";var _styleSheet=styles;function LampSaturationSlider(props){var defaultValue=props.value,defaultColor=props.defaultColor;var HValue=_rayPanelUtils.ColorUtils.rgbToHsl(defaultColor.r,defaultColor.g,defaultColor.b).h;var onChange=function(event){var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,event/100,0.5);props.onChange&&props.onChange(rgb);};var onAfterChange=function(event){var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,event/100,0.5);props.onAfterChange&&props.onAfterChange(rgb);};return _react.default.createElement(_components.Slider,{min:0,max:100,step:1,value:defaultValue,onChange:function(va){onAfterChange(va.value);},onChanging:function onChanging(va){onChange(va.value);},backgroundColor:"linear-gradient(to right, hsl("+HValue+", 0%, 100%), hsl("+HValue+", 100%, 50%))",activeColor:"transparent",__self:this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:10}});}LampSaturationSlider.defaultProps=_props.defaultProps;var _default=LampSaturationSlider;exports.default=_default;

package/lib/index.config.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.wechat=exports.tuya=exports.native=void 0;var tuya={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.tuya=tuya;var wechat={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.wechat=wechat;var native={backgroundColor:'transparent',isBleOfflineOverlay:false,useSafeAreaView:true,navigationBarTitleText:'Ray 跨端组件'};exports.native=native;

package/lib/index.config.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.wechat=exports.tuya=exports.native=void 0;var tuya={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.tuya=tuya;var wechat={backgroundColor:'#f2f4f6',navigationBarTitleText:'Ray 跨端组件'};exports.wechat=wechat;var native={backgroundColor:'transparent',isBleOfflineOverlay:false,useSafeAreaView:true,navigationBarTitleText:'Ray 跨端组件'};exports.native=native;

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: 'transparent',
+  isBleOfflineOverlay: false,
+  useSafeAreaView: true,
+  navigationBarTitleText: 'Ray 跨端组件'
+};

package/lib/index.config.tuya.js

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

package/lib/index.config.web.js

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

package/lib/index.config.wechat.js

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

package/lib/index.d.ts

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

package/lib/index.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _rayPanelUtils=require("@ray-js/ray-panel-utils");var _components=require("@ray-js/components");var _props=require("./props");var _jsxFileName="/drone/src/src/index.tsx";var _styleSheet=styles;function LampSaturationSlider(props){var defaultValue=props.value,defaultColor=props.defaultColor;var HValue=_rayPanelUtils.ColorUtils.rgbToHsl(defaultColor.r,defaultColor.g,defaultColor.b).h;var onChange=function(event){var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,event/100,0.5);props.onChange&&props.onChange(rgb);};var onAfterChange=function(event){var rgb=_rayPanelUtils.ColorUtils.hslToRgb(HValue,event/100,0.5);props.onAfterChange&&props.onAfterChange(rgb);};return _react.default.createElement(_components.Slider,{min:0,max:100,step:1,value:defaultValue,onChange:function(va){onAfterChange(va.value);},onChanging:function onChanging(va){onChange(va.value);},backgroundColor:"linear-gradient(to right, hsl("+HValue+", 0%, 100%), hsl("+HValue+", 100%, 50%))",activeColor:"transparent",__self:this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:10}});}LampSaturationSlider.defaultProps=_props.defaultProps;var _default=LampSaturationSlider;exports.default=_default;

package/lib/index.js

@@ -0,0 +1,39 @@
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { ColorUtils } from '@ray-js/ray-panel-utils';
+import { Slider } from '@ray-js/components';
+import { defaultProps } from './props';
+
+function LampSaturationSlider(props) {
+  var defaultValue = props.value,
+      defaultColor = props.defaultColor;
+  var HValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
+
+  var onChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onChange && props.onChange(rgb);
+  };
+
+  var onAfterChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onAfterChange && props.onAfterChange(rgb);
+  };
+
+  return /*#__PURE__*/React.createElement(Slider, {
+    min: 0,
+    max: 100,
+    step: 1,
+    value: defaultValue,
+    onChange: function (va) {
+      onAfterChange(va.value);
+    },
+    onChanging: function onChanging(va) {
+      onChange(va.value);
+    },
+    backgroundColor: "linear-gradient(to right, hsl(".concat(HValue, ", 0%, 100%), hsl(").concat(HValue, ", 100%, 50%))"),
+    activeColor: "transparent"
+  });
+}
+
+LampSaturationSlider.defaultProps = defaultProps;
+export default LampSaturationSlider;

package/lib/index.module.less

@@ -0,0 +1,5 @@
+.text {
+  color: #000;
+  font-size: 48rpx;
+  font-weight: bold;
+}

package/lib/index.tuya.js

@@ -0,0 +1,39 @@
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { ColorUtils } from '@ray-js/ray-panel-utils';
+import { Slider } from '@ray-js/components';
+import { defaultProps } from './props';
+
+function LampSaturationSlider(props) {
+  var defaultValue = props.value,
+      defaultColor = props.defaultColor;
+  var HValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
+
+  var onChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onChange && props.onChange(rgb);
+  };
+
+  var onAfterChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onAfterChange && props.onAfterChange(rgb);
+  };
+
+  return /*#__PURE__*/React.createElement(Slider, {
+    min: 0,
+    max: 100,
+    step: 1,
+    value: defaultValue,
+    onChange: function (va) {
+      onAfterChange(va.value);
+    },
+    onChanging: function onChanging(va) {
+      onChange(va.value);
+    },
+    backgroundColor: "linear-gradient(to right, hsl(".concat(HValue, ", 0%, 100%), hsl(").concat(HValue, ", 100%, 50%))"),
+    activeColor: "transparent"
+  });
+}
+
+LampSaturationSlider.defaultProps = defaultProps;
+export default LampSaturationSlider;

package/lib/index.web.js

@@ -0,0 +1,39 @@
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { ColorUtils } from '@ray-js/ray-panel-utils';
+import { Slider } from '@ray-js/components';
+import { defaultProps } from './props';
+
+function LampSaturationSlider(props) {
+  var defaultValue = props.value,
+      defaultColor = props.defaultColor;
+  var HValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
+
+  var onChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onChange && props.onChange(rgb);
+  };
+
+  var onAfterChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onAfterChange && props.onAfterChange(rgb);
+  };
+
+  return /*#__PURE__*/React.createElement(Slider, {
+    min: 0,
+    max: 100,
+    step: 1,
+    value: defaultValue,
+    onChange: function (va) {
+      onAfterChange(va.value);
+    },
+    onChanging: function onChanging(va) {
+      onChange(va.value);
+    },
+    backgroundColor: "linear-gradient(to right, hsl(".concat(HValue, ", 0%, 100%), hsl(").concat(HValue, ", 100%, 50%))"),
+    activeColor: "transparent"
+  });
+}
+
+LampSaturationSlider.defaultProps = defaultProps;
+export default LampSaturationSlider;

package/lib/index.wechat.js

@@ -0,0 +1,39 @@
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { ColorUtils } from '@ray-js/ray-panel-utils';
+import { Slider } from '@ray-js/components';
+import { defaultProps } from './props';
+
+function LampSaturationSlider(props) {
+  var defaultValue = props.value,
+      defaultColor = props.defaultColor;
+  var HValue = ColorUtils.rgbToHsl(defaultColor.r, defaultColor.g, defaultColor.b).h;
+
+  var onChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onChange && props.onChange(rgb);
+  };
+
+  var onAfterChange = function (event) {
+    var rgb = ColorUtils.hslToRgb(HValue, event / 100, 0.5);
+    props.onAfterChange && props.onAfterChange(rgb);
+  };
+
+  return /*#__PURE__*/React.createElement(Slider, {
+    min: 0,
+    max: 100,
+    step: 1,
+    value: defaultValue,
+    onChange: function (va) {
+      onAfterChange(va.value);
+    },
+    onChanging: function onChanging(va) {
+      onChange(va.value);
+    },
+    backgroundColor: "linear-gradient(to right, hsl(".concat(HValue, ", 0%, 100%), hsl(").concat(HValue, ", 100%, 50%))"),
+    activeColor: "transparent"
+  });
+}
+
+LampSaturationSlider.defaultProps = defaultProps;
+export default LampSaturationSlider;

package/lib/props.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultProps=void 0;var defaultProps={onChange:function onChange(){return null;},onAfterChange:function onAfterChange(){return null;},value:0,defaultColor:{r:255,g:0,b:0}};exports.defaultProps=defaultProps;

package/lib/props.d.ts

@@ -0,0 +1,32 @@
+export interface IProps {
+    /**
+     * @description.zh slider值 范围0 - 100
+     * @description.en slider value range 0 - 100
+     * @default 0
+     */
+    value: number;
+    /**
+     * @description.zh slider 值改变时触发
+     * @description.en slider Value changes
+     * @default '() => {}'
+     */
+    onChange: (value: RGB) => void;
+    /**
+     * @description.zh 值改变后触发
+     * @description.en Values change after the trigger
+     * @default '() => {}'
+     */
+    onAfterChange?: (value: RGB) => void;
+    /**
+     * @description.zh 默认传入的RGB值
+     * @description.en The default incoming RGB values
+     * @default '() => {}'
+     */
+    defaultColor: RGB;
+}
+export declare type RGB = {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const defaultProps: IProps;

package/lib/props.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultProps=void 0;var defaultProps={onChange:function onChange(){return null;},onAfterChange:function onAfterChange(){return null;},value:0,defaultColor:{r:255,g:0,b:0}};exports.defaultProps=defaultProps;

package/lib/props.js

@@ -0,0 +1,14 @@
+export var defaultProps = {
+  onChange: function onChange() {
+    return null;
+  },
+  onAfterChange: function onAfterChange() {
+    return null;
+  },
+  value: 0,
+  defaultColor: {
+    r: 255,
+    g: 0,
+    b: 0
+  }
+};

package/lib/props.tuya.js

@@ -0,0 +1,14 @@
+export var defaultProps = {
+  onChange: function onChange() {
+    return null;
+  },
+  onAfterChange: function onAfterChange() {
+    return null;
+  },
+  value: 0,
+  defaultColor: {
+    r: 255,
+    g: 0,
+    b: 0
+  }
+};

package/lib/props.web.js

@@ -0,0 +1,14 @@
+export var defaultProps = {
+  onChange: function onChange() {
+    return null;
+  },
+  onAfterChange: function onAfterChange() {
+    return null;
+  },
+  value: 0,
+  defaultColor: {
+    r: 255,
+    g: 0,
+    b: 0
+  }
+};

package/lib/props.wechat.js

@@ -0,0 +1,14 @@
+export var defaultProps = {
+  onChange: function onChange() {
+    return null;
+  },
+  onAfterChange: function onAfterChange() {
+    return null;
+  },
+  value: 0,
+  defaultColor: {
+    r: 255,
+    g: 0,
+    b: 0
+  }
+};

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/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@ray-js/lamp-saturation-slider",
+  "version": "0.0.1-beta-1",
+  "description": "照明饱和度Slider",
+  "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"
+  },
+  "peerDependencies": {
+    "@ray-js/components": "^0.3.19-beta-a6eb801d",
+    "@ray-js/framework": "^0.3.19-beta-a6eb801d"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/babel-preset-standard": "^0.3.19-beta-a6eb801d",
+    "@ray-js/cli": "^0.3.19-beta-a6eb801d",
+    "@ray-js/components": "^0.3.19-beta-a6eb801d",
+    "@ray-js/framework": "^0.3.19-beta-a6eb801d",
+    "@ray-js/rn-transformer-helper": "^0.3.19-beta-a6eb801d",
+    "@ray-js/types": "^0.3.19-beta-a6eb801d",
+    "@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"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}