plain-design 1.0.0-beta.146 → 1.0.0-beta.147

package/src/packages/components/Slider/slider.utils.tsx

@@ -1,71 +1,71 @@
-import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps} from "../../uses/useStyle";
-import {ComponentEvent, createHooks, createSyncHooks, ExtractPropTypes, PropType, RenderNode} from "@peryl/react-compose";
-
-export const SliderPropsOption = {
-  ...EditProps,
-  ...StyleProps,
-
-  modelValue: { type: Number, default: 0 },                     // 非范围选择时，双向绑定值
-  start: { type: Number, default: 0 },                          // 范围选择时，起始绑定值
-  end: { type: Number, default: 0 },                            // 范围选择时，末尾绑定值
-  total: { type: Number, default: 100 },                        // 总数，value,start以及end不应该超过total
-  alignEnd: { type: Boolean },                                  // 是否末尾对其
-  full: { type: Boolean },                                      // 是否占满父元素大小
-  width: { type: [Number, String], default: '156px' },          // 滑动条长度
-  size: { type: [Number, String], default: '2px' },             // 滑动条宽度
-  vertical: { type: Boolean },                                  // 是否纵向
-  step: { type: Number },                                       // 滑条分块的个数，默认是不分块
-  min: { type: Number },                                        // 最小值
-  max: { type: Number },                                        // 最大值
-  integer: { type: Boolean, default: true },                    // 整数
-  emitImmediate: { type: Boolean },                             // 实时更新绑定值，否则默认会拖拽结束之后才会更新绑定值
-
-  // showSteps: { type: Boolean, default: true },               // 是否显示步骤点
-  tooltip: { type: Boolean, default: true },                    // 是否tooltip显示值
-  tooltipFormatter: Function as PropType<(val: number) => string | undefined>,// tooltip显示格式化函数
-  range: { type: Boolean },                                     // 是否为范围选择
-};
-
-export type iSliderPropsType = ExtractPropTypes<typeof SliderPropsOption>
-
-export const SliderEmitsOption = {
-  onUpdateModelValue: (val: number | undefined) => true,
-  onUpdateStart: (val: number | undefined) => true,
-  onUpdateEnd: (val: number | undefined) => true,
-};
-
-export type iSliderEventType = ComponentEvent<typeof SliderEmitsOption>
-
-export const createSliderHooks = () => {
-  return {
-    onClasses: createSyncHooks<(classList: any[]) => void>(),
-    onRender: createSyncHooks<(meta: { seq: number, render: () => RenderNode, key: string }[]) => void>(true),
-    onCheckValue: createSyncHooks<(value: number) => void>(),
-    onDragend: createHooks<() => void>(),
-  };
-};
-
-export type iSliderHooks = ReturnType<typeof createSliderHooks>
-
-export type iSliderPublicParams = {
-  props: iSliderPropsType,
-  event: iSliderEventType,
-  hooks: iSliderHooks,
-  totalLength: { value: number },
-  utils: iSliderUtils,
-  editComputed: tEditComputed,
-}
-
-export const createSliderUtils = ({ props, hooks }: { props: iSliderPropsType, hooks: iSliderHooks, }) => {
-  return {
-    checkValue: (newValue: number) => {
-      newValue = hooks.onCheckValue.exec(newValue);
-      if (props.max != null && newValue > props.max) {newValue = props.max;}
-      if (props.min != null && newValue < props.min) {newValue = props.min;}
-      return newValue;
-    },
-  };
-};
-
-export type iSliderUtils = ReturnType<typeof createSliderUtils>
+import {EditProps, tEditComputed} from "../../uses/useEdit";
+import {StyleProps} from "../../uses/useStyle";
+import {ComponentEvent, createHooks, createSyncHooks, ExtractPropTypes, PropType, RenderNode} from "@peryl/react-compose";
+
+export const SliderPropsOption = {
+  ...EditProps,
+  ...StyleProps,
+
+  modelValue: { type: Number, default: 0 },                     // 非范围选择时，双向绑定值
+  start: { type: Number, default: 0 },                          // 范围选择时，起始绑定值
+  end: { type: Number, default: 0 },                            // 范围选择时，末尾绑定值
+  total: { type: Number, default: 100 },                        // 总数，value,start以及end不应该超过total
+  alignEnd: { type: Boolean },                                  // 是否末尾对其
+  full: { type: Boolean },                                      // 是否占满父元素大小
+  width: { type: [Number, String], default: '156px' },          // 滑动条长度
+  size: { type: [Number, String], default: '2px' },             // 滑动条宽度
+  vertical: { type: Boolean },                                  // 是否纵向
+  step: { type: Number },                                       // 滑条分块的个数，默认是不分块
+  min: { type: Number },                                        // 最小值
+  max: { type: Number },                                        // 最大值
+  integer: { type: Boolean, default: true },                    // 整数
+  emitImmediate: { type: Boolean },                             // 实时更新绑定值，否则默认会拖拽结束之后才会更新绑定值
+
+  // showSteps: { type: Boolean, default: true },               // 是否显示步骤点
+  tooltip: { type: Boolean, default: true },                    // 是否tooltip显示值
+  tooltipFormatter: Function as PropType<(val: number) => string | undefined>,// tooltip显示格式化函数
+  range: { type: Boolean },                                     // 是否为范围选择
+};
+
+export type iSliderPropsType = ExtractPropTypes<typeof SliderPropsOption>
+
+export const SliderEmitsOption = {
+  onUpdateModelValue: (val: number | undefined) => true,
+  onUpdateStart: (val: number | undefined) => true,
+  onUpdateEnd: (val: number | undefined) => true,
+};
+
+export type iSliderEventType = ComponentEvent<typeof SliderEmitsOption>
+
+export const createSliderHooks = () => {
+  return {
+    onClasses: createSyncHooks<(classList: any[]) => void>(),
+    onRender: createSyncHooks<(meta: { seq: number, render: () => RenderNode, key: string }[]) => void>(true),
+    onCheckValue: createSyncHooks<(value: number) => void>(),
+    onDragend: createHooks<() => void>(),
+  };
+};
+
+export type iSliderHooks = ReturnType<typeof createSliderHooks>
+
+export type iSliderPublicParams = {
+  props: iSliderPropsType,
+  event: iSliderEventType,
+  hooks: iSliderHooks,
+  totalLength: { value: number },
+  utils: iSliderUtils,
+  editComputed: tEditComputed,
+}
+
+export const createSliderUtils = ({ props, hooks }: { props: iSliderPropsType, hooks: iSliderHooks, }) => {
+  return {
+    checkValue: (newValue: number) => {
+      newValue = hooks.onCheckValue.exec(newValue);
+      if (props.max != null && newValue > props.max) {newValue = props.max;}
+      if (props.min != null && newValue < props.min) {newValue = props.min;}
+      return newValue;
+    },
+  };
+};
+
+export type iSliderUtils = ReturnType<typeof createSliderUtils>

