react json editor ajrm

تحذير:

كما تعلم بالفعل، لم تتم صيانة المشروع الأصلي لـ React-json-editor-ajrm بشكل نشط وسيتم إهماله في النهاية. لذلك قررت تحديد موعد رسمي للإيقاف. الموعد المبدئي لذلك هو 15 يونيو 2023.

ماذا يعني الإهمال؟

• وهذا يعني أنه سيتم أرشفة مشروع Github للقراءة فقط.
• وهذا يعني أن حزم npm ستظهر مهملة، ولكن لن يتم حذفها .
• وهذا يعني أن المشروع الجديد سيكون متاحًا رسميًا في ذلك التاريخ.

أود أن أشكر أولئك الذين استخدموه في مشاريعهم والذين ساهموا بطريقة ما في المشروع. أنا ببساطة لم أعد أرغب في الحفاظ على هذا المشروع. لقد تم تصنيعه في الأيام الأولى من مسيرتي المهنية كمهندس برمجيات، ولم يواكب معايير اليوم ولا معاييري.

لكن لا تقلق. أنوي بث حياة جديدة في هذا المشروع بإعادة كتابته من الألف إلى الياء.

أرغب في الاستفادة من دروس الماضي وتجنب بعض المشكلات التي يواجهها رد فعل json-editor-ajrm حاليًا. وأود أيضًا أن أسلط الضوء على الأمور التي تمت بشكل جيد، وأتمنى الاستمرار.

لقد قمت بإعداد المنزل لهذا المشروع الجديد هنا enio. لقد قمت أيضًا بإعداد مناقشة هنا إذا كان لديك أي أسئلة أو تعليقات.

رد فعل-json-محرر-ajrm

مكون تفاعلي أنيق يشبه المحرر ونموذجي لعرض وتحرير وتصحيح بناء جملة كائن جافا سكريبت!

تثبيت التبعية

• باستخدام مدير حزمة العقدة:

   $ npm i --save react-json-editor-ajrm

كيفية الاستخدام

    import JSONInput from 'react-json-editor-ajrm';
    import locale    from 'react-json-editor-ajrm/locale/en';

    <JSONInput
        id          = 'a_unique_id'
        placeholder = { sampleObject }
        colors      = { darktheme }
        locale      = { locale }
        height      = '550px'
    />

تلميح : هناك مساران جذريان مختلفان: react-json-editor-ajrm و react-json-editor-ajrm/es . الأول يحتوي على كود ES5 متعدد المعبأ، والثاني غير متعدد ES6. إصدار react-json-editor-ajrm/es غير متوافق مع create-react-app . إذا لم تكن متأكدًا من الخيار الذي تحتاجه/تريده، فاختر الأول - فهو يتمتع بأفضل توافق مع الأدوات والمتصفحات.

أمثلة

يحتوي المجلد ./examples على مثالين:

1. webpack-project - مثال أساسي بدون الكثير من التحميل الزائد
2. create-react-app-project - مثال صغير باستخدام قالب create-react-app

اختبار على الفور!

1. شوكة و/أو استنساخ مستودع جيثب هذا
2. انتقل إلى مثال لمشروع ضمن رد فعل json-editor-ajrm/example:

    $ cd path/to/repo/react-json-editor-ajrm/example/webpack-project

3. تثبيت تبعيات المشروع المثال:

    $ npm i

4. خدمة نموذج موقع الويب إلى المنفذ 8080:

   $ npm start

5. افتح http://localhost:8080 في متصفح الويب

أحدث ملاحظات إصدار Spotlight [الإصدار 2.5.12] - 15 أكتوبر 2020

1. مشكلة الاستيراد الثابتة.

الميزات القادمة

1. إصلاحات الشوائب.

سمات

1. اكتب كما لو كنت في محرر النصوص.
2. التحقق من وجود أخطاء في بناء الجملة وتقديم الملاحظات؛ يمكن أيضًا تراكب الأخطاء المخصصة على المحرر.
3. يمكنك تخصيص لوحة الألوان كما يحلو لك.
4. يقبل كائن جافا سكريبت في خاصية placeholder لعرضه بعد تحميل المكونات.
5. بالنسبة لأي محتوى نصي صالح، يتم حسابه وإتاحته في this.state كنص عادي ونص ترميزي وكائن جافا سكريبت.
6. دعم English German Spanish Chinese French Indonesian Russian Hindi Japanese Tamil .

