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()
{
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()
{
return(DOM.Input(new InputAttributes
{
Type = InputType.Text,
ClassName = props.ClassName.IsDefined ? props.ClassName.Value : null,
Disabled = props.Disabled,
Value = props.Content,
OnChange = e => props.OnChange(e.CurrentTarget.Value)
}));
}
private ReactElement GetInputX(int index, string txt)
{
var inputX = DOM.Input(
new InputAttributes {
Type = InputType.Radio,
ClassName = props.ClassName.Value,
Value = txt,
Checked = props.CheckBoxArray[index],
Disabled = props.Disabled,
OnChange = e => props.OnChange(e.CurrentTarget.Value)
});
return(inputX);
}
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()
{
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")));
}
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")
)
);
}
}));
}