diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b0f051..65f6dc4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,3 +29,7 @@ Tested in JS and React. Errors in work in React applications are revealed. ### 24.01.2023 - fix 0.2.2 - Fixed documentation etc. + +### 27.01.2023 - fix 0.2.3 + +- Changed the theme selection function. diff --git a/README.md b/README.md index 39623f4..eea4049 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # CG-SELECT -## version ~ 0.2.2 +## version ~ 0.2.3 This component allows you to create a custom select. It offers more flexible customization and use of select. Customization, multi-selection and live search by elements are available. diff --git a/example/index.js b/example/index.js index 131eaa1..55d9aaa 100644 --- a/example/index.js +++ b/example/index.js @@ -25,7 +25,6 @@ const dropdown = new CGSelect({ width: '824px', }, }, - theme: 'dark' }); // ------------------------------NativeSelect----------------------- diff --git a/package-lock.json b/package-lock.json index 530bd89..655ca03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cg-select", - "version": "0.2.2", + "version": "0.2.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cg-select", - "version": "0.2.2", + "version": "0.2.3", "license": "ISC", "dependencies": { "@parcel/optimizer-css": "^2.8.0", diff --git a/package.json b/package.json index 3e6ad9c..3955f56 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cg-select", - "version": "0.2.2", + "version": "0.2.3", "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling", "author": { "name": "CraftGroup", diff --git a/src/cg-select.ts b/src/cg-select.ts index d45a1f2..371685d 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -24,6 +24,7 @@ import { ru, en } from './language/language'; import { ILanguage } from './interfaces/language.interface'; import './main.scss'; +import { changeTheme } from './components/theme/theme'; /** * @class Class Description ICgSelect @@ -36,7 +37,6 @@ export class CGSelect implements ICgSelect { selected?: string; placeholder?: string; items?: IItems[] | string[] | any; - darkTheme?: boolean; theme?: string; searchMode?: boolean; closeOnSelect?: boolean; @@ -107,7 +107,7 @@ export class CGSelect implements ICgSelect { placeholder: '...', lable: '...' items: [string|number|object], - darkTheme: true/false, + theme: string, searchMode: true/false, closeOnSelect: true/false, nativeSelectMode: true/false, @@ -175,7 +175,6 @@ export class CGSelect implements ICgSelect { 'MAN', 'max', ], - darkTheme: true, multiselect: true, multiselectTag: true, } @@ -190,13 +189,13 @@ export class CGSelect implements ICgSelect { listDisplayMode, nativeSelectMode, searchMode, - darkTheme, language, styles, lable, event, selected, - placeholder, theme + placeholder, + theme, } = setting; this.options = setting; @@ -207,7 +206,6 @@ export class CGSelect implements ICgSelect { this.selector = selector; this.items = items; this.searchMode = searchMode; - this.darkTheme = darkTheme; this.language = language; this.nativeSelectMode = nativeSelectMode; this.listDisplayMode = listDisplayMode; @@ -289,6 +287,7 @@ export class CGSelect implements ICgSelect { this.randomId = random; ulList.classList.add('list'); + ulList!.classList.add('classicList'); if (this.styles) { customStylesFormat(this.styles.list!, ulList); @@ -357,10 +356,9 @@ export class CGSelect implements ICgSelect { this.list = this.element!.querySelector('.list'); this.caret = this.element!.querySelector('.caret'); - if (this.darkTheme == false) { - this.checkTheme(); + if (this.theme) { + changeTheme(this.element!, this.theme!); } - this.themeCheck(); if (this.nativeSelectMode === true) { this.selectMode(this.nativeSelectMode); @@ -543,6 +541,7 @@ export class CGSelect implements ICgSelect { let selectedItemsClear: ISelectedItems = { placeholder: this.placeholder!, selected: this.selected!, + theme: this.theme, }; const ulMultipul = document.createElement('ul'); @@ -565,7 +564,6 @@ export class CGSelect implements ICgSelect { selected: this.selected!, selectedItems: this.selectedItems, indexes: this.indexes, - darkTheme: this.darkTheme, multiselectTag: this.multiselectTag, }; } @@ -657,54 +655,6 @@ export class CGSelect implements ICgSelect { }); } - /** - * @private - * @method checkTheme - * @description Changes the color scheme from dark to light. - */ - private checkTheme(): void { - const select = this.element!.querySelector('.cg-select'); - const caret = this.element!.querySelector('.caret'); - const list = this.element!.querySelector('ul.list'); - const search = this.element!.querySelector('.inputSearch'); - - if (this.darkTheme == false) { - select!.classList.add('selectWhite'); - caret!.classList.add('caretWhite'); - list!.classList.add('listWhite'); - - if (this.searchMode == true) { - search!.classList.add('inputWhite'); - } - } else if (this.darkTheme == true) { - return; - } else { - throw new Error('Styles error or invalid value entered!'); - } - } - - private themeCheck(): void{ - const select = this.element!.querySelector('.cg-select'); - const caret = this.element!.querySelector('.caret'); - const list = this.element!.querySelector('ul.list'); - const search = this.element!.querySelector('.inputSearch'); - - switch (this.theme) { - case 'classic': - console.log('sss'); - break; - case 'dark': - console.log('dark'); - break; - case 'white': - console.log('white'); - break; - - default: - break; - } - } - /** * @private * @param {boolean} nativeSelectMode parameter responsible for adding native select. diff --git a/src/components/theme/theme.json b/src/components/theme/theme.json deleted file mode 100644 index 01d7937..0000000 --- a/src/components/theme/theme.json +++ /dev/null @@ -1,11 +0,0 @@ -[ - { - "type": "classic" - }, - { - "type": "dark" - }, - { - "type": "white" - } -] \ No newline at end of file diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts new file mode 100644 index 0000000..6904a94 --- /dev/null +++ b/src/components/theme/theme.ts @@ -0,0 +1,40 @@ +export function changeTheme(element: Element, theme: string) { + const select = element!.querySelector('.cg-select'); + const caret = element!.querySelector('.caret'); + const list = element!.querySelector('ul.list'); + const search = element!.querySelector('.inputSearch'); + const path = element.querySelectorAll('.pathWhite'); + + switch (theme) { + case 'dark': + select!.classList.remove('classicSelect'); + select!.classList.add('selectDark'); + list!.classList.add('listDark'); + list!.classList.remove('classicList'); + path.forEach((elem) => { + elem.classList.remove('pathBlack'); + elem.classList.add('pathWhite'); + }); + break; + case 'white': + select!.classList.remove('classicSelect'); + select!.classList.add('selectWhite'); + caret!.classList.add('caretWhite'); + list!.classList.add('listWhite'); + list!.classList.remove('classicList'); + path.forEach((elem) => { + elem.classList.add('pathBlack'); + elem.classList.remove('pathWhite'); + }); + + if (search!) { + search!.classList.add('inputWhite'); + } + break; + + default: + select!.classList.add('classicSelect'); + list!.classList.add('classicList'); + break; + } +} diff --git a/src/components/utils/urils.interface.ts b/src/components/utils/urils.interface.ts index 08485c6..31ca536 100644 --- a/src/components/utils/urils.interface.ts +++ b/src/components/utils/urils.interface.ts @@ -55,5 +55,5 @@ export interface ISelectedItems { * An optional parameter that is responsible for enabling a light/dark theme by default, the dark theme is set. * @type {boolean} */ - darkTheme?: boolean; + theme?: string; } diff --git a/src/components/utils/utils.ts b/src/components/utils/utils.ts index e755681..b98cc95 100644 --- a/src/components/utils/utils.ts +++ b/src/components/utils/utils.ts @@ -77,6 +77,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty const caret = document.createElement('div'); select.classList.add('cg-select'); + select.classList.add('classicSelect'); selected.classList.add('selected'); caret.classList.add('caret'); @@ -103,7 +104,7 @@ export function createSelected(element: Element, content?: string, styles?: ISty * @param {ISelectedItems} dataSelectText the text that is rendered in the select. */ export function clearSelect(select: HTMLElement, element: Element, dataSelectText: ISelectedItems) { - const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText; + const { selectedItems, indexes, theme, multiselectTag } = dataSelectText; const options = element.querySelectorAll('.list__item'); const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption'); @@ -122,14 +123,19 @@ export function clearSelect(select: HTMLElement, element: Element, dataSelectTex return; } - if (darkTheme === true || !darkTheme) { - path1.classList.add('pathWhite'); - path2.classList.add('pathWhite'); - } - - if (darkTheme === false) { - path1.classList.add('pathBlack'); - path2.classList.add('pathBlack'); + switch (theme) { + case 'dark': + path1.classList.add('pathWhite'); + path2.classList.add('pathWhite'); + break; + case 'white': + path1.classList.add('pathBlack'); + path2.classList.add('pathBlack'); + break; + default: + path1.classList.add('pathWhite'); + path2.classList.add('pathWhite'); + break; } svgIcon.classList.add('svg-icon'); diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index 012d1e5..0e68c24 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -26,10 +26,9 @@ export interface ICgSelect { */ items?: IItems[] | string[] | any; /** - * An optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true). - * @type {boolean} + * An optional parameter responsible for switching between different themes, the classic theme is set by default. + * @type {string} */ - darkTheme?: boolean; theme?: string; /** * An optional parameter that adds a live search on the select elements. diff --git a/src/style/classicTheme.scss b/src/style/classicTheme.scss index 13dbb9f..1847acb 100644 --- a/src/style/classicTheme.scss +++ b/src/style/classicTheme.scss @@ -1,14 +1,22 @@ -.cg-select{ - color: #fff; - background: #2a2f3b; +.classicSelect { + color: #fff; + background: #2a2f3b; - &:hover { - background: #394050; - } + &:hover { + background: #394050; + } } -.list { - color: white; - background: #2a2f3b; - border: 1px #0a0b0e solid; -} \ No newline at end of file +.classicList { + color: white; + background: #2a2f3b; + border: 1px #0a0b0e solid; +} + +.pathWhite { + color: white !important; +} + +.pathBlack { + color: black; +} diff --git a/src/style/darkTheme.scss b/src/style/darkTheme.scss index bec07f8..f5c0f88 100644 --- a/src/style/darkTheme.scss +++ b/src/style/darkTheme.scss @@ -1,32 +1,17 @@ .selectDark { - background: rgb(29, 29, 29) !important; - } - -// .selectDark, -// .listDark, -// .inputWhite, -// .pathBlack, -// .selectWhite { -// color: black !important; -// } - - .caretWhite { - border-top: 6px solid black !important; - } - - .listWhite { - background-color: white !important; - } - - .inputWhite { - border-bottom: 1px solid black !important; - } - - .pathWhite { - color: white !important; - } - - .pathBlack { - color: black !important; - } - \ No newline at end of file + background: rgb(29, 29, 29); + color: white; +} + +.caretWhite { + border-top: 6px solid black !important; +} + +.listDark { + background: rgb(29, 29, 29); + color: white; +} + +.inputDark { + border-bottom: 1px solid black !important; +} diff --git a/src/style/whiteTheme.scss b/src/style/whiteTheme.scss index dc9bb30..552bc0a 100644 --- a/src/style/whiteTheme.scss +++ b/src/style/whiteTheme.scss @@ -1,5 +1,5 @@ .selectWhite { - background: rgb(248, 248, 248) !important; + background: rgb(248, 248, 248); } .selectWhite, @@ -7,25 +7,18 @@ .inputWhite, .pathBlack, .selectWhite { - color: black !important; + color: black; } .caretWhite { - border-top: 6px solid black !important; + border-top: 6px solid black; } .listWhite { - background-color: white !important; + background-color: white; } .inputWhite { border-bottom: 1px solid black !important; -} - -.pathWhite { - color: white !important; -} - -.pathBlack { color: black !important; }