@ray-js/lamp-style-slider 0.0.2-beta-1

package/README.md

@@ -0,0 +1,96 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/lamp-style-slider
+
+[![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)
+
+> 照明样式的基础滑动条
+
+## Installation
+
+```sh
+$ npm install @ray-js/lamp-style-slider
+# or
+$ 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,
+};
+```
+
+```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);
+      }}
+    />
+  );
+};
+```

package/lib/components/slider/index.d.ts

@@ -0,0 +1,231 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+
+export interface EventType<T> {
+  type: T;
+  timeStamp: number;
+  target: any;
+  currentTarget: any;
+  detail: SjsSliderEventData;
+}
+
+export interface SjsSliderEventData {
+  start: number;
+  end: number;
+  range: number;
+  position: 'start' | 'end';
+}
+
+export interface SjsSliderProps {
+  /**
+   * @description.en instanceId
+   * @description.zh 唯一ID
+   */
+  instanceId: string;
+  /**
+   * @description.en className
+   * @description.zh 样式
+   */
+  className?: string;
+  /**
+   * @description.en disable
+   * @description.zh disable
+   * @default false
+   */
+  disable?: boolean;
+  /**
+   * @description.en closed
+   * @description.zh closed
+   * @default false
+   */
+  closed?: boolean;
+  /**
+   * @description.en left value
+   * @description.zh 左滑块初始值
+   * @default 0
+   */
+  start?: number;
+  /**
+   * @description.en watch value and change
+   * @description.zh 监听值，并随之变化
+   */
+  watchStart?: number;
+  /**
+   * @description.en left value min
+   * @description.zh 左滑块最小值限制
+   */
+  startMin?: number;
+  /**
+   * @description.en left value max
+   * @description.zh 左滑块最大值限制
+   */
+  startMax?: number;
+  /**
+   * @description.en Right slider initial value/one-way slider initial value
+   * @description.zh 右滑块初始值/单向滑条初始值
+   * @default 30
+   */
+  end?: number;
+  /**
+   * @description.en watch value and change
+   * @description.zh 监听值，并随之变化
+   */
+  watchEnd?: number;
+  /**
+   * @description.en Right slider min/one-way slider min
+   * @description.zh 右滑块最小值/单向滑条最小值
+   */
+  endMin?: number;
+  /**
+   * @description.en Right slider Max/one-way slider Max
+   * @description.zh 右滑块最大值/单向滑条最大值
+   */
+  endMax?: number;
+  /**
+   * @description.en min
+   * @description.zh 最小值, 建议用 endMin 代替
+   * @default 0
+   * @deprecated
+   */
+  min?: number;
+  /**
+   * @description.en max
+   * @description.zh 最大值
+   * @default 100
+   */
+  max?: number;
+  /**
+   * @description.en step
+   * @description.zh 阶段值
+   * @default 1
+   */
+  step?: number;
+  /**
+   * @description.en step
+   * @description.zh 阶段值
+   */
+  forceStep?: number;
+  /**
+   * @description.en thumbStyle
+   * @description.zh 滑块样式
+   */
+  thumbStartStyle?: React.CSSProperties;
+  /**
+   * @description.en thumbStyle
+   * @description.zh 滑块样式
+   */
+  thumbEndStyle?: React.CSSProperties;
+  /**
+   * @description.en trackStyle
+   * @description.zh 轨道样式
+   */
+  trackStyle?: React.CSSProperties;
+  /**
+   * @description.en barStyle
+   * @description.zh 滑条样式
+   */
+  barStyle?: React.CSSProperties;
+  /**
+   * @description.en stepStyle
+   * @description.zh step样式
+   */
+  stepStyle?: React.CSSProperties;
+  /**
+   * @description.en bar stepStyle
+   * @description.zh bar step样式
+   */
+  activeStepStyle?: React.CSSProperties;
+  /**
+   * @description.en mode
+   * @description.zh 单向还是双向
+   * @default normal
+   */
+  mode?: 'range' | 'normal';
+  /**
+   * @description.en barPad
+   * @description.zh 控制滑动bar的偏移量，用于样式微调
+   */
+  barPad?: number;
+  /**
+   * @description.en maxRangeOffset
+   * @description.zh 按钮对齐偏移
+   * @default null
+   */
+  maxRangeOffset?: number;
+  /**
+   * @description.en hideThumb
+   * @description.zh 隐藏滑块
+   * @default false
+   */
+  hideThumb?: boolean;
+  /**
+   * @description.en showSteps
+   * @description.zh 显示阶段提示
+   * @default false
+   */
+  showSteps?: boolean;
+  /**
+   * @description.en direction
+   * @description.zh 方向
+   * @default horizontal
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * @description.en callback
+   * @description.zh 回调
+   */
+  bindmove?: (event: EventType<'move'>) => void;
+  /**
+   * @description.en callback
+   * @description.zh 回调
+   */
+  bindend?: (event: EventType<'end'>) => void;
+  /**
+   * @description.en callback
+   * @description.zh 回调
+   */
+  bindstart?: (event: EventType<'start'>) => void;
+  /**
+   * @description.en reverse
+   * @description.zh 是否反转
+   * @default false
+   */
+  reverse?: boolean;
+  /**
+   * @description.en enableTouch
+   * @description.zh 使用触摸跳跃
+   * @default false
+   */
+  enableTouch?: boolean;
+  /**
+   * @description.en enableTouchBar
+   * @description.zh 使用触摸bar增加偏移
+   * @default false
+   */
+  enableTouchBar?: boolean;
+  /**
+   * @description.en showText
+   * @description.zh 在bar上显示文本
+   * @default false
+   */
+  showText?: boolean;
+  /**
+   * @description.en textStyle
+   * @description.zh bar文本样式
+   */
+  textStyle?: React.CSSProperties;
+  /**
+   * @description.en textTemplate
+   * @description.zh 文本格式化，例如 textTemplate="比率 {{text}} %"
+   */
+  textTemplate?: string;
+  /**
+   * @description.en calc style, such as { background: "rgba(0,0,0, {{text / 100 }}" }
+   * @description.zh 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text /100 }})" }
+   */
+  thumbStyleCalc?: Partial<Record<keyof React.CSSProperties, string>>;
+}
+
+const SjsSlider: React.FC<SjsSliderProps>;
+
+export default SjsSlider;

package/lib/components/slider/index.js

@@ -0,0 +1,211 @@
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.fill.js";
+import "core-js/modules/es.parse-int.js";
+/* eslint-disable func-names */
+/* eslint-disable vars-on-top */
+import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.regexp.test.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.array.fill.js';
+import 'core-js/modules/es.parse-int.js';
+// eslint-disable-next-line no-undef
+Component({
+  options: {
+    addGlobalClass: true
+  },
+  properties: {
+    className: {
+      type: String,
+      value: ''
+    },
+    disable: {
+      type: Boolean,
+      value: false
+    },
+    closed: {
+      type: Boolean,
+      value: false
+    },
+    // 左滑块初始值
+    start: {
+      type: Number,
+      value: 0
+    },
+    // 左滑块最小值限制
+    startMin: {
+      type: Number
+    },
+    // 左滑块最大值限制
+    startMax: {
+      type: Number
+    },
+    // 右滑块初始值/单向滑条初始值
+    end: {
+      type: Number,
+      value: 30
+    },
+    watchStart: {
+      type: Number
+    },
+    watchEnd: {
+      type: Number
+    },
+    // 右滑块最小值/单向滑条最小值
+    endMin: {
+      type: Number
+    },
+    // 右滑块最大值/单向滑条最大值
+    endMax: {
+      type: Number
+    },
+    // 最小值
+    min: {
+      type: Number,
+      value: 0
+    },
+    // 最大值
+    max: {
+      type: Number,
+      value: 1000
+    },
+    // 阶段值
+    step: {
+      type: Number,
+      value: 1
+    },
+    // 阶段值
+    forceStep: {
+      type: Number
+    },
+    // 滑块样式
+    thumbStartStyle: {
+      type: String
+    },
+    // 滑块样式
+    thumbEndStyle: {
+      type: String
+    },
+    // 轨道样式
+    trackStyle: {
+      type: String
+    },
+    // 滑条样式
+    barStyle: {
+      type: String
+    },
+    // step样式
+    stepStyle: {
+      type: String
+    },
+    // step样式
+    activeStepStyle: {
+      type: String
+    },
+    // 单向还是双向 range: 双向，normal: 单向
+    mode: {
+      type: String
+    },
+    // 方向 "horizontal" | "vertical"
+    direction: {
+      type: String
+    },
+    // 控制滑动bar的偏移量，用于样式微调
+    barPad: {
+      type: Number
+    },
+    // 隐藏滑块
+    hideThumb: {
+      type: Boolean,
+      value: false
+    },
+    // 显示阶段提示
+    showSteps: {
+      type: Boolean,
+      value: false
+    },
+    // 反转
+    reverse: {
+      type: Boolean,
+      value: false
+    },
+    // 使用触摸跳跃
+    enableTouch: {
+      type: Boolean,
+      value: false
+    },
+    // 使用触摸bar增加偏移
+    enableTouchBar: {
+      type: Boolean,
+      value: false
+    },
+    // 使用触摸跳跃
+    maxRangeOffset: {
+      type: Number,
+      value: 0
+    },
+    // 唯一ID
+    instanceId: {
+      type: String
+    },
+    // 在bar上显示文本
+    showText: {
+      type: Boolean
+    },
+    // bar文本样式
+    textStyle: {
+      type: String
+    },
+    // 文本格式化，例如 textTemplate="比率 {{text}} %"
+    textTemplate: {
+      type: String
+    },
+    // 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text}}/100)" }
+    thumbStyleCalc: {
+      type: Object
+    }
+  },
+  data: {
+    steps: [],
+    text: ''
+  },
+  lifetimes: {
+    /**
+     * 组件的方法列表
+     */
+    ready: function () {
+      var isNumber = function (n) {
+        return /\d+/.test(n);
+      };
+      var getNumber = function (n, def) {
+        return isNumber(n) ? n : def;
+      };
+      if (!this.data.showSteps) return;
+      var stepCount = this.data.step || this.data.forceStep;
+      var max = getNumber(this.data.max, 100);
+      var min = getNumber(this.data.min, 0);
+      var steps = new Array(parseInt(String((max - min) / stepCount), 10)).fill(0).map(function (_, i) {
+        return i;
+      }).concat(-1);
+      this.setData({
+        steps: steps
+      });
+    }
+  },
+  methods: {
+    setText: function (_ref) {
+      var instanceId = _ref.instanceId;
+      var content = _ref.content;
+      if (!this.data.showText) return;
+      if (instanceId !== this.data.instanceId) return;
+      this.setData({
+        text: content
+      });
+    }
+  }
+});

package/lib/components/slider/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}