Skip to content
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

Open
Haiananan opened this issue Jul 29, 2023 · 1 comment
Open

建议新增数组字段 #9

Haiananan opened this issue Jul 29, 2023 · 1 comment

Comments

@Haiananan
Copy link

createArrayField('roles', {
label: '角色',
enum: ['user', 'admin', 'sth else'] //可不填
}),

@KuanHsiaoKuo
Copy link

自定义字段 | Tushan
可以根据自己的需要创建,比如我自定义了markdown字段和数组字段:

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants