| 1 |
- {"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"]}
|
