8536869866

Committed 03 Apr 2024 10:05AM CUT coverage: 21.234% (-0.3%) from 21.535%

Build # 8536869866

Build Type

Pull #514

github

Committed by

web-flow

Commit Message

Merge 91a25d710 into 45ee7ebb3

Pull Request Pull Request #514: refactor: user and link selector

Run Details

1394 of 2532 branches covered (55.06%)

27 of 1620 new or added lines in 60 files covered. (1.67%)

4 existing lines in 2 files now uncovered.

14588 of 68702 relevant lines covered (21.23%)

2.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/sdk/src/components/cell-value-editor/CellEditorMain.tsx

import type {
  IAttachmentCellValue,
  ICheckboxCellValue,
  IDateFieldOptions,
  ILinkCellValue,
  ILinkFieldOptions,
  ILongTextCellValue,
  IMultipleSelectCellValue,
  INumberCellValue,
  INumberFieldOptions,
  IRatingFieldOptions,
  ISelectFieldChoice,
  ISelectFieldOptions,
  ISingleLineTextCellValue,
  ISingleLineTextFieldOptions,
  ISingleSelectCellValue,
  IUserCellValue,
  IUserFieldOptions,
} from '@teable/core';
import { ColorUtils, FieldType } from '@teable/core';
import { useCallback, useEffect, useRef } from 'react';
import { useTableId } from '../../hooks';
import { Field } from '../../model';
import {
  AttachmentEditor,
  CheckboxEditor,
  DateEditor,
  NumberEditor,
  SelectEditor,
  TextEditor,
  RatingEditor,
  LongTextEditor,
  LinkEditor,
  UserEditor,
} from '../editor';
import type { IEditorRef } from '../editor/type';
import type { ICellValueEditor } from './type';

export const CellEditorMain = (props: Omit<ICellValueEditor, 'wrapClassName' | 'wrapStyle'>) => {
  const { field, recordId, cellValue, onChange, readonly, className, context } = props;
  const tableId = useTableId();
  const { id: fieldId, type, options } = field;
  const editorRef = useRef<IEditorRef<unknown>>(null);

  useEffect(() => {
    editorRef?.current?.setValue?.(cellValue);
  }, [cellValue]);

  const selectOptions = useCallback((options: ISelectFieldOptions) => {
    return options.choices.map(({ name, color }) => ({
      label: name,
      value: name,
      color: ColorUtils.shouldUseLightTextOnColor(color) ? '#ffffff' : '#000000',
      backgroundColor: ColorUtils.getHexForColor(color),
    }));
  }, []);

  const onOptionAdd = useCallback(
    async (name: string) => {
      if (!tableId) return;
      if (type !== FieldType.SingleSelect && type !== FieldType.MultipleSelect) return;

      const { choices = [] } = options as ISelectFieldOptions;
      const existColors = choices.map((v) => v.color);
      const choice = {
        name,
        color: ColorUtils.randomColor(existColors)[0],
      } as ISelectFieldChoice;

      const newChoices = [...choices, choice];

      await Field.convertField(tableId, fieldId, {
        type,
        options: { ...options, choices: newChoices },
      });
    },
    [tableId, type, fieldId, options]
  );

  switch (type) {
    case FieldType.SingleLineText: {
      return (
        <TextEditor
          ref={editorRef}
          className={className}
          value={cellValue as ISingleLineTextCellValue}
          options={options as ISingleLineTextFieldOptions}
          onChange={onChange}
          readonly={readonly}
        />
      );
    }
    case FieldType.LongText: {
      return (
        <LongTextEditor
          ref={editorRef}
          className={className}
          value={cellValue as ILongTextCellValue}
          onChange={onChange}
          readonly={readonly}
        />
      );
    }
    case FieldType.Number: {
      return (
        <NumberEditor
          ref={editorRef}
          className={className}
          options={options as INumberFieldOptions}
          value={cellValue as INumberCellValue}
          onChange={onChange}
          readonly={readonly}
        />
      );
    }
    case FieldType.Rating: {
      return (
        <RatingEditor
          className={className}
          options={options as IRatingFieldOptions}
          value={cellValue as INumberCellValue}
          onChange={onChange}
          readonly={readonly}
        />
      );
    }
    case FieldType.SingleSelect: {
      return (
        <SelectEditor
          ref={editorRef}
          className={className}
          value={cellValue as ISingleSelectCellValue}
          options={selectOptions(options as ISelectFieldOptions)}
          onChange={onChange}
          readonly={readonly}
          onOptionAdd={onOptionAdd}
        />
      );
    }
    case FieldType.MultipleSelect: {
      return (
        <SelectEditor
          ref={editorRef}
          className={className}
          value={cellValue as IMultipleSelectCellValue}
          options={selectOptions(options as ISelectFieldOptions)}
          onChange={onChange}
          isMultiple
          readonly={readonly}
          onOptionAdd={onOptionAdd}
        />
      );
    }
    case FieldType.Checkbox: {
      return (
        // Setting the checkbox size is affected by the font-size causing the height to change.
        <div style={{ fontSize: 0 }}>
          <CheckboxEditor
            className={className}
            value={cellValue as ICheckboxCellValue}
            onChange={onChange}
            readonly={readonly}
          />
        </div>
      );
    }
    case FieldType.Date: {
      return (
        <DateEditor
          ref={editorRef}
          className={className}
          options={options as IDateFieldOptions}
          value={cellValue as string}
          onChange={(selectedDay) => onChange?.(selectedDay ?? null)}
        />
      );
    }
    case FieldType.Attachment: {
      return (
        <AttachmentEditor
          className={className}
          value={cellValue as IAttachmentCellValue}
          onChange={onChange}
          readonly={readonly}
        />
      );
    }
    case FieldType.Link: {
      return (
        <LinkEditor
          className={className}
          cellValue={cellValue as ILinkCellValue | ILinkCellValue[]}
          options={options as ILinkFieldOptions}
          onChange={onChange}
          readonly={readonly}
          fieldId={field.id}
          recordId={recordId}
        />
      );
    }
    case FieldType.User: {
      return (
        <UserEditor
          className={className}
          value={cellValue as IUserCellValue | IUserCellValue[]}
          options={options as IUserFieldOptions}
          onChange={onChange}
          readonly={readonly}
          context={context}
        />
      );
    }
    default:
      throw new Error(`The field type (${type}) is not implemented editor`);
  }
};

