public override ReactElement Render()
{
return(DOM.Div(new Attributes {
Style = TodoStyles.Container
},
DOM.H4(
new Attributes {
Style = props.Task.Done ? TodoStyles.TextDone : TodoStyles.TextNotDone
},
props.Task.Description
),
DOM.Button(
new ButtonAttributes
{
Style = props.Task.Done ? TodoStyles.ToggleButtonDone : TodoStyles.ToggleButtonNotDone,
OnClick = e => props.OnChange(props.Task.With(_ => _.Done, value => !value))
},
props.Task.Done ? "Not done yet!" : "Finished!"
),
DOM.Button(
new ButtonAttributes
{
Style = TodoStyles.RemoveButton,
OnClick = e => props.OnRemove()
},
"Remove"
)
));
}
public override ReactElement Render()
{
return(DOM.Div
(
new Attributes {
},
new MessageEcho(new MessageEcho.Props
{
OnAdded = text =>
{
var nextState = state;
nextState.Messages =
nextState.Messages
.Concat <string>(new string[] { text })
.ToArray();
SetState(nextState);
}
}),
DOM.UL
(
state.Messages.Select(msg => DOM.Li(msg))
)
));
}
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)))
))
)
));
}
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 static void Main()
{
var appRoot = Document.GetElementById("app");
var userInterface = DOM.Div("hello world");
React.Render(userInterface, appRoot);
}
public override ReactElement Render()
{
// If state has no valueyet, then the Store has not been initialised and its OnChange event has not been called - in this case, we are not ready to
// render anything and so should return null here
if (!state.IsDefined)
{
return(null);
}
// A good guideline to follow with stateful components is that the State reference should contain everything required to draw the components and
// props should only be used to access a Dispatcher reference to deal with callbacks from those components
return(DOM.Div(null,
new MessageEditor(
className: new NonBlankTrimmedString("message"),
message: state.Value.NewMessage,
onChange: newState => props.Dispatcher.Dispatch(new MessageEditStateChanged(newState)),
onSave: () =>
{
// No validation is required here since the MessageEditor shouldn't let OnSave be called if the current message state is invalid
// (ie. if either field has a ValidationMessage). In some applications, it is preferred that validation messages not be shown
// until a save request is attempted (in which case some additional validation WOULD be performed here), but this app keeps
// things simpler by showing validation messages for all inputs until they have acceptable values (meaning that the first
// time the form is draw, it has validation messages displayed even though the user hasn't interacted with it yet).
props.Dispatcher.Dispatch(new MessageSaveRequested(
new MessageDetails(
new NonBlankTrimmedString(state.Value.NewMessage.Title.Text),
new NonBlankTrimmedString(state.Value.NewMessage.Content.Text)
)
));
}
),
new MessageHistory(className: new NonBlankTrimmedString("history"), messages: state.Value.MessageHistory)
));
}
public static ReactElement TodoItem(Todo todo, Action <int> onToggleComplete, Action <int> onDelete)
{
return(DOM.Div(
new Attributes {
Style = Styles.TodoItemStyle
},
DOM.Div(
new Attributes {
Style = todo.IsCompleted ? Styles.TextStyleComplete : Styles.TextStyleNotComplete
},
todo.Description
),
DOM.Button(new ButtonAttributes
{
Style = new ReactStyle {
Margin = "5px"
},
OnClick = e => onToggleComplete(todo.Id),
ClassName = "btn btn-primary"
}, "Toggle complete"),
DOM.Button(new ButtonAttributes
{
Style = new ReactStyle {
Margin = "5px"
},
OnClick = e => onDelete(todo.Id),
ClassName = "btn btn-danger"
}, "Delete")
));
}
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()
{
return(DOM.Div(null,
new NavigationLinks(props.Navigator, new ClassName("main-nav")),
DOM.Div(new Attributes {
ClassName = "content"
}, "NOT FOUND")
));
}
public override ReactElement Render()
{
return(DOM.Div(new Attributes {
ClassName = "requested-at"
},
"Page navigated to at ",
props.RequestedAt.ToString("HH:mm:ss")
));
}
private static void Main()
{
var container = Document.CreateElement("div");
Document.Body.AppendChild(container);
React.Render(
DOM.Div("This was rendered by React!"),
container
);
}
public override ReactElement Render()
{
if (state?.LoggedIn == true)
{
return(DOM.Div("Login successful!"));
}
return(new LoginView(new LoginView.Props()
{
OnComplete = () =>
UpdateState(s => s.LoggedIn = true)
}));
}
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()
{
if (!state.RequestedAt.IsDefined)
{
return(null);
}
return(DOM.Div(null,
new NavigationLinks(props.Navigator, new ClassName("main-nav")),
DOM.Div(new Attributes {
ClassName = "content"
}, "This is an introduction page for the Accommodation section"),
new NavigatedToTime(state.RequestedAt.Value)
));
}
public override ReactElement Render()
{
if (!state.RequestedAccommodationSegment.IsDefined)
{
return(null);
}
return(DOM.Div(null,
new NavigationLinks(props.Navigator, new ClassName("main-nav")),
DOM.Div(new Attributes {
ClassName = "content"
}, "Accommodation: ", state.RequestedAccommodationSegment.Value.Segment),
new NavigatedToTime(state.RequestedAccommodationSegment.Value.RequestedAt)
));
}
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()
{
if (this.state == null)
{
return(null);
}
return(DOM.Div(
null,
DOM.H1(null, "React in Bridge.NET"),
new InputRow(
className: "example-input-row",
label: state.LastUpdated,
value: state.Message,
onChange: value => props.Dispatcher.HandleViewAction(new MessageChangeAction(value)),
validationError: state.ValidationError
)
));
}
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")));
}
static ReactElement View(string name)
{
return(DOM.Div
(
new Attributes {
},
DOM.P("First paragraph"),
DOM.Button
(
new ButtonAttributes
{
OnClick = ev =>
{
Window.Alert($"Hello {name}");
}
},
"Click me"
),
DOM.P("Second paragraph")
));
}
public override ReactElement Render()
{
return(DOM.Div(new Attributes {
ClassName = "host"
}, props.WrappedComponent));
}
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 override ReactElement Render()
{
return(DOM.Div(_nameField + "-" + NameProperty));
}
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")
)
);
}
}));
}
public override ReactElement Render()
{
return(DOM.Div(state.Text));
}
public static void RunTests()
{
Module("DataAttribute Tests");
Test("DOM.Div with null attributes", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(null, "Hello"),
container => {
assert.Ok(true); // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
done();
container.Remove();
}
);
});
Test("DOM.Div with ClassName-only attributes (no data attributes)", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test"
}, "Hello"),
container => {
assert.Ok(true); // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
done();
container.Remove();
}
);
});
Test("DOM.Div with ClassName and empty data value", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test", Data = null
}, "Hello"),
container => {
assert.Ok(true); // Only making sure that a null attributes references doesn't break thing (so no need to check markup)
done();
container.Remove();
}
);
});
Test("DOM.Div with ClassName and data 'toggle' value", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test", Data = new { toggle = "on" }
}, "Hello"),
container =>
{
container.Remove();
var div = container.QuerySelector("div.test") as HTMLElement;
if (div == null)
{
throw new Exception("Unable to locate 'test' div");
}
assert.StrictEqual(div.GetAttribute("data-toggle"), "on");
done();
}
);
});
Test("DOM.Div with ClassName and data 'toggle_me_on' value (to demonstrate underscore-to-hyphen string name replacement)", assert =>
{
var done = assert.Async();
TestComponentMounter.Render(
DOM.Div(new Attributes {
ClassName = "test", Data = new { toggle_me_on = "on" }
}, "Hello"),
container =>
{
container.Remove();
var div = container.QuerySelector("div.test") as HTMLElement;
if (div == null)
{
throw new Exception("Unable to locate 'test' div");
}
assert.StrictEqual(div.GetAttribute("data-toggle-me-on"), "on");
done();
}
);
});
}
public override ReactElement Render()
{
return(DOM.Div(props.Name));
}
public override ReactElement Render()
{
props.OnPureComponentRender();
return(DOM.Div(props.Name));
}
