{"version":3,"sources":["../src/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAe,MAAM,qBAAqB,CAAC;AAQlE,aAAK,QAAQ,GAAG;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,cAAc,EAAE,GAAG,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,cAAc;IAChD,eAAe,WAMb;IAEF,UAAU,iCAAS;IAEnB,eAAe;;;QAKb;IAGF,IAAI,EAAE,QAAQ,CAkBZ;IAEF,SAAS;gCACiB,MAAM,YAAY,MAAM,GAAG,MAAM,EAAE;qBAG9C,MAAM,YAAY,MAAM,GAAG,MAAM,EAAE;MAiBhD;IAEF,QAAQ;IAOR;;;;;OAKG;IACH,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE;IAMtC;;;OAGG;IACH,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE;IAkB7C,UAAU,CAAC,KAAK,EAAE,GAAG;IAqBrB,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAQ/B,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAehE,eAAe;IAWrB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IA2BvC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAehC,eAAe,CAAC,CAAC,EAAE,GAAG;IAKtB,oBAAoB,CAAC,CAAC,EAAE,GAAG;IAwB3B;;;;;;;OAOG;IACH,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM;IAUvD,SAAS,CAAC,CAAC,EAAE,GAAG;IAuChB,eAAe,CAAC,CAAC,EAAE,GAAG;IAmBtB,gBAAgB,CAAC,CAAC,EAAE,GAAG;IAkBvB,YAAY;CAeb","file":"slider.d.ts","sourcesContent":["import { SuperComponent, wxComponent } from '../common/src/index';\nimport config from '../common/config';\nimport { trimSingleValue, trimValue } from './tool';\nimport props from './props';\n\nconst { prefix } = config;\nconst name = `${prefix}-slider`;\n\ntype dataType = {\n  sliderStyles: string;\n  classPrefix: string;\n  initialLeft: number | null;\n  initialRight: number | null;\n  activeLeft: number;\n  activeRight: number;\n  maxRange: number;\n  lineLeft: number;\n  lineRight: number;\n  dotTopValue: number[];\n  blockSize: number;\n  isScale: boolean;\n  scaleArray: any[];\n  scaleTextArray: any[];\n  _value: number | number[];\n  prefix: string;\n};\n@wxComponent()\nexport default class Slider extends SuperComponent {\n  externalClasses = [\n    `${prefix}-class`,\n    `${prefix}-class-bar`,\n    `${prefix}-class-bar-active`,\n    `${prefix}-class-bar-disabled`,\n    `${prefix}-class-cursor`,\n  ];\n\n  properties = props;\n\n  controlledProps = [\n    {\n      key: 'value',\n      event: 'change',\n    },\n  ];\n\n  // 组件的内部数据\n  data: dataType = {\n    // 按钮样式列表\n    sliderStyles: '',\n    classPrefix: name,\n    initialLeft: null,\n    initialRight: null,\n    activeLeft: 0,\n    activeRight: 0,\n    maxRange: 0,\n    lineLeft: 0,\n    lineRight: 0,\n    dotTopValue: [0, 0],\n    _value: 0,\n    blockSize: 20,\n    isScale: false,\n    scaleArray: [],\n    scaleTextArray: [],\n    prefix,\n  };\n\n  observers = {\n    'value, min, max'(this: Slider, newValue: number | number[]) {\n      this.handlePropsChange(newValue);\n    },\n    _value(this: Slider, newValue: number | number[]) {\n      const { min, max, range } = this.properties;\n      const { maxRange, blockSize } = this.data;\n      const fullLineWidth = maxRange + Number(blockSize);\n\n      if (range) {\n        const left = (fullLineWidth * (newValue[0] - Number(min))) / (Number(max) - Number(min));\n        const right = (fullLineWidth * (Number(max) - newValue[1])) / (Number(max) - Number(min));\n        // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围\n        this.setDotStyle(left, right);\n      } else {\n        const left =\n          (fullLineWidth * (Number(newValue) - Number(min))) / (Number(max) - Number(min));\n        this.setDotStyle(left, null);\n        this.getSingleBarWidth(newValue as number);\n      }\n    },\n  };\n\n  attached() {\n    const { marks, value } = this.properties;\n    if (!value) this.handlePropsChange(0);\n    this.handleMask(marks);\n    this.getInitialStyle();\n  }\n\n  /**\n   * 通知父组件，触发change事件\n   * touchMove过程中，_value变化，但不trigger，其他改变_value的场景需要调用该函数\n   * @param {number | number[]} value\n   * @memberof Slider\n   */\n  triggerValue(value?: number | number[]) {\n    this._trigger('change', {\n      value: trimValue(value, this.properties),\n    });\n  }\n\n  /**\n   * 监控props传参，计算组件value值\n   * @param newValue\n   */\n  handlePropsChange(newValue: number | number[]) {\n    const value = trimValue(newValue, this.properties);\n\n    const setValueAndTrigger = () => {\n      this.setData({\n        _value: value,\n      });\n    };\n\n    // 基本样式未初始化，等待初始化后在改变数据。\n    if (this.data.maxRange === 0) {\n      this.getInitialStyle().then(setValueAndTrigger);\n      return;\n    }\n\n    setValueAndTrigger();\n  }\n\n  handleMask(marks: any) {\n    if (marks?.length && Array.isArray(marks)) {\n      this.setData({\n        isScale: true,\n        scaleArray: marks,\n      });\n    }\n\n    if (Object.prototype.toString.call(marks) === '[object Object]') {\n      const scaleArray = Object.keys(marks).map((item) => Number(item));\n      const scaleTextArray = scaleArray.map((item) => marks[item]);\n      if (scaleArray.length) {\n        this.setData({\n          isScale: true,\n          scaleArray,\n          scaleTextArray,\n        });\n      }\n    }\n  }\n\n  getSingleBarWidth(value: number) {\n    const { max, min } = this.properties;\n    const width = `${((Number(value) - Number(min)) * 100) / (Number(max) - Number(min))}%`;\n    this.setData({\n      lineBarWidth: width,\n    });\n  }\n\n  getSelectorQuery(id: string): Promise<{ left: number; right: number }> {\n    return new Promise((resolve, reject) => {\n      this.createSelectorQuery()\n        .select(`#${id}`)\n        .boundingClientRect((rect) => {\n          if (rect) {\n            resolve(rect);\n          } else {\n            reject(rect);\n          }\n        })\n        .exec();\n    });\n  }\n\n  async getInitialStyle() {\n    const line: { right: number; left: number } = await this.getSelectorQuery('sliderLine');\n    const { blockSize } = this.data;\n    const halfBlock: number = Number(blockSize) / 2;\n    this.setData({\n      maxRange: line.right - line.left - Number(blockSize),\n      initialLeft: line.left - halfBlock,\n      initialRight: line.right + halfBlock,\n    });\n  }\n\n  setDotStyle(left: number, right: number) {\n    const { range } = this.properties;\n    const { blockSize } = this.data;\n    const halfBlock = Number(blockSize) / 2;\n    if (left !== null) {\n      this.setData({\n        activeLeft: left - halfBlock,\n      });\n    }\n\n    if (right !== null) {\n      this.setData({\n        activeRight: right - halfBlock,\n      });\n    }\n\n    if (range) {\n      this.setLineStyle();\n\n      const [a, b] = this.data._value as any;\n\n      this.setData({\n        dotTopValue: [a, b],\n      });\n    }\n  }\n\n  stepValue(value: number): number {\n    const { step, min, max } = this.properties;\n\n    if (Number(step) < 1 || Number(step) > Number(max) - Number(min)) return value;\n\n    const closestStep = trimSingleValue(\n      Math.round(value / Number(step)) * Number(step),\n      Number(min),\n      Number(max),\n    );\n\n    return closestStep as number;\n  }\n\n  // 点击滑动条的事件\n  onSingleLineTap(e: any) {\n    const value = this.getSingleChangeValue(e);\n    this.triggerValue(value);\n  }\n\n  getSingleChangeValue(e: any) {\n    const { disabled, min, max } = this.properties;\n    const { initialLeft, maxRange, blockSize } = this.data;\n    if (disabled) return;\n\n    const [touch] = e.changedTouches;\n    const { pageX } = touch;\n    const halfBlock = Number(blockSize) / 2;\n\n    const currentLeft = pageX - initialLeft - halfBlock;\n    let value = 0;\n\n    if (currentLeft <= 0) {\n      value = Number(min);\n    } else if (currentLeft >= maxRange + Number(blockSize)) {\n      value = Number(max);\n    } else {\n      value = Math.round(\n        (currentLeft / (maxRange + Number(blockSize))) * (Number(max) - Number(min)) + Number(min),\n      );\n    }\n    return this.stepValue(value);\n  }\n\n  /**\n   * 将位置转换为值\n   *\n   * @param {number} posValue 位置数据\n   * @param {(0 | 1)} dir 方向： 0-left， 1-right\n   * @return  {number}\n   * @memberof Slider\n   */\n  convertPosToValue(posValue: number, dir: 0 | 1): number {\n    const { maxRange, blockSize } = this.data;\n    const { max, min } = this.properties;\n    const fullLineWidth = maxRange + blockSize;\n    return dir === 0\n      ? (posValue / fullLineWidth) * (Number(max) - Number(min)) + Number(min)\n      : Number(max) - (posValue / fullLineWidth) * (Number(max) - Number(min));\n  }\n\n  // 点击范围选择滑动条的事件\n  onLineTap(e: any) {\n    const { disabled } = this.properties;\n    const { initialLeft, initialRight, maxRange, blockSize } = this.data;\n    if (disabled) return;\n\n    const [touch] = e.changedTouches;\n    const { pageX } = touch;\n    const halfBlock = Number(blockSize) / 2;\n\n    const currentLeft = pageX - initialLeft - halfBlock;\n    if (currentLeft < 0 || currentLeft > maxRange + Number(blockSize)) return;\n\n    this.getSelectorQuery('leftDot').then((leftDot: { left: number; right: number }) => {\n      this.getSelectorQuery('rightDot').then((rightDot: { left: number; right: number }) => {\n        // 点击处-halfblock 与 leftDot左侧的距离（绝对值）\n        const distanceLeft = Math.abs(pageX - leftDot.left - halfBlock);\n        // 点击处-halfblock 与 rightDot左侧的距离（绝对值）\n        const distanceRight = Math.abs(rightDot.left - pageX + halfBlock);\n        // 哪个绝对值小就移动哪个Dot\n        const isMoveLeft = distanceLeft < distanceRight;\n        if (isMoveLeft) {\n          // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离\n          const left = pageX - initialLeft - halfBlock;\n          const leftValue = this.convertPosToValue(left, 0);\n          this.triggerValue([this.stepValue(leftValue), this.data._value[1]]);\n        } else {\n          const right = -(pageX - initialRight) - halfBlock;\n          const rightValue = this.convertPosToValue(right, 1);\n          const newValue = trimValue(\n            [this.data._value[0], this.stepValue(rightValue)],\n            this.properties,\n          );\n\n          this.triggerValue(newValue);\n        }\n      });\n    });\n  }\n\n  onTouchMoveLeft(e: any) {\n    const { disabled } = this.properties;\n    const { initialLeft, blockSize, _value } = this.data;\n    if (disabled) return;\n\n    const [touch] = e.changedTouches;\n    const { pageX } = touch;\n\n    const halfBlock = Number(blockSize) / 2;\n    const currentLeft = pageX - initialLeft - halfBlock;\n\n    const newData = [...(_value as number[])];\n    const leftValue = this.convertPosToValue(currentLeft, 0);\n\n    newData[0] = this.stepValue(leftValue);\n\n    this.triggerValue(newData);\n  }\n\n  onTouchMoveRight(e: any) {\n    const { disabled } = this.properties;\n    const { initialRight, blockSize, _value } = this.data;\n    if (disabled) return;\n\n    const [touch] = e.changedTouches;\n    const { pageX } = touch;\n\n    const halfBlock = Number(blockSize) / 2;\n    const currentRight = -(pageX - initialRight) - halfBlock;\n\n    const newData = [...(_value as number[])];\n    const rightValue = this.convertPosToValue(currentRight, 1);\n    newData[1] = this.stepValue(rightValue);\n\n    this.triggerValue(newData);\n  }\n\n  setLineStyle() {\n    const { activeLeft, activeRight, maxRange, blockSize } = this.data;\n    const halfBlock = Number(blockSize) / 2;\n    if (activeLeft + activeRight <= maxRange) {\n      this.setData({\n        lineLeft: activeLeft + halfBlock,\n        lineRight: activeRight + halfBlock,\n      });\n    } else {\n      this.setData({\n        lineLeft: maxRange + halfBlock - activeRight,\n        lineRight: maxRange - activeLeft + halfBlock * 1.5, //eslint-disable-line\n      });\n    }\n  }\n}\n"]}