Exemplo n.º 1
0
        public override ReactElement Render()
        {
            // Margin : marge externe, Padding : marge interne
            var lblAtt = new LabelAttributes
            {
                Style = Style.Margin(20).Padding(5)
            };                                       //.FontSize(12)

            var iAtt = new InputAttributes {
                Type      = InputType.Checkbox,
                ClassName = props.ClassName.Value,
                Checked   = props.Checked,
                Disabled  = props.Disabled,
                OnChange  = e => props.OnChange(e.CurrentTarget.Value)
            };

            return
                (DOM.Span(
                     new Attributes {
                ClassName = props.ClassName.Value
            },
                     DOM.Label(lblAtt, props.Title.Value),
                     DOM.Input(iAtt)
                     ));
        }
Exemplo n.º 2
0
 public override ReactElement Render()
 {
     return(DOM.Div(new Attributes {
         Style = Style.Margin(5).Padding(5).FontSize(18)
     },
                    DOM.H3(props.Label),
                    DOM.Label("Description"),
                    DOM.Input(new InputAttributes
     {
         Value = state.InputValue,
         OnChange = e => SetState(state.With(_ => _.InputValue, e.CurrentTarget.Value))
     }),
                    DOM.Button(
                        new ButtonAttributes
     {
         Disabled = string.IsNullOrWhiteSpace(state.InputValue),
         OnClick = e => AppendTodo(state.InputValue)
     },
                        "Add"
                        ),
                    DOM.Div(
                        state.Todos.Select((todo, index) => new TaskCard(
                                               task: todo,
                                               onChange: updatedTask => SetState(state.With(_ => _.Todos, index, updatedTask)),
                                               onRemove: () => SetState(state.With(_ => _.Todos, value => value.RemoveAt(index)))
                                               ))
                        )
                    ));
 }
Exemplo n.º 3
0
        public override ReactElement Render()
        {
            var iAtt = new InputAttributes {
                Type      = InputType.Checkbox,
                ClassName = props.ClassName.Value,
                Checked   = props.Checked,
                Disabled  = props.Disabled,
                OnChange  = e => props.OnChange(e.CurrentTarget.Value)
            };

            if (!string.IsNullOrEmpty(props.Tip))
            {
                var tooltipAtt = new Attributes {
                    ClassName = "tooltip"
                };
                var tooltiptextAtt = new Attributes {
                    ClassName = "tooltiptext"
                };

                return
                    (DOM.Span(
                         new Attributes {
                    ClassName = props.ClassName.Value
                },
                         DOM.Div(tooltipAtt,
                                 props.Title,
                                 DOM.Span(tooltiptextAtt, props.Tip)
                                 ),
                         DOM.Input(iAtt)
                         ));
            }
            else
            {
                // Margin : marge externe, Padding : marge interne
                var lblAtt = new LabelAttributes
                {
                    Style = Style.Margin(20).Padding(5)
                };                                       //.FontSize(12)

                return
                    (DOM.Span(
                         new Attributes {
                    ClassName = props.ClassName.Value
                },
                         DOM.Label(lblAtt, props.Title),
                         DOM.Input(iAtt)
                         ));
            }
        }
        public override ReactElement Render()
        {
            // Span : Horizontal
            var itemsElements = props.ItemAPI.GetItems()
                                .Select(
                idAndString => DOM.Span(
                    new Attributes {
                Key       = idAndString.Item1,
                ClassName = props.ClassName.Value
            },
                    DOM.Label(new LabelAttributes {
            }, idAndString.Item2),
                    GetInputX(idAndString.Item1, idAndString.Item2)
                    )
                );

            if (string.IsNullOrEmpty(props.Title))
            {
                return
                    (DOM.Span(
                         new Attributes {
                    ClassName = props.ClassName.Value
                },
                         DOM.Span(null, itemsElements)
                         ));
            }
            else
            {
                // Margin : marge externe, Padding : marge interne
                var lblAtt = new LabelAttributes
                {
                    Style = Style.Margin(20).Padding(5)
                };                                           //.FontSize(12)
                return
                    (DOM.Span(
                         new Attributes {
                    ClassName = props.ClassName.Value
                },
                         DOM.Label(lblAtt, props.Title),
                         DOM.Span(null, itemsElements)
                         ));
            }
        }
