Refactor EditPopover styles and improve remote option fetching in Aut…

…oComplete and Select components
YaoApp · Nov 4, 2024 · 7433aad · 7433aad
1 parent df1d396
commit 7433aad
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 35 deletions.
diff --git a/packages/xgen/components/base/PureTable/components/EditPopover/index.less b/packages/xgen/components/base/PureTable/components/EditPopover/index.less
@@ -4,18 +4,12 @@
 			.xgen-popover-inner {
 				width: 376px;
 
-				.xgen-form-item {
-					width: calc(100% - 50px);
+				.xgen-popover-inner-content {
+					width: 100%;
 				}
-			}
 
-			.form_item_upload_wrap {
-				&.video {
-					.xgen-upload-select-picture-card,
-					.xgen-upload-list-picture-card-container {
-						width: 270px;
-						height: 160px;
-					}
+				.xgen-form-item {
+					width: calc(100% - 50px);
 				}
 			}
 		}

diff --git a/packages/xgen/components/base/PureTable/components/EditPopover/index.tsx b/packages/xgen/components/base/PureTable/components/EditPopover/index.tsx
@@ -59,7 +59,7 @@ const Index = (props: IProps) => {
 	)
 
 	const view_content = (
-		<div className={clsx(['line_clamp_2', field_detail?.edit?.type && 'edit_text'])}>
+		<div className={clsx(['line_clamp_2', field_detail?.view?.type, field_detail?.edit?.type && 'edit_text'])}>
 			<ViewContent {...{ namespace, primary, field_detail, onSave, ...view_bind_value }}></ViewContent>
 		</div>
 	)

diff --git a/packages/xgen/components/base/PureTable/components/ViewContent.tsx b/packages/xgen/components/base/PureTable/components/ViewContent.tsx
@@ -10,7 +10,8 @@ interface IProps extends Omit<IPropsComponentCommon, 'data_item'>, Component.Bin
 const Index = (props: IProps) => {
 	const { namespace, primary, field_detail, form_bind, form_value, onSave } = props
 
-	if (!field_detail.view?.type) return <div className='line_clamp_2'>请设置字段的view属性</div>
+	if (!field_detail.view?.type)
+		return <div className='line_clamp_2'>Unknown view type: {field_detail.view?.type}</div>
 
 	const props_view_component = {
 		...field_detail.view.props,

diff --git a/packages/xgen/components/edit/AutoComplete/index.tsx b/packages/xgen/components/edit/AutoComplete/index.tsx
@@ -56,28 +56,36 @@ const Custom = window.$app.memo((props: ICustom) => {
 		setOptions(parseOptions(props.options))
 	}, [props.options])
 
+	const fetchOptions = (keywords?: string) => {
+		if (!xProps?.remote) return
+
+		const api = xProps.remote.api
+		const params = { ...xProps.remote.params }
+		if (keywords && keywords.length != 0) params['keywords'] = keywords
+		axios.get<any, AutoCompleteProps['options']>(api, { params })
+			.then((res) => {
+				setOptions(parseOptions(res))
+			})
+			.catch((err) => {
+				console.error('[AutoComplete] remote search error', err)
+			})
+	}
+
 	const onChange: AutoCompleteProps['onChange'] = (v) => {
 		// Trigger remote search
-		if (xProps?.remote) {
-			const api = xProps.remote.api
-			const params = { ...xProps.remote.params, ['keywords']: v }
-			axios.get<any, AutoCompleteProps['options']>(api, { params })
-				.then((res) => {
-					setOptions(parseOptions(res))
-				})
-				.catch((err) => {
-					console.error('[AutoComplete] remote search error', err)
-				})
-		}
+		fetchOptions(v)
 
 		if (!props.onChange) return
 
 		// @ts-ignore
 		props.onChange(v)
-
 		setValue(v)
 	}
 
+	const onFocus = () => {
+		fetchOptions()
+	}
+
 	return (
 		<AutoComplete
 			className={clsx([
@@ -92,6 +100,7 @@ const Custom = window.$app.memo((props: ICustom) => {
 			{...rest_props}
 			options={options}
 			onChange={onChange}
+			onFocus={onFocus}
 			showSearch={true}
 		></AutoComplete>
 	)

diff --git a/packages/xgen/components/edit/Select/index.tsx b/packages/xgen/components/edit/Select/index.tsx
@@ -67,13 +67,18 @@ const Custom = window.$app.memo((props: ICustom) => {
 		setValue(v)
 	}
 
-	// Merge the remote api for search
-	// props.search will be deprecated in the future
-	const defaultOnSearch: SelectProps['onSearch'] = (v) => {
-		// Trigger remote search
+	const fetchRemoteOptions = (selected?: any, keywords?: string) => {
 		if (xProps?.remote) {
 			const api = xProps.remote.api
-			const params = { ...xProps.remote.params, ['keywords']: v }
+			const params: Record<string, any> = { ...xProps.remote.params }
+			if (keywords && keywords != '') {
+				params['keywords'] = keywords.trim()
+			}
+
+			if (selected) {
+				params['selected'] = selected
+			}
+
 			axios.get<any, SelectProps['options']>(api, { params })
 				.then((res) => {
 					setOptions(parseOptions(res))
@@ -84,18 +89,34 @@ const Custom = window.$app.memo((props: ICustom) => {
 		}
 	}
 
+	const onClear = () => {
+		setValue(null)
+		fetchRemoteOptions()
+	}
+
+	const onFocus = () => {
+		fetchRemoteOptions(value) // Reset the options when focus
+	}
+
+	// Merge the remote api for search
+	// props.search will be deprecated in the future
+	const defaultOnSearch: SelectProps['onSearch'] = (v) => {
+		const selected = value ? (Array.isArray(value) ? value : [value]) : []
+		fetchRemoteOptions(selected, v)
+	}
+
 	if (rest_props.showSearch) {
 		rest_props.onSearch = rest_props.onSearch ? rest_props.onSearch : defaultOnSearch
 	}
 
-	const onClear = () => setValue(null)
 	return (
 		<Select
 			className={clsx([styles._local, props.mode === 'multiple' && styles.multiple])}
 			popupClassName={styles._dropdown}
 			placeholder={`${is_cn ? '请选择' : 'Please select '}${__name}`}
 			getPopupContainer={(node) => node.parentNode}
 			value={value}
+			onFocus={onFocus}
 			onChange={onChange}
 			onClear={onClear}
 			{...rest_props}
@@ -119,7 +140,6 @@ const Index = (props: IProps) => {
 
 	useLayoutEffect(() => {
 		x.remote.raw_props = props
-
 		x.remote.init()
 	}, [props])
 

diff --git a/packages/xgen/components/view/Tag/index.less b/packages/xgen/components/view/Tag/index.less
@@ -1,3 +1,12 @@
+:global {
+	.Tag {
+		&:hover {
+			opacity: 0.8;
+			text-decoration: none;
+		}
+	}
+}
+
 ._local {
 	margin-right: 0;
 	padding: 0 6px;

diff --git a/packages/xgen/components/view/Tag/index.tsx b/packages/xgen/components/view/Tag/index.tsx
@@ -60,7 +60,7 @@ const Index = (props: IProps) => {
 
 	useLayoutEffect(() => {
 		x.remote.raw_props = props
-		x.remote.init()
+		x.remote.init(props.__value)
 	}, [])
 
 	const options = useMemo(() => {

diff --git a/packages/xgen/models/remote.ts b/packages/xgen/models/remote.ts
@@ -16,7 +16,7 @@ export default class Index {
 		makeAutoObservable(this, {}, { autoBind: true })
 	}
 
-	async getOptions() {
+	async getOptions(selected?: any) {
 		const remote = this.raw_props.xProps?.remote
 
 		if (!remote) return
@@ -25,6 +25,10 @@ export default class Index {
 		const { __namespace, __bind: bind, __name: name } = this.raw_props
 		const ns = __namespace || 'default'
 		const params = remote.params!
+		if (selected) {
+			params.selected = Array.isArray(selected) ? selected : [selected]
+		}
+
 		const ts = parseInt(`${new Date().getTime() / 1000}`)
 		const cache_key =
 			ns && bind && name ? `${ns}|${bind}|${name}|${new URLSearchParams(params).toString()}` : undefined
@@ -105,8 +109,8 @@ export default class Index {
 		return []
 	}
 
-	init() {
+	init(selected?: any) {
 		if (this.raw_props.options) this.options = this.fixOptions(this.raw_props.options)
-		if (this.raw_props.xProps?.remote) this.getOptions()
+		if (this.raw_props.xProps?.remote) this.getOptions(selected)
 	}
 }