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)
));
}
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)
));
}
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")
));
}
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)
));
}
}
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)
));
}
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
));
}
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)
));
}
}
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")
)
);
}
}));
}