Exemplo n.º 5
0
 public override ReactElement Render()
 {
     return(DOM.Div(new Attributes(),
                    DOM.Div(state?.Message),
                    DOM.Label("Login"),
                    DOM.Input(new InputAttributes()
     {
         OnChange = ev => UpdateState(s => s.Login = ev.CurrentTarget.Value),
         ClassName = "form-control"
     }),
                    DOM.Label("Password"),
                    DOM.Input(new InputAttributes()
     {
         OnChange = ev => UpdateState(s => s.Password = ev.CurrentTarget.Value),
         Type = InputType.Password,
         ClassName = "form-control"
     }),
                    DOM.Button(new ButtonAttributes()
     {
         Disabled = string.IsNullOrWhiteSpace(state?.Login) ||
                    string.IsNullOrWhiteSpace(state?.Password),
         OnClick = ev =>
         {
             if (state?.Login == "admin" && state?.Password == "123")
             {
                 props.OnComplete();
             }
             else
             {
                 UpdateState(s =>
                 {
                     s.Message = "Invalid username or password";
                 });
             }
         },
         Style = new ReactStyle()
         {
             MarginTop = "15px",
         },
         ClassName = "btn btn-primary"
     }, "Login")));
 }
Exemplo n.º 6
0
        public override ReactElement Render()
        {
            // Div : Vertical : ToDo : faire une option facultative
            //var itemsElements = props.ItemApi.GetItems()
            //    .Select(
            //        idAndString => DOM.Div(
            //        new Attributes { Key = idAndString.Item1, ClassName = "ItemCBLG" },
            //        DOM.Label(new LabelAttributes { }, idAndString.Item2),
            //        GetInputX(idAndString.Item1, idAndString.Item2)
            //        )
            //    );

            // Span : Horizontal
            var itemsElements = props.ItemAPI.GetItems()
                                .Select(
                idAndString => DOM.Span(
                    new Attributes {
                Key       = idAndString.Item1,
                ClassName = props.ClassName.Value
            },
                    DOM.Label(new LabelAttributes {
            }, idAndString.Item2),
                    GetInputX(idAndString.Item1, idAndString.Item2)
                    )
                );

            // Margin : marge externe, Padding : marge interne
            var lblAtt = new LabelAttributes
            {
                Style = Style.Margin(20).Padding(5)
            };                                       //.FontSize(12)

            return
                (DOM.Span(
                     new Attributes {
                ClassName = props.Titre.Value
            },
                     DOM.Label(lblAtt, props.Titre.Value),
                     DOM.Span(null, itemsElements)
                     ));
        }
