ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(client/record-picker): support record-picker show format DataPicker (#888)

Browse Source 
* fix(client/record-picker): support record-picker show format DataPicker

* fix(client/record-picker): undefined judgment and when change field's label refresh format in time

(cherry picked from commit 381e71b1f72a8dd092c9e6ad0c36926102b8a7e2)
This commit is contained in:
lyf-coder 2022-10-11 22:43:27 +08:00 committed by chenos
parent d6d2e639ce
commit 47c1764ac3
3 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx
View File

@ -9,6 +9,7 @@ import { FormProvider, SchemaComponentOptions } from '../../core';
import { useCompile } from '../../hooks';
import { ActionContext, useActionContext } from '../action';
import { useFieldNames } from './useFieldNames';
import { getLabelFormatValue, useLabelUiSchema } from './util';
const RecordPickerContext = createContext(null);
@ -23,15 +24,15 @@ const useTableSelectorProps = () => {
rowSelection: {
type: multiple ? 'checkbox' : 'radio',
// defaultSelectedRowKeys: rcSelectRows?.map((item) => item[rowKey||'id']),
selectedRowKeys: rcSelectRows?.map((item) => item[rowKey||'id']),
selectedRowKeys: rcSelectRows?.map((item) => item[rowKey || 'id']),
},
onRowSelectionChange(selectedRowKeys, selectedRows) {
if (multiple) {
const scopeRows = field.value || [];
const allSelectedRows = rcSelectRows || [];
const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey||'id');
const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey||'id');
const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey||'id'])
const otherRows = differenceBy(allSelectedRows, scopeRows, rowKey || 'id');
const unionSelectedRows = unionBy(otherRows, selectedRows, rowKey || 'id');
const unionSelectedRowKeys = unionSelectedRows.map((item) => item[rowKey || 'id']);
setSelectedRows?.(unionSelectedRows);
onRowSelectionChange?.(unionSelectedRowKeys, unionSelectedRows);
} else {
@ -74,30 +75,31 @@ export const InputRecordPicker: React.FC<any> = (props) => {
const fieldSchema = useFieldSchema();
const collectionField = useAssociation(props);
const compile = useCompile();
const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
const [selectedRows, setSelectedRows] = useState([]);
const [options, setOptions] = useState([]);
useEffect(() => {
if (value) {
const opts = (Array.isArray(value) ? value : value ? [value] : []).map(option => {
const opts = (Array.isArray(value) ? value : value ? [value] : []).map((option) => {
const label = option[fieldNames.label];
return {
...option,
[fieldNames.label]: compile(label),
[fieldNames.label]: getLabelFormatValue(labelUiSchema, compile(label)),
};
});
setOptions(opts);
setSelectedRows(opts);
}
}, [value])
}, [value,fieldNames?.label]);
const getValue = () => {
if (multiple == null) return null;
// console.log('getValue', multiple, value, Array.isArray(value));
return Array.isArray(value) ? value?.map(v => v[fieldNames.value]) : value?.[fieldNames.value];
}
return Array.isArray(value) ? value?.map((v) => v[fieldNames.value]) : value?.[fieldNames.value];
};
return (
<div>
<Select

9
packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
View File

@ -10,10 +10,12 @@ import { useCompile } from '../../hooks';
import { ActionContext } from '../action';
import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
import { useFieldNames } from './useFieldNames';
import { getLabelFormatValue, useLabelUiSchema } from './util';
interface IEllipsisWithTooltipRef {
setPopoverVisible: (boolean) => void;
}
export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
const { ellipsis } = props;
const fieldSchema = useFieldSchema();
@ -27,10 +29,13 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
const collectionField = getField(fieldSchema.name) || getCollectionJoinField(fieldSchema?.['x-collection-field']);
const [record, setRecord] = useState({});
const compile = useCompile();
const labelUiSchema = useLabelUiSchema(collectionField, fieldNames?.label || 'label');
const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
const renderRecords = () =>
toArr(field.value).map((record, index, arr) => {
const val =
compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id;
return (
<Fragment key={`${record.id}_${index}`}>
<span>
@ -43,10 +48,10 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
}}
>
{compile(record?.[fieldNames?.label || 'label']) || record?.[fieldNames?.value || 'value'] || record?.id}
{getLabelFormatValue(labelUiSchema, val)}
</a>
</span>
{index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>, </span> : null}
{index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
</Fragment>
);
});

27
packages/core/client/src/schema-component/antd/record-picker/util.ts Normal file
View File

@ -0,0 +1,27 @@
import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
import moment from 'moment';
import { isArr } from '@formily/shared';
import { CollectionFieldOptions, useCollectionManager } from '../../../collection-manager';
import { ISchema } from '@formily/react';
export const useLabelUiSchema = (collectionField: CollectionFieldOptions, label: string): ISchema => {
const { getCollectionJoinField } = useCollectionManager();
const labelField = getCollectionJoinField(`${collectionField.target}.${label}`) as CollectionFieldOptions;
return labelField?.uiSchema;
};
export const getDatePickerLabels = (props): string => {
const format = getDefaultFormat(props) as string;
const m = str2moment(props.value, props) as moment.Moment;
const labels = m && m.isValid() ? m.format(format) : props.value;
return isArr(labels) ? labels.join('~') : labels;
};
export const getLabelFormatValue = (labelUiSchema: ISchema, value: any): string => {
switch (labelUiSchema?.['x-component']) {
case 'DatePicker':
return getDatePickerLabels({ ...labelUiSchema?.['x-component-props'], value });
default:
return value;
}
};