예제 #1
0
        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)
                       ));
        }
        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)
                                ));
        }
예제 #3
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")
                     ));
        }
예제 #4
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"
                                    )
                                ));
        }
예제 #6
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)
                         ));
            }
        }