@ray-js/lamp-style-slider 0.0.3-beta-1 → 0.0.3-beta-3

package/lib/index.js

@@ -6,6 +6,7 @@ import "core-js/modules/es.array.slice.js";
 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 { toStyle } from '@ray-js/components-ty-slider';
 import { useDebounceFn, useThrottleFn } from 'ahooks';
 import { formatPercent } from './utils';
 import styles from './index.module.less';
@@ -147,25 +148,25 @@ function OpacitySlider(props) {
       onTouchEnd && onTouchEnd(detail.end + min);
       endRefValue.current = detail.end + min;
     },
-    trackStyle: _objectSpread(_objectSpread({
+    trackStyle: toStyle(_objectSpread(_objectSpread({
       width: '646rpx',
       height: '56rpx',
       position: 'relative',
       borderRadius: '28rpx'
     }, trackStyle), {}, {
       background: trackBackgroundColor
-    }),
-    barStyle: {
+    })),
+    barStyle: toStyle({
       background: 'transparent'
-    },
-    thumbEndStyle: _objectSpread({
+    }),
+    thumbEndStyle: toStyle(_objectSpread({
       width: '62rpx',
       height: '62rpx',
       border: '8rpx solid #fff',
       borderRadius: '50%',
       boxShadow: 'rgb(255 255 255 / 10%) 0px 0px 1px',
       background: "".concat(disable ? '#000' : 'transparent')
-    }, thumbStyle)
+    }, thumbStyle))
   })));
 }
 OpacitySlider.defaultProps = defaultProps;

package/package.json

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

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

@@ -1,176 +0,0 @@
-/* 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 Right slider initial value/one-way slider initial value
-   * @description.zh 右滑块初始值/单向滑条初始值
-   * @default 30
-   */
-  end?: number;
-  /**
-   * @description.en min
-   * @description.zh 最小值, 建议用 endMin 代替
-   * @default 0
-   */
-  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 滑块样式
-   */
-  thumbStyle?: 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 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 回调
-   */
-  'bind:onChange'?: (event: EventType<'onChange'>) => void;
-  /**
-   * @description.en callback
-   * @description.zh 回调
-   */
-  'bind:onEnd'?: (event: EventType<'onEnd'>) => void;
-  /**
-   * @description.en callback
-   * @description.zh 回调
-   */
-  'bind:onStart'?: (event: EventType<'onStart'>) => 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>>;
-  /**
-   * @description.en hideBarOnFirstRender
-   * @description.zh 首次渲染时隐藏bar
-   */
-  hideBarOnFirstRender?: boolean;
-  /**
-   * @description.en hotAreaStyle
-   * @description.zh 点击热区样式
-   */
-  hotAreaStyle?: React.CSSProperties;
-}
-
-const SjsSlider: React.FC<SjsSliderProps>;
-
-export default SjsSlider;

package/lib/components/slider/index.js

@@ -1,188 +0,0 @@
-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
-    },
-    // 左滑块初始值
-    start: {
-      type: Number
-    },
-    // 左滑块最小值限制
-    startMin: {
-      type: Number
-    },
-    // 左滑块最大值限制
-    startMax: {
-      type: Number
-    },
-    // 右滑块初始值/单向滑条初始值
-    end: {
-      type: Number
-    },
-    watchStart: {
-      type: Number
-    },
-    watchEnd: {
-      type: Number
-    },
-    // 右滑块最小值/单向滑条最小值
-    endMin: {
-      type: Number
-    },
-    // 右滑块最大值/单向滑条最大值
-    endMax: {
-      type: Number
-    },
-    // 最小值
-    min: {
-      type: Number,
-      value: 0
-    },
-    // 最大值
-    max: {
-      type: Number,
-      value: 100
-    },
-    // 阶段值
-    step: {
-      type: Number,
-      value: 1
-    },
-    // 阶段值
-    forceStep: {
-      type: Number
-    },
-    // 滑块样式
-    thumbStyle: {
-      type: String
-    },
-    // 轨道样式
-    trackStyle: {
-      type: String
-    },
-    // 滑条样式
-    barStyle: {
-      type: String
-    },
-    // step样式
-    stepStyle: {
-      type: String
-    },
-    // step样式
-    activeStepStyle: {
-      type: String
-    },
-    // 方向 "horizontal" | "vertical"
-    direction: {
-      type: String
-    },
-    // 隐藏滑块
-    hideThumb: {
-      type: Boolean,
-      value: false
-    },
-    // 显示阶段提示
-    showSteps: {
-      type: Boolean,
-      value: false
-    },
-    // 反转
-    reverse: {
-      type: Boolean,
-      value: false
-    },
-    // 使用触摸跳跃
-    enableTouch: {
-      type: Boolean,
-      value: true
-    },
-    // 使用触摸bar增加偏移
-    enableTouchBar: {
-      type: Boolean,
-      value: false
-    },
-    // 唯一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
-    },
-    // 首次渲染时隐藏bar
-    hideBarOnFirstRender: {
-      type: Boolean,
-      value: false
-    },
-    // 点击热区样式
-    hotAreaStyle: {
-      type: String
-    }
-  },
-  data: {
-    steps: [],
-    text: ''
-  },
-  lifetimes: {
-    /**
-     * 组件的方法列表
-     */
-    ready: function ready() {
-      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 setText(_ref) {
-      var instanceId = _ref.instanceId,
-        content = _ref.content;
-      if (!this.data.showText) return;
-      if (instanceId !== this.data.instanceId) return;
-      this.setData({
-        text: content
-      });
-    }
-  }
-});

