From 191b25e4d3158b4c4b7f57341c8eab8a367da87f Mon Sep 17 00:00:00 2001 From: onlyhom Date: Sun, 23 Apr 2023 00:09:19 +0800 Subject: [PATCH] feat: add new method setValue --- README.md | 1 + docs/README-CN.md | 3 +- src/ms-core.ts | 93 +++++++++++++++++++++++++++++++++++------------ 3 files changed, 73 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index e41288f..a4d6466 100644 --- a/README.md +++ b/README.md @@ -414,6 +414,7 @@ export default function MsComponent(props) { | updateWheel() | sliderIndex, data | | Re-render the specified wheel | | updateWheels() | data | | Re-render the all wheel(Only used in cascading data forma) | | getValue() | no-argument | | Gets the value selected by the component | +| setValue() | data (the parameter format should be same with `getValue()` return) | ≥1.4.0 | Set the value for the component | | destroy() | no-argument |≥1.2.0 | Destroying a component instance | #### Tips: The function parameters need to be passed as follows diff --git a/docs/README-CN.md b/docs/README-CN.md index 49c043c..841be28 100644 --- a/docs/README-CN.md +++ b/docs/README-CN.md @@ -407,8 +407,9 @@ export default function MsComponent(props) { | setTitle() | string | | 设置控件的标题 | | locatePosition() | sliderIndex, posIndex | | 传入位置数组，重新定位轮子选中的位置 | | updateWheel() | sliderIndex, data | | 重新渲染指定的轮子 | -| updateWheels() | data | | 重新渲染所有轮子(仅限级联数据格式使用) | +| updateWheels() | data | | 重新渲染所有轮子(仅限级联数据格式使用) | | getValue() | 无参 | | 获取组件选择的值 | +| setValue() | data (参数格式需与`getValue()`返回的格式相同) | | 设置组件选择的值 | | destroy() | 无参 | ≥1.2.0 | 销毁组件实例 | #### 注：功能函数中需要传递的参数含义如下 diff --git a/src/ms-core.ts b/src/ms-core.ts index 0557e67..e07a067 100644 --- a/src/ms-core.ts +++ b/src/ms-core.ts @@ -27,7 +27,7 @@ export default class MobileSelect { /** 显示json */ displayJson!: CascadeData[]; /** 当前数值 */ - curValue!: string[] | number[]; + curValue!: string[] | number[] | CascadeData[]; /** 当前索引位置 */ curIndexArr!: number[]; /** 是否级联 */ @@ -129,16 +129,15 @@ export default class MobileSelect { this.popUp = this.mobileSelect.querySelector(".ms-content")!; this.optionHeight = this.mobileSelect.querySelector("li")!.offsetHeight; // 复显初始值 - if (config.initValue && config.triggerDisplayValue) { - this.trigger.innerText = config.initValue; - } + config.initValue && this.setTriggerInnerText(config.initValue); + this.setStyle(config); this.isCascade = this.checkCascade(); this.isCascade && this.initCascade(); // 在设置之前就被已生成了displayjson if (config.initValue) { - this.initPosition = this.getPositionByValue(); + this.initPosition = this.getPositionByInitValue(); } // 补全initPosition if (this.initPosition.length < this.sliderList.length) { @@ -173,15 +172,7 @@ export default class MobileSelect { this.optionHeight = this.mobileSelect.querySelector("li")!.offsetHeight; } - let tempValue = ""; - for (let i = 0; i < this.wheelList.length; i++) { - i == this.wheelList.length - 1 - ? (tempValue += this.getInnerText(i)) - : (tempValue += this.getInnerText(i) + this.config.connector); - } - if (config.triggerDisplayValue) { - this.trigger.innerText = tempValue; - } + this.setTriggerInnerText(this.getConnectedString()); this.curIndexArr = this.getIndexArr(); this.curValue = this.getCurValue(); this.config.callback?.(this.curIndexArr, this.curValue, this); @@ -263,7 +254,7 @@ export default class MobileSelect { } /** 根据initValue 获取initPostion 需要区分级联和非级联情况 注意此时displayJson还没生成 */ - getPositionByValue(): number[] { + getPositionByInitValue(): number[] { const { keyMap, connector, initValue } = this.config; const valueArr = initValue?.split(connector) || []; if (this.isJsonType) { @@ -286,6 +277,56 @@ export default class MobileSelect { }, [] as unknown as number[]); } + getConnectedString() { + let connectedStr = ""; + for (let i = 0; i < this.wheelList.length; i++) { + i == this.wheelList.length - 1 + ? (connectedStr += this.getInnerText(i)) + : (connectedStr += this.getInnerText(i) + this.config.connector); + } + return connectedStr; + } + + setTriggerInnerText(value: string) { + if (this.config.triggerDisplayValue) { + this.trigger.textContent = value; + } + } + + setValue(valList: string[] | number[] | CascadeData[]) { + if (!valList || !valList.length) return; + if ( + (this.isJsonType && typeof valList[0] !== "object") || + (!this.isJsonType && typeof valList[0] === "object") + ) { + MobileSelect.log( + "error", + `The setValue() input format should be same with getValue(), like: ${JSON.stringify( + this.getValue() + )}` + ); + return; + } + const { keyMap } = this.config; + valList.forEach((targetVal, sliderIndex) => { + const sliderData = this.isCascade + ? this.displayJson[sliderIndex] + : this.wheelsData[sliderIndex]?.data; + const targetIndex = sliderData?.findIndex( + (item: string | number | CascadeData) => { + return this.isJsonType + ? (targetVal as CascadeData)[keyMap.id] == + (item as CascadeData)[keyMap.id] || + (targetVal as CascadeData)[keyMap.value] == + (item as CascadeData)[keyMap.value] + : targetVal == item; + } + ); + this.locatePosition(sliderIndex, targetIndex); + }); + this.setTriggerInnerText(this.getConnectedString()); + } + setTitle(title: string): void { this.mobileSelect.querySelector(".ms-title")!.innerHTML = title; } @@ -603,7 +644,7 @@ export default class MobileSelect { return temp; } - getCurValue(): string[] | number[] { + getCurValue(): string[] | number[] | CascadeData[] { const temp = []; const positionArr = this.getIndexArr(); const { keyMap } = this.config; @@ -629,8 +670,8 @@ export default class MobileSelect { return temp; } - getValue(): string[] | number[] { - return this.curValue; + getValue(): string[] | number[] | CascadeData[] { + return this.getCurValue(); } calcDistance(index: number): number { @@ -654,11 +695,17 @@ export default class MobileSelect { theSlider.style.transform = "translate3d(0," + distance + "px, 0)"; } - locatePosition(index: number, posIndex: number): void { - this.curDistance[index] = this.calcDistance(posIndex); - this.movePosition(this.sliderList[index], this.curDistance[index]); + locatePosition(sliderIndex: number, posIndex: number): void { + if (sliderIndex === undefined || posIndex === undefined || posIndex < 0) + return; + + this.curDistance[sliderIndex] = this.calcDistance(posIndex); + this.movePosition( + this.sliderList[sliderIndex], + this.curDistance[sliderIndex] + ); if (this.isCascade) { - this.checkRange(index, this.getIndexArr()); + this.checkRange(sliderIndex, this.getIndexArr()); } } @@ -678,7 +725,7 @@ export default class MobileSelect { } return ( this.sliderList[sliderIndex].getElementsByTagName("li")[index] - ?.innerText || "" + ?.textContent || "" ); }