Exemplo n.º 1
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)
                         ));
            }
        }