Replacing bootstrap dropdown with select2

This commit is contained in:
Tony Air 2019-08-12 15:50:01 +07:00
parent 5ec0892125
commit 39ee137467
2 changed files with 157 additions and 154 deletions

View File

@ -1,9 +1,10 @@
import $ from 'jquery'; import $ from 'jquery';
import 'bootstrap-select/dist/js/bootstrap-select'; //import 'bootstrap-select/dist/js/bootstrap-select';
$.fn.selectpicker.Constructor.BootstrapVersion = '4'; //$.fn.selectpicker.Constructor.BootstrapVersion = '4';
import 'select2/dist/js/select2.js';
import 'jquery.inputmask/dist/jquery.inputmask.bundle'; import select2 from 'jquery.inputmask/dist/jquery.inputmask.bundle';
import Events from "../_events"; import Events from "../_events";
import SpinnerUI from './_ui.spinner'; import SpinnerUI from './_ui.spinner';
@ -37,8 +38,13 @@ const FormBasics = (($) => {
const $selectFields = $element.find('select:not([readonly])'); const $selectFields = $element.find('select:not([readonly])');
const $radioOptions = $element.find('input[type="radio"]'); const $radioOptions = $element.find('input[type="radio"]');
const separator = '::;::';
$selectFields.each((i, el) => {
const $el = $(el);
$el.select2();
});
/*const separator = '::;::';
$selectFields.each((i, el) => { $selectFields.each((i, el) => {
const $el = $(el); const $el = $(el);
const maxOptions = $el.data('max-options') || false; const maxOptions = $el.data('max-options') || false;
@ -109,7 +115,7 @@ const FormBasics = (($) => {
$('.dropdown-menu a').on('click', (e) => { $('.dropdown-menu a').on('click', (e) => {
$(e.currentTarget).parents('.dropdown-menu').removeClass('show'); $(e.currentTarget).parents('.dropdown-menu').removeClass('show');
}); });*/
// /FIX // /FIX
$fields.each((e, el) => { $fields.each((e, el) => {

View File

@ -1,153 +1,150 @@
{ {
"name": "ss-webpack-boilerplate", "name": "ss-webpack-boilerplate",
"version": "1.0.0", "version": "1.0.0",
"description": "Lets you create SilverStripe faster", "description": "Lets you create SilverStripe faster",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "MIT", "license": "MIT",
"private": false, "private": false,
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/a2nt/silverstripe-webpack" "url": "git+https://github.com/a2nt/silverstripe-webpack"
}, },
"engines": { "engines": {
"yarn": ">= 1.0.0" "yarn": ">= 1.0.0"
}, },
"scripts": { "scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --https -d --config webpack.config.dev.js", "start": "cross-env NODE_ENV=development webpack-dev-server --https -d --config webpack.config.dev.js",
"dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.dev.js", "dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.dev.js",
"prebuild": "rimraf build", "prebuild": "rimraf build",
"build": "cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js --progress", "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js --progress",
"lint:check": "eslint ./app/client/src --config .eslintrc && sass-lint ./app/client/src --config .sasslintrc -v -q", "lint:check": "eslint ./app/client/src --config .eslintrc && sass-lint ./app/client/src --config .sasslintrc -v -q",
"lint:fix": "eslint ./app/client/src --config .eslintrc --fix && sass-lint ./app/client/src --config .sasslintrc -v -q --fix", "lint:fix": "eslint ./app/client/src --config .eslintrc --fix && sass-lint ./app/client/src --config .sasslintrc -v -q --fix",
"lint:js": "eslint ./app/client/src --config .eslintrc", "lint:js": "eslint ./app/client/src --config .eslintrc",
"lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q" "lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q"
}, },
"dependencies": { "dependencies": {
"@google/markerclusterer": "^1.0.3", "@google/markerclusterer": "^1.0.3",
"bootbox": "^4.4.0", "bootbox": "^4.4.0",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"bootstrap-confirmation2": "^4.1.0", "bootstrap-confirmation2": "^4.1.0",
"bootstrap-datepicker": "^1.9.0", "bootstrap-datepicker": "^1.9.0",
"bootstrap-offcanvas": "^1.0.0", "bootstrap-offcanvas": "^1.0.0",
"bootstrap-select": "^1.13.10", "bootstrap-table": "^1.14.2",
"bootstrap-table": "^1.14.2", "bootstrap-timepicker": "^0.5.2",
"bootstrap-timepicker": "^0.5.2", "core-util-is": "^1.0.2",
"core-util-is": "^1.0.2", "croppie": "^2.6.4",
"croppie": "^2.6.4", "exif-js": "^2.3.0",
"exif-js": "^2.3.0", "font-awesome": "^4.7.0",
"font-awesome": "^4.7.0", "foundation-emails": "^2.2.1",
"foundation-emails": "^2.2.1", "gijgo": "^1.9.13",
"gijgo": "^1.9.13", "jquery": "^3.4.1",
"jquery": "^3.4.1", "jquery-hammerjs": "^2.0.0",
"jquery-hammerjs": "^2.0.0", "jquery-zoom": "^1.7.21",
"jquery-zoom": "^1.7.21", "jquery.appear": "^1.0.1",
"jquery.appear": "^1.0.1", "jquery.inputmask": "^3.3.4",
"jquery.inputmask": "^3.3.4", "mapbox-gl": "^1.0.0",
"mapbox-gl": "^1.0.0", "meta-lightbox": "^1.0.0",
"meta-lightbox": "^1.0.0", "offcanvas-bootstrap": "^2.5.2",
"offcanvas-bootstrap": "^2.5.2", "popper.js": "^1.15.0",
"popper.js": "^1.15.0", "pouchdb": "^6.4.3",
"pouchdb": "^6.4.3", "quill": "^1.3.6",
"quill": "^1.3.6", "react-bootstrap4-form-validation": "^1.0.10",
"react-bootstrap4-form-validation": "^1.0.10", "routie": "0.0.1",
"routie": "0.0.1", "smooth-scroll": "^14.2.1",
"smooth-scroll": "^14.2.1", "select2": "^4.0.8",
"webpack-cli": "^3.3.2", "webpack-cli": "^3.3.2",
"yarn": "^1.16.0" "yarn": "^1.16.0"
}, },
"devDependencies": { "devDependencies": {
"animate.css": "^3.7.0", "animate.css": "^3.7.0",
"autoprefixer": "^7.2.5", "autoprefixer": "^7.2.5",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-eslint": "^8.2.6", "babel-eslint": "^8.2.6",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.24.1", "babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1", "babel-preset-stage-2": "^6.24.1",
"browser-sync": "^2.24.5", "browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "^2.2.2", "browser-sync-webpack-plugin": "^2.2.2",
"copy-webpack-plugin": "^4.6.0", "copy-webpack-plugin": "^4.6.0",
"copyfiles": "^1.2.0", "copyfiles": "^1.2.0",
"cross-env": "^5.1.6", "cross-env": "^5.1.6",
"css-loader": "^0.28.9", "css-loader": "^0.28.9",
"eslint": "^4.18.1", "eslint": "^4.18.1",
"eslint-plugin-import": "^2.17.2", "eslint-plugin-import": "^2.17.2",
"eslint-plugin-jquery": "^1.5.0", "eslint-plugin-jquery": "^1.5.0",
"eslint-plugin-react": "^7.13.0", "eslint-plugin-react": "^7.13.0",
"exports-loader": "^0.7.0", "exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"favicons-webpack-plugin": "0.0.9", "favicons-webpack-plugin": "0.0.9",
"file-loader": "^1.1.5", "file-loader": "^1.1.5",
"html-webpack-plugin": "^4.0.0-beta.5", "html-webpack-plugin": "^4.0.0-beta.5",
"laravel-mix": "^2.1.14", "laravel-mix": "^2.1.14",
"lost": "^8.3.1", "lost": "^8.3.1",
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
"optimize-css-assets-webpack-plugin": "^4.0.1", "optimize-css-assets-webpack-plugin": "^4.0.1",
"postcss-loader": "^2.1.5", "postcss-loader": "^2.1.5",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"react-hot-loader": "^3.1.3", "react-hot-loader": "^3.1.3",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-devtools-extension": "^2.13.8", "redux-devtools-extension": "^2.13.8",
"resolve-url-loader": "^2.3.2", "resolve-url-loader": "^2.3.2",
"rimraf": "^2.6.3", "rimraf": "^2.6.3",
"sass-lint": "^1.13.1", "sass-lint": "^1.13.1",
"sass-lint-fix": "^1.12.1", "sass-lint-fix": "^1.12.1",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"script-ext-html-webpack-plugin": "^2.1.3", "script-ext-html-webpack-plugin": "^2.1.3",
"style-loader": "^0.19.0", "style-loader": "^0.19.0",
"svg-url-loader": "^2.3.1", "svg-url-loader": "^2.3.1",
"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22", "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
"url-loader": "^0.6.2", "url-loader": "^0.6.2",
"webpack": "^4.32.2", "webpack": "^4.32.2",
"webpack-cli": "^3.3.2", "webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1", "webpack-dev-server": "^3.4.1",
"webpack-manifest-plugin": "^1.3.2", "webpack-manifest-plugin": "^1.3.2",
"webpack-merge": "^4.1.1" "webpack-merge": "^4.1.1"
}, },
"stylelint": { "stylelint": {
"rules": { "rules": {
"block-no-empty": null, "block-no-empty": null,
"color-no-invalid-hex": true, "color-no-invalid-hex": true,
"comment-empty-line-before": [ "comment-empty-line-before": [
"always", "always", {
{ "ignore": [
"ignore": [ "stylelint-commands",
"stylelint-commands", "after-comment"
"after-comment" ]
]
}
],
"declaration-colon-space-after": "always",
"indentation": [
4,
{
"except": [
"value"
]
}
],
"max-empty-lines": 2,
"rule-empty-line-before": [
"always",
{
"except": [
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"unit-whitelist": [
"em",
"rem",
"%",
"s",
"px"
]
} }
],
"declaration-colon-space-after": "always",
"indentation": [
4, {
"except": [
"value"
]
}
],
"max-empty-lines": 2,
"rule-empty-line-before": [
"always", {
"except": [
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"unit-whitelist": [
"em",
"rem",
"%",
"s",
"px"
]
} }
}
} }