wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / Text.tsx

Text.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/Text.tsx

59 lines 1.9 KB

Raw Download Zip

1	import { memo } from 'react';
2	import FieldWrapper from './FieldWrapper';
3	import TextInput from './TextInput';
4	import { clsx } from 'clsx';
5
6	interface TextFieldProps {
7	field: {
8	id: string;
9	label?: string;
10	placeholder?: string;
11	is_lock?: boolean;
12	tooltip?: any;
13	context?: any;
14	context_html?: string;
15	prefix?: string;
16	[key: string]: any;
17	};
18	value: string;
19	onChange: (value: string) => void;
20	}
21
22	const Text = ({ field, value, onChange }: TextFieldProps) => {
23	const disabled = field.is_lock === true;
24
25	return (
26	<FieldWrapper
27	inputId={field.id}
28	label={field.label}
29	tooltip={field.tooltip}
30	context={field.context}
31	contextHtml={field.context_html ?? ''}
32	>
33	<div className={clsx(
34	"flex items-center w-full rounded-md border border-gray-400 focus-within:border-primary-dark focus-within:ring focus-within:ring-primary/20",
35	disabled && "bg-gray-200 border-gray-200"
36	)}>
37	{field.prefix && (
38	<span className="flex-shrink-0 bg-gray-100 text-gray-700 px-3 py-2 rounded-l-md border-r border-gray-400">
39	{field.prefix}
40	</span>
41	)}
42	<TextInput
43	id={field.id}
44	type="text"
45	placeholder={field.placeholder}
46	value={value}
47	onChange={(e) => onChange(e.target.value)}
48	disabled={disabled}
49	className={clsx(
50	"flex-1 border-none focus:ring-0 focus:border-none rounded-none",
51	field.prefix ? "rounded-r-md" : "rounded-md"
52	)}
53	/>
54	</div>
55	</FieldWrapper>
56	);
57	};
58
59	export default memo(Text);