fuse-input-validation/ValidatedTextInput.ux at master · mokko-labs/fuse-input-validation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<TextInput Value="{Property Text}" ux:Class="ValidatedTextInput" Padding="10" BorderColor="#000" Error="Empty" Margin="2" Required="false" IsUntouched="true" ShouldShowError="false" MinLength="1" ErrorBorderColor="#f00" ValidationMethod="normal">

    <bool ux:Property="Required" />
    <bool ux:Property="IsValid" />
    <bool ux:Property="IsUntouched" />
    <string ux:Property="ValidationMethod" />

    <float ux:Property="MinLength" />
    <string ux:Property="Error" />
    <string ux:Property="Text" />

    <!-- Controls internal display -->
    <float4 ux:Property="ErrorBorderColor" />
    <float4 ux:Property="BorderColor" />
    <bool ux:Property="ShouldShowError" />

    <JavaScript>


    function doValidation(obj, text) {

        if(!obj.Required.value) {
            obj.IsValid.value = true;
            obj.Error.value = null;
            obj.ShouldShowError.value = false;

            return;
        }

        if(obj.IsUntouched.value == true) {
            obj.Error.value = null;
            obj.ShouldShowError.value = false;

            return;
        }

          if(text && text.length && text.length >= obj.MinLength.value) {
                obj.IsValid.value = true;
                obj.Error.value = null;
                obj.ShouldShowError.value = false;
            } else {
                obj.IsValid.value = false;
                obj.Error.value = "String is empty.";
                obj.ShouldShowError.value = true;
              }

    }

      this.Required.onValueChanged(arg => {
          doValidation(this, this.Text.value);
      });

      this.Text.onValueChanged(arg => {
          this.IsUntouched.value = false;
          doValidation(this, arg);
      });

      function setUntouched() {
          this.IsUntouched.value = true;
          this.ShouldShowError.value = false;
      }

      module.exports = {
          setUntouched: setUntouched,
      }

    </JavaScript>
  <WhileTrue Value="{Property ShouldShowError}">
      <Change this.BorderColor="{ReadProperty ErrorBorderColor}" />
  </WhileTrue>
    <Rectangle Layer="Background" CornerRadius="4">
      <Stroke Color="{Property BorderColor}" Width="2" ux:Name="Border" />
    </Rectangle>
</TextInput>