Dorj Property Editor

Dorj Property Editor is a customizable React component for editing object properties, supporting various input types including text, number, select, boolean, color, date (Jalali), and multiline fields. It is designed for use in React applications and leverages Material UI color palettes.

Features

• Supports multiple property types: text, number, select, boolean, color, date (Jalali), and multiline.
• Uses react-datepicker-enhanced for Jalali date selection.
• Integrates with @mui/material/colors for color selection.
• Customizable property definitions and dynamic rendering.
• RTL (right-to-left) support for Persian/Farsi UI.

Installation

npm install dorj-property-editor

Peer Dependencies

• react (>=16.x)
• @mui/material
• moment-jalaali
• react-datepicker-enhanced

Make sure these are installed in your project.

Usage

import React, { useState } from 'react';
import PropertyEditor from 'dorj-property-editor';
import { blue } from '@mui/material/colors';

const options = [
  { name: 'title', title: 'عنوان', kind: 'text' },
  { name: 'count', title: 'تعداد', kind: 'number' },
  { name: 'active', title: 'فعال', kind: 'bool' },
  { name: 'color', title: 'رنگ', kind: 'color' },
  { name: 'date', title: 'تاریخ', kind: 'date', dateFormat: 'jYYYY/jMM/jDD' },
  { name: 'desc', title: 'توضیحات', kind: 'multiline' }
];

function App() {
  const [item, setItem] = useState({});
  return (
    <PropertyEditor
      options={options}
      item={item}
      onChange={setItem}
      color={blue}
      flex={1}
    />
  );
}

export default App;

Property Options

Each property in the options array can have the following fields:

• name: (string) Property key in the item object.
• title: (string) Label to display.
• kind: (string) One of: text, number, select, bool, color, date, multiline.
• options: (array) For select kind, array of { value, title, hint }.
• dateFormat: (string) For date kind, date format string.
• direction: (string) Optional, 'rtl' or 'ltr'.
• disabled: (function|boolean) Optional, disables the input.
• show: (function) Optional, determines if the property should be shown.
• onUpdate: (function) Optional, called when the property is updated.

Development

Build the project:

npm run build

Start development mode:

npm run dev

License

MIT