Feliz: أضف ميزة KeyboardEvent للربط بسهولة بأحداث الضغط على المفاتيح

تم إنشاؤها على ٢ نوفمبر ٢٠١٩  ·  6تعليقات  ·  مصدر: Zaid-Ajaj/Feliz

كنت أفكر في إضافة طريقة لطيفة للربط بأحداث لوحة المفاتيح ، شيء مثل ما يلي سيكون رائعًا حقًا:

السيناريو 1: الارتباط بحدث رئيسي واحد (حالة الاستخدام الأكثر شيوعًا)

Html.input [
    prop.onKeyUp(key.enter, fun _ -> dispatch Login)
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

السيناريو 2.1: الربط بمفاتيح متعددة

Html.input [
    prop.onKeyUp [ key.enter, fun _ -> dispatch Login ]
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

السيناريو 2.2: الربط بمفاتيح متعددة

Html.input [
    prop.onKeyUp(dispatch, [ key.enter, Login; key.esc, Reset ])
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

هذا الأمر متروك للإمساك به! العلاقات العامة هي موضع ترحيب كبير ، اسمح لي وللمساهمين الآخرين بمعرفة ما إذا كنت ترغب في القيام بذلك

Feliz good first issue help wanted
مصدر
picture Zaid-Ajaj
👍1

ال 6 كومينتر

أوه ، لطيف ، أحب طريقة تفكيرك!

قراءة IMHO Key أفضل من Keys ، أي Key.Enter مقابل Keys.Enter .

cmeeren picture cmeeren في ٢ نوفمبر ٢٠١٩

cmeeren أنت محق ، للحفاظ على اتساقها ، استخدمنا كلمة مفردة للوحدات النمطية prop ، style و key (ذات الغلاف السفلي) ستكون إضافة طبيعية 👍

Zaid-Ajaj picture Zaid-Ajaj في ٢ نوفمبر ٢٠١٩

نعم ، على الرغم من أنني لاحظت أن لدينا colors والآن fonts ... شيء يجب التفكير في تغييره. :)

cmeeren picture cmeeren في ٢ نوفمبر ٢٠١٩

cmeeren أصدر مشكلة حول colors و fonts عند 95 #

تنقيح الاقتراح

السيناريو 2.2 غير متسق مع بقية معالجات الأحداث لأنه يعني أنه يجب علينا أيضًا تنفيذ onClick(dispatch, Login) وعلى الأرجح لن نقوم بذلك (التعليقات والمناقشة مرحب بها بالطبع)

بالنسبة للسيناريو 1 والسيناريو 2 ، يجب أن تقبل معالجات الأحداث هناك KeyboardEvent كوسيطة لـ lambda (بجانب المفتاح). على سبيل المثال ، ستستغرق أحداث لوحة المفاتيح الأحمال الزائدة:

KeyboardEvent -> unit // default
IKeyboardKey * (KeyboardEvent -> unit) // scenario 1
(IKeyboardKey * (KeyboardEvent -> unit)) list // scenario 2
Zaid-Ajaj picture Zaid-Ajaj في ٢ نوفمبر ٢٠١٩

تبدو جيدة بالنسبة لي. الدليل موجود في الحلوى. دعونا نرى كيف تشعر في الاستخدام. :)

cmeeren picture cmeeren في ٢ نوفمبر ٢٠١٩
🚀1

تمت إضافة جودة لوحة المفاتيح:

// Enter only
prop.onKeyUp (key.enter, fun _ -> dispatch Login)
// Enter + CTRL
prop.onKeyUp (key.ctrl(key.enter), fun _ -> dispatch Login)
// Enter + SHIFT
prop.onKeyUp (key.shift(key.enter), fun _ -> dispatch Login)
// Enter + CTRL + SHIFT
prop.onKeyUp (key.ctrlAndShift(key.enter), fun _ -> dispatch Login)
Zaid-Ajaj picture Zaid-Ajaj في ٢٠ مارس ٢٠٢٠
🚀1
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

Dzoukr picture Dzoukr  ·  6تعليقات
Dzoukr picture Dzoukr  ·  9تعليقات
Dzoukr picture Dzoukr  ·  9تعليقات
alfonsogarciacaro picture alfonsogarciacaro  ·  6تعليقات
Dzoukr picture Dzoukr  ·  10تعليقات