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