I'm creating this menu as a fun project in React, and I've finished the code to display/style the components, so now I'm setting it up to be dynamic and generate the menu based on a passed set of data. My React project routes like this:App /→Tab /→Various components based on data.
The plan is to have a menu (App/) contain potentially multiple Tab / of various inputs, such as date, text, number, range, etc. Let's say I use this dataset as an example:
elements: [
{
type: 'number',
text: 'Some Text Label',
fields: [
{
text: 'Some Text',
min: 0,
max: 50,
value: 25,
},
{
text: 'Some Text',
min: 25,
max: 75,
value: 50,
},
],
},
{
type: 'text',
text: 'Some Text Label',
fields: [
{
text: 'Some Text',
value: 'Some Text Placeholder',
},
],
},
{
type: 'number',
text: 'Some Text Label',
fields: [
{
text: 'Some Text',
min: 0,
max: 100,
value: 50,
},
],
},
]
Within the Tab / component, I'd want to look through the elements to find the type of one element, then use the component that is ready for that element (for example, type:number, I would use Number / and then pass the fields as a prop to that component.
Something like this:Number fields={insertdatahere}/>
I'm a total beginner when it comes to react, but I've tried a few ways myself and I feel like I'm just missing something because nothing is working. I was considering just having all the Components manually placed inside the tab component and having them set as Display: None unless an element is present for that type. Thanks for any advice.
Here's a Code sandbox which illustrates one way you could get started.
The basic idea is to define a component for each type of field (text, number, ...) and make a lookup. A function component is like any other value in Javascript - you can store it in an array or an object.
In this case I've defined TextDisplay and NumberDisplay:
const TextDisplay = ({ text, value }) => (
<li>
<h4>{text}</h4>
<input value={value} />
</li>
);
const NumberDisplay = ({ text, min, max, value }) => (
<div>
<h4>{text}</h4>
<input type="number" min={min} max={max} value={value} />
</div>
);
const ComponentForType = {
text: TextDisplay,
number: NumberDisplay
};
Then there's a bit of machinery for displaying the lists of elements in the definition, and the list of fields in each element.
Hopefully that can give you something to play around with. There's a bit of weird syntax in there like the spread operator, and everything gets complicated once you want to make the values editable, but this could be a starting point.
Related
I have a requirement to add custom data attributes to the Fluent UI dropdown.
In javascript/html I could add them like this.
option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality</option
Can someone help me achieve this in Fluent UI + React?
In FluentUI/React, it's much easier than that, no need for data- attributes, you can just add your custom data directly to the options list (and get it back in the event handlers, or as the selected value if you are using "controlled" scenario). Means, if you don't have a specific requirement to store additional item data in the HTML data attributes for "something else" (like ui-automation tool), then you could go with something like this (note the data property):
const YourComponent = (props) => {
const options = [
{ key: '7',
text: 'Data Quality',
data: { passign: true, minpt: 3, maxpt: 7 }
},
{ key: '42',
text: 'Weather Quality',
data: { passign: true, minpt: 100500, maxpt: 42 }
},
];
const onChange = (evt, item) => {
const itemData = item.data;
console.log(item.key, item.text, itemData);
};
return (
<Dropdown
label="Select something"
options={options}
defaultSelectedKey='7'
onChange={onChange}
/>
);
}
If you want a "controlled" control instead (this one is "uncontrolled"), check out the sample page for the Dropdown:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
I am attempting to use react-semantic-redux-form SelectField with the multiple options so a user can select multiple options and if there is one already set then this should show as checked.
I am also using redux-form with semantic0ui-react.
I am getting an error attempting to include multiple selections.
My include statement is:
import { SelectField } from "react-semantic-redux-form";
My state is:
state = {
relationships: ["some entry"],
relationshipOptions: [],
};
The element code is:
<Grid.Column>
<Field
component={SelectField}
name="relationships"
label="Your Relationships"
options={relationshipOptions}
multiple
placeholder="Select to add a relationship"
/>
I get the error as below
Dropdown `value` must be an array when `multiple` is set. Received type: `[object String]`.
in Dropdown
The way you have relationshipOptions is wrong, it is supposed array of objects,
const relationshipOptions = [
{ key: "single", value: "single", text: "single" },
{ key: "married", value: "married", text: "married" }
];
Here is the working example, Code Sandbox
Also if you have single, married in array. You can do something like this,
let relationshipOptions = ["single", "married"].map((x) => {
return ({
key: x,
value: x,
text: x
});
});
I already spent too much time searching on how to configure the column headers of Antd tables, in the official Antd table docu and elsewhere, but I was not successful: Is there a simple way of adjusting the word-wrap of the column header?
Right now, if the column is too small (e.g. when resizing the browser window), letters are floating into new lines in an uncontrolled manner. English hyphenation would be cool, but for a start I would appreciate having 2 or 3 ellipsis dots instead of freely dropping characters.
Any Antd-experts out there who could help me out, please?
Minimal non-working example
import { Table } from "antd";
const { Column } = Table;
const dataSource = [
{
key: '1',
name: 'Mike',
},
{
key: '2',
name: 'John',
},
];
const columns = [
{
title: 'My very-very-very long column-name',
dataIndex: 'name',
key: 'name',
},
];
<Table dataSource={dataSource} columns={columns} />;
Related questions
Overwriting a single (nested) property when extending a React class is the more general problem I am facing.
How can we configure the Header of ant design table component?
Customize React Antd table header with table data
Table.Column.title accepts a ReactNode, so you only need to render an Ellipsis component.
You should use antd built-in Ellipsis, for that use Typoghrapy API.
Note: You should strain container's width so the ellipsing will work:
const COLUMN_STYLE = { width: 200 };
<Typography.Text ellipsis={true} style={COLUMN_STYLE}>
A very long text
</Typography.Text>
You can achieve the same effect with pure CSS, refer to text-overflow.
const dataSource = [
{
key: '1',
name: 'Mike'
},
{
key: '2',
name: 'John'
}
];
const COLUMN_STYLE = { width: 200 };
const customColumn = {
title: (
<Typography.Text ellipsis={true} style={COLUMN_STYLE}>
My very-very-very long column-name My very-very-very long column-name My
very-very-very long column-name
</Typography.Text>
),
dataIndex: 'name',
key: 'custom'
};
const normalColumn = {
title: 'My very-very-very long column-name',
dataIndex: 'name'
};
const TOTAL_COLUMNS = 6;
const columns = [...Array(TOTAL_COLUMNS).keys()].map(key => ({
...normalColumn,
key
}));
const App = () => (
<Table dataSource={dataSource} columns={[customColumn, ...columns]} />
);
Since I am (yet) stuck with an old version of Antd, I went the inline-CSS way suggested by Dennis Vash. Within the render() function, I defined
var myColTitleStyle = {
textOverflow: 'ellipsis',
// overflow: "hidden",
whiteSpace: 'nowrap'
};
Interestingly, I had to comment the parameter overflow out, although https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow suggests that it is required for the property text-overflow to work. Also note the CamelWritingStyle of the css-properties within React.
Inside the component, the imports are
import { Table } from "antd";
const { Column, ColumnGroup } = Table;
The actual call of Antd's Column contains a <div> within the title, plus the inline-CSS:
<Column
title={<div style={myColTitleStyle}>My long-long title</div>}
width=10
>
Please also note that textOverflow will only work with absolute widths, which are dimensionless in React. It will not work when using percentage-widths.
So I have this test case which I need to solve. Background is updating dev environment to newer version and after that a lot of our tests broke.
Here I have a weird case which results in:
"Failed to parse selector: Label price detail 1"
This is how the test snippet looks like, I hope I've added all that is necessary.
it('Should render with price and one addon', () => {
data.addonHeaderName = 'addonHeaderName';
data.addons.push(
{
price: {
label: 'Addon text 1',
value: 50.33,
unit: 'dollars',
vat: 'excl'
},
discount: {
label: 'Addon text 2',
value: 11.43,
unit: 'dollars',
vat: 'excl'
},
future: false,
addonIcon: 'icon',
ecoText: 'Addon eco text',
linkUrl: 'http://testaddonlink.com'
}
);
data.contract.prices.push(
{
id: 'price',
label: 'Label price detail 1',
unit: 'dollars',
value: 4.03
},
{
id: 'Label price detail 2',
label: 'Discount',
unit: 'dollars',
value: -3.00
}
);
const component = shallow(
<MyContract
data={data}
andSomeOtherStuff={otherStuff}
/>
);
expect(component).toMatchSnapshot();
expect(component.find('Label price detail 1')).toBeTruthy();
expect(component.find('Label price detail 2')).toBeTruthy();
expect(component.find('Addon text 1')).toBeTruthy();
expect(component.find('Addon text 2')).toBeTruthy();
expect(component.find('Addon eco text')).toBeTruthy();
If I comment out the first expectation, it hits the next one, and then the other one etc etc.
Earlier we ran Enzyme 2.9.1 together with enzyme-adapter-react-15 (and of course React 15) but since we've upgraded to React 16 we also need to update a few other dependencies such as this one. And then shit hit the fan.
Now we're on Enzyme 3.8.0, enzyme-adapter-react-16.3 and React 16.3.x.
I've been fiddling around with trying to get it as a string instead but no bueno. Any ideas on what I'm missing here?
Enzyme find works with css selectors so if you would like to search on the label there you should probably use something like:
component.find('[label="Label price detail 1"]')
Additionally I believe this will always be truthy no matter if it's found or not. (Not sure on that one though).
I usually use .toHaveLength(1) to check if it gets rendered!
I had this before, this looks like a typing error. Confirm the strings.
I want to pre-select a particular value in a select drop-down generated by vue-multiselect.
I can get this to work fine if I have a simple array of strings like the following:
['Test 1', 'Test 2', 'Test 3']
However, when I use an array of objects, I can't get this to work. For example, if I have the following:
<v-multiselect :options="[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]"
label="name"
track-by="id"
v-model="test">
</v-multiselect>
No matter what I set the test data property that v-model is connected to, it won't preselect the value. I've tried 1, 2, 3, '1', '2' and '3' for test when track-by is id and 'Test 1', etc. when track-by is name but nothing seems to work.
What am I doing wrong here? I looked at the docs at https://vue-multiselect.js.org/#sub-single-select-object, but they don't seem to provide an example when you want to preset a value for an array of objects for the options. Googling has also not returned what I'm looking for.
On a related topic, once I get this working, what would I have to change to select multiple values for when I set the component to multiple? Thank you.
track-by usage
The docs indicate that track-by is "Used to compare objects. Only use if options are objects."
That is, it specifies the object key to use when comparing the object values in options. The docs should actually state that track-by is required when the options are objects because <vue-multiselect> uses track-by to determine which options in the dropdown are selected and to properly remove a selected option from a multiselect.
Without track-by, you'd see two buggy behaviors for object-options: (1) the user would be able to re-select already selected options, and (2) attempting to remove selected options would instead cause all options to be re-inserted.
Setting initial values
<vue-multiselect> doesn't support automatically translating a value array, but you could easily do that from the parent component.
Create a local data property to specify track-by and initial multiselect values (e.g., named trackBy and initialValues, respectively):
export default {
data() {
return {
//...
trackBy: 'id',
initialValues: [2, 5],
}
}
}
Bind <vue-multiselect>.track-by to this.trackBy and <vue-multiselect>.v-model to this.value:
<vue-multiselect :track-by="trackBy" v-model="value">
Create a watcher on this.initialValues that maps those values into an object array based on this.trackBy, setting this.value to the result:
export default {
watch: {
initialValues: {
immediate: true,
handler(values) {
this.value = this.options.filter(x => values.includes(x[this.trackBy]));
}
}
}
}
Vue.component('v-multiselect', window.VueMultiselect.default);
new Vue({
el: '#app',
data () {
return {
trackBy: 'id',
initialValues: [5,2],
value: null,
options: [
{ id: 1, name: 'Vue.js', language: 'JavaScript' },
{ id: 2, name: 'Rails', language: 'Ruby' },
{ id: 3, name: 'Sinatra', language: 'Ruby' },
{ id: 4, name: 'Laravel', language: 'PHP' },
{ id: 5, name: 'Phoenix', language: 'Elixir' }
]
}
},
watch: {
initialValues: {
immediate: true,
handler(values) {
this.value = this.options.filter(x => values.includes(x[this.trackBy]));
}
}
}
})
<script src="https://unpkg.com/vue#2.6.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
<div id="app">
<v-multiselect :track-by="trackBy"
:options="options"
v-model="value"
label="name"
multiple>
</v-multiselect>
<pre>{{ value }}</pre>
</div>
Looks like a bug. The workaround is to use an actual reference to the object
Vue.component('v-multiselect', window.VueMultiselect.default);
let testOptions=[{id: 1, name: 'Test 1'}, {id: 2, name: 'Test 2'}, {id: 3, name: 'Test 3'}]
new Vue({
el: '#app',
data: function () {
return {
test: testOptions[1], // <- use an object ref here!
testOptions
};
}
});
The easiest way I found out is sending the whole object from BE, so it gets pre-selected. If you send the same object from BE will get pre-selected. But I don't know if your options are hard coded on FE or they are coming from a database or something. I had the same issue but my values were coming from my database, so it was easy to reproduce the object
In your question just :object="true" is missing actually they didn't know that it is of type string or object when we pass this it knows yes it is object and i need label="name" from v-model="test" and picks it and shows it as a preselected