Update 0.3.12
This commit is contained in:
MaxOvs19
commit
75eed30d19
@ -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.
|
||||
|
||||
39
README.md
39
README.md
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## version ~ 0.3.11
|
||||
## version ~ 0.3.12
|
||||
|
||||
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
|
||||
|
||||
@ -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 (
|
||||
<div className="App">
|
||||
<button className="cg-dropdown cg-dropdown_selector"></button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Example of different selects
|
||||
|
||||
<a href="https://cg-select.itguild.info/">View live example</a>
|
||||
@ -99,8 +132,8 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
|
||||
|
||||
| Application Compatibility | JS | React | Angular | Vue |
|
||||
| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
|
||||
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> |
|
||||
| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available |
|
||||
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> |
|
||||
| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | not yet available |
|
||||
|
||||
## History
|
||||
|
||||
|
||||
39
READMERU.md
39
READMERU.md
@ -1,6 +1,6 @@
|
||||
# CG-SELECT
|
||||
|
||||
## Версия ~ 0.3.11
|
||||
## Версия ~ 0.3.12
|
||||
|
||||
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
|
||||
|
||||
@ -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 (
|
||||
<div className="App">
|
||||
<button className="cg-dropdown cg-dropdown_selector"></button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Примеры различных вариантов выбора.
|
||||
|
||||
<a href="https://cg-select.itguild.info/">Рабочий пример</a>
|
||||
@ -96,8 +129,8 @@ const dropdown = new CGSelect({
|
||||
|
||||
| Совместимость в приложениях | JS | React | Angular | Vue |
|
||||
| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
|
||||
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> <img src="src/images/no.png"></img>| <img src="src/images/no.png"></img> | <img src="src/images/no.png"></img> |
|
||||
| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно |
|
||||
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/no.png"></img> |
|
||||
| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно |
|
||||
|
||||
## История
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
</a>
|
||||
|
||||
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
|
||||
<h2>version ~ 0.3.1</h2>
|
||||
<h2>version ~ 0.3.12</h2>
|
||||
</a>
|
||||
<p>
|
||||
This component allows you to create a custom select. It offers more flexible
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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', () => {
|
||||
if (method.toLowerCase() === 'open') {
|
||||
switch (method.toLowerCase()) {
|
||||
case 'open':
|
||||
this.open(true);
|
||||
} else if (method.toLowerCase() === 'close') {
|
||||
break;
|
||||
case 'close':
|
||||
this.close();
|
||||
} else {
|
||||
return;
|
||||
break;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
throw new Error('Sheet display enabled in listDisplayMode!');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -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<HTMLElement>;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user