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 69c75b6..8badcaa 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 (
+
+
+
+ );
+};
+```
+
## Example of different selects
View live example
@@ -95,10 +128,10 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
## Compatibility
-| Application Compatibility | JS | React | Angular | Vue |
-| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
-| CG-SELECT |  |   |  |  |
-| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available |
+| Application Compatibility | JS | React | Angular | Vue |
+| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
+| CG-SELECT |  |  |  |  |
+| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | not yet available |
## History
diff --git a/READMERU.md b/READMERU.md
index 3111cd4..948ef68 100644
--- a/READMERU.md
+++ b/READMERU.md
@@ -1,6 +1,6 @@
# CG-SELECT
-## Версия ~ 0.3.11
+## Версия ~ 0.3.12
English README
@@ -76,6 +76,39 @@ const dropdown = new CGSelect({
});
```
+### Пример инициализации CGSelect в 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 (
+
+
+
+ );
+};
+```
+
## Примеры различных вариантов выбора.
Рабочий пример
@@ -94,10 +127,10 @@ const dropdown = new CGSelect({
## Совместимость
-| Совместимость в приложениях | JS | React | Angular | Vue |
-| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
-| CG-SELECT |  |   |  |  |
-| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно |
+| Совместимость в приложениях | JS | React | Angular | Vue |
+| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
+| CG-SELECT |  |  |  |  |
+| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно |
## История
diff --git a/docs/index.html b/docs/index.html
index e9f2010..e45e997 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -62,7 +62,7 @@
- version ~ 0.3.1
+ version ~ 0.3.12
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;