91 lines
2.2 KiB
TypeScript
91 lines
2.2 KiB
TypeScript
/*
|
|
* Copyright 2025 coze-dev Authors
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { useEffect, useState, type ComponentProps } from 'react';
|
|
|
|
import { withField, FormInput, FormTextArea } from '@coze-arch/coze-design';
|
|
|
|
interface PromptInfoInputProps {
|
|
readonly?: boolean;
|
|
initCount?: number;
|
|
value?: string;
|
|
disabled?: boolean;
|
|
rows?: number;
|
|
field: string;
|
|
label?: string;
|
|
placeholder?: string;
|
|
maxLength?: number;
|
|
maxCount?: number;
|
|
rules?: ComponentProps<typeof FormInput>['rules'];
|
|
}
|
|
|
|
export const PromptInfoInput = (props: PromptInfoInputProps) => {
|
|
const { initCount, disabled, rows } = props;
|
|
const [count, setCount] = useState(initCount || 0);
|
|
|
|
const handleChange = (v: string) => {
|
|
setCount(v.length);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setCount(initCount || 0);
|
|
}, [initCount]);
|
|
|
|
const countSuffix = (
|
|
<div className="overflow-hidden coz-fg-secondary text-sm pr-[9px]">{`${count}/${props.maxCount}`}</div>
|
|
);
|
|
|
|
if (disabled) {
|
|
return <ReadonlyInput {...props} />;
|
|
}
|
|
|
|
if (rows && rows > 1) {
|
|
return (
|
|
<FormTextArea
|
|
{...props}
|
|
autosize
|
|
autoComplete="off"
|
|
onChange={(value: string) => handleChange(value)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FormInput
|
|
{...props}
|
|
autoComplete="off"
|
|
suffix={countSuffix}
|
|
onChange={value => handleChange(value)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const ReadonlyInputCom = (props: PromptInfoInputProps) => {
|
|
const { value } = props;
|
|
return (
|
|
<div className="w-full">
|
|
<div className="coz-fg-secondary text-base break-all whitespace-pre-line">
|
|
{value}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ReadonlyInput = withField(ReadonlyInputCom, {
|
|
valueKey: 'value',
|
|
onKeyChangeFnName: 'onChange',
|
|
});
|