Skip to content

Commit

Permalink
feat: select obj fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@PengYYYYY
PengYYYYY committed Jun 12, 2022
1 parent ae4ef2f commit c409a06
Show file tree
Hide file tree
Showing 9 changed files with 191 additions and 198 deletions.
15 changes: 15 additions & 0 deletions src/select/helper.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { InjectionKey, ComputedRef, Slots } from 'vue';
import cloneDeep from 'lodash/cloneDeep';
import { TdSelectProps, TdOptionProps, SelectValue, SelectOption, SelectOptionGroup } from './type';

export const selectInjectKey: InjectionKey<
Expand Down Expand Up @@ -39,3 +40,17 @@ export const getMultipleContent = (value: SelectValue[], options: SelectOption[]
}
return res;
};

export const getNewMultipleValue = (innerValue: SelectValue[], optionValue: SelectValue) => {
const value = cloneDeep(innerValue) as SelectValue[];
const valueIndex = value.indexOf(optionValue);
if (valueIndex < 0) {
value.push(optionValue);
} else {
value.splice(valueIndex, 1);
}
return {
value,
isCheck: valueIndex < 0,
};
};
20 changes: 10 additions & 10 deletions src/select/hooks.ts
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import { computed, Slots, VNode, ref } from 'vue';
import { computed, Slots, VNode, Ref } from 'vue';
import isArray from 'lodash/isArray';
import get from 'lodash/get';
import cloneDeep from 'lodash/cloneDeep';

import { useChildComponentSlots } from '../hooks/slot';
import { TdSelectProps, TdOptionProps, SelectOptionGroup } from './type';
import { TdSelectProps, TdOptionProps, SelectOptionGroup, SelectKeysType, SelectValue } from './type';

