public override ReactElement Render()
        {
            var className = props.ClassName.IsDefined ? props.ClassName.Value : "";

            if (!props.Messages.Any())
            {
                className += (className == "" ? "" : " ") + "zero-messages";
            }

            var messageElements = props.Messages
                                  .Select(savedMessage => DOM.Div(new Attributes {
                Key = savedMessage.Id.ToString(), ClassName = "historical-message"
            },
                                                                  DOM.Span(new Attributes {
                ClassName = "title"
            }, savedMessage.Message.Title.Value),
                                                                  DOM.Span(new Attributes {
                ClassName = "content"
            }, savedMessage.Message.Content.Value)
                                                                  ));

            return(DOM.FieldSet(new FieldSetAttributes {
                ClassName = (className == "" ? null : className)
            },
                                DOM.Legend(null, "Message History"),
                                DOM.Div(messageElements)
                                ));
        }
Esempio n. 2
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)
                     ));
        }
        public override ReactElement Render()
        {
            var className = props.ClassName;

            if (!props.Messages.Any())
            {
                className += (className == "" ? "" : " ") + "zero-messages";
            }

            var messagesInv = props.Messages.Reverse();

            var messageElements = messagesInv
                                  .Select(savedMessage => DOM.Div(
                                              new Attributes {
                Key       = savedMessage.Id.ToString(),
                ClassName = "historical-message"
            },
                                              DOM.Span(new Attributes {
                ClassName = "title"
            },
                                                       savedMessage.Message.Title),
                                              DOM.Span(new Attributes {
                ClassName = "content"
            },
                                                       savedMessage.Message.Content)
                                              ));

            return(DOM.FieldSet(
                       new FieldSetAttributes {
                ClassName = className
            },
                       DOM.Legend(null, props.ClassName),
                       DOM.Div(messageElements)
                       ));
        }
Esempio n. 4
0
        public override ReactElement Render()
        {
            var taAtt = new TextAreaAttributes {
                Style     = Style.Margin(5).Padding(5).FontSize(18).Width(500),
                ClassName = props.Titre.Value,
                Name      = props.Titre.Value,
                //Cols = 10,
                Wrap      = Html5.Wrap.Soft,
                Rows      = 5,
                MaxLength = 10,
                Value     = ListToString(props.ItemApi),
                OnChange  = e => props.OnChangeSTB(e.CurrentTarget.Value),
                Ref       = e => _element = e,
                //SelectionStart = _selStart,
                //SelectionEnd = _selEnd
            };

            var ti = new TextInput(
                disabled: props.Disabled,
                content: props.InputValueSTB.ToString(),
                onChange: e => props.OnChange(e),
                className: new NonBlankTrimmedString("Content")
                );

            var ba = new ButtonAttributes
            {
                Disabled = string.IsNullOrWhiteSpace(props.InputValueSTB.ToString()),
                OnClick  = e => props.OnSave()
                           //OnClick = async(e) =>
                           //{
                           //    props.OnSave();
                           //    await props.MessageApi.SaveMessage(iDelaiMsec: 1000);
                           //    _element.Select();
                           //    //ScrollToBottom();
                           //},
            };

            return
                (DOM.FieldSet(
                     new FieldSetAttributes {
                ClassName = props.Titre.Value
            },
                     DOM.Legend(null, props.Titre.Value), // ToDo : éviter saut de ligne
                     DOM.Span(new Attributes {
                ClassName = "label"
            }, "Add item : "),
                     ti,
                     DOM.TextArea(taAtt),
                     DOM.Button(ba, "Add")
                     ));
        }
Esempio n. 5
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()
 {
     return(DOM.Div(new Attributes {
         ClassName = props.ClassName
     },
                    DOM.Span(new Attributes {
         ClassName = "label"
     }, props.Label),
                    DOM.Input(new InputAttributes
     {
         OnChange = ev => props.OnChange(ev.CurrentTarget.Value),
         Value = props.Value,
     }),
                    DOM.Span(new Attributes {
         ClassName = "error"
     }, props.ValidationError)
                    ));
 }
        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)
                         ));
            }
        }
