Related
I used react-draft-wysiwyg editor. It is working fine in desktop mode, but in mobile view it has a small issue. When I click on a mention suggestion, it doesn't get clicked at once. Also, if I first clicked a suggestion, I am not able to select that suggestion.
<Editor
readOnly={readOnly}
editorState={editorState}
editorClassName="editorClassName"
onEditorStateChange={onEditorStateChange}
handlePastedFiles={handlePastedFiles}
onChange={e => feedStateChange(e)}
placeholder={placeholder}
ref={editorReference}
onBlur={() => {
removeCls()
}}
mention={{
separator: ' ',
trigger: '#',
suggestions: data,
}}
toolbar={{
options: ['inline', 'textAlign', 'list', 'embedded'],
inline: {
options: ['bold', 'italic', 'underline'],
italic: { className: 'i-italic-icon' },
bold: { className: 'i-bold-icon' },
underline: { className: 'i-underline-icon' },
},
list: {
options: ['unordered', 'ordered'],
unordered: { className: 'i-unordered-icon' },
ordered: { className: 'i-ordered-icon' },
},
textAlign: {
options: ['left', 'center', 'right', 'justify'],
left: { className: 'i-left-icon' },
center: { className: 'i-center-icon' },
right: { className: 'i-right-icon' },
justify: { className: 'i-justify-icon' },
},
blockType: {
inDropdown: false,
options: ['H1', 'Blockquote'],
className: 'i-bloctype-icon',
},
image: {
urlEnabled: true,
uploadEnabled: true,
previewImage: true,
// alt: { present: true, mandatory: false },
uploadCallback: uploadImageCallBack,
inputAccept: 'application/zip,application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel,image/gif,image/jpeg,image/jpg,image/png,image/svg'
},
embedded: {
className: 'i-embedded-icon',
embedCallback: link => {
const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
return (detectedSrc && detectedSrc[1]) || link;
}
}
}}
/>
I am using React-draft-wysiwyg and I simply want to remove some items from the default list. I did something like this:
<Editor editorState={editorState}
wrapperClassName="custom-editor-wrapper"
editorClassName="custom-editor-className"
toolbarClassName="toolbar-class"
onEditorStateChange={onEditorStateChange}
toolbar={{
options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'history'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
image: {uploadEnabled: true, uploadCallback: uploadImageCallBack, previewImage: true,
alt: { present: true }, defaultSize: {width: '700px', height: '400px'}},
}}
/>
This is not working. The Editor is still showing all the toolbar options. What Am I doing wrong?
I'd like to use this prop to insert some paragraph. I've tried triggering some "Space" event but it changes anything.
Here's my code:
<Editor
editorState={editorState}
toolbarClassName={style.toolBarStyle}
wrapperClassName='wrapperClassName'
editorClassName={style.editorInputArea}
toolbar={{
options: [
"inline",
"fontSize",
"list",
"textAlign",
"image",
"link",
"history",
],
fontSize: {
inDropdow: false,
options: [14, 16, 18, 24, 30, 36],
},
inline: {
inDropdown: false,
options: ["bold", "italic", "underline"],
},
list: {
inDropdown: false,
options: ["unordered", "ordered", "indent", "outdent"],
},
textAlign: { inDropdown: true },
link: {
inDropdown: false,
showOpenOptionOnHover: true,
defaultTargetOption: "_self",
options: ["link", "unlink"],
linkCallback: undefined,
},
history: { inDropdown: false },
image: {
uploadCallback: uploadCallback,
alignmentEnabled: true,
previewImage: true,
inputAccept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
},
}}
onEditorStateChange={(newState) => {
setEditorState(newState);
// console.log(draftToHtml(convertToRaw(newState.getCurrentContent())));
}}
onTab={
(e) => {
e.preventDefault();
const { target } = e;
target.dispatchEvent(
new KeyboardEvent("keydown", {
code: "Space",
key: " ",
keyCode: 32,
cancelable: true,
repeat: false,
bubbles: true,
view: window,
which: 32,
})
);
}
}
/>
The documentation doesn't help on saying how it can be used to create paragraph, once that's the main use of pressing tab when you're writing something. Event the PR on GitHub that implemented this props says nothing about how to use it for creating paragraphs.
iam new to react, redux, javascript and also Kepler.gl.
My Question is the following:
I managed it to define multiple datasets without any tutorial, by lucky try. (Kepler.gl has no good documentation sadly)
I tried to define "data2" and fill it with an other source of data, so i can bind it to i specific layer. But every time i associate it to a layer, the layer disappears in the List like there was no data. I checked both sources single and both are fine. Its like it only accept the data const not any other. I also replaced all data const with data2 const and it stopped working. So i think it is a problem to the const. Do you guys see what iam missing?
This is the original code with one data source:
import React from "react";
import keplerGlReducer from "kepler.gl/reducers";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {taskMiddleware} from "react-palm/tasks";
import {Provider, useDispatch} from "react-redux";
import KeplerGl from "kepler.gl";
import {addDataToMap} from "kepler.gl/actions";
import useSwr from "swr";
const reducers = combineReducers({
keplerGl: keplerGlReducer,
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
const mapboxApiAccessToken = "pk.eyJ1IjoiaHN1bGRlIiwiYSI6ImNsMWNlZ3ZtaTA0MXgzZXF4eGYybmExOWwifQ.-VMvsl27bE0dhoRRY8xMrw";
export default function Kglapp() {
return (
<Provider store={store}>
<Map/>
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const {data} = useSwr("test", async () => {
const response = await fetch(
".\\mapdatajson\\covid19.json"
);
const data = await response.json();
return data;
})
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-1", id: "test-1"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-2", id: "test-2"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-3", id: "test-3"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-4", id: "test-4"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-5", id: "test-5"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-6", id: "test-6"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-7", id: "test-7"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-8", id: "test-8"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-9", id: "test-9"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-10", id: "test-10"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-11", id: "test-11"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-12", id: "test-12"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-13", id: "test-13"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-14", id: "test-14"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-15", id: "test-15"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-16", id: "test-16"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-17", id: "test-17"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-18", id: "test-18"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-19", id: "test-19"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
if (data) {
dispatch(
addDataToMap(
{
datasets: {
info: {label: "test-20", id: "test-20"}, data,
},
option: {
centerMap: true,
readOnly: true,
split: true
},
config: {}
}),
);
}
}
,
[dispatch, data]
);
return (
<KeplerGl
id="test"
mapboxApiAccessToken={mapboxApiAccessToken}
width={window.innerWidth}
height={window.innerHeight}
/>
);
}
Do somebody have any ideas how to set different sources to the layers without let it dissapear for dubious reasons?
Thank you for your help.
I have a MUI Table Implementation such that the options object viewColumns is set to true, which is supposed to display the popper to choose the columns to be displayed in vertical list of checkbox as shown below:
, but I am getting it horizontally as displayed in screenshot below:
The options to be passed in MUIDataTable components is defined as:
const options = {
filter: true,
filterType: "dropdown",
print: false,
viewColumns: true,
selectableRows: false,
onRowClick: (rowData) => {
console.log("RowClicked->", rowData);
},
responsive: "stacked",
fixedHeaderOptions: {
xAxis: false,
yAxis: true,
},
};
columns defines as:
export const DEAL_GRID_COLUMNS = [
{
name: "someReference",
label: "Some Reference",
options: {
filter: true,
sort: true,
},
},
{
name: "businessTeam",
label: "Business Teams",
options: {
filter: true,
sort: true,
},
},
{
name: "keyContact",
label: "Key Contact Lead",
options: {
filter: true,
sort: true,
},
},
.....
.....
.....
.....
];
and the component is consumed as
<MUIDataTable data={gridData} columns={DEAL_GRID_COLUMNS} options={options} />
here gridData is recieved from Api response
I made sample example using your options and I found viewColumns popper as vertical. I assume there is mui-datatable version issue. FYI, I am using "mui-datatables": "^2.14.0"
Here is the example:
import React, {useEffect, useState} from "react";
import MUIDataTable from "mui-datatables";
import axios from 'axios';
export default function DataTable() {
const [posts, setPost] = useState([]);
let signal = axios.CancelToken.source();
useEffect(() => {
let isSubscribed = true;
axios.get(`https://jsonplaceholder.typicode.com/posts`, {
cancelToken: signal.token,
})
.then(res => {
const posts = res.data;
setPost(posts);
}).catch(err => {
console.log(err);
});
return function cleanup() {
isSubscribed = false;
signal.cancel('Api is being canceled');
}
}, []);
const columns = ["id", "title", "body"];
const options = {
filter: true,
filterType: "dropdown",
print: false,
viewColumns: true,
selectableRows: 'none',
onRowClick: (rowData) => {
console.log("RowClicked->", rowData);
},
responsive: "stacked",
fixedHeaderOptions: {
xAxis: false,
yAxis: true,
},
};
return (
<MUIDataTable
title={"Posts"}
data={posts}
columns={columns}
options={options}
/>
);
}
You can check this output screen
I fixed this by overriding its maxWidth as
MuiPopover: {
paper: {
maxWidth: "16%",
},
}