Exemplo n.º 7
0
        public override ReactElement Render()
        {
            var itemsElements = props.ItemApi.GetItems().Select(idAndString =>
                                                                GetOptionX(idAndString.Item1, idAndString.Item2));

            // Margin : marge externe, Padding : marge interne
            var lblAtt = new LabelAttributes
            {
                Style = Style.Margin(20).Padding(5)
            };                                       //.FontSize(12)

            var tooltipAtt = new Attributes {
                ClassName = "tooltip"
            };
            var tooltiptextAtt = new Attributes {
                ClassName = "tooltiptext"
            };

            if (props.Multiple.Value)
            {
                var selAttMultiple = new SelectAttributes
                {
                    ClassName = props.ClassName.Value,
                    Name      = props.Title.ToString(),
                    Values    = SetItems(props.CheckBoxArray),
                    Multiple  = props.Multiple.Value,
                    Size      = itemsElements.Count(),
                    Disabled  = props.Disabled.Value,
                    // Pour cacher le scroll vertical, il faudrait appliquer un ReactStyle :
                    // OverFlow = Hidden, : appartient à ReactStyle
                    //Padding = 10,
                    //ReadOnly = true,
                    OnChange = e => props.OnChange(e.CurrentTarget.Value),
                };

                if (props.OneListPerLine.Value)
                {
                    if (string.IsNullOrEmpty(props.Tip))
                    {
                        return
                            (DOM.FieldSet(
                                 new FieldSetAttributes {
                            ClassName = props.ClassName.Value
                        },
                                 DOM.Legend(null, props.Title.ToString()),
                                 DOM.Select(selAttMultiple, itemsElements)
                                 ));
                    }
                    else
                    {
                        return
                            (DOM.FieldSet(
                                 new FieldSetAttributes {
                            ClassName = props.ClassName.Value
                        },
                                 DOM.Div(tooltipAtt, props.Title,
                                         DOM.Span(tooltiptextAtt, props.Tip)),
                                 DOM.Select(selAttMultiple, itemsElements)
                                 ));
                    }
                }

                if (string.IsNullOrEmpty(props.Tip))
                {
                    return
                        (DOM.Span(
                             new Attributes {
                        ClassName = props.ClassName.Value
                    },
                             DOM.Label(lblAtt, props.Title.ToString()),
                             DOM.Select(selAttMultiple, itemsElements)
                             ));
                }
                else
                {
                    return
                        (DOM.Span(
                             new Attributes {
                        ClassName = props.ClassName.Value
                    },
                             DOM.Div(tooltipAtt, props.Title,
                                     DOM.Span(tooltiptextAtt, props.Tip)),
                             DOM.Select(selAttMultiple, itemsElements)
                             ));
                }
            }

            var selAttSimple = new SelectAttributes
            {
                ClassName = props.ClassName.Value,
                Name      = props.Title.ToString(),
                Value     = props.ItemSelected.Value,
                Multiple  = props.Multiple.Value,
                Size      = itemsElements.Count(),
                Disabled  = props.Disabled.Value,
                OnChange  = e => props.OnChange(e.CurrentTarget.Value)
            };

            if (props.OneListPerLine.Value)
            {
                // Saut de ligne, un seul SelectList sur une ligne
                // The <fieldset> tag is used to group related elements in a form.
                // The <fieldset> tag draws a box around the related elements.
                // https://www.w3schools.com/tags/tag_fieldset.asp

                if (string.IsNullOrEmpty(props.Tip))
                {
                    return
                        (DOM.FieldSet(
                             new FieldSetAttributes {
                        ClassName = props.ClassName.Value
                    },
                             DOM.Legend(null, props.Title.ToString()),
                             DOM.Select(selAttSimple, itemsElements)
                             ));
                }
                else
                {
                    return
                        (DOM.FieldSet(
                             new FieldSetAttributes {
                        ClassName = props.ClassName.Value
                    },
                             DOM.Div(tooltipAtt, props.Title,
                                     DOM.Span(tooltiptextAtt, props.Tip)),
                             DOM.Select(selAttSimple, itemsElements)
                             ));
                }
            }

            // Pas de saut de ligne, on peut avoir plusieurs SelectList sur une ligne
            if (string.IsNullOrEmpty(props.Tip))
            {
                return
                    (DOM.Span(
                         new Attributes {
                    ClassName = props.ClassName.Value
                },
                         DOM.Label(lblAtt, props.Title.ToString()),
                         DOM.Select(selAttSimple, itemsElements)
                         ));
            }
            else
            {
                return
                    (DOM.Span(
                         new Attributes {
                    ClassName = props.ClassName.Value
                },
                         DOM.Div(tooltipAtt, props.Title,
                                 DOM.Span(tooltiptextAtt, props.Tip)),
                         DOM.Select(selAttSimple, itemsElements)
                         ));
            }
        }