Open shorif2000 opened 6 years ago
do you have an online example/demo we can checkout?
@skratchdot you can see it here
direct link https://jprrxy4rwv.codesandbox.io/
it also messes up the css
@shorif2000 - Thanks for the link! I'm looking now. I think this is a bootstrap 3 vs 4 thing. I think react-bootstrap-multiselect
only works with bootstrap 3. I will take a closer look at this. I know a few months ago, I tried upgrading the library (and adding some tests). I will take another look at the branch I created, and see if I can push a fix that works with your codebase.
@skratchdot i am using bootstrap v3
@shorif2000 - I only asked b/c I saw bootstrap 4 in the codesandbox link.
I was able to get it working locally by making the following changes:
In package.json
, change the dependencies
section so it looks like:
"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap-multiselect": "^0.9.13-1",
"jquery": "^3.3.1",
"popper.js": "1.14.3",
"prop-types": "^15.6.2",
"react": "^16.3.2",
"react-bootstrap": "0.32.1",
"react-bootstrap-multiselect": "git@github.com:skratchdot/react-bootstrap-multiselect.git#v3",
"react-bootstrap-table": "4.3.1",
"react-dom": "16.3.2",
"react-fontawesome": "1.6.1",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"react-stringify": "1.0.0"
},
In, commsmatrix.js
, remove all the lines before const statusList = [
, and paste in:
/* eslint-disable */
import React, { Component } from "react";
import {
Button,
ButtonToolbar,
Modal,
Tooltip,
OverlayTrigger,
Checkbox
} from "react-bootstrap";
import PropTypes from "prop-types";
import FontAwesome from "react-fontawesome";
import {
BootstrapTable,
TableHeaderColumn,
InsertModalHeader,
InsertModalFooter
} from "react-bootstrap-table";
import "react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
import Dropdown from "react-bootstrap/lib/Dropdown";
import MenuItem from "react-bootstrap/lib/MenuItem";
import Stringify from "react-stringify";
const jQuery = require('jquery');
// this step is important, or else bootstrap will throw an error
window.jQuery = window.$ = jQuery;
// include required js
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
// include required css
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap-multiselect/dist/css/bootstrap-multiselect.css');
// now include the multiselect component
const Multiselect = require('react-bootstrap-multiselect');
Perhaps I should publish the v3
branch, but I wanted to figure out a better way to make it work (without using require
and using import
statements instead).
gif of it working locally:
@skratchdot how do i get this locally "react-bootstrap-multiselect": "git@github.com:skratchdot/react-bootstrap-multiselect.git#v3",
this is my package.son and it does not work when i added that v3 part
{
"name": "ccp",
"version": "0.1.0",
"private": true,
"dependencies": {
"audit": "0.0.6",
"axios": "^0.17.1",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^4.0.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"lodash": "^4.17.10",
"moment": "^2.21.0",
"node-sass": "^4.9.0",
"npm": "^6.1.0",
"npm-audit": "0.0.3",
"popper.js": "^1.14.3",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-bootstrap": "^0.32.1",
"react-bootstrap-multiselect": "git@github.com:skratchdot/react-bootstrap-multiselect.git#v3",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-table-next": "^0.1.2",
"react-dom": "^16.2.0",
"react-dropzone": "^4.2.9",
"react-fontawesome": "^1.6.1",
"react-ga": "^2.4.1",
"react-quill": "^1.2.3",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.4",
"react-select": "^1.2.1",
"react-stringify": "^1.0.0",
"react-table": "^6.7.6",
"react-tooltip": "^3.4.2",
"react-widgets": "^4.2.2",
"redux": "^3.7.2",
"redux-file-upload": "0.0.19",
"redux-form": "^7.2.3",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-title": "0.0.3",
"sass-loader": "^6.0.6",
"sugarss": "^1.0.1",
"url-search-params": "^0.10.0",
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.26.3",
"babel-env": "^2.4.1",
"babel-jest": "^23.2.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bable-loader": "0.0.1-security",
"copy-webpack-plugin": "^4.5.1",
"enzyme": "^3.3.0",
"html-loader": "^0.5.4",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.4.4",
"prettier": "1.11.1",
"react-addons-test-utils": "^15.6.2",
"webpack": "^3.10.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"jest": {
"verbose": true,
"testPathIgnorePatterns": [
"/node_modules/",
"/jspm_packages",
"docs"
],
"unmockedModulePathPatterns": [
"./node_modules/react"
],
"modulePathIgnorePatterns": [
"./docs/assets/"
]
}
}
@skratchdot locally i have changed it to the following. is it correct.
/* eslint-disable */
import React, { Component } from "react";
import axios from 'axios';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom';
import {
Button,
ButtonToolbar,
Modal,
Tooltip,
OverlayTrigger,
Checkbox
} from "react-bootstrap";
import PropTypes from "prop-types";
import {
fetchCommsmatrixCount,
fetchCommsmatrix,
fetchCommsmatrixData,
fetchCommsmatrixDataCount,
downloadFile,
createCommsMatrixData,
updateCommsMatrixData,
deleteCommsMatrixData,
renameCommsmatrix
} from '../../actions/commsmatrices';
import {
fetchWorkerjob,
addWorkerjob
} from '../../actions/worker';
import { fetchProtocols } from '../../actions/lists';
import FontAwesome from "react-fontawesome";
import {
BootstrapTable,
TableHeaderColumn,
InsertModalHeader,
InsertModalFooter
} from "react-bootstrap-table";
import "react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
import Dropdown from "react-bootstrap/lib/Dropdown";
import MenuItem from "react-bootstrap/lib/MenuItem";
import Stringify from "react-stringify";
import ModalError from '../modalerror';
import DownloadFile from './downloadfile';
import { isIPv4, isZone, isGenericName, isPort, isRemark } from '../../scripts/validation';
import FreezeButton from './freeze_button';
import ModalConfirm from '../modalconfirm';
import CommsMatrixError from './commsmatrix_error';
import SetStatuses from './set_statuses';
import NatEditor from './nat_editor';
const jQuery = require('jquery');
// this step is important, or else bootstrap will throw an error
window.jQuery = window.$ = jQuery;
// include required js
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
// include required css
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap-multiselect/dist/css/bootstrap-multiselect.css');
// now include the multiselect component
const Multiselect = require('react-bootstrap-multiselect');
It looks like you have bootstrap 4 in your dependencies.
You can install the v3 branch by running:
npm install --save git@github.com:skratchdot/react-bootstrap-multiselect.git#v3
Then the additional dependencies:
npm install --save jquery bootstrap@3 bootstrap-multiselect react prop-types
Also, the v3 docs are here: https://github.com/skratchdot/react-bootstrap-multiselect/tree/v3#getting-started
It looks like you are including the correct code in the commsmatrix.js
file. The important part is this section:
const jQuery = require('jquery');
// this step is important, or else bootstrap will throw an error
window.jQuery = window.$ = jQuery;
// include required js
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
// include required css
require('bootstrap/dist/css/bootstrap.css');
require('bootstrap-multiselect/dist/css/bootstrap-multiselect.css');
// now include the multiselect component
const Multiselect = require('react-bootstrap-multiselect');
and adding /* eslint-disable */
to the top of the file. You can remove that at some point, but it was causing too many errors for me (and I didn't feel like cherry-picking which errors to ignore- so I ignored them all).
Perhaps this weekend I will have time to publish the v3 branch (to make this easier for you). I can also look into seeing how hard it will be to add bootstrap 4 support (perhaps it already works).
@skratchdot yh i think im using bootstrap 4, in my react app and bootstrap 3 in the old version. so i got confused. the following doesn't work
# npm install --save git@github.com:skratchdot/react-bootstrap-multiselect.git#v3
npm ERR! code ENOLOCAL
npm ERR! Could not install from "github.com:skratchdot/react-bootstrap-multiselect.git#v3" as it does not contain a package.json file.
npm ERR! A complete log of this run can be found in:
npm ERR! /opt/SP/wwwadm/home/.npm/_logs/2018-07-05T13_14_56_025Z-debug.log
moving to bootstrap 3 seems to mess up all the css.
@shorif2000 - You should be able to do something like this as well:
npm install --save skratchdot/react-bootstrap-multiselect#v3
Basically, you just need to install this branch: https://github.com/skratchdot/react-bootstrap-multiselect/tree/v3
Follow the npm instructions for doing so: https://docs.npmjs.com/files/package.json#git-urls-as-dependencies
There's definitely a package.json in that git branch
after the 1st open and close every other click it does not seem to open i can see it does not add the class
open
in<div class="btn-group show">
the following code is in closed state
the following code is in open state