1.0.9 • Published 10 months ago
@ray-js/lamp-circle-picker v1.0.9
English | 简体中文
@ray-js/lamp-circle-picker
LampCirclePicker
Preview
Installation
$ npm install @ray-js/components-ty-lamp
# or
$ yarn add @ray-js/components-ty-lamp
Usage
interface IProps {
/**
* @description.zh 默认数值 色温值
* @description.en default value
* @default
*/
value: number;
/**
* @description.zh 色盘渐变颜色列表
* @description.en Color plate gradient color list
*/
colorList?: {
offset: number;
color: string;
}[];
/**
* @description.zh 内部色环宽度
* @description.en The width of inner color ring
* @default 80
*/
innerRingRadius?: number;
/**
* @description.zh 色盘宽度
* @description.en The width of color ring
* @default 140
*/
radius?: number;
/**
* @description.zh 注意⚠️:基础库版本大于2.18.0, 是否启用事件通道,当多个 rjs 组件同时使用时,用于优化 rjs 间数据传输时的性能问题
* @description.en Note ⚠️ : The base library version is greater than 2.18.0, Whether to enable event channels to optimize the performance of data transfer between rjs when multiple rjs components are used simultaneously
* @default false
*/
useEventChannel?: boolean;
/**
* @description.zh 事件通道名称
* @description.en Event channel name
* @default 'lampCirclePickerEventChannel'
*/
eventChannelName?: string;
/**
* @description.zh 手指按下时的回调函数
* @description.en Finger press when the callback function
* @default ''
*/
onTouchStart?: (value: number) => void;
/**
* @description.zh 手指按下拖动时的回调函数
* @description.en Finger to press the drag of the callback function
* @default ''
*/
onTouchMove?: (value: number) => void;
/**
* @description.zh 手指按下结束时的回调函数
* @description.en Finger press at the end of the callback function
* @default ''
*/
onTouchEnd?: (value: number) => void;
}
// Basic usage
import { LampCirclePicker } from '@ray-js/components-ty-lamp';
export default () => {
const [temperature, setTemperature] = useState(20);
const handleEnd = (v: number) => {
setTemperature(v);
};
return <LampCirclePicker value={temperature} innerRingRadius={80} onTouchEnd={handleEnd} />;
};
// Advanced usage
import { LampCirclePicker } from '@ray-js/components-ty-lamp';
export default () => {
const [temperature, setTemperature] = useState(20);
const handleMove = (v: number) => {
setTemperature(v);
};
const handleEnd = (v: number) => {
setTemperature(v);
};
return (
<LampCirclePicker
value={temperature}
innerRingRadius={80}
// custom color(optional)
colorList={[
{ offset: 0, color: '#ff0000' },
{ offset: 0.5, color: '#00ff00' },
{ offset: 1, color: '#0000ff' },
]}
style={{
background: '#222',
}}
innerBorderStyle={{
width: 2,
color: 'pink',
}}
descText="temp"
descStyle={{
color: 'red',
}}
titleStyle={{
color: 'blue',
}}
useEventChannel
onTouchMove={handleMove}
onTouchEnd={handleEnd}
/>
);
};
// Turns on the use event channel property, which can be used in other rjs components
Render({
// other xxx
renderChannel() {
const eventChannelName = 'lampCirclePickerEventChannel';
this.instance.eventChannel.on(eventChannelName, e => {
// Here you can receive the color data that is passed when the color changes
const {
data, // temp
touchType, // : 'start' | 'move' | 'end'
pos,
} = e;
console.log('eventChannel get', e);
});
},
});
1.0.9
10 months ago
1.0.9-beta-1
10 months ago
1.0.7
1 year ago
1.0.8-beta-2
11 months ago
1.0.8-beta-1
12 months ago
1.0.7-beta-1
1 year ago
1.0.6
1 year ago
1.0.6-beta-1
1 year ago
1.0.5-beta-2
1 year ago
1.0.5-beta-1
1 year ago
1.0.4
1 year ago
1.0.3-beta-1
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.2-beta-1
2 years ago
1.0.1-beta-1
2 years ago
1.0.0
3 years ago
1.1.1
3 years ago