Esempio n. 8
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)
                     ));
        }
Esempio n. 9
0
        public override ReactElement Render()
        {
            var fa = new FieldSetAttributes {
                ClassName = props.ClassName
            };
            var lgd = DOM.Legend(null,
                                 string.IsNullOrWhiteSpace(
                                     props.Title + " : " + props.Content) ? "Untitled" :
                                 props.Title + " : " + props.Content);
            var la = new Attributes {
                ClassName = "label"
            };
            var tiTitle = new TextInput
                          (
                disabled: false,
                content: props.Title,
                onChange: e => props.OnChange(new MessageDetails(e, props.Content)),
                className: new NonBlankTrimmedString("Title")
                          );
            var tiContent = new TextInput
                            (
                disabled: false,
                content: props.Content,
                onChange: e => props.OnChange(new MessageDetails(props.Title, e)),
                className: new NonBlankTrimmedString("Content")
                            );
            var ba = new ButtonAttributes
            {
                Disabled = props.Disabled,
                OnClick  = e => props.OnSave()
            };

            return(DOM.FieldSet(
                       fa,
                       lgd,
                       DOM.Span(la, "Title"), tiTitle,
                       DOM.Span(la, "Content"), tiContent,
                       DOM.Button(ba, "Save")
                       ));
        }
        public override ReactElement Render()
        {
            var formIsInvalid  = props.Message.Title.ValidationError.IsDefined || props.Message.Content.ValidationError.IsDefined;
            var isSaveDisabled = formIsInvalid || props.Message.IsSaveInProgress;

            return(DOM.FieldSet(new FieldSetAttributes {
                ClassName = props.ClassName.IsDefined ? props.ClassName.Value : null
            },
                                DOM.Legend(null, props.Message.Caption.Value),
                                DOM.Span(new Attributes {
                ClassName = "label"
            }, "Title"),
                                new ValidatedTextInput(
                                    className: new NonBlankTrimmedString("title"),
                                    disabled: props.Message.IsSaveInProgress,
                                    content: props.Message.Title.Text,
                                    validationMessage: props.Message.Title.ValidationError,
                                    onChange: newTitle => props.OnChange(props.Message.With(_ => _.Title, new TextEditState(newTitle)))
                                    ),
                                DOM.Span(new Attributes {
                ClassName = "label"
            }, "Content"),
                                new ValidatedTextInput(
                                    className: new NonBlankTrimmedString("content"),
                                    disabled: props.Message.IsSaveInProgress,
                                    content: props.Message.Content.Text,
                                    validationMessage: props.Message.Content.ValidationError,
                                    onChange: newContent => props.OnChange(props.Message.With(_ => _.Content, new TextEditState(newContent)))
                                    ),
                                DOM.Button(
                                    new ButtonAttributes {
                Disabled = isSaveDisabled, OnClick = e => props.OnSave()
            },
                                    "Save"
                                    )
                                ));
        }
        public override ReactElement Render()
        {
            var          className = props.ClassName.IsDefined ? props.ClassName.Value : "";
            ReactElement validationMessageIfAny;

            if (props.ValidationMessage.IsDefined)
            {
                className += (className == "" ? "" : " ") + "invalid";
                validationMessageIfAny = DOM.Span(new Attributes {
                    ClassName = "validation-message"
                }, props.ValidationMessage.Value);
            }
            else
            {
                validationMessageIfAny = null;
            }

            return(DOM.Span(new Attributes {
                ClassName = className
            },
                            new TextInput(props.Disabled, props.Content, props.OnChange, props.ClassName),
                            validationMessageIfAny
                            ));
        }
Esempio n. 12
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)
                         ));
            }
        }