package/lib/components/slider/index.json

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

package/lib/components/slider/index.less

@@ -1,184 +0,0 @@
-.rayui-slider {
-  --slider-height: 10px;
-  --slider-top-position: 2.5px;
-  --range-width: 20px;
-  --range-left-position: 20px;
-  --thumb-height: 24px;
-  --thumb-width: 24px;
-  --thumb-left-position: 30px;
-  --thumb-active-color: #ffffff;
-
-  border-radius: 5px;
-  background: #e0e0e0;
-  height: var(--slider-height);
-  margin: var(--slider-top-position);
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  &-steps {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &-dot {
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
-      background-color: #328eff;
-      &:first-child {
-        opacity: 0;
-      }
-      &:last-child {
-        opacity: 0;
-      }
-    }
-  }
-
-  &-bar {
-    display: none;
-    position: absolute;
-    width: var(--range-width);
-    height: var(--slider-height);
-    background: #328eff;
-    cursor: pointer;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    flex-shrink: 0;
-    will-change: width;
-    overflow: hidden;
-    .rayui-slider-steps-dot {
-      background-color: rgba(51, 255, 241, 0.75);
-    }
-    &-text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: inline-block;
-      font-size: 12px;
-      color: #fff;
-      white-space: nowrap;
-    }
-
-    &-steps_wrap {
-      position: absolute;
-      pointer-events: none;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-thumb {
-    position: absolute;
-    will-change: left;
-    display: none;
-
-    &-start {
-      top: 50%;
-      transform: translateY(-50%);
-      display: none;
-      &-render {
-        width: var(--thumb-width);
-        height: var(--thumb-height);
-        border-radius: 50%;
-        background: var(--thumb-active-color);
-        cursor: pointer;
-        box-shadow: rgb(0 0 0 / 12%) 0px 0.5px 4px, rgb(0 0 0 / 12%) 0px 6px 13px;
-      }
-    }
-    &-end {
-      top: 50%;
-      transform: translateY(-50%);
-      display: none;
-      &-render {
-        width: var(--thumb-width);
-        height: var(--thumb-height);
-        border-radius: 50%;
-        background: var(--thumb-active-color);
-        cursor: pointer;
-        box-shadow: rgb(0 0 0 / 12%) 0px 0.5px 4px, rgb(0 0 0 / 12%) 0px 6px 13px;
-      }
-    }
-  }
-
-  &.reverse {
-    .rayui-slider {
-      &-bar {
-        right: 0;
-        left: auto;
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-      }
-    }
-  }
-
-  &.vertical {
-    --slider-width: 300px;
-    width: var(--slider-height);
-    height: var(--slider-width);
-    align-items: flex-start;
-    justify-content: center;
-
-    .rayui-slider {
-      &-steps {
-        height: 100%;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        flex-direction: column;
-        align-items: center;
-      }
-      &-bar {
-        height: var(--range-width);
-        width: var(--slider-height);
-        top: calc(var(--range-left-position) + var(--thumb-width) / 2);
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        transform: translateX(-50%);
-        left: 50%;
-        will-change: height;
-      }
-      &-thumb {
-        will-change: top;
-        &-start {
-          left: 50%;
-          transform: translateX(-50%);
-        }
-        &-end {
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-
-  &.vertical.reverse {
-    .rayui-slider {
-      &-bar {
-        top: auto;
-        bottom: 0;
-      }
-    }
-  }
-
-  &.disabled {
-    pointer-events: none;
-  }
-}
-
-.rayui-slider_wrap {
-  padding: 20rpx 0;
-
-  &.vertical {
-    padding: 0 20rpx;
-    display: inline-block;
-  }
-}