diff --git a/CHANGELOG.md b/CHANGELOG.md index dce04eb..3fa8776 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -80,3 +80,8 @@ Tested in JS and React. Errors in work in React applications are revealed. ##### 04.03.2023 - fix 0.3.1 - Fixed import select. + +##### 04.03.2023 - fix 0.3.12 + +- Optimized code. +- Added error messages when using public methods. diff --git a/README.md b/README.md index 10dd833..c107bdd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.3.11 +## version ~ 0.3.12 ЧИТАТЬ НА РУССКОМ @@ -75,6 +75,39 @@ const dropdown = new CGSelect({ }); ``` +### An example of initialization a CGSelect in React. + +```javascript +import { useEffect } from 'react'; +import CGSelect from 'cg-select'; + +const App = () => { + useEffect(() => { + const drop = new CGSelect({ + selector: '.cg-dropdown_selector', + placeholder: 'Выберите авто', + items: [ + 'BMW', + { + id: '213sade', + title: 'Opel', + value: 1, + }, + 'Mersedes', + 'MAN', + 'Ferari', + ], + }); + }, []); + + return ( +
This component allows you to create a custom select. It offers more flexible
diff --git a/package-lock.json b/package-lock.json
index a1482d6..c3eab51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "cg-select",
- "version": "0.3.11",
+ "version": "0.3.12",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "cg-select",
- "version": "0.3.11",
+ "version": "0.3.12",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.21.4",
diff --git a/package.json b/package.json
index 8aeeed6..9ae5d9e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cg-select",
- "version": "0.3.11",
+ "version": "0.3.12",
"source": "index.js",
"main": "dist/main.js",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
diff --git a/src/cg-select.ts b/src/cg-select.ts
index aa40242..eec9fb0 100644
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@@ -664,7 +664,7 @@ export default class CGSelect implements ICgSelect {
private selectMode(nativeSelectMode: boolean) {
let win = window.outerWidth;
- if (nativeSelectMode === true) {
+ if (nativeSelectMode) {
const select = this.element!.querySelector('.cg-select');
const list = this.element!.querySelector('.list');
const nativeSelect = this.element!.querySelector('.nativeSelect');
@@ -796,11 +796,12 @@ export default class CGSelect implements ICgSelect {
const textNoRezult = this.element!.querySelector('.noRezult');
const textNode = document.createTextNode(textInListSearch);
- search!.setAttribute('placeholder', placeholder);
search!.setAttribute('placeholder', placeholder);
textNoRezult!.textContent = '';
textNoRezult!.appendChild(textNode);
+ } else {
+ throw new Error('You cannot change the language if it is not enabled searchMode!');
}
}
@@ -811,20 +812,21 @@ export default class CGSelect implements ICgSelect {
* @method buttonControl
*/
public buttonControl(button: Element, method: string) {
- if (this.listDisplayMode) {
- return;
+ if (!this.listDisplayMode) {
+ this.buttonAction = button!;
+ button.addEventListener('click', () => {
+ switch (method.toLowerCase()) {
+ case 'open':
+ this.open(true);
+ break;
+ case 'close':
+ this.close();
+ break;
+ }
+ });
+ } else {
+ throw new Error('Sheet display enabled in listDisplayMode!');
}
-
- this.buttonAction = button!;
- button.addEventListener('click', () => {
- if (method.toLowerCase() === 'open') {
- this.open(true);
- } else if (method.toLowerCase() === 'close') {
- this.close();
- } else {
- return;
- }
- });
}
/**
@@ -836,7 +838,7 @@ export default class CGSelect implements ICgSelect {
const select = this.element!.querySelector('.cg-select');
const nativeSelect = this.element!.querySelector('.nativeSelect');
- if (value === true) {
+ if (value) {
this.element!.setAttribute('disabled', 'true');
nativeSelect!.setAttribute('disabled', 'true');
select!.classList.add('disabled');
@@ -875,10 +877,8 @@ export default class CGSelect implements ICgSelect {
*/
public deleteItem(index: number) {
if (this.category) {
- console.log('can`t add item to category');
- return;
+ throw new Error('Unable to remove item from category!');
}
-
const item = this.items[index];
this.items.splice(index, 1);
@@ -901,8 +901,7 @@ export default class CGSelect implements ICgSelect {
*/
public selectIndex(index: number) {
if (this.category) {
- console.log('can`t add item to category');
- return;
+ throw new Error('Unable to select item from category!');
}
const options = this.element!.querySelectorAll('.list__item') as NodeListOf