react-admin-movable-image-input

react-admin의 ImageInput에서 이미지의 순서를 변경할 수 있는 기능이 추가된 Component 입니다.

Installation

npm install @maugou/react-admin-movable-image-input

or

yarn add @maugou/react-admin-movable-image-input

Usage

import { MovableImageInput } from "@maugou/react-admin-movable-image-input";

<MovableImageInput source="pictures" label="Pictures" accept="image/*" multiple>
  <ImageField source="url" title="sequence" />
</MovableImageInput>;

Properties

| Prop | Required | Type | Default | Description | | --------------- | -------- | --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | source | Required | string | - | Name of the entity property to use for the input value | | label | Optional | string | - | Input label. In i18n apps, the label is passed to the translate function. Defaults to the humanized source when omitted. | | validate | Optional | Function | array | - | Validation rules for the current property. See the Validation Documentation for details. | | helperText | Optional | string | - | Text to be displayed under the input | | fullWidth | Optional | boolean | false | If true, the input will expand to fill the form width | | className | Optional | string | - | Class name (usually generated by JSS) to customize the look and feel of the field element itself | | formClassName | Optional | string | - | Class name to be applied to the container of the input (e.g. the <div> forming each row in <SimpleForm>) | | accept | Optional | string | string[] | - | Accepted file type(s), e. g. 'image/*,.pdf'. If left empty, all file types are accepted. Equivalent of the accept attribute of an <input type="file">. See here for syntax and examples. | | children | Optional | ReactNode | - | Element used to display the preview of an image (cloned several times if the select accepts multiple files). | | minSize | Optional | number | 0 | Minimum image size (in bytes), e.g. 5000 form 5KB | | maxSize | Optional | number | Infinity | Maximum image size (in bytes), e.g. 5000000 for 5MB | | multiple | Optional | boolean | false | Set to true if the input should accept a list of images, false if it should only accept one image | | labelSingle | Optional | string | 'ra.input.image. upload_single' | Invite displayed in the drop zone if the input accepts one image | | labelMultiple | Optional | string | 'ra.input.file. upload_multiple' | Invite displayed in the drop zone if the input accepts several images | | placeholder | Optional | string | ReactNode | - | Invite displayed in the drop zone, overrides labelSingle and labelMultiple | | options | Optional | Object | {} | Additional options passed to react-dropzone's useDropzone() hook. See the react-dropzone source for details . |