خصائص المكون

اسم	وصف	يكتب	مطلوب
لغة	لغة المحرر الخاص بك. استيراد اللغات مثل هذا: import locale from 'react-json-editor-ajrm/locale/en' . يتعلم أكثر	هدف	إلزامي
بطاقة تعريف	id اختياري لتعيينه لعقدة DOM لإدخال النص الفعلي. بالإضافة إلى إدخال النص، ستتلقى العقد التالية أيضًا معرفًا: {id}-outer-box ، {id}-container ، {id}-warning-box ، {id}-labels	خيط	خياري
العنصر النائب	أرسل كائن جافا سكريبت صالحًا ليتم عرضه بمجرد تثبيت المكون. قم بتعيين قيمة مختلفة لإعادة عرض المحتوى الأولي للمكون.	هدف	خياري
إعادة ضبط	أرسل true لإعادة عرض المكون دائمًا أو "إعادة تعيينه" للقيمة المتوفرة في خاصية placeholder .	منطقية	خياري
viewOnly	أرسل true إذا كنت تريد أن يظهر المحتوى غير قابل للتحرير.	منطقية	خياري
onChange	كلما وقع حدث onKeyPress ، فسوف يُرجع قيم المحتوى.	هدف	خياري
onBlur	عند وقوع حدث onBlur ، فإنه سيُرجع قيم المحتوى.	هدف	خياري
تأكيد جيد	أرسل false إذا كنت ترغب في إخفاء علامة الاختيار لتأكيد بناء الجملة الجيد.	منطقية	خياري
ارتفاع	خاصية مختصرة لتعيين ارتفاع محدد للمكون بأكمله.	خيط	خياري
عرض	خاصية مختصرة لتعيين عرض محدد للمكون بأكمله.	خيط	خياري
onKeyPressUpdate	أرسل false إذا كنت ترغب في عدم تحديث المكون تلقائيًا عند الضغط على المفتاح.	منطقية	خياري
انتظر بعد KeyPress	مقدار المللي ثانية التي يجب انتظارها قبل إعادة عرض المحتوى بعد الضغط على المفتاح. القيمة الافتراضية هي 1000 عندما لا يتم تحديدها. بمعنى آخر، سيتم تحديث المكون إذا لم تكن هناك ضغطة إضافية على المفتاح بعد آخر ضغطة خلال ثانية واحدة. أقل من 100 مللي ثانية لا يشكل فرقا.	رقم	خياري
تعديل النص	وظيفة مخصصة لتعديل نص التحذير الأصلي للمكون. ستتلقى هذه الوظيفة معلمة واحدة من النوع string ويجب أن تُرجع string بالتساوي.	وظيفة	خياري
خطأ	يحتوي على الخصائص التالية:	هدف	خياري
خطأ.سبب	سلسلة تحتوي على رسالة خطأ مخصصة	خيط	خياري
error.line	رقم يشير إلى رقم السطر المتعلق برسالة الخطأ المخصصة	رقم	خياري
سمة	حدد السمة المضمنة التي تريد استخدامها.	خيط	خياري
الألوان	يحتوي على الخصائص التالية:	هدف	خياري
الألوان.الافتراضي	رمز اللون الست عشري لأي رموز، مثل braces المتعرجة comma .	خيط	خياري
color.string	رمز اللون السداسي للرموز المميزة التي تم تحديدها كقيم string .	خيط	خياري
الألوان.رقم	رمز لون سداسي عشري للرموز المميزة التي تم تحديدها على أنها قيم integeter أو double أو float .	خيط	خياري
color.colon	رمز اللون السداسي للرموز المميزة التي تم تحديدها على أنها colon .	خيط	خياري
الألوان. مفاتيح	رمز اللون السداسي للرموز المميزة التي تم تحديدها keys أو أسماء خصائص.	خيط	خياري
colors.keys_whiteSpace	رمز اللون السداسي للرموز المميزة التي تم تحديدها على أنها keys ملفوفة بين علامتي اقتباس.	خيط	خياري
الألوان.بدائية	رمز اللون السداسي للرموز المميزة التي تم تحديدها كقيم boolean وخالية.	خيط	خياري
خطأ	رمز اللون السداسي للرموز المميزة بعلامة error .	خيط	خياري
الألوان.الخلفية	رمز اللون الست عشري لخلفية المكون.	خيط	خياري
colors.background_warning	رمز اللون الست عشري لرسالة التحذير التي تظهر في الجزء العلوي من المكون.	خيط	خياري
أسلوب	يحتوي على الخصائص التالية:	هدف	خياري
style.outerBox	خاصية لتعديل النمط الافتراضي لقسم الحاوية الخارجية للمكون.	هدف	خياري
style.container	خاصية تعديل النمط الافتراضي container المكون.	هدف	خياري
style.warningBox	خاصية تعديل النمط الافتراضي لحاوية div لرسالة التحذير.	هدف	خياري
style.errorMessage	خاصية تعديل النمط الافتراضي لرسالة التحذير.	هدف	خياري
style.body	خاصية لتعديل النمط الافتراضي لحاوية div لتسميات الصفوف والتعليمات البرمجية.	هدف	خياري
style.labelColumn	خاصية لتعديل النمط الافتراضي لحاوية div لتسميات الصفوف.	هدف	خياري
style.labels	خاصية لتعديل النمط الافتراضي لكل تسمية صف.	هدف	خياري
style.contentBox	خاصية تعديل النمط الافتراضي لحاوية div الخاصة بالكود.	هدف	خياري

أقسام المكونات

    outerBox
    +-- container
        +--- warningBox
             +---- errorMessage
        +--- body
             +---- labelColumn
                   +----- labels
             +---- contentBox
                   +----- auto generated markup

قيم المحتوى

عندما يعيد RJEA عرض محتواه، فإن أي دالة تم تمريرها إلى خاصية onChange ستتلقى معلمة كائن واحدة تحتوي على المفاتيح والقيم التالية:

مفتاح	وصف
نص عادي	تمثيل سلسلة للمحتوى الذي يتضمن فواصل الأسطر والمسافات البادئة. عظيم لconsole.log()
markupText	تمثيل سلسلة للعلامات التي تم إنشاؤها تلقائيًا والمستخدمة لعرض المحتوى.
json	نسخة JSON.stringify من المحتوى.
jsObject	نسخة javascript object من المحتوى. سيعود undefined إذا كان بناء جملة المحتوى غير صحيح.
خطوط	عدد الأسطر المقدمة للمحتوى المراد عرضه.
خطأ	إرجاع false ما لم يكن بناء جملة المحتوى غير صحيح، وفي هذه الحالة يتم إرجاع كائن token ورقم line يتوافق مع الموقع الذي حدث فيه الخطأ reason

السمات المضمنة

يدعم RJEA السمة المدمجة. هنا القائمة.

بنيت مع

• رد فعل.js
• Babel.js للنقل.
• إنزيم لأدوات الاختبار الخاصة بالتفاعل.
• من باب الدعابة لاختبار الوحدة، وكذلك الاختبارات الخاصة بالتفاعل.
• ترافيس CI للتكامل المستمر.

رخصة

تم ترخيص هذا المشروع بموجب ترخيص MIT - راجع ملف LICENSE.md للحصول على التفاصيل.

المساهمين

الشكر موصول لهؤلاء الرائعين ؟:

أندرو ريديكان ؟ ؟ ️	باتريك ساكس ؟ ️	آلان كيل ؟	esbenvb	ماركوس بتريكوفسكي	ريك برونستيدت	ADirtyCat ؟
سيدريك ؟	راديت ؟	سكيتيس ؟	CGVedant ؟	شهباز جفري ؟	فاسانثا كومار آر بي ؟	أديتيا بيريوال ؟
أليكسي لياخوف	تيرينس هيونه	ريتشارد هال	tonynguenit18

يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع موضع ترحيب!