تم إصدار Ant Design 4.0!

المقدمة

أصدرنا الإصدار 4.0 rc في SEE Conf. بعد أكثر من شهر من جمع التعليقات وتعديلها ، حان الوقت لإصدار 4.0! شكرا لكل من قدم الملاحظات والاقتراحات والمساهمات خلال هذه الفترة. سنقوم بدمج التحديثات المضمنة بالفعل في إصدار rc وبعض التحديثات مؤخرًا هنا. يمكن العثور على الوثائق المحدثة الكاملة https://ant.design

تجدر الإشارة إلى أن الإصدار v3 تم دمجه في الفرع 3.x-stable في ديسمبر 2019 ودخل في الصيانة. سنستمر في إجراء أعمال الصيانة نصف السنوية للإصدار v3. آخر موعد للصيانة مايو 2020.

ترقية مواصفات التصميم

لقد قمنا بتعديل الزوايا المستديرة الأساسية من 4px إلى 2px . يمثل الشريط نفسه أحد التفاصيل ، وفي المشاهد الوسطى والخلفية ، نأخذ الكفاءة كأولوية أولى ، لذلك نقوم بتقليل التفاصيل المرئية للواجهة وتحسين كفاءة قراءة معلومات الواجهة. بالإضافة إلى ذلك ، قمنا بتعديل الظلال لجعلها أكثر اتساقًا مع الظلال الحقيقية ، مع التأكيد أيضًا على التسلسل الهرمي للمعلومات.

مظهر داكن

لقد قمنا بترقية نظام الألوان استنادًا إلى الإصدار v3 ، ويوفر الإصدار 4 مظهرًا داكنًا. يمكنك النقر فوق وظيفة تبديل السمة على الصفحة لرؤية تأثير السمة الداكنة:

مكون بلا حدود

في العمل اليومي ، وجدنا أن هناك مكونات اختيار خفيفة الوزن في بعض السيناريوهات. لذلك نقدم أسلوبًا جديدًا بلا حدود يسمح للمطورين بتضمين هذه المكونات بسهولة أكبر دون تجاوز النمط.

تعديل التوافق

بذل Ant Design 3.0 الكثير من الجهود ليكون متوافقًا مع الإصدارات القديمة من IE. ومع ذلك ، وفقًا لإحصائيات الصناعة ، تتقلص كل من متصفحات IE9 / 10 العالمية والمحلية مع تحديثات نظام Windows. توقفنا عن دعم IE 9/10 عند 4.0 (لكننا سنواصل دعم IE 11). لذلك ، ستكتسب بعض المكونات منخفضة الأداء في الماضي أداءً مع ميزات css الجديدة.

في الوقت نفسه ، قمنا أيضًا بترقية الحد الأدنى من إصدار React الذي يعتمد عليه الإصدار 4 إلى React 16.9. هذا يعني أن الإصدار v4 سيوفر المزيد من الروابط لتبسيط التعليمات البرمجية الخاصة بك.

بالإضافة إلى ذلك ، قمنا بإزالة بعض واجهات برمجة التطبيقات القديمة التي تم تحذيرها في إصدار v3. نوصي بشدة بترقية مشروعك الحالي إلى الإصدار الأخير من v3 وتحديث واجهة برمجة التطبيقات التي تم إيقافها استنادًا إلى رسالة التحذير.

مقاس اصغر

في antd @ 3.9.0 ، قدمنا ​​رمز svg ( لماذا تستخدم أيقونة svg؟ ). لا يمكن تحميل رمز API الذي يستخدم اسم السلسلة عند الطلب ، لذلك يتم تقديم ملف رمز svg بالكامل ، مما يزيد بشكل كبير من حجم المنتج المعبأ. في الإصدار 4.0 ، قمنا بتعديل واجهة برمجة تطبيقات استخدام الرمز لدعم اهتزاز الشجرة ، مما قلل حجم الحزمة الافتراضي لـ Antant بحوالي 150 كيلوبايت (Gzipped).

سيتم تجاهل استخدام الرمز القديم:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

في الإصدار 4.0 ، سيتم تقديمه عند الطلب:

  import { Button } from 'antd';

 // tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

