Ant Design 4.0 keluar!

pengantar

Kami merilis versi 4.0 rc di SEE Conf. Setelah lebih dari sebulan mengumpulkan dan menyesuaikan umpan balik, saatnya merilis 4.0! Terima kasih untuk semua yang telah memberikan masukan, saran, dan kontribusi selama periode ini. Kami akan menggabungkan pembaruan yang sudah terlibat dalam versi rc dan beberapa pembaruan baru-baru ini di sini. Dokumentasi lengkap yang diperbarui dapat ditemukan di sini . Alamat dokumen v4: https://ant.design

Perlu dicatat bahwa versi v3 digabungkan ke dalam cabang 3.x-stable pada bulan Desember 2019 dan sedang dalam pemeliharaan. Kami masih akan melakukan pekerjaan pemeliharaan setengah tahun untuk versi v3. Batas waktu pemeliharaan adalah Mei 2020.

Peningkatan spesifikasi desain

Kami telah menyesuaikan sudut melengkung dasar dari 4px menjadi 2px . Fillet itu sendiri adalah detail, dan di adegan tengah dan latar belakang, kami menjadikan efisiensi sebagai prioritas pertama, jadi kami mengurangi detail visual antarmuka dan meningkatkan efisiensi pembacaan informasi antarmuka. Selain itu, kami telah menyesuaikan bayangan agar lebih konsisten dengan bayangan nyata, sekaligus menekankan hierarki informasi.

Tema gelap

Kami telah meningkatkan sistem warna berdasarkan versi v3, dan v4 menyediakan tema gelap. Anda dapat mengklik fungsi sakelar tema di halaman untuk melihat efek tema gelap:

Komponen tanpa batas

Dalam pekerjaan sehari-hari, kami menemukan bahwa ada komponen seleksi ringan dalam beberapa skenario. Jadi kami menyediakan gaya tanpa batas baru yang memungkinkan pengembang untuk lebih mudah menyematkan komponen ini tanpa menimpa gaya.

Penyesuaian kompatibilitas

Ant Design 3.0 telah melakukan banyak upaya agar kompatibel dengan versi IE yang lebih lama. Namun, menurut statistik industri, browser IE9 / 10 global dan domestik menyusut dengan pembaruan sistem Windows. Kami berhenti mendukung IE 9/10 di 4.0 (tetapi masih akan mendukung IE 11). Oleh karena itu, beberapa komponen berkinerja rendah di masa lalu juga akan mendapatkan kinerja dengan fitur css yang baru.

Pada saat yang sama, kami juga meningkatkan versi minimum React yang bergantung pada v4 menjadi React 16.9. Artinya, versi v4 akan menyediakan lebih banyak pengait untuk menyederhanakan kode Anda.

Selain itu, kami telah menghapus beberapa API usang yang diperingatkan dalam rilis v3. Kami sangat menyarankan Anda untuk mengupgrade proyek Anda saat ini ke versi terakhir v3 dan memperbarui API yang sudah tidak digunakan lagi berdasarkan pesan peringatan.

Ukuran lebih kecil

Di antd @ 3.9.0 , kami memperkenalkan ikon svg ( Mengapa menggunakan ikon svg? ). API ikon yang menggunakan nama string tidak dapat dimuat sesuai permintaan, sehingga file ikon svg diperkenalkan sepenuhnya, yang sangat meningkatkan ukuran produk yang dikemas. Di 4.0, kami menyesuaikan API penggunaan ikon untuk mendukung goyangan pohon, mengurangi ukuran paket default Antant sekitar 150 KB (Gzip).

Penggunaan Ikon Lama akan dibuang:

import { Icon, Button } from 'antd';

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

Di 4.0, itu akan diperkenalkan sesuai permintaan:

  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';

Selain itu, kami juga telah menghapus beberapa dependensi terkait untuk mengurangi ukuran paket gzip:

Penulisan ulang komponen

Formulir penulisan ulang

Bentuk, sebagai komponen frekuensi tinggi, memiliki API yang sedikit berlebihan. Pengguna perlu mendapatkan contoh formulir melalui HOC dari Form.create, dan menggunakan form.getFieldDecorator untuk melakukan pengikatan data pada komponen. Selain itu, seluruh formulir dirender ulang setiap kali data berubah, yang membuat kinerja mengkhawatirkan dalam formulir data besar. Dalam versi v4, Formulir akan datang dengan contoh formulir. Anda dapat langsung mengikat data melalui properti Formulir name Item, dengan demikian menyederhanakan kode Anda:

- 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>

Kami menemukan bahwa di sebagian besar skenario, pengembang sebenarnya hanya peduli dengan nilai yang berhasil dikirimkan formulir. Jadi kami menyediakan onFinish , yang hanya akan diaktifkan setelah validasi formulir berlalu, dan validateFields tidak lagi diperlukan.

Selain itu, Formulir menyediakan metode kait Form.useForm untuk memungkinkan Anda mengontrol contoh formulir:

const [form] = Form.useForm();

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

<Form form={form} />

Pada saat yang sama, kami menyediakan komponen Form.List, sehingga Anda dapat dengan mudah mengontrol kolom daftar:

<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>

Penulisan ulang tabel

Karena kami telah menyesuaikan persyaratan minimum untuk kompatibilitas, kami telah mengubah penerapan kolom tetap menggunakan gaya sticky , sehingga sangat mengurangi konsumsi kinerja ketika formulir memiliki kolom tetap. Untuk IE 11 yang tidak mendukung sticky , kami melakukan pemrosesan downgrade.

Pada saat yang sama, kami menyediakan API summary untuk mencapai efek baris ringkasan:

Penyortir menyediakan fungsi pengurutan multi-kolom:

Selain itu, kami menyesuaikan logika yang mendasari sehingga fixedColumn , expandable dan scroll sekarang dapat dicampur. Menyediakan API body untuk menyesuaikan implementasi konten tabel, tempat Anda dapat menerapkan efek seperti pengguliran virtual.

DatePicker, TimePicker dan Kalender baru

Kami telah menulis ulang komponen tanggal secara keseluruhan untuk memisahkannya dari moment . Anda dapat membuat komponen Picker untuk pustaka tanggal khusus menggunakan metode generate yang kami sediakan. Untuk menjaga kompatibilitas, komponen Picker default masih menggunakan moment sebagai pustaka tanggal. Silakan merujuk ke sini untuk perpustakaan tanggal kustom.

Selain itu, kami menyediakan sekumpulan lengkap pemilih waktu, tanggal, minggu, bulan, tahun, dan pemilih rentang yang sesuai. Anda dapat menyetelnya melalui properti picker, alih-alih mengimplementasikan selektor khusus melalui metode mode terkontrol:

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

Untuk pemilih rentang, kami juga telah mengoptimalkan interaksi. Anda sekarang dapat memilih waktu mulai atau berakhir satu per satu, dan ini mengoptimalkan pengalaman entri tanggal manual dengan sempurna.

Notification / Modal support Hooks

Di masa lalu, Anda mungkin mengalami masalah karena metode panggilan Modal.xxx dan Notification.xxx tidak bisa mendapatkan Konteks. Ini karena kami juga akan membuat instance React melalui ReactDOM.render untuk gula sintaksis ini, yang juga menyebabkan masalah hilangnya konteks. Di versi baru, kami menyediakan metode hooks, yang memungkinkan Anda memasukkan node di mana Anda perlu mendapatkan konteksnya:

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>
);

Gulir virtual

Di v4, kami telah mengupgrade Tree, TreeSelect, dan Select. Secara default, mereka menggunakan teknologi pengguliran virtual untuk mengoptimalkan kinerja mereka untuk melakukan rendering opsi dalam jumlah besar.

Demo hidup

Selain itu, interaksi keyboard dan aksesibilitas dioptimalkan.

Lebih banyak fitur / fitur / pengoptimalan baru

• ConfigProvider menyediakan konfigurasi direction untuk mendukung internasionalisasi bahasa rtl .
• Formulir dan ConfigProvider mendukung size pengaturan termasuk ukuran komponen.
• Tipografi menambahkan atribut suffix .
• Kemajuan menambahkan steps subkomponen.
• TextArea mendukung onResize .
• Grid menggunakan layout flex .
• ......

Anda dapat mengklik di sini untuk melihat log pembaruan lengkap.

Cara meningkatkan

Untuk membuat peningkatan semudah mungkin, kami menjaga kompatibilitas maksimum. Namun masih ada beberapa perubahan yang perlu diperhatikan. Anda dapat mencoba bermigrasi terlebih dahulu menggunakan alat codemod yang kami sediakan, dan secara manual memigrasi beberapa bagian yang tidak dapat dimigrasi. Silakan merujuk ke dokumen untuk peningkatan.

Diatas segalanya

Lahirnya Ant Design 4.0 tidak lepas dari kontribusi dan dukungan para relawan komunitas. Terima kasih kepada @saeedrahimi atas internasionalisasi rtl , Kontribusi @shaodahong untuk Paket Kompatibilitas, dan semua orang yang terlibat dalam membantu pengembangan. Ini adalah kontribusi Anda untuk open source yang membuat Ant Design menjadi lebih baik!

Versi resmi Ant Design 4.0 telah hadir!

pengantar

Kami merilis versi 4.0 rc pada kesempatan SEE Conf. Setelah lebih dari sebulan mengumpulkan dan menyesuaikan umpan balik, kami akhirnya meluncurkan versi resmi 4.0! Terima kasih kepada semua orang yang telah memberikan masukan, saran dan kontribusi selama periode ini. Kami akan menggabungkan pembaruan yang sudah terlibat dalam versi rc dan beberapa tambahan baru yang penting untuk dicantumkan di sini. Dokumen lengkap yang diperbarui dapat diklik di sini . Alamat dokumen v4: https://ant.design

Perlu dicatat bahwa versi v3 telah digabungkan ke dalam cabang 3.x-stable pada bulan Desember 2019 dan memasuki status pemeliharaan. Kami masih akan mempertahankan versi v3 selama setengah tahun. Batas waktu pemeliharaan adalah Mei 2020.

Peningkatan spesifikasi desain

Kami menyesuaikan fillet dasar dari 4px menjadi 2px . Produk tengah dan belakang menggunakan efisiensi sebagai prioritas pertama, dan gaya sudut membulat adalah detail penting pada UI. Sudut membulat yang lebih kecil secara visual mengurangi detail antarmuka dan meningkatkan efisiensi pembacaan informasi. Selain itu, kami menyesuaikan bayangan untuk membuatnya lebih sejajar dengan bayangan nyata, dan pada saat yang sama mencerminkan tingkat informasi dengan lebih baik.

Tema gelap

Kami telah meningkatkan sistem warna berdasarkan versi v3, dan v4 menyediakan tema gelap. Anda dapat mengklik fungsi sakelar tema di halaman untuk melihat efek tema gelap:

Komponen tanpa bingkai

Dalam bisnis, kami menemukan bahwa beberapa skenario akan memiliki komponen pemilihan yang ringan. Oleh karena itu, kami menyediakan gaya tanpa batas baru yang memungkinkan pengembang menyematkan komponen ini dengan lebih mudah tanpa harus menimpa gaya.

Penyesuaian kompatibilitas

Ant Design 3.0 telah melakukan banyak upaya agar kompatibel dengan versi lama IE. Namun, menurut statistik industri, pangsa global dan domestik browser IE9 / 10 menyusut dengan pembaruan sistem Windows. Kami menggunakan versi 4.0 dan berhenti mendukung IE 9/10 (tetapi masih akan mendukung IE 11). Oleh karena itu, beberapa komponen berperforma rendah di masa lalu juga akan mendapatkan peningkatan performa dengan fitur css yang baru.

Pada saat yang sama, kami juga meningkatkan versi minimum React yang bergantung pada v4 menjadi React 16.9. Artinya, versi v4 akan menyediakan lebih banyak pengait untuk menyederhanakan kode Anda.

Selain itu, kami juga telah menghapus beberapa API usang yang diperingatkan di versi v3. Kami sangat menyarankan agar Anda meningkatkan proyek Anda saat ini ke versi terakhir v3 dan memperbarui API yang sudah usang berdasarkan informasi peringatan.

Ukuran lebih kecil

Di [email protected] , kami memperkenalkan ikon svg ( mengapa menggunakan ikon svg? ). API ikon yang menggunakan penamaan string tidak dapat dimuat sesuai permintaan, sehingga file ikon svg diperkenalkan sepenuhnya, yang sangat meningkatkan ukuran produk yang dikemas. Di 4.0, kami menyesuaikan API penggunaan ikon untuk mendukung goyangan pohon dan mengurangi ukuran paket default antd sekitar 150 KB (Gzip).

Versi lama penggunaan Ikon akan usang:

import { Icon, Button } from 'antd';

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

Di 4.0, metode pengenalan sesuai permintaan akan diadopsi:

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';

Selain itu, kami juga menyederhanakan dependensi terkait untuk mengurangi ukuran paket (Gzip):

Ulangi komponen

Formulir ulangi

Formulir adalah komponen yang sering digunakan, dan API-nya sedikit berlebihan. Pengguna perlu mendapatkan contoh formulir melalui metode HOC Form.create , dan menggunakan form.getFieldDecorator untuk mengikat data komponen. Selain itu, seluruh formulir akan dirender ulang setiap kali ada perubahan data, yang membuat kinerja mengkhawatirkan dalam formulir data besar. Dalam versi v4, Formulir akan memiliki contoh formulirnya sendiri, dan Anda dapat langsung melakukan pengikatan data melalui properti Formulir name Item untuk menyederhanakan kode Anda:

- 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>

Kami menemukan bahwa di sebagian besar skenario, pengembang hanya memperhatikan nilai pengiriman formulir. Oleh karena itu, kami menyediakan onFinish , yang hanya akan dipicu setelah formulir divalidasi, dan validateFields tidak lagi diperlukan.

Selain itu, Formulir menyediakan metode kait Form.useForm memungkinkan Anda untuk mengontrol contoh formulir:

const [form] = Form.useForm();

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

<Form form={form} />

Pada saat yang sama, kami menyediakan komponen Form.List, sehingga Anda dapat dengan mudah mengontrol kolom daftar:

<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>

Ulangi tabel

Karena kami telah meningkatkan persyaratan minimum untuk kompatibilitas, kami telah mengubah untuk menggunakan gaya sticky untuk mengimplementasikan kolom tetap, yang sangat mengurangi konsumsi kinerja ketika formulir memiliki kolom tetap. Untuk IE 11 yang tidak mendukung sticky , kami akan menurunkannya.

Pada saat yang sama, kami menyediakan API summary untuk mencapai efek baris ringkasan:

Untuk penyortir, fungsi pengurutan multi-kolom disediakan:

Selain itu, kami menyesuaikan logika yang mendasari, dan sekarang fixedColumn , expandable , scroll dapat dicampur. API body disediakan untuk realisasi konten tabel kustom, sehingga Anda dapat mencapai efek seperti pengguliran virtual.

DatePicker, TimePicker dan Kalender baru

Kami menulis ulang komponen tanggal secara keseluruhan, jadi kami memisahkannya dari moment . Anda dapat membuat komponen Picker dari pustaka tanggal tersesuai melalui metode generate yang kami sediakan. Untuk menjaga kompatibilitas, komponen Picker default masih menggunakan moment sebagai pustaka tanggal. Silakan merujuk ke sini untuk perpustakaan tanggal kustom.

Selain itu, kami menyediakan sekumpulan lengkap pemilih waktu, tanggal, minggu, bulan, dan tahun serta pemilih rentang yang sesuai. Anda dapat menggunakan properti picker untuk menyetelnya, tidak perlu lagi menggunakan metode terkontrol mode untuk mengimplementasikan selektor khusus:

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

Pada pemilih rentang, kami juga mengoptimalkan interaksi. Anda sekarang dapat memilih waktu mulai atau berakhir satu per satu, dan pengalaman memasukkan tanggal secara manual dioptimalkan dengan sempurna.

Notification / Modal menyediakan Hooks

Di versi sebelumnya, Anda mungkin mengalami masalah karena metode panggilan Modal.xxx dan Notification.xxx tidak bisa mendapatkan Konteks. Ini karena kami juga akan membuat instance React melalui ReactDOM.render untuk gula sintaksis ini, yang juga menyebabkan masalah hilangnya konteks. Di versi baru, kami menyediakan metode hooks sehingga Anda dapat memasukkan node ke tempat yang Anda perlukan untuk mendapatkan konteksnya:

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>
);

Gulir virtual

Di v4, kami telah memodifikasi Tree, TreeSelect, dan Select. Secara default, teknologi pengguliran virtual digunakan untuk pengoptimalan performa guna membawa rendering opsi volume data yang besar.

Demo hidup

Selain itu, interaksi keyboard dan aksesibilitas juga telah dioptimalkan.

Lebih banyak fungsi / fitur / bagian pengoptimalan baru

• ConfigProvider menyediakan konfigurasi direction untuk mendukung internasionalisasi bahasa rtl .
• Formulir dan ConfigProvider mendukung size menyetel ukuran komponen yang disertakan.
• Tipografi menambahkan suffix atribut.
• Kemajuan menambahkan steps komponen anak.
• TextArea mendukung onResize .
• Grid menggunakan tata letak flex .
• ...

Anda dapat mengklik di sini untuk melihat log pembaruan lengkap.

Cara meningkatkan

Untuk menyederhanakan peningkatan sebanyak mungkin, kami telah mempertahankan kompatibilitas maksimum. Namun masih ada beberapa perubahan yang perlu diperhatikan. Anda dapat mencoba bermigrasi terlebih dahulu menggunakan alat codemod yang kami sediakan, dan secara manual memigrasi beberapa konten yang tidak dapat dimigrasi. Silakan merujuk ke dokumen ini untuk peningkatan.

di atas

Lahirnya Ant Design 4.0 tidak terlepas dari kontribusi dan dukungan relawan komunitas.Terima kasih @saeedrahimi yang telah mewujudkan fungsi internasionalisasi rtl , kontribusi @shaodahong untuk paket kompatibilitas, dan semua orang yang berpartisipasi dalam pengembangan. Ini adalah kontribusi Anda untuk open source yang membuat Ant Design menjadi lebih baik!