How to put float label in KendoReact DatePicker?
like https://www.telerik.com/kendo-react-ui/components/dropdowns/floating-labels/
I suggest using a custom place holder and conditional rendering.
Kendo uses classes to get the style of a floating label, the nested span will achieve that. I have added the code snippet I tried, but since I am not familiar with React, I could not get the conditional rendering to work.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { dataProducts, dataCategories, dataOrders } from './data';
import { DateInput, Calendar, DatePicker, TimePicker, MultiViewCalendar, DateRangePicker } from '#progress/kendo-react-dateinputs';
class App extends React.Component {
render() {
const isFocused = false;
return (
<div>
<div>
<p>DatePicker</p>
{isFocused
? <span class="k-textbox-container k-state-focused k-state-empty"><span class="k-label">Select Order Date</span></span>
: null}
<div onFocus = {this.onFocusDatePickerInput} onBlur = {this.onBlurDatePickerInput} >
<DatePicker format="MM dd yyyy" formatPlaceholder={{ year: 'Date', month: 'Select', day: 'Order' }}
onChange={this.changeDate} />
</div>
</div>
</div>
);
}
changeDate = (event) => {
console.log(event.value)
if(event.value){
this.format= "MM/dd/yyyy";
this.setState({ value: event.value });
}
}
onFocusDatePickerInput = () =>
{
this.isFocused = true;
console.log(this.isFocused)
}
onBlurDatePickerInput = () =>
{
this.isFocused = false;
console.log(this.isFocused)
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
Related
I'm using gatsby-plugin-react-i18next for translating my website, and it works with simple text. But when I try to format parts of the text, with bold text or italic text, it doesn't work (I don't know how to do it).
How can I format a specific part of a paragraph using i18n?
Below is an example of my setup.
page JS
const IndexPage = () => {
const { t } = useTranslation();
return (
<Layout>
<Seo title="Home" />
<div>
<h1>
{t("HomepageHeader")}
</h1>
<p>
{t("HomepageDescription")}
</p>
</div>
</Layout>
)
}
export default IndexPage
Folder structure:
locales
-en
--translation.json
-nl
--translation.json
Example JSON en
{
"HomepageHeader": "Grow your business with a modern website!",
"HomepageDescription": "Your website is the number 1 selling point, to your customers. Make sure you get the most out of it!"
}
How can I make for example only "number 1 selling point" in the HomepageDescription bold?
Have a look at the Trans Component: https://react.i18next.com/latest/trans-component
Or use a markdown component, something like:
import React from 'react';
import Markdown from './Markdown';
import { useTranslation } from '../utils';
export function Text({
i18nKey,
ns = 'client-locize-app-loaders',
i18nOptions = {},
message,
defaultValue,
linkTarget = '_blank',
}) {
const { t, ready } = useTranslation(ns, { useSuspense: false });
if (!ready)
return (
<Markdown source={message || 'loading...'} noContainer options={{ linkTarget: '_blank' }} />
);
return (
<Markdown
source={message || t(i18nKey, { defaultValue, ...i18nOptions })}
noContainer
options={{ linkTarget }}
/>
);
}
import React from 'react';
import { Remarkable } from 'remarkable';
export class Markdown extends React.Component {
constructor(props) {
super(props);
this.content = this.content.bind(this);
this.renderMarkdown = this.renderMarkdown.bind(this);
}
componentWillUpdate(nextProps, nextState) {
if (nextProps.options !== this.props.options) {
this.md = new Remarkable(nextProps.options);
}
}
content() {
if (this.props.source)
return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(this.props.source) }} />;
return React.Children.map(this.props.children, (child) => {
if (typeof child === 'string') {
return <span dangerouslySetInnerHTML={{ __html: this.renderMarkdown(child) }} />;
}
return child;
});
}
renderMarkdown(source) {
if (!this.md) this.md = new Remarkable(this.props.options);
if (this.props.renderInline) return this.md.renderInline(source);
return this.md.render(source);
}
render() {
const Container = this.props.container;
if (this.props.noContainer) return this.content();
return (
<Container className={this.props.className} style={this.props.style}>
{this.content()}
</Container>
);
}
}
Markdown.defaultProps = {
noContainer: false,
renderInline: false,
container: 'div',
options: {},
className: '',
};
I'm working on a personal project with redux. My mapStateToProps function seems to me properly written. but when I try to use it to send an object to my store nothing works.
Here's my function:
const mapDispatchToProps = dispatch => {
return {
addOrder: (item) => {
dispatch(addOrder(item));
}
}
}
<div className="recordOrder">
<button onclick={() => this.props.addOrder(this.state)}>Enregistrer et lancer la commande</button>
</div>
And my reducer:
const initialState = {
orderList : []
}
console.log(initialState);
export default function rootReducer ( state= initialState, action){
const orderList = [...state.orderList];
let position
switch (action.type){
case ADD_ORDER:
return {
orderList : [...state.orderList, action.payload]
};
case DELETE_ORDER:
position = orderList.indexOf(action.payload)
orderList.splice(position, 1)
return {
orderList
}
default:
return state;
}
console.log(state)
}
My entire component as requested:
import React, { Component } from 'react';
import { NavItem } from 'react-bootstrap';
import menu from './menu';
import { connect } from 'react-redux';
import { addOrder} from '../action'
class getOrder extends Component {
state = {
number: `CMD-${Date.now()}`,
order:[],
total: 0 ,
menu:menu,
isPaid: false
}
addItem = (index) => {
const order = [...this.state.order];
const menu = [...this.state.menu];
let total = this.state.total;
const pizza = menu[index];
console.log(pizza);
let ind = order.findIndex((item) =>
item.article == pizza.name
)
if (ind === -1){
order.push({article: pizza.name, price: pizza.price, volume:1})
total = total + order[order.length-1].price
} else if (ind != -1){
order[ind].volume++
total = total + order[ind].price
}
this.setState({
order:order,
total:total
})
console.log("youpiii");
console.log(this.state.total);
console.log(this.state.order);
}
render() {
const menuDisplay= menu.map( (item) => {
return (
<div>
<img onClick={() => this.addItem(item.number)} src={`${process.env.PUBLIC_URL}${item.picture}`} alt="picture" />
<div className="tagPrice">
<p>{item.name}</p>
<p>{item.price} €</p>
</div>
</div>
)
});
const currentOrder = [...this.state.order]
const orderDisplay = currentOrder.map((item) => {
let price = item.price*item.volume;
console.log(price);
return (
<div>
<h1>{item.volume} × {item.article}</h1>
<p>{price} €</p>
</div>
)
} );
return (
<div className="takeOrder">
<div className="orderban">
<h1>Pizza Reflex</h1>
</div>
<div>
<div className="menuDisplay">
{menuDisplay}
</div>
<div className="orderBoard">
<h1>Détail de la commande N°{this.state.number}</h1>
{orderDisplay}
<div className="total">
<h2>Soit un total de {this.state.total} € </h2>
</div>
<div className="recordOrder">
<button onclick={() => this.props.addOrder(this.state)}>Enregistrer et lancer la commande</button>
</div>
</div>
</div>
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return {
addOrder: (item) => {
dispatch(addOrder(item));
}
}
}
export default connect ( mapDispatchToProps) (getOrder);
Can someone tell me what I've missed ?
Thanks for your help !
What you are missing is more of your code it can not be solved with what you have.
In more details what I need is the this.state , combinedReducer
The easiest fix you can do now is changing yow mapDispatchToProps works better if it is an obj
const mapStateToProps = (state) => {
return {
// here you specified the properties you want to pass yow component fom the state
}
};
const mapDispatchToProps = {action1, action2};
export default connect ( mapDispatchToProps) (getOrder);
connectreceives two params mapStateToProps and mapDispatchToProps,
mapDispatchToProps is optional, but mapStateToProps is mandatory, there for you need to specified, if your are not going to pass anything you need to pass a null value
export default connect (null, mapDispatchToProps) (getOrder);
also avoid exporting components without a name
example
function MyButton () {}
const MyButtonConnect = connect(state, dispatch)(MyButton);
export default MyButtonConnect
I am trying to setup my first react/redux/rails app. I am using react_on_rails gem to pass in my current_user and gyms props.
Everything appears to work ok so far except my console shows error:
<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.
Googling gives me hints that this can happen if you try to create a store within a render method, which causes store to get recreated. I don't see that issue here. Where am I going wrong?
//App.js
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../store/gymStore';
import Gym from '../components/Gym';
const App = props => (
<Provider store={configureStore(props)}>
<Gym />
</Provider>
);
export default App;
../store/gymStore.jsx
//the store creation.
/*
// my original way
import { createStore } from 'redux';
import gymReducer from '../reducers/';
const configureStore = railsProps => createStore(gymReducer, railsProps);
export default configureStore;
*/
/* possible fix: https://github.com/reactjs/react-redux/releases/tag/v2.0.0 */
/* but adding below does not resolve error */
import { createStore } from 'redux';
import rootReducer from '../reducers/index';
export default function configureStore(railsProps) {
const store = createStore(rootReducer, railsProps);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept(() => {
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
I am not sure my rendered component is necessary but in case it is:
//compenents/Gym.jsx
import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import LeftMenu from './LeftMenu';
class Gym extends React.Component {
static propTypes = {
//name: PropTypes.string.isRequired // this is passed from the Rails view
};
/**
* #param props - Comes from your rails view.
*/
constructor(props) {
super(props);
this.state = {
current_user: this.props.current_user,
gyms: JSON.parse(this.props.gyms),
active_gym: 1, //JSON.parse(this.props.gyms)[0],
name: 'sean',
title: 'Gym Overview'
};
}
updateName = name => {
this.setState({ name });
};
isLoggedIn = () => {
if (this.state.current_user.id != '0') {
return <span className="text-success"> Logged In!</span>;
} else {
return <span className="text-danger"> Must Log In</span>;
}
};
isActive = id => {
if (this.state.active_gym == id) {
return 'text-success';
}
};
render() {
return (
<div className="content">
<h2 className="content-header">{this.state.title}</h2>
{LeftMenu()}
{this.state.current_user.id != '0' ? <span>Welcome </span> : ''}
{this.state.current_user.first_name}
<h3 className="content-header">Your Gyms</h3>
<ul>
{this.state.gyms.map((gym, key) => (
<li key={key} className={this.isActive(gym.id)}>
{gym.name}
</li>
))}
</ul>
{this.isLoggedIn()}
<hr />
{/*
<form>
<label htmlFor="name">Say hello to:</label>
<input
id="name"
type="text"
value={this.state.name}
onChange={e => this.updateName(e.target.value)}
/>
</form>
*/}
</div>
);
}
}
function mapStateToProps(state) {
return {
current_user: state.current_user,
gyms: state.gyms,
active_gym: state.active_gym
};
}
export default connect(mapStateToProps)(Gym);
I am having a very weird bug. I have reproduced the simplest test case scenario here: https://codesandbox.io/s/PNyPwyWP2
I have also uploaded a screencast explaining, the screencast is on youtube here - https://youtu.be/iILiFieO-gk
My goal is that I have a form with a single field, a button "Reset" and a button "Save". Clicking "Save" saves the form values into a reducer in my store called save. Clicking "Reset" should reset the form values to the last "pristine" values (the values in initialValues).
However my issue is, after saving the form, the "Reset" button should reset it to the "pristine" value (the newly saved value, the value in initialValues) but it is reseting it to the "old pristine value"
Here is my full app code:
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import { connect } from 'react-redux'
import { Field, reduxForm, reducer as form } from 'redux-form'
// ACTION & ACTION CREATOR
const SAVE_FORM = 'SAVE_FORM';
function saveForm(values) {
return {
type: SAVE_FORM,
values
}
}
// REDUCER - save
const INITIAL = { url:'hiiii' };
function save(state=INITIAL, action) {
switch(action.type) {
case SAVE_FORM: return action.values;
default: return state;
}
}
// STORE
const reducers = combineReducers({ form, save });
const store = createStore(reducers);
// MY FORM COMPONENT
class MyFormDumb extends React.Component {
handleReset = e => {
e.preventDefault();
this.props.reset();
}
render() {
console.log('MyFormDumb :: pristine:', this.props.pristine, 'initialValues:', this.props.initialValues);
return (
<form onSubmit={this.props.handleSubmit}>
<label htmlFor="url">URL</label>
<Field name="url" component="input" type="text" />
<button onClick={this.handleReset}>Reset</button>
<button type="submit">Save</button>
</form>
)
}
}
const MyFormControlled = reduxForm({ form:'my-form' });
const MyFormSmart = connect(
function(state) {
return {
initialValues: state.save
}
}
);
const MyForm = MyFormSmart(MyFormControlled(MyFormDumb));
// MY APP COMPONENT
class App extends React.PureComponent {
submitHandler = (values, dispatch, formProps) => {
dispatch(saveForm(values));
}
render() {
return (
<Provider store={store}>
<div className="app">
<MyForm onSubmit={this.submitHandler} />
</div>
</Provider>
)
}
}
// RENDER
ReactDOM.render(<App />, document.getElementById('app'))
Please use enableReinitialize: true flag on your reduxForm component, as per the docs.
I'm trying to create a live search-result component(lazy load one). It works perfectly for the first time but refetch doesn't update the data. I see the request and respoonse in Network tab! so it does get the data, but it doesn't supply it to the component!
any idea why?
import React, { Component } from 'react';
import {
createRefetchContainer,
graphql,
} from 'react-relay';
import ProfileShow from './ProfileShow';
class ProfileList extends Component {
render() {
console.log("rendering....", this.props)
return (
<div className="row">
<input type="text" onClick={this._loadMe.bind(this)} />
{this.props.persons.map((person) => {
return (
<div className="col-md-3">
<ProfileShow person={person} />
</div>
);
})}
</div>
);
}
_loadMe(e) {
const refetchVariables = fragmentVariables => ({
queryStr: e.target.value,
});
this.props.relay.refetch(refetchVariables, null, (...data) => {
console.log(data)
});
}
}
const FragmentContainer = createRefetchContainer(
ProfileList,
{
persons: graphql.experimental`
fragment ProfileList_persons on Person #relay(plural: true) {
fullname
number
email
pic
}
`
},
graphql.experimental`
query ProfileListRefetchQuery($queryStr: String!) {
talentList(query: $queryStr) {
...ProfileList_persons
}
}
`,
);
export default FragmentContainer;