Esempio n. 13
0
        public static ReactElement TodoItemList(Store <TodoAppState> appStore)
        {
            return(ReactRedux.Component(new ContainerProps <TodoAppState, TodoAppState>
            {
                Store = appStore,
                StateToPropsMapper = state => state,
                Renderer = appState =>
                {
                    Func <Todo, bool> todoIsCompleted = todo => todo.IsCompleted;
                    Func <Todo, bool> todoNotCompleted = todo => todo.IsCompleted == false;

                    IEnumerable <Todo> todos;

                    if (appState.Visibility == TodoVisibility.Completed)
                    {
                        todos = appState.Todos.Where(todoIsCompleted);
                    }
                    else if (appState.Visibility == TodoVisibility.YetToComplete)
                    {
                        todos = appState.Todos.Where(todoNotCompleted);
                    }
                    else
                    {
                        todos = appState.Todos;
                    }

                    var todoItems = todos.Select(todo =>
                    {
                        return TodoItem
                        (
                            todo: todo,
                            onToggleComplete: id => appStore.Dispatch(new ToggleTodoCompleted {
                            Id = id
                        }),
                            onDelete: id => appStore.Dispatch(new DeleteTodo {
                            Id = id
                        })
                        );
                    });

                    return DOM.Div(new Attributes {
                        Style = new ReactStyle {
                            Padding = 10
                        }
                    },
                                   DOM.H1("React + Redux todo app in C#"),
                                   DOM.UL(new Attributes {
                    }, todoItems.Select(DOM.Li)),
                                   DOM.Hr(new HRAttributes {
                    }),
                                   DOM.H3("Add a new Todo item"),
                                   DOM.Input(new InputAttributes
                    {
                        Style = new ReactStyle {
                            Margin = "5px", MaxWidth = 400
                        },
                        ClassName = "form-control",
                        Placeholder = "Todo descriptions",
                        OnInput = e => appStore.Dispatch(new UpdateDescriptionInput {
                            Description = e.CurrentTarget.Value
                        }),
                        Value = appState.DescriptionInput
                    }),
                                   DOM.Button(new ButtonAttributes
                    {
                        Style = new ReactStyle {
                            Margin = "5px"
                        },
                        ClassName = "btn btn-success",
                        OnClick = e =>
                        {
                            if (!string.IsNullOrWhiteSpace(appState.DescriptionInput))
                            {
                                appStore.Dispatch(new AddTodo());
                                appStore.Dispatch(new UpdateDescriptionInput {
                                    Description = ""
                                });
                            }
                        }
                    }, "Add"),
                                   DOM.Hr(new HRAttributes {
                    }),
                                   DOM.H3("Visibility"),
                                   DOM.Div(new Attributes {
                    },
                                           DOM.Span("Show"),
                                           DOM.Button(new ButtonAttributes
                    {
                        Style = new ReactStyle {
                            Margin = 5
                        },
                        ClassName = appState.Visibility == TodoVisibility.All ? "btn btn-success" : "btn btn-default",
                        OnClick = e => appStore.Dispatch(new SetVisibility {
                            Visibility = TodoVisibility.All
                        })
                    }, "All"),
                                           DOM.Button(new ButtonAttributes
                    {
                        Style = new ReactStyle {
                            Margin = 5
                        },
                        ClassName = appState.Visibility == TodoVisibility.Completed ? "btn btn-success" : "btn btn-default",
                        OnClick = e => appStore.Dispatch(new SetVisibility {
                            Visibility = TodoVisibility.Completed
                        })
                    }, "Completed only"),
                                           DOM.Button(new ButtonAttributes
                    {
                        Style = new ReactStyle {
                            Margin = 5
                        },
                        ClassName = appState.Visibility == TodoVisibility.YetToComplete ? "btn btn-success" : "btn btn-default",
                        OnClick = e => appStore.Dispatch(new SetVisibility {
                            Visibility = TodoVisibility.YetToComplete
                        })
                    }, "Not finished")
                                           )
                                   );
                }
            }));
        }