package/src/packages/components/Slider/useSlider.range.tsx

@@ -1,211 +1,211 @@
-import {iSliderPublicParams} from "./slider.utils";
-import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
-import {unit} from "@peryl/utils/unit";
-import {useSliderDotDraggier} from "./useSliderDotDragier";
-
-export function useSliderRange(
-  {
-    props,
-    event,
-    hooks,
-    totalLength,
-    editComputed,
-    utils,
-  }: iSliderPublicParams) {
-
-  const { effects, effectComputed } = createEffectsOfReaction();
-
-  /**
-   * 创建指示器管理对象
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  function createDotManager(type: 'start' | 'end') {
-    const model = type === "start" ?
-      useModel(() => props.start, event.emit.onUpdateStart, { autoEmit: props.emitImmediate }, effects) :
-      useModel(() => props.end, event.emit.onUpdateEnd, { autoEmit: props.emitImmediate }, effects);
-    /**
-     * 当前指示器位置百分比
-     * @author  韦胜健
-     * @date    2022.12.10 15:44
-     */
-    const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
-
-    /**
-     * 指示器行内样式
-     * @author  韦胜健
-     * @date    2022.12.10 15:44
-     */
-    const dotStyles = useStyles(styles => {
-      styles.width = unit(props.size);
-      styles.height = unit(props.size);
-      let length = Number(percent.value) * totalLength.value;
-      if (type === "start") {
-        const endLength = Number(end.percent.value) * totalLength.value;
-        if (length > endLength - 8) {
-          length = endLength - 8;
-        }
-      }
-      if (length < 0) {length = 0;}
-      if (!props.vertical) {
-        styles.transform = `translateX(${length}px)`;
-      } else {
-        styles.transform = `translateY(${length}px)`;
-      }
-    }, effects);
-
-    /**
-     * 指示器tooltip显示文本
-     * @author  韦胜健
-     * @date    2022.12.10 15:44
-     */
-    const tooltipLabel = effectComputed(() => {
-      let ret = model.value;
-      return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
-    });
-
-    /**
-     * 指示器拖拽处理对象
-     * @author  韦胜健
-     * @date    2022.12.10 15:44
-     */
-    const dotDraggier = useSliderDotDraggier(
-      hooks,
-      () => Number(percent.value),
-      ({ durY, durX, state: percent }) => {
-        const durValue = !props.vertical ? durX : durY;
-        const newPercent = Math.max(0, Math.min(1, percent + (durValue / totalLength.value)));
-        let newValue = Number((newPercent * props.total).toFixed(props.integer ? 0 : 2));
-        model.value = utils.checkValue(newValue);
-      }
-    );
-    return {
-      model,
-      percent,
-      dotStyles,
-      tooltipLabel,
-      dotDraggier,
-    };
-  }
-
-  /**
-   * 开始指示器
-   * @author  韦胜健
-   * @date    2022.12.10 15:44
-   */
-  const start = createDotManager('start');
-  /**
-   * 结束指示器
-   * @author  韦胜健
-   * @date    2022.12.10 15:44
-   */
-  const end = createDotManager('end');
-
-  /**
-   * progress样式
-   * @author  韦胜健
-   * @date    2022.12.10 15:44
-   */
-  const progressStyles = useStyles((styles) => {
-    if (!totalLength.value) {return;}
-    let percentValue = end.percent.value - start.percent.value;
-    if (percentValue === 1) {
-      /*当没有缩放或者缩放为1时，奇怪的是progress会缩小一点，这里让其不能等于1*/
-      percentValue = 0.99;
-    }
-    if (!props.vertical) {
-      styles.transform = `translateX(${start.percent.value * totalLength.value}px) scaleX(${percentValue})`;
-      styles.transformOrigin = props.alignEnd ? 'right' : 'left';
-    } else {
-      styles.transform = `translateY(${start.percent.value * totalLength.value}px) scaleY(${percentValue})`;
-      styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
-    }
-  }, effects);
-
-  /**
-   * 拖拽的时候一直显示tooltip
-   * @author  韦胜健
-   * @date    2022.12.10 15:45
-   */
-  effects.push(hooks.onClasses.use(classList => {
-    if (start.dotDraggier.isDragging.value || end.dotDraggier.isDragging.value) {
-      classList.push('slider-dragging');
-    }
-  }));
-
-  /**
-   * 拖拽结束的时候处理emitImmediate
-   * @author  韦胜健
-   * @date    2022.12.10 15:45
-   */
-  effects.push(hooks.onDragend.use(() => {
-    if (!props.emitImmediate) {
-      if (props.start !== start.model.value) {
-        event.emit.onUpdateStart(start.model.value);
-      }
-      if (props.end !== end.model.value) {
-        event.emit.onUpdateEnd(end.model.value);
-      }
-    }
-  }));
-
-  /**
-   * 放置start的值超过end的值
-   * @author  韦胜健
-   * @date    2022.12.10 15:45
-   */
-  effects.push(hooks.onCheckValue.use((newValue) => {
-    if (start.dotDraggier.isDragging.value) {
-      if (end.model.value != null && newValue > end.model.value) {
-        newValue = end.model.value;
-      }
-    } else if (end.dotDraggier.isDragging.value) {
-      if (start.model.value != null && newValue < start.model.value) {
-        newValue = start.model.value;
-      }
-    }
-    return newValue;
-  }));
-
-  /**
-   * 渲染progress
-   * @author  韦胜健
-   * @date    2022.12.10 15:46
-   */
-  effects.push(hooks.onRender.use(list => {
-    list.push({
-      seq: 1,
-      key: 'progress',
-      render: () => (
-        <div className="slider-progress" style={progressStyles.value}/>
-      )
-    });
-  }));
-
-  /**
-   * 渲染开始结束指示器
-   * @author  韦胜健
-   * @date    2022.12.10 15:46
-   */
-  effects.push(hooks.onRender.use(list => {
-    list.push({
-      seq: 2,
-      key: 'dot',
-      render: () => (
-        <div className="slider-dot-wrapper">
-          <div className="slider-dot" style={start.dotStyles.value}>
-            {!!props.tooltip && <span className="slider-dot-tooltip">{start.tooltipLabel.value}</span>}
-            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? start.dotDraggier.onMousedown : undefined}/>
-          </div>
-          <div className="slider-dot" style={end.dotStyles.value}>
-            {!!props.tooltip && <span className="slider-dot-tooltip">{end.tooltipLabel.value}</span>}
-            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? end.dotDraggier.onMousedown : undefined}/>
-          </div>
-        </div>
-      )
-    });
-  }));
-
-  return effects.clear;
-
-}
+import {iSliderPublicParams} from "./slider.utils";
+import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {useSliderDotDraggier} from "./useSliderDotDragier";
+
+export function useSliderRange(
+  {
+    props,
+    event,
+    hooks,
+    totalLength,
+    editComputed,
+    utils,
+  }: iSliderPublicParams) {
+
+  const { effects, effectComputed } = createEffectsOfReaction();
+
+  /**
+   * 创建指示器管理对象
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  function createDotManager(type: 'start' | 'end') {
+    const model = type === "start" ?
+      useModel(() => props.start, event.emit.onUpdateStart, { autoEmit: props.emitImmediate }, effects) :
+      useModel(() => props.end, event.emit.onUpdateEnd, { autoEmit: props.emitImmediate }, effects);
+    /**
+     * 当前指示器位置百分比
+     * @author  韦胜健
+     * @date    2022.12.10 15:44
+     */
+    const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
+
+    /**
+     * 指示器行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 15:44
+     */
+    const dotStyles = useStyles(styles => {
+      styles.width = unit(props.size);
+      styles.height = unit(props.size);
+      let length = Number(percent.value) * totalLength.value;
+      if (type === "start") {
+        const endLength = Number(end.percent.value) * totalLength.value;
+        if (length > endLength - 8) {
+          length = endLength - 8;
+        }
+      }
+      if (length < 0) {length = 0;}
+      if (!props.vertical) {
+        styles.transform = `translateX(${length}px)`;
+      } else {
+        styles.transform = `translateY(${length}px)`;
+      }
+    }, effects);
+
+    /**
+     * 指示器tooltip显示文本
+     * @author  韦胜健
+     * @date    2022.12.10 15:44
+     */
+    const tooltipLabel = effectComputed(() => {
+      let ret = model.value;
+      return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
+    });
+
+    /**
+     * 指示器拖拽处理对象
+     * @author  韦胜健
+     * @date    2022.12.10 15:44
+     */
+    const dotDraggier = useSliderDotDraggier(
+      hooks,
+      () => Number(percent.value),
+      ({ durY, durX, state: percent }) => {
+        const durValue = !props.vertical ? durX : durY;
+        const newPercent = Math.max(0, Math.min(1, percent + (durValue / totalLength.value)));
+        let newValue = Number((newPercent * props.total).toFixed(props.integer ? 0 : 2));
+        model.value = utils.checkValue(newValue);
+      }
+    );
+    return {
+      model,
+      percent,
+      dotStyles,
+      tooltipLabel,
+      dotDraggier,
+    };
+  }
+
+  /**
+   * 开始指示器
+   * @author  韦胜健
+   * @date    2022.12.10 15:44
+   */
+  const start = createDotManager('start');
+  /**
+   * 结束指示器
+   * @author  韦胜健
+   * @date    2022.12.10 15:44
+   */
+  const end = createDotManager('end');
+
+  /**
+   * progress样式
+   * @author  韦胜健
+   * @date    2022.12.10 15:44
+   */
+  const progressStyles = useStyles((styles) => {
+    if (!totalLength.value) {return;}
+    let percentValue = end.percent.value - start.percent.value;
+    if (percentValue === 1) {
+      /*当没有缩放或者缩放为1时，奇怪的是progress会缩小一点，这里让其不能等于1*/
+      percentValue = 0.99;
+    }
+    if (!props.vertical) {
+      styles.transform = `translateX(${start.percent.value * totalLength.value}px) scaleX(${percentValue})`;
+      styles.transformOrigin = props.alignEnd ? 'right' : 'left';
+    } else {
+      styles.transform = `translateY(${start.percent.value * totalLength.value}px) scaleY(${percentValue})`;
+      styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
+    }
+  }, effects);
+
+  /**
+   * 拖拽的时候一直显示tooltip
+   * @author  韦胜健
+   * @date    2022.12.10 15:45
+   */
+  effects.push(hooks.onClasses.use(classList => {
+    if (start.dotDraggier.isDragging.value || end.dotDraggier.isDragging.value) {
+      classList.push('slider-dragging');
+    }
+  }));
+
+  /**
+   * 拖拽结束的时候处理emitImmediate
+   * @author  韦胜健
+   * @date    2022.12.10 15:45
+   */
+  effects.push(hooks.onDragend.use(() => {
+    if (!props.emitImmediate) {
+      if (props.start !== start.model.value) {
+        event.emit.onUpdateStart(start.model.value);
+      }
+      if (props.end !== end.model.value) {
+        event.emit.onUpdateEnd(end.model.value);
+      }
+    }
+  }));
+
+  /**
+   * 放置start的值超过end的值
+   * @author  韦胜健
+   * @date    2022.12.10 15:45
+   */
+  effects.push(hooks.onCheckValue.use((newValue) => {
+    if (start.dotDraggier.isDragging.value) {
+      if (end.model.value != null && newValue > end.model.value) {
+        newValue = end.model.value;
+      }
+    } else if (end.dotDraggier.isDragging.value) {
+      if (start.model.value != null && newValue < start.model.value) {
+        newValue = start.model.value;
+      }
+    }
+    return newValue;
+  }));
+
+  /**
+   * 渲染progress
+   * @author  韦胜健
+   * @date    2022.12.10 15:46
+   */
+  effects.push(hooks.onRender.use(list => {
+    list.push({
+      seq: 1,
+      key: 'progress',
+      render: () => (
+        <div className="slider-progress" style={progressStyles.value}/>
+      )
+    });
+  }));
+
+  /**
+   * 渲染开始结束指示器
+   * @author  韦胜健
+   * @date    2022.12.10 15:46
+   */
+  effects.push(hooks.onRender.use(list => {
+    list.push({
+      seq: 2,
+      key: 'dot',
+      render: () => (
+        <div className="slider-dot-wrapper">
+          <div className="slider-dot" style={start.dotStyles.value}>
+            {!!props.tooltip && <span className="slider-dot-tooltip">{start.tooltipLabel.value}</span>}
+            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? start.dotDraggier.onMousedown : undefined}/>
+          </div>
+          <div className="slider-dot" style={end.dotStyles.value}>
+            {!!props.tooltip && <span className="slider-dot-tooltip">{end.tooltipLabel.value}</span>}
+            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? end.dotDraggier.onMousedown : undefined}/>
+          </div>
+        </div>
+      )
+    });
+  }));
+
+  return effects.clear;
+
+}