fix(ui): ajuste select paginado

bearkfear · Oct 17, 2024 · bd15b2a · bd15b2a
1 parent dd99e00
commit bd15b2a
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 30 deletions.
diff --git a/packages/formbuilder/lib/model/field-settings-by-type.ts b/packages/formbuilder/lib/model/field-settings-by-type.ts
@@ -55,6 +55,7 @@ export type FieldSettingsByType =
 			disableOption?: ((option: Option) => boolean) | Option["value"][];
 			extraActions?: React.ReactNode;
 			options?: Option[];
+			selectedOption?: Option;
 			loadingOptions?: boolean;
 			page?: number;
 			onChangePage?: (page: number) => void;
@@ -68,6 +69,7 @@ export type FieldSettingsByType =
 			disableOption?: ((option: Option) => boolean) | Option["value"][];
 			extraActions?: React.ReactNode;
 			options?: Option[];
+			selectedOptions?: Option[];
 			loadingOptions?: boolean;
 			page?: number;
 			onChangePage?: (page: number) => void;

diff --git a/packages/formbuilder/package.json b/packages/formbuilder/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@continha/formbuilder",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@continha/ui",
-	"version": "1.14.18",
+	"version": "1.14.19",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/esm/index.js",

diff --git a/packages/ui/src/components/ui/form/builder/form-control.tsx b/packages/ui/src/components/ui/form/builder/form-control.tsx
@@ -156,6 +156,7 @@ export function FormControl<
 	if (props.fieldConfig.type === "select") {
 		return (
 			<SingleSelector
+				selectedOption={props.fieldConfig.selectedOption}
 				options={props.fieldConfig.options || []}
 				value={props.field.value}
 				onChange={handleOnChange}
@@ -184,6 +185,7 @@ export function FormControl<
 	if (props.fieldConfig.type === "multi-select") {
 		return (
 			<MultiSelector
+				selectedOptions={props.fieldConfig.selectedOptions}
 				options={props.fieldConfig.options || []}
 				value={props.field.value}
 				onChange={handleOnChange}

diff --git a/packages/ui/src/components/ui/form/selector/multi-selector.tsx b/packages/ui/src/components/ui/form/selector/multi-selector.tsx
@@ -20,6 +20,7 @@ export type MultiSelectorProps<
 	className?: string;
 	style?: React.CSSProperties;
 	checkAll?: boolean;
+	selectedOptions?: O[];
 	options: O[];
 	labelPath: FieldPath<O>;
 	valuePath: VP;
@@ -96,6 +97,47 @@ function MultiSelectorInner<O extends TOption, VP extends FieldPath<O>>(
 		[onChange, props.valuePath, value],
 	);
 
+	const getSelectedOption = useCallback(() => {
+		if (props.selectedOptions.length > 0 || selectedOptions.length > 0) {
+			const list =
+				props.selectedOptions.length > 0
+					? props.selectedOptions
+					: selectedOptions;
+			return (
+				<ul className="flex flex-wrap justify-start gap-1 max-h-20 py-2 overflow-y-auto">
+					{list.map((option) => (
+						<li
+							key={getValue(option)}
+							className="rounded bg-gray-3 dark:bg-graydark-3 border divide-x divide-gray-7 dark:divide-graydark-6 border-gray-7 dark:border-graydark-6 text-xs flex items-center"
+						>
+							<span className="text-ellipsis overflow-hidden whitespace-nowrap max-w-40 text-left px-2">
+								{getLabel(option)}
+							</span>
+							{/* biome-ignore lint/a11y/useKeyWithClickEvents: just click a span, to not have a button inside of a button */}
+							<span
+								className="px-px"
+								onClick={(e) => {
+									onSelect(option);
+									e.stopPropagation();
+								}}
+							>
+								<LuX className="text-gray-11  dark:text-gray-8" size={13} />
+							</span>
+						</li>
+					))}
+				</ul>
+			);
+		}
+		return <span>{props.placeholder}</span>;
+	}, [
+		props.selectedOptions,
+		selectedOptions,
+		props.placeholder,
+		getLabel,
+		getValue,
+		onSelect,
+	]);
+
 	const onSelectAll = useCallback(() => {
 		const v = value || [];
 
@@ -127,32 +169,7 @@ function MultiSelectorInner<O extends TOption, VP extends FieldPath<O>>(
 				disabled={props.disabled}
 				onClick={() => setOpen((oldValue) => !oldValue)}
 			>
-				{selectedOptions.length > 0 ? (
-					<ul className="flex flex-wrap justify-start gap-1 max-h-20 py-2 overflow-y-auto">
-						{selectedOptions.map((option) => (
-							<li
-								key={getValue(option)}
-								className="rounded bg-gray-3 dark:bg-graydark-3 border divide-x divide-gray-7 dark:divide-graydark-6 border-gray-7 dark:border-graydark-6 text-xs flex items-center"
-							>
-								<span className="text-ellipsis overflow-hidden whitespace-nowrap max-w-40 text-left px-2">
-									{getLabel(option)}
-								</span>
-								{/* biome-ignore lint/a11y/useKeyWithClickEvents: just click a span, to not have a button inside of a button */}
-								<span
-									className="px-px"
-									onClick={(e) => {
-										onSelect(option);
-										e.stopPropagation();
-									}}
-								>
-									<LuX className="text-gray-11  dark:text-gray-8" size={13} />
-								</span>
-							</li>
-						))}
-					</ul>
-				) : (
-					<span>{props.placeholder}</span>
-				)}
+				{getSelectedOption()}
 				<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 			</Popover.Trigger>
 			<SelectorContent

diff --git a/packages/ui/src/components/ui/form/selector/single-selector.tsx b/packages/ui/src/components/ui/form/selector/single-selector.tsx
@@ -18,6 +18,7 @@ export type SingleSelectorProps<
 > = SelectorCommonProps & {
 	className?: string;
 	style?: React.CSSProperties;
+	selectedOption?: O;
 	options: O[];
 	labelPath: FieldPath<O>;
 	valuePath: VP;
@@ -70,6 +71,16 @@ function SingleSelectorInner<O extends TOption, VP extends FieldPath<O>>(
 		return props.options.find((option) => isEqual(getValue(option), value));
 	}, [props.options, value, getValue]);
 
+	const getSelectedOption = useCallback(() => {
+		if (props.selectedOption !== undefined) {
+			return getLabel(props.selectedOption);
+		}
+		if (selectedOption) {
+			return getLabel(selectedOption);
+		}
+		return props.placeholder;
+	}, [props.selectedOption, selectedOption, props.placeholder, getLabel]);
+
 	const onSelect = useCallback(
 		(option: O) => {
 			const optionValue = get(option, props.valuePath);
@@ -101,7 +112,8 @@ function SingleSelectorInner<O extends TOption, VP extends FieldPath<O>>(
 				className={cn(
 					inputVariants(),
 					"justify-between",
-					!selectedOption && "text-gray-11 dark:text-graydark-11",
+					(!props.selectedOption || !selectedOption) &&
+						"text-gray-11 dark:text-graydark-11",
 					className,
 				)}
 				style={style}
@@ -110,7 +122,7 @@ function SingleSelectorInner<O extends TOption, VP extends FieldPath<O>>(
 				onClick={() => setOpen((oldValue) => !oldValue)}
 			>
 				<span className="text-ellipsis overflow-hidden whitespace-nowrap w-full text-left">
-					{selectedOption ? getLabel(selectedOption) : props.placeholder}
+					{getSelectedOption()}
 				</span>
 				<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 			</Popover.Trigger>