From fd8fc093d0c1db9a11dff39279c903a8ab56668d Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Tue, 14 Feb 2023 20:19:57 +0300 Subject: [PATCH] Added custom theme --- example/example.scss | 4 ++ example/index.js | 8 ++-- example/themeTest.ts | 9 ++++ src/cg-select.ts | 3 +- src/components/theme/theme.interface.ts | 12 +++++ src/components/theme/theme.ts | 59 ++++++++++++++----------- src/components/utils/utils.interface.ts | 3 +- src/interfaces/cg-select.interface.ts | 3 +- 8 files changed, 69 insertions(+), 32 deletions(-) create mode 100644 example/themeTest.ts create mode 100644 src/components/theme/theme.interface.ts diff --git a/example/example.scss b/example/example.scss index b1bd873..8255b19 100644 --- a/example/example.scss +++ b/example/example.scss @@ -5,6 +5,10 @@ font-family: Arial, Helvetica, sans-serif; } +.testClassRed { + background-color: #ff8282; +} + .body-example { background: #000000c4; } diff --git a/example/index.js b/example/index.js index c4a86d0..f178a7d 100644 --- a/example/index.js +++ b/example/index.js @@ -1,5 +1,6 @@ import { CGSelect } from '../src/cg-select'; import './example'; +import { newCustomTheme } from './themeTest'; // ------------------------------Обычный селект-------------------- const dropdown = new CGSelect({ @@ -25,11 +26,12 @@ const dropdown = new CGSelect({ width: '824px', }, }, + theme: newCustomTheme, }); -dropdown.on('clear', function (e) { - console.log(`this state: ${e}`); -}); +// dropdown.on('clear', function (e) { +// console.log(`this state: ${e}`); +// }); // ------------------------------NativeSelect----------------------- const dropdownNativeSelect = new CGSelect({ diff --git a/example/themeTest.ts b/example/themeTest.ts new file mode 100644 index 0000000..b5b0487 --- /dev/null +++ b/example/themeTest.ts @@ -0,0 +1,9 @@ +import { CustomTheme } from 'components/theme/theme.interface'; + +export const newCustomTheme: CustomTheme = { + name: 'test', + styles: { + head: 'testClassRed', + list: 'testClassRed', + }, +}; diff --git a/src/cg-select.ts b/src/cg-select.ts index d760654..02a09fc 100644 --- a/src/cg-select.ts +++ b/src/cg-select.ts @@ -25,6 +25,7 @@ import { ILanguage } from './interfaces/language.interface'; import './main.scss'; import { changeTheme } from './components/theme/theme'; +import { CustomTheme } from 'components/theme/theme.interface'; /** * @class Class Description ICgSelect @@ -36,7 +37,7 @@ export class CGSelect implements ICgSelect { selected?: string; placeholder?: string; items?: IItems[] | string[] | any; - theme?: string; + theme?: string | CustomTheme; searchMode?: boolean; closeOnSelect?: boolean; nativeSelectMode?: boolean; diff --git a/src/components/theme/theme.interface.ts b/src/components/theme/theme.interface.ts new file mode 100644 index 0000000..af4420d --- /dev/null +++ b/src/components/theme/theme.interface.ts @@ -0,0 +1,12 @@ +export interface CustomTheme { + name: string; + styles: { + head?: string; + list?: string; + placeholder?: string; + caret?: string; + search?: string; + chips?: string; + lable?: string; + }; +} diff --git a/src/components/theme/theme.ts b/src/components/theme/theme.ts index cf2e58b..571c70d 100644 --- a/src/components/theme/theme.ts +++ b/src/components/theme/theme.ts @@ -1,4 +1,6 @@ -export function changeTheme(element: Element, theme: string) { +import { CustomTheme } from './theme.interface'; + +export function changeTheme(element: Element, theme: string | CustomTheme) { const select = element!.querySelector('.cg-select'); const caret = element!.querySelector('.caret'); const list = element!.querySelector('ul.list'); @@ -13,32 +15,37 @@ export function changeTheme(element: Element, theme: string) { elem.classList.remove('pathWhite'); }); - switch (theme.toLowerCase()) { - case 'dark': - select!.classList.add('selectDark'); - list!.classList.add('listDark'); - nativeSelect?.classList.add('listDark'); - path.forEach((elem) => { - elem.classList.add('pathWhite'); - }); - break; - case 'white': - select!.classList.add('selectWhite'); - caret!.classList.add('caretWhite'); - list!.classList.add('listWhite'); - nativeSelect?.classList.add('listWhite'); - path.forEach((elem) => { - elem.classList.add('pathBlack'); - }); + if (typeof theme === 'string') { + switch (theme) { + case 'dark': + select!.classList.add('selectDark'); + list!.classList.add('listDark'); + nativeSelect?.classList.add('listDark'); + path.forEach((elem) => { + elem.classList.add('pathWhite'); + }); + break; + case 'white': + select!.classList.add('selectWhite'); + caret!.classList.add('caretWhite'); + list!.classList.add('listWhite'); + nativeSelect?.classList.add('listWhite'); + path.forEach((elem) => { + elem.classList.add('pathBlack'); + }); - if (search!) { - search!.classList.add('inputWhite'); - } - break; + if (search!) { + search!.classList.add('inputWhite'); + } + break; - default: - select!.classList.add('classicSelect'); - list!.classList.add('classicList'); - break; + default: + select!.classList.add('classicSelect'); + list!.classList.add('classicList'); + break; + } + } else { + select!.classList.add(`${theme.styles.head}`); + list!.classList.add(`${theme.styles.list}`); } } diff --git a/src/components/utils/utils.interface.ts b/src/components/utils/utils.interface.ts index 31ca536..d139979 100644 --- a/src/components/utils/utils.interface.ts +++ b/src/components/utils/utils.interface.ts @@ -1,3 +1,4 @@ +import { CustomTheme } from 'components/theme/theme.interface'; import { IItems } from 'interfaces/items.interface'; /** @@ -55,5 +56,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} */ - theme?: string; + theme?: string | CustomTheme; } diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts index 403b1a6..39a0f07 100644 --- a/src/interfaces/cg-select.interface.ts +++ b/src/interfaces/cg-select.interface.ts @@ -1,3 +1,4 @@ +import { CustomTheme } from 'components/theme/theme.interface'; import { IItems } from './items.interface'; /** @@ -29,7 +30,7 @@ export interface ICgSelect { * An optional parameter responsible for switching between different themes, the classic theme is set by default. * @type {string} values: dark, white */ - theme?: string; + theme?: string | CustomTheme; /** * An optional parameter that adds a live search on the select elements. * @type {boolean}