export const useSelectOptions = (props: TdSelectProps) => {
export const useSelectOptions = (props: TdSelectProps, keys: Ref<SelectKeysType>) => {
const getChildComponentSlots = useChildComponentSlots();

const options = computed(() => {
let innerOptions = cloneDeep(props.options) || [];

let innerOptions = cloneDeep(props.options);
let dynamicIndex = 0;

// 统一处理 keys,处理通用数据
innerOptions = innerOptions.map((option) => {
const getFormatOption = (option: TdOptionProps) => {
const { value, label } = keys.value;
const res = {
index: dynamicIndex,
label: get(option, props.keys?.label || 'label'),
value: get(option, props.keys?.value || 'value'),
label: get(option, label),
value: get(option, value),
};
dynamicIndex++;
return res;
Expand All @@ -39,7 +39,7 @@ export const useSelectOptions = (props: TdSelectProps) => {
const groupSlots = getChildComponentSlots('TOptionGroup');

if (isArray(groupSlots)) {
for (const group of groupSlots as VNode[]) {
for (const group of groupSlots) {
const groupOption = {
group: group.props?.label,
...group.props,
Expand All @@ -60,7 +60,7 @@ export const useSelectOptions = (props: TdSelectProps) => {
}
}
if (isArray(optionsSlots)) {
for (const child of optionsSlots as VNode[]) {
for (const child of optionsSlots) {
innerOptions.push({
...child.props,
slots: child.children,
Expand Down Expand Up @@ -89,7 +89,7 @@ export const useSelectOptions = (props: TdSelectProps) => {
});

const optionsMap = computed(() => {
const res = new Map<TdOptionProps['value'], TdOptionProps>();
const res = new Map<SelectValue, TdOptionProps>();
optionsList.value.forEach((option: TdOptionProps) => {
res.set(option.value, option);
});
Expand Down
59 changes: 25 additions & 34 deletions src/select/option.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { defineComponent, ref, computed, inject } from 'vue';

import cloneDeep from 'lodash/cloneDeep';
import props from './option-props';
import Checkbox from '../checkbox/index';

Expand All @@ -9,26 +8,24 @@ import { useFormDisabled } from '../form/hooks';
import useRipple from '../hooks/useRipple';
import { useContent } from '../hooks/tnode';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
import { selectInjectKey } from './helper';
import { selectInjectKey, getNewMultipleValue } from './helper';
import { SelectValue } from './type';

export default defineComponent({
name: 'TOption',

props: { ...props, createAble: Boolean, multiple: Boolean, index: Number },
setup(props) {
const tSelect = inject(selectInjectKey);
const selectProvider = inject(selectInjectKey);
const formDisabled = useFormDisabled();

const disabled = computed(() => {
if (props.multiple) {
return (
(tSelect.value.max <= (tSelect.value.selectValue as SelectValue[]).length && tSelect.value.max !== 0) ||
formDisabled.value
);
}
return formDisabled.value;
});
const disabled = computed(
() =>
formDisabled.value ||
(props.multiple &&
selectProvider.value.max <= (selectProvider.value.selectValue as SelectValue[]).length &&
selectProvider.value.max !== 0),
);

const renderContent = useContent();

Expand All @@ -40,18 +37,18 @@ export default defineComponent({

const isSelected = computed(() => {
return !props.multiple
? tSelect.value.selectValue === props.value
: (tSelect.value.selectValue as SelectValue[]).includes(props.value);
? selectProvider.value.selectValue === props.value
: (selectProvider.value.selectValue as SelectValue[]).includes(props.value);
});

const classes = computed(() => [
`${selectName.value}-option`,
[SIZE.value[tSelect.value.size]],
[SIZE.value[selectProvider.value.size]],
{
[STATUS.value.disabled]: disabled.value,
[STATUS.value.selected]: isSelected.value,
[`${selectName.value}-option__hover`]:
(isHover.value || tSelect.value.hoverIndex === props.index) && !disabled.value && !isSelected.value,
(isHover.value || selectProvider.value.hoverIndex === props.index) && !disabled.value && !isSelected.value,
},
]);

Expand All @@ -62,32 +59,26 @@ export default defineComponent({
e.stopPropagation();

if (props.createAble) {
tSelect.value.handleCreate?.(props.value);
if (tSelect.value.multiple) {
(tSelect.value.selectValue as SelectValue[]).push(props.value);
tSelect.value.handleValueChange(tSelect.value.selectValue, {
selectProvider.value.handleCreate?.(props.value);
if (selectProvider.value.multiple) {
(selectProvider.value.selectValue as SelectValue[]).push(props.value);
selectProvider.value.handleValueChange(selectProvider.value.selectValue, {
e,
trigger: 'check',
});
return;
}
}

tSelect.value.handleValueChange(props.value, { e, trigger: 'check' });
tSelect.value.handlePopupVisibleChange(false, { e });
selectProvider.value.handleValueChange(props.value, { e, trigger: 'check' });
selectProvider.value.handlePopupVisibleChange(false, { e });
};

const handleCheckboxClick = (val: boolean, context: { e: MouseEvent | KeyboardEvent }) => {
const selectValue = cloneDeep(tSelect.value.selectValue) as SelectValue[];
const valueIndex = selectValue.indexOf(props.value);
if (valueIndex < 0) {
selectValue.push(props.value);
} else {
selectValue.splice(valueIndex, 1);
}
tSelect.value.handleValueChange(selectValue, { e: context.e, trigger: val ? 'check' : 'uncheck' });
if (!tSelect.value.reserveKeyword) {
tSelect.value.handlerInputChange('');
const newValue = getNewMultipleValue(selectProvider.value.selectValue as SelectValue[], props.value);
selectProvider.value.handleValueChange(newValue.value, { e: context.e, trigger: val ? 'check' : 'uncheck' });
if (!selectProvider.value.reserveKeyword) {
selectProvider.value.handlerInputChange('');
}
};

Expand All @@ -97,14 +88,14 @@ export default defineComponent({
const optionChild = renderContent('default', 'content') || labelText.value;
return (
<li
ref="liRef"
ref={liRef}
class={classes.value}
title={`${labelText.value}`}
onMouseenter={() => (isHover.value = true)}
onMouseleave={() => (isHover.value = false)}
onClick={handleClick}
>
{tSelect && props.multiple ? (
{selectProvider && props.multiple ? (
<Checkbox
checked={isSelected.value}
disabled={disabled.value && !isSelected.value}
Expand Down
4 changes: 2 additions & 2 deletions src/select/optionGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ export default defineComponent({
name: 'TOptionGroup',
props: { ...props },
setup(props) {
const tSelect = inject(selectInjectKey);
const selectProvider = inject(selectInjectKey);
const COMPONENT_NAME = usePrefixClass('select-option-group');
const { SIZE } = useCommonClassName();
const renderTNodeJSX = useTNodeJSX();

const classes = computed(() => [
COMPONENT_NAME.value,
SIZE.value[tSelect.value.size],
SIZE.value[selectProvider.value.size],
{
[`${COMPONENT_NAME.value}__divider`]: props.divider,
},
Expand Down
Loading

0 comments on commit c409a06

Please sign in to comment.