بالإضافة إلى ذلك ، قمنا أيضًا بإزالة بعض التبعيات ذات الصلة لتقليل حجم حزمة gzip:

إعادة كتابة المكون

إعادة كتابة النموذج

يحتوي النموذج ، كمكون عالي التردد ، على واجهة برمجة تطبيقات زائدة قليلاً. يحتاج المستخدم إلى الحصول على مثيل النموذج من خلال HOC الخاص بـ Form.create ، واستخدام form.getFieldDecorator لإجراء ربط البيانات على المكون. بالإضافة إلى ذلك ، يتم إعادة عرض النموذج بالكامل في كل مرة تتغير فيها البيانات ، مما يجعل الأداء مقلقًا في نماذج البيانات الضخمة. في الإصدار 4 ، سيأتي النموذج مع مثيل النموذج. يمكنك ربط البيانات مباشرة من خلال خاصية Form.Item name ، وبالتالي تبسيط الكود الخاص بك:

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

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

بالإضافة إلى ذلك ، يوفر النموذج طريقة الخطافات Form.useForm للسماح لك بالتحكم في مثال النموذج:

const [form] = Form.useForm();

React.useEffect(() => {
  form.setFieldValues({ ... });
});

<Form form={form} />

في الوقت نفسه ، نقدم مكون Form.List ، بحيث يمكنك التحكم بسهولة في حقول القائمة:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

إعادة كتابة الجدول

نظرًا لأننا قمنا بتعديل الحد الأدنى لمتطلبات التوافق ، فقد قمنا بالتغيير إلى تنفيذ الأعمدة الثابتة باستخدام النمط sticky ، مما أدى إلى تقليل استهلاك الأداء بشكل كبير عندما يحتوي النموذج على أعمدة ثابتة. بالنسبة إلى IE 11 الذي لا يدعم sticky ، فإننا نأخذ معالجة الرجوع إلى إصدار أقدم.

في الوقت نفسه ، نقدم واجهة برمجة تطبيقات جديدة summary لتحقيق تأثير سطر الملخص:

يوفر الفارز وظيفة فرز متعددة الأعمدة:

بالإضافة إلى ذلك ، قمنا بتعديل المنطق الأساسي بحيث يمكن الآن خلط fixedColumn و expandable و scroll . يوفر واجهة برمجة تطبيقات body لتخصيص تطبيقات محتوى الجدول ، والتي يمكنك من خلالها تنفيذ تأثيرات مثل التمرير الافتراضي.

منتقي التاريخ الجديد ، منتقي الوقت والتقويم

لقد أعدنا كتابة مكون التاريخ ككل لفصله عن moment . يمكنك إنشاء مكونات منتقي لمكتبات التاريخ المخصصة باستخدام طريقة generate التي نقدمها. للحفاظ على التوافق ، لا يزال مكون المنتقى الافتراضي يستخدم moment كمكتبة التاريخ. يرجى الرجوع إلى هنا لمكتبة التاريخ المخصصة.

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

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

بالنسبة إلى محدد النطاق ، قمنا أيضًا بتحسين التفاعل. يمكنك الآن تحديد وقت البدء أو الانتهاء بشكل فردي ، وهو يعمل على تحسين تجربة إدخال التاريخ اليدوي بشكل مثالي.

خطاف دعم الإعلام / مشروط

في الماضي ، ربما تكون قد واجهت مشكلة أن طرق الاتصال Modal.xxx و Notification.xxx لا يمكنها الحصول على السياق. هذا لأننا سننشئ أيضًا مثيل React من خلال ReactDOM.render لهذه السكريات النحوية ، مما يتسبب أيضًا في مشكلة فقدان السياق. في الإصدار الجديد ، نقدم طريقة الخطافات ، والتي تسمح لك بحقن العقد حيث تحتاج إلى الحصول على السياق:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

التمرير الافتراضي

في الإصدار 4 ، قمنا بتحديث Tree و TreeSelect و Select. بشكل افتراضي ، يستخدمون تقنية التمرير الافتراضية لتحسين أدائهم لحمل قدر كبير من عرض الخيار.

عرض حي

بالإضافة إلى ذلك ، تم تحسين تفاعل لوحة المفاتيح وإمكانية الوصول.

المزيد من الميزات / الميزات / التحسينات الجديدة

• يوفر ConfigProvider تهيئة direction لدعم rtl لتدويل اللغة.
• يدعم النموذج و ConfigProvider إعداد size بما في ذلك حجم المكون.
• يضيف أسلوب الطباعة سمة suffix .
• يضيف التقدم المكون الفرعي steps .
• يدعم TextArea onResize .
• تستخدم الشبكة تخطيط flex .
• ......

يمكنك النقر هنا لمشاهدة سجل التحديث الكامل.

كيفية الترقية

لجعل الترقية سهلة قدر الإمكان ، نحافظ على أقصى قدر من التوافق. ولكن لا تزال هناك بعض التغييرات العاجلة التي تحتاج إلى الاهتمام يمكنك أولاً محاولة الترحيل باستخدام أداة codemod التي نقدمها ، وترحيل بعض الأجزاء التي لا يمكن ترحيلها يدويًا. يرجى الرجوع إلى المستند للترقية.

فوق الكل

لا يمكن فصل ولادة Ant Design 4.0 عن مساهمات ودعم المتطوعين المجتمعيين. شكرًا لـ saeedrahimi على تدويل rtl و shaodahong مساهمات في حزم التوافق ، وكل من شارك في المساعدة في التطوير إن مساهمتك في فتح المصدر هي التي تجعل Ant Design أفضل!

النسخة الرسمية من Ant Design 4.0 هنا!

المقدمة

أصدرنا الإصدار 4.0 rc بمناسبة SEE Conf. بعد أكثر من شهر من جمع التعليقات وتعديلها ، أطلقنا أخيرًا الإصدار الرسمي 4.0! شكرا لكل من قدم الملاحظات والاقتراحات والمساهمات خلال هذه الفترة. سنقوم بدمج التحديثات المضمنة بالفعل في إصدار rc وبعض الإضافات الأكثر أهمية التي سيتم سردها هنا. يمكن النقر هنا المستند المحدث الكامل. عنوان مستند الإصدار 4: https://ant.design

تجدر الإشارة إلى أن الإصدار v3 تم دمجه في الفرع 3.x-stable ودخل في حالة الصيانة في ديسمبر 2019. سنظل نحتفظ بالإصدار v3 لمدة ستة أشهر. آخر موعد للصيانة مايو 2020.

ترقية مواصفات التصميم

قمنا بتعديل الشريحة الأساسية من 4px إلى 2px . تأخذ المنتجات المتوسطة والخلفية الكفاءة كأولوية أولى ، ونمط الزاوية المستديرة هو أحد التفاصيل المهمة في واجهة المستخدم. تعمل الزوايا الدائرية الأصغر على تقليل تفاصيل الواجهة بصريًا وتحسين كفاءة قراءة المعلومات. بالإضافة إلى ذلك ، قمنا بتعديل الظل لجعله أكثر انسجامًا مع الظل الحقيقي ، وفي نفس الوقت يعكس مستوى المعلومات بشكل أفضل.

مظهر داكن

لقد قمنا بترقية نظام الألوان استنادًا إلى الإصدار v3 ، ويوفر الإصدار 4 سمة داكنة. يمكنك النقر فوق وظيفة تبديل السمة على الصفحة لعرض تأثير السمة الداكنة:

مكونات بلا حدود

في مجال الأعمال ، وجدنا أن بعض السيناريوهات سيكون لها مكونات اختيار خفيفة الوزن. لذلك ، نقدم نمطًا جديدًا بلا حدود يسمح للمطورين بتضمين هذه المكونات بسهولة أكبر دون أنماط تجاوز إضافية.

تعديل التوافق

بذل Ant Design 3.0 الكثير من الجهود ليكون متوافقًا مع الإصدار القديم من IE. ومع ذلك ، وفقًا لإحصائيات الصناعة ، تتقلص الحصة العالمية والمحلية لمتصفح IE9 / 10 مع تحديث نظام Windows. نحن في الإصدار 4.0 ونتوقف عن دعم IE 9/10 (لكننا سنواصل دعم IE 11). لذلك ، ستحصل أيضًا بعض المكونات منخفضة الأداء في الماضي على تحسينات في الأداء باستخدام ميزات css الجديدة.

في الوقت نفسه ، قمنا أيضًا بترقية الحد الأدنى من إصدار React الذي يعتمد عليه الإصدار 4 إلى React 16.9. هذا يعني أن الإصدار v4 سيوفر المزيد من الروابط لتبسيط التعليمات البرمجية الخاصة بك.

بالإضافة إلى ذلك ، قمنا أيضًا بإزالة بعض واجهات برمجة التطبيقات القديمة التي تم تحذيرها في الإصدار v3. نوصي بشدة بترقية مشروعك الحالي إلى الإصدار الأخير من v3 وتحديث واجهة برمجة التطبيقات القديمة بناءً على معلومات التحذير.

مقاس اصغر

في [email protected] ، قدمنا ​​رمز svg ( لماذا تستخدم أيقونة svg؟ ). لا يمكن تحميل رمز API الذي يستخدم تسمية السلسلة عند الطلب ، لذلك يتم تقديم ملف رمز svg بالكامل ، مما يزيد بشكل كبير من حجم المنتج المعبأ. في الإصدار 4.0 ، قمنا بتعديل واجهة برمجة تطبيقات استخدام الرمز لدعم اهتزاز الشجرة وتقليل حجم الحزمة الافتراضي antd بحوالي 150 كيلوبايت (Gzipped).

سيصبح الإصدار القديم من استخدام الرمز قديمًا:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

في الإصدار 4.0 ، سيتم اعتماد طريقة التقديم عند الطلب:

import { Button } from 'antd';

// tree-shaking supported
- import { Icon } from 'antd';
+ import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
    <div>
-     <Icon type="smile" />
+     <SmileOutlined />
      <Button icon={<SmileOutlined />} />
    </div>
  );

  // or directly import
  import SmileOutlined from '@ant-design/icons/SmileOutlined';

بالإضافة إلى ذلك ، قمنا أيضًا بتبسيط التبعيات ذات الصلة لتقليل حجم الحزمة (Gzipped):

إعادة المكون

إعادة النموذج

النموذج هو مكون مستخدَم بشكل متكرر ، وواجهة برمجة التطبيقات الخاصة به زائدة عن الحاجة. يحتاج المستخدم إلى الحصول على مثيل النموذج من خلال طريقة HOC Form.create ، واستخدام form.getFieldDecorator لربط بيانات المكون. بالإضافة إلى ذلك ، ستتم إعادة عرض النموذج بالكامل في كل مرة تتغير فيها البيانات ، مما يجعل الأداء مقلقًا في نموذج البيانات الضخمة. في الإصدار v4 ، سيكون للنموذج مثيل النموذج الخاص به ، ويمكنك مباشرة ربط البيانات من خلال خاصية Form name

- const { form } = this.props;

- const onSubmit = () => {
-   form.validateFields((err, values) => {
-     if (!err) {
-      console.log('Received values of form: ', values);
-    }
-   });
- };

+ const onFinish = (values) => {
+   console.log('Received values of form: ', values);
+ };

- <Form onSubmit={onSubmit}>
+ <Form onFinish={onFinish}>
-   <Form.Item>
+   <Form.Item name="username">
-     {getFieldDecorator('username')(
-       <Input />,
-     )}
+     <Input />
    </Form.Item>
  </Form>

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

بالإضافة إلى ذلك ، يوفر النموذج طريقة الخطافات Form.useForm مما يسمح لك بالتحكم في مثال النموذج:

const [form] = Form.useForm();

React.useEffect(() => {
    form.setFieldValues({ ... });
});

<Form form={form} />

في الوقت نفسه ، نوفر مكون Form.List بحيث يمكنك التحكم بسهولة في حقول القائمة:

<Form.List name="names">
  {(fields, { add, remove }) => (
    <div>
      {fields.map(field) => <Form.Item {...field}><Input /></Form.Item>}
      <Button onClick={() => add(initialValue)}>Add</Button>
    </div>
  }
</Form.List>

إعادة الجدول

نظرًا لأننا قمنا برفع الحد الأدنى من متطلبات التوافق ، فقد قمنا بتغيير استخدام النمط sticky لتنفيذ الأعمدة الثابتة ، وبالتالي تقليل استهلاك الأداء بشكل كبير عندما يحتوي النموذج على أعمدة ثابتة. بالنسبة إلى IE 11 الذي لا يدعم sticky ، سنخفضه.

في الوقت نفسه ، نقدم واجهة برمجة تطبيقات جديدة summary لتحقيق تأثير سطر الملخص:

يوفر الفارز وظيفة الفرز متعدد الأعمدة:

بالإضافة إلى ذلك ، قمنا بتعديل المنطق الأساسي ، والآن يمكن خلط fixedColumn ، expandable ، scroll . يتم توفير واجهة برمجة التطبيقات body لتحقيق محتوى الجدول المخصص ، بحيث يمكنك تحقيق تأثيرات مثل التمرير الافتراضي.

منتقي التاريخ الجديد ، منتقي الوقت والتقويم

نعيد كتابة مكون التاريخ ككل ، لذلك نفصله عن moment . يمكنك إنشاء مكون المنتقي من مكتبة التاريخ المخصصة من خلال طريقة generate التي نقدمها. من أجل الحفاظ على التوافق ، لا يزال مكون المنتقى الافتراضي يستخدم moment كمكتبة التاريخ. يرجى الرجوع إلى هنا لمكتبة التاريخ المخصصة.

بالإضافة إلى ذلك ، نقدم مجموعة كاملة من محددات الوقت والتاريخ والأسبوع والشهر والسنة ومحددات النطاق المقابلة. يمكنك استخدام خاصية picker لتعيينها ، ولم تعد بحاجة إلى استخدام الطريقة الخاضعة للرقابة mode لتنفيذ محدد خاص:

<RangePicker />
<RangePicker showTime />
<RangePicker picker="week" />
<RangePicker picker="month" />
<RangePicker picker="year" />

في محدد النطاق ، قمنا أيضًا بتحسين التفاعل. يمكنك الآن تحديد وقت البدء أو الانتهاء بشكل فردي ، وتم تحسين تجربة إدخال التاريخ يدويًا بشكل مثالي.

يوفر الإعلام / مشروط خطافات

في الإصدار السابق ، قد تواجه مشكلة أن طرق الاتصال Modal.xxx و Notification.xxx لا يمكنها الحصول على السياق. هذا لأننا سننشئ أيضًا مثيل React من خلال ReactDOM.render لهذه السكريات النحوية ، مما يؤدي أيضًا إلى مشكلة فقدان السياق. في الإصدار الجديد ، نقدم طريقة الخطافات بحيث يمكنك حقن العقد في المكان الذي تريد الحصول على السياق فيه:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is in Context1 which mean api will not get context of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is out of Context2 which mean api will not get context of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

التمرير الافتراضي

في الإصدار 4 ، قمنا بتعديل Tree و TreeSelect و Select ، والتي تستخدم تقنية التمرير الافتراضية لتحسين الأداء افتراضيًا لنقل كميات كبيرة من البيانات لعرض الخيارات.

عرض حي

بالإضافة إلى ذلك ، تم أيضًا تحسين تفاعل لوحة المفاتيح وإمكانية الوصول.

المزيد من الوظائف الجديدة / الميزات / أجزاء التحسين

• يوفر ConfigProvider تهيئة direction لدعم rtl لتدويل اللغة.
• يدعم Form and ConfigProvider size لتعيين حجم المكون المضمن.
• يضيف أسلوب الطباعة سمات suffix .
• يضيف التقدم مكونات فرعية steps .
• يدعم TextArea onResize .
• تستخدم الشبكة التخطيط flex .
• ...

يمكنك النقر هنا لعرض سجل التحديث الكامل.

كيفية الترقية

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

الأعلي

لا يمكن فصل ولادة Ant Design 4.0 عن مساهمة ودعم المتطوعين المجتمعيين. بفضل saeedrahimi لتحقيق وظيفة التدويل rtl ، shaodahong لمساهمة الحزمة المتوافقة ، وكل من شارك في التطوير. إن مساهمتك في فتح المصدر هي التي تجعل Ant Design أفضل!