-
Notifications
You must be signed in to change notification settings - Fork 40
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
建议新增数组字段 #9
Comments
自定义字段 | Tushan import React from 'react';
import ReactMarkdown from 'react-markdown';
import {TextArea, Button} from 'semantic-ui-react'; // 或者其他的textarea组件,根据你的实际情况
import {
createFieldFactory,
FieldDetailComponent,
FieldEditComponent,
} from 'tushan';
export const MarkdownFieldDetail: FieldDetailComponent<string> = React.memo(
(props) => {
return <ReactMarkdown>{props.value}</ReactMarkdown>;
}
);
MarkdownFieldDetail.displayName = 'MarkdownFieldDetail';
export const MarkdownFieldEdit: FieldEditComponent<string> = React.memo(
(props) => {
// 打印props.value
return (
<TextArea
placeholder={props.options.edit?.placeholder ?? props.options.label}
value={props.value}
onChange={(e, {value}) => props.onChange(value as string)}
/>
);
}
);
MarkdownFieldEdit.displayName = 'MarkdownFieldEdit';
export const createMarkdownField = createFieldFactory({
detail: MarkdownFieldDetail,
edit: MarkdownFieldEdit,
});
export const ArrayFieldDetail: FieldDetailComponent<string[]> = React.memo(
(props) => {
return (
<ul>
{props.value.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
);
ArrayFieldDetail.displayName = 'ArrayFieldDetail';
export const ArrayFieldEdit: FieldEditComponent<string[]> = React.memo(
(props) => {
return (
<div>
{props.value.map((item, index) => (
<TextArea
key={index}
placeholder={props.options.edit?.placeholder ?? props.options.label}
value={item}
onChange={(e, {value}) => {
const newValue = [...props.value];
newValue[index] = value as string;
props.onChange(newValue);
}}
/>
))}
<Button
onClick={() => {
const newValue = [...props.value, ''];
props.onChange(newValue);
}}
>
Add Item
</Button>
</div>
);
}
);
ArrayFieldEdit.displayName = 'ArrayFieldEdit';
export const createArrayField = createFieldFactory({
detail: ArrayFieldDetail,
edit: ArrayFieldEdit,
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
createArrayField('roles', {
label: '角色',
enum: ['user', 'admin', 'sth else'] //可不填
}),
The text was updated successfully, but these errors were encountered: