| 1 |
- {"version":3,"sources":["../src/dropdown-menu/dropdown-item.ts"],"names":[],"mappings":"","file":"dropdown-item.d.ts","sourcesContent":["import TComponent from '../common/component';\nimport config from '../common/config';\n\nconst { prefix } = config;\nconst name = `${prefix}-dropdown-item`;\n\nTComponent({\n properties: {\n title: {\n type: String,\n value: '',\n },\n options: {\n type: Array,\n value: [],\n },\n selectMode: {\n type: String,\n value: 'single', // single | multi\n },\n optionsLayout: {\n type: String,\n value: 'columns', // columns | tree | slot\n },\n optionsColumns: {\n type: Number,\n optionalTypes: [String],\n value: 1,\n },\n value: {\n type: Array,\n optionalTypes: [String, Number],\n value: [],\n },\n disabled: {\n type: Boolean,\n value: false,\n },\n itemId: {\n type: String,\n value: '',\n },\n },\n data: {\n classBasePrefix: prefix,\n classPrefix: name,\n show: false,\n isBtnDisabled: true,\n bar: null,\n top: 0,\n contentClasses: '',\n treeColumns: 3,\n selected: [],\n treeState: {\n leafLevel: 0,\n selectList: [],\n select: [],\n },\n treeOptions: [],\n isTree: false,\n },\n relations: {\n './dropdown-menu': {\n type: 'parent',\n linked(target) {\n this._getParentBottom(target);\n this.setData({\n bar: target,\n });\n },\n },\n },\n attached() {\n const { selectMode } = this.data;\n const { optionsLayout } = this.data;\n const layoutCol = +this.data.optionsColumns;\n const isTree = optionsLayout === 'tree';\n const treeCol = isTree ? +this.data.treeColumns : 0;\n const contentClassesObj: Object = {\n [`${prefix}-is-tree`]: isTree,\n [`${prefix}-is-single`]: !isTree && selectMode === 'single',\n [`${prefix}-is-multi`]: !isTree && selectMode === 'multi',\n [`${prefix}-is-col1`]: layoutCol === 1 || treeCol === 1,\n [`${prefix}-is-col2`]: layoutCol === 2 || treeCol === 2,\n [`${prefix}-is-col3`]: layoutCol === 3 || treeCol === 3,\n };\n const contentClasses = Object.keys(contentClassesObj)\n .filter((e) => contentClassesObj[e] === true)\n .join(' ');\n this.setData({\n contentClasses,\n isTree,\n selected: this.data.value,\n });\n\n if (isTree) {\n this.data.treeState.selectList = this.data.selected || [];\n this._buildTreeOptions();\n }\n this.updateButtonState();\n },\n methods: {\n _buildTreeOptions() {\n const { options, selectMode } = this.data;\n const { selectList } = this.data.treeState;\n const newTreeOptions = [];\n let level = -1;\n let node = { options };\n while (node.options) {\n // 当前层级节点的列表\n const list = node.options;\n newTreeOptions.push([...list]);\n level += 1;\n // 当前层级列表选中项\n const thisValue: [] | string | number | null = selectList[level];\n if (thisValue === undefined) {\n const [firstChild] = list;\n if (firstChild.options) {\n // 还有子节点，当前层级作为单选处理\n this._selectTreeNode(level, firstChild.value);\n node = firstChild;\n } else {\n // 没有子节点，结束处理\n this._selectTreeNode(level, selectMode === 'multi' ? [] : undefined);\n break;\n }\n } else {\n const child: any =\n !Array.isArray(thisValue) && list.find((child: any) => child.value === thisValue);\n node = child;\n }\n }\n this.setData({\n 'treeState.leafLevel': Math.max(0, level),\n treeOptions: newTreeOptions,\n });\n },\n\n _closeDropdown() {\n this.data.bar.setData({\n activeIdx: -1,\n });\n this.setData({\n show: false,\n });\n },\n _getParentBottom(parent) {\n const query = wx.createSelectorQuery().in(parent);\n query\n .select(`#${prefix}-bar`)\n .boundingClientRect((res) => {\n this.setData({\n top: res.bottom,\n });\n })\n .exec();\n },\n\n _selectTreeNode(level: number, value: any) {\n // console.log('level:', level, 'value:', value);\n // 当前节点\n const tempValue: any = this.data.treeState.selectList.slice(0, level);\n tempValue[level] = value;\n this.setData({\n 'treeState.selectList': tempValue,\n });\n },\n clickOverlay() {\n this._closeDropdown();\n },\n updateSelected(e) {\n if (this.data.isTree) {\n this._selectTreeNode(\n e.target.dataset.level,\n this.data.selectMode === 'single' ? e.detail.name : e.detail.names,\n );\n } else {\n const data = {\n selected: this.data.selectMode === 'single' ? e.detail.name : e.detail.names,\n };\n this.setData(data);\n if (this.data.bar && this.data.selectMode === 'single') {\n this.confirmSelect();\n }\n }\n\n this.updateButtonState();\n },\n updateButtonState() {\n if (this.data.isTree) {\n let isEmpty = false;\n if (this.data.selectMode === 'single') {\n isEmpty = this.data.treeState.selectList[this.data.treeState.leafLevel] === undefined;\n }\n if (this.data.selectMode === 'multi') {\n const selectList = this.data.treeState.selectList[this.data.treeState.leafLevel] as [];\n isEmpty = selectList && selectList.length <= 0;\n }\n this.setData({\n isBtnDisabled: isEmpty,\n });\n } else {\n const isEmpty = this.data.selected?.length === 0;\n this.setData({\n isBtnDisabled: isEmpty,\n });\n }\n },\n resetSelect() {\n if (this.data.isTree) {\n this.setData({\n treeState: {\n leafLevel: 0,\n selectList: [],\n select: [],\n },\n });\n this._buildTreeOptions();\n this.updateButtonState();\n } else {\n this.updateSelected({ detail: { names: [], name: null } });\n }\n },\n confirmSelect() {\n if (this.data.isTree) {\n this.triggerEvent('change', this.data.treeState.selectList);\n } else {\n this.triggerEvent('change', this.data.selected);\n }\n this._closeDropdown();\n },\n selectTreeNode(e) {\n this._selectTreeNode(e.target.dataset.level, e.detail.name);\n this._buildTreeOptions();\n },\n },\n});\n"]}
|