1	import type {	×
2	IAttachmentCellValue,	×
3	ICheckboxCellValue,	×
4	IDateFieldOptions,	×
5	ILinkCellValue,	×
6	ILinkFieldOptions,	×
7	ILongTextCellValue,	×
8	IMultipleSelectCellValue,	×
9	INumberCellValue,	×
10	INumberFieldOptions,	×
11	IRatingFieldOptions,	×
12	ISelectFieldChoice,	×
13	ISelectFieldOptions,	×
14	ISingleLineTextCellValue,	×
15	ISingleLineTextFieldOptions,	×
16	ISingleSelectCellValue,	×
17	IUserCellValue,	×
18	IUserFieldOptions,	×
19	} from '@teable/core';	×
20	import { ColorUtils, FieldType } from '@teable/core';	×
21	import { useCallback, useEffect, useRef } from 'react';	×
22	import { useTableId } from '../../hooks';	×
23	import { Field } from '../../model';	×
24	import {	×
25	AttachmentEditor,	×
26	CheckboxEditor,	×
27	DateEditor,	×
28	NumberEditor,	×
29	SelectEditor,	×
30	TextEditor,	×
31	RatingEditor,	×
32	LongTextEditor,	×
33	LinkEditor,	×
34	UserEditor,	×
35	} from '../editor';	×
36	import type { IEditorRef } from '../editor/type';	×
37	import type { ICellValueEditor } from './type';	×
38		×
39	export const CellEditorMain = (props: Omit<ICellValueEditor, 'wrapClassName' \| 'wrapStyle'>) => {	×
NEW 40	const { field, recordId, cellValue, onChange, readonly, className, context } = props;	×
41	const tableId = useTableId();	×
42	const { id: fieldId, type, options } = field;	×
43	const editorRef = useRef<IEditorRef<unknown>>(null);	×
44		×
45	useEffect(() => {	×
46	editorRef?.current?.setValue?.(cellValue);	×
47	}, [cellValue]);	×
48		×
49	const selectOptions = useCallback((options: ISelectFieldOptions) => {	×
50	return options.choices.map(({ name, color }) => ({	×
51	label: name,	×
52	value: name,	×
53	color: ColorUtils.shouldUseLightTextOnColor(color) ? '#ffffff' : '#000000',	×
54	backgroundColor: ColorUtils.getHexForColor(color),	×
55	}));	×
56	}, []);	×
57		×
58	const onOptionAdd = useCallback(	×
59	async (name: string) => {	×
60	if (!tableId) return;	×
61	if (type !== FieldType.SingleSelect && type !== FieldType.MultipleSelect) return;	×
62		×
63	const { choices = [] } = options as ISelectFieldOptions;	×
64	const existColors = choices.map((v) => v.color);	×
65	const choice = {	×
66	name,	×
67	color: ColorUtils.randomColor(existColors)[0],	×
68	} as ISelectFieldChoice;	×
69		×
70	const newChoices = [...choices, choice];	×
71		×
72	await Field.convertField(tableId, fieldId, {	×
73	type,	×
74	options: { ...options, choices: newChoices },	×
75	});	×
76	},	×
77	[tableId, type, fieldId, options]	×
78	);	×
79		×
80	switch (type) {	×
81	case FieldType.SingleLineText: {	×
82	return (	×
83	<TextEditor	×
84	ref={editorRef}	×
85	className={className}	×
86	value={cellValue as ISingleLineTextCellValue}	×
87	options={options as ISingleLineTextFieldOptions}	×
88	onChange={onChange}	×
89	readonly={readonly}	×
90	/>	×
91	);	×
92	}	×
93	case FieldType.LongText: {	×
94	return (	×
95	<LongTextEditor	×
96	ref={editorRef}	×
97	className={className}	×
98	value={cellValue as ILongTextCellValue}	×
99	onChange={onChange}	×
100	readonly={readonly}	×
101	/>	×
102	);	×
103	}	×
104	case FieldType.Number: {	×
105	return (	×
106	<NumberEditor	×
107	ref={editorRef}	×
108	className={className}	×
109	options={options as INumberFieldOptions}	×
110	value={cellValue as INumberCellValue}	×
111	onChange={onChange}	×
112	readonly={readonly}	×
113	/>	×
114	);	×
115	}	×
116	case FieldType.Rating: {	×
117	return (	×
118	<RatingEditor	×
119	className={className}	×
120	options={options as IRatingFieldOptions}	×
121	value={cellValue as INumberCellValue}	×
122	onChange={onChange}	×
123	readonly={readonly}	×
124	/>	×
125	);	×
126	}	×
127	case FieldType.SingleSelect: {	×
128	return (	×
129	<SelectEditor	×
130	ref={editorRef}	×
131	className={className}	×
132	value={cellValue as ISingleSelectCellValue}	×
133	options={selectOptions(options as ISelectFieldOptions)}	×
134	onChange={onChange}	×
135	readonly={readonly}	×
136	onOptionAdd={onOptionAdd}	×
137	/>	×
138	);	×
139	}	×
140	case FieldType.MultipleSelect: {	×
141	return (	×
142	<SelectEditor	×
143	ref={editorRef}	×
144	className={className}	×
145	value={cellValue as IMultipleSelectCellValue}	×
146	options={selectOptions(options as ISelectFieldOptions)}	×
147	onChange={onChange}	×
148	isMultiple	×
149	readonly={readonly}	×
150	onOptionAdd={onOptionAdd}	×
151	/>	×
152	);	×
153	}	×
154	case FieldType.Checkbox: {	×
155	return (	×
156	// Setting the checkbox size is affected by the font-size causing the height to change.	×
157	<div style={{ fontSize: 0 }}>	×
158	<CheckboxEditor	×
159	className={className}	×
160	value={cellValue as ICheckboxCellValue}	×
161	onChange={onChange}	×
162	readonly={readonly}	×
163	/>	×
164	</div>	×
165	);	×
166	}	×
167	case FieldType.Date: {	×
168	return (	×
169	<DateEditor	×
170	ref={editorRef}	×
171	className={className}	×
172	options={options as IDateFieldOptions}	×
173	value={cellValue as string}	×
174	onChange={(selectedDay) => onChange?.(selectedDay ?? null)}	×
175	/>	×
176	);	×
177	}	×
178	case FieldType.Attachment: {	×
179	return (	×
180	<AttachmentEditor	×
181	className={className}	×
182	value={cellValue as IAttachmentCellValue}	×
183	onChange={onChange}	×
184	readonly={readonly}	×
185	/>	×
186	);	×
187	}	×
188	case FieldType.Link: {	×
189	return (	×
190	<LinkEditor	×
191	className={className}	×
192	cellValue={cellValue as ILinkCellValue \| ILinkCellValue[]}	×
193	options={options as ILinkFieldOptions}	×
194	onChange={onChange}	×
195	readonly={readonly}	×
196	fieldId={field.id}	×
197	recordId={recordId}	×
198	/>	×
199	);	×
200	}	×
201	case FieldType.User: {	×
202	return (	×
203	<UserEditor	×
204	className={className}	×
205	value={cellValue as IUserCellValue \| IUserCellValue[]}	×
206	options={options as IUserFieldOptions}	×
207	onChange={onChange}	×
208	readonly={readonly}	×
NEW 209	context={context}	×
210	/>	×
211	);	×
212	}	×
213	default:	×
214	throw new Error(`The field type (${type}) is not implemented editor`);	×
215	}	×
216	};	×

teableio / teable / 8536869866

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous