search

vaizard / glued-archived

1 stars 3 forks source link

RJFS compatibility with text-mask #55

Open killua-eu opened 6 years ago

killua-eu commented 6 years ago

Test if we can combine https://github.com/mozilla-services/react-jsonschema-form with some text-masking libraries such as

as a quick hack, or if we have to write a custom widget as per https://github.com/mozilla-services/react-jsonschema-form/issues/467

agatlin commented 6 years ago

I also am very interested in this.

pohadkar commented 6 years ago

a ty mas informace ze to jde kombinovat, nebo te to jen tak napadlo, ze by to bylo fajn a posilas me do potencialni slepe ulicky, jako vetsinou? :)

pohadkar commented 6 years ago

dnes jsem to zkousel. zvolil jsem knihovnu saniassin. na glued je testovaci stranka, pristupna z developers tools. zkousel jsem nejdrive vygenerovat klasicky json schema form a pod nej do jineho elementu jen jeden maskovany input. ukazalo se, ze to ani v tom zakladnim tvaru nefunguje. pripojena knihovna hlasi nejakou chybu. ze undefined je undefined nebo tak neco :) hadam ze tam bude konflikt s jinou knihovnou. ale neni to s knihovnou json schema. tu jsem odstranil a hlasi to stale. takze to bude asi s jquery. dalsi testovani presouvam na pozdeji. bud se pokusim zjistit s cim je konflikt, nebo pouziju jinou knihovnu.

killua-eu commented 6 years ago

Sofar no success with https://sanniassin.github.io/react-input-mask/demo.html.

pohadkar commented 6 years ago

podarilo se mi zprovoznit maskovani inputu v jsonschema vygenerovanem formulari.

postup:

  1. je treba nainstalovat si tento script pomoci npm https://github.com/text-mask/text-mask/tree/master/vanilla a pripojit ho do html kodu

  2. predpokladame ze json schema formy generujete pomoci react, react dom a mate babel, takze generovani formu provadite funkci ReactDOM.render. v teto funkci si zadate treti parametr takto:

ReactDOM.render((...zde je html formu....), document.getElementById("main"), function () { mask_inputs(); } );

  1. nyni si v jinem js bloku, ktery je typu text/javascript nadefinujete funkci mask_inputs() napriklad takto:

function mask_inputs() { // vytvorite si masku, dle dokumentace scriptu var phoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]; // zacilite input ve vygenerovanem json schema formulari var myInput = document.querySelector('#root_data_owner'); // provedete spusteni maskovani na dany input a s danou definici masky var maskedInputController = vanillaTextMask.maskInput({ inputElement: myInput, mask: phoneMask }); }

  1. do funkce je mozne zapsat masek a inputu kolik chcete, nebo je mozne zacilit inputy v json schema formulari pomoci tridy. takze kazda trida bude mit jinou masku. musite ale vygenerovat formular s temi tridami.
killua-eu commented 6 years ago

So its actually working well with https://text-mask.github.io/text-mask/ (for now without any integration into rjsf) - will rewrite @pohadkar 's comment into an integration howto (will probably land in the wiki). Once documented, this issue will be closed again. Proper integration is beyond the scope of this issue.