From a25882f09e412efd17b510041d55b3b76c1d84b8 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Tue, 19 Mar 2024 01:59:19 -0400 Subject: [PATCH] feat!: remove deprecated options (#251) * chore: remove deprecated options --- packages/demo/src/options/options26.html | 45 ------------------- packages/demo/src/options/options26.ts | 29 +----------- .../src/MultipleSelectInstance.ts | 14 +----- .../multiple-select-vanilla/src/constants.ts | 1 - .../multipleSelectOption.interface.ts | 10 +---- .../src/utils/domUtils.ts | 20 +-------- playwright/e2e/options26.spec.ts | 32 +------------ 7 files changed, 8 insertions(+), 143 deletions(-) diff --git a/packages/demo/src/options/options26.html b/packages/demo/src/options/options26.html index 6cdc6751c..9ca8703d1 100644 --- a/packages/demo/src/options/options26.html +++ b/packages/demo/src/options/options26.html @@ -22,51 +22,6 @@

-
- - -
- -
-
- -
- - -
- -
-
-
diff --git a/packages/demo/src/options/options26.ts b/packages/demo/src/options/options26.ts index 7c4278a16..67b2c46c9 100644 --- a/packages/demo/src/options/options26.ts +++ b/packages/demo/src/options/options26.ts @@ -3,34 +3,9 @@ import { type MultipleSelectInstance, type OptGroupRowData, type OptionRowData, export default class Example { ms1?: MultipleSelectInstance; ms2?: MultipleSelectInstance; - ms3?: MultipleSelectInstance; mount() { - this.ms2 = multipleSelect('[data-test="select1"]', { - styler: (row: OptionRowData | OptGroupRowData) => { - if (+(row?.value ?? 0) === 1) { - return 'background-color: #ffee00; color: #ff0000;'; - } - if (+(row?.value ?? 0) === 6) { - return 'background-color: #000; color: #fff;'; - } - return null; - }, - }) as MultipleSelectInstance; - - this.ms2 = multipleSelect('[data-test="select2"]', { - styler: (row: OptionRowData | OptGroupRowData) => { - if (row?.type === 'optgroup') { - return 'color: #777; font-weight: normal;'; - } - if (+(row?.value ?? 0) === 1) { - return 'color: blue;'; - } - return null; - }, - }) as MultipleSelectInstance; - - this.ms2 = multipleSelect('[data-test="select3"]', { + this.ms1 = multipleSelect('[data-test="select3"]', { cssStyler: (row: OptionRowData | OptGroupRowData) => { if (+(row?.value ?? 0) === 2) { return { backgroundColor: '#6fbeff', color: '#0014ff', fontStyle: 'italic' } as CSSStyleDeclaration; @@ -59,9 +34,7 @@ export default class Example { // destroy ms instance(s) to avoid DOM leaks this.ms1?.destroy(); this.ms2?.destroy(); - this.ms3?.destroy(); this.ms1 = undefined; this.ms2 = undefined; - this.ms3 = undefined; } } diff --git a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts index b2cb71049..4eacbcbdf 100644 --- a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts +++ b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts @@ -10,7 +10,6 @@ import { calculateAvailableSpace, classNameToList, convertItemRowToHtml, - convertStringStyleToElementStyle, createDomElement, emptyElement, findParent, @@ -626,10 +625,6 @@ export class MultipleSelectInstance { }; const customStyleRules = this.options.cssStyler(dataRow); - const customStylerStr = String(this.options.styler(dataRow) || ''); // deprecated - if (customStylerStr) { - liBlock.props.style = convertStringStyleToElementStyle(customStylerStr); - } if (customStyleRules) { liBlock.props.style = customStyleRules; } @@ -713,10 +708,6 @@ export class MultipleSelectInstance { } const customStyleRules = this.options.cssStyler(dataRow); - const customStylerStr = String(this.options.styler(dataRow) || ''); // deprecated - if (customStylerStr) { - liBlock.props.style = convertStringStyleToElementStyle(customStylerStr); - } if (customStyleRules) { liBlock.props.style = customStyleRules; } @@ -1359,10 +1350,7 @@ export class MultipleSelectInstance { this.selectClearElm.style.display = displayState; } - if (this.options.displayTitle || this.options.addTitle) { - if (this.options.addTitle) { - console.warn('[Multiple-Select-Vanilla] Please note that the `addTitle` option was deprecated and replaced by `displayTitle`.'); - } + if (this.options.displayTitle) { const selectType = this.options.useSelectOptionLabel || this.options.useSelectOptionLabelToHtml ? 'value' : 'text'; spanElm.title = this.getSelects(selectType).join(this.options.displayDelimiter); } diff --git a/packages/multiple-select-vanilla/src/constants.ts b/packages/multiple-select-vanilla/src/constants.ts index a316d6661..b2f0b968f 100644 --- a/packages/multiple-select-vanilla/src/constants.ts +++ b/packages/multiple-select-vanilla/src/constants.ts @@ -60,7 +60,6 @@ const DEFAULTS: Partial = { virtualScroll: true, cssStyler: () => null, - styler: () => false, textTemplate: (elm: HTMLOptionElement) => elm.innerHTML.trim(), labelTemplate: (elm: HTMLOptionElement) => elm.label, diff --git a/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts b/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts index f598f507a..0bba9cc03 100644 --- a/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts +++ b/packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts @@ -19,9 +19,6 @@ export type CSSStyleDeclarationReadonly = export type CSSStyleDeclarationWritable = keyof Omit; export interface MultipleSelectOption extends MultipleSelectLocale { - /** @deprecated @alias `displayTitle` Add a title. By default this option is set to false. */ - addTitle?: boolean; - /** defaults to 10, when using "autoAdjustDropHeight" we might want to add a bottom (or top) padding instead of taking the entire available space */ adjustedHeightPadding: number; @@ -197,14 +194,11 @@ export interface MultipleSelectOption extends MultipleSelectLocale { // Methods // ------------ - /** Customize the filter method, for example we use startWith */ - customFilter(options: LabelFilter | TextFilter): boolean; - /** The item styler function, return style string to customize the item style such as background: red. The function take one parameter: value. */ cssStyler: (value: OptionRowData | OptGroupRowData) => CSSStyleDeclaration | null; - /** @deprecated @use `cssStyler`. The item styler function, return style string to customize the item style such as background: red. The function take one parameter: value. */ - styler: (value: OptionRowData | OptGroupRowData) => string | boolean | null; + /** Customize the filter method, for example we use startWith */ + customFilter(options: LabelFilter | TextFilter): boolean; /** Returns HTML label attribute of a DOM element */ labelTemplate: (elm: HTMLOptionElement) => string; diff --git a/packages/multiple-select-vanilla/src/utils/domUtils.ts b/packages/multiple-select-vanilla/src/utils/domUtils.ts index 16ab218e8..5f902ad25 100644 --- a/packages/multiple-select-vanilla/src/utils/domUtils.ts +++ b/packages/multiple-select-vanilla/src/utils/domUtils.ts @@ -1,5 +1,5 @@ -import type { CSSStyleDeclarationWritable, HtmlStruct, InferDOMType } from '../interfaces'; -import { objectRemoveEmptyProps, toCamelCase } from './utils'; +import type { HtmlStruct, InferDOMType } from '../interfaces'; +import { objectRemoveEmptyProps } from './utils'; export interface HtmlElementPosition { top: number; @@ -8,22 +8,6 @@ export interface HtmlElementPosition { right: number; } -export function convertStringStyleToElementStyle(styleStr: string): CSSStyleDeclaration { - const style = {} as CSSStyleDeclaration; - if (styleStr) { - const cstyles = styleStr.replace(/\s/g, '').split(';'); - for (const cstyle of cstyles) { - const [styleProp, styleVal] = cstyle.trim().split(':'); - if (styleProp) { - (style as any)[toCamelCase(styleProp) as CSSStyleDeclarationWritable] = styleVal.trim() as CSSStyleDeclarationWritable; - } - } - - console.warn('[multiple-select-vanilla] Please note that `styler` is deprecated, please migrate to `cssStyler` when possible.'); - } - return style; -} - /** calculate available space for each side of the DOM element */ export function calculateAvailableSpace(element: HTMLElement): { top: number; bottom: number; left: number; right: number } { let bottom = 0; diff --git a/playwright/e2e/options26.spec.ts b/playwright/e2e/options26.spec.ts index b845f5068..53d8bf51d 100644 --- a/playwright/e2e/options26.spec.ts +++ b/playwright/e2e/options26.spec.ts @@ -5,35 +5,7 @@ test.describe('Options 26 - The Styler / CSS Styler', () => { await page.goto('#/options26'); }); - test('1st select has January & June with custom styling', async ({ page }) => { - await page.locator('[data-test=select1].ms-parent').click(); - const optionLoc1 = await page.locator('[data-test=select1] .ms-drop ul li').nth(0); - optionLoc1.click(); - expect(optionLoc1).toHaveText('January'); - await expect(optionLoc1).toHaveCSS('color', 'rgb(255, 0, 0)'); - await expect(optionLoc1).toHaveCSS('background-color', 'rgb(255, 238, 0)'); - - const optionLoc5 = await page.locator('[data-test=select1] .ms-drop ul li').nth(5); - optionLoc5.click(); - expect(optionLoc5).toHaveText('June'); - await expect(optionLoc5).toHaveCSS('color', 'rgb(255, 255, 255)'); - await expect(optionLoc5).toHaveCSS('background-color', 'rgb(0, 0, 0)'); - const selectedText1 = page.locator('[data-test=select1] .ms-choice span', { hasText: 'January, June' }); - await selectedText1.waitFor(); - }); - - test('2nd select has January & June with custom styling', async ({ page }) => { - await page.locator('[data-test=select2].ms-parent').click(); - const optionLoc1 = await page.locator('[data-test=select2] .ms-drop ul li').nth(1); - optionLoc1.click(); - expect(optionLoc1).toHaveText('Option 1'); - await expect(optionLoc1).toHaveCSS('color', 'rgb(0, 0, 255)'); - await expect(optionLoc1).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)'); - const dropLoc2 = await page.locator('[data-test=select2] .ms-choice span', { hasText: '[Group 1: Option 1]' }); - await dropLoc2.waitFor(); - }); - - test('3rd select has February & April with custom CSS styler', async ({ page }) => { + test('1st select has February & April with custom CSS styler', async ({ page }) => { await page.locator('[data-test=select3].ms-parent').click(); const optionLoc2 = await page.locator('[data-test=select3] .ms-drop ul li').nth(1); optionLoc2.click(); @@ -50,7 +22,7 @@ test.describe('Options 26 - The Styler / CSS Styler', () => { await selectedText3.waitFor(); }); - test('4th select has January & June with custom styling', async ({ page }) => { + test('2nd select has January & June with custom styling', async ({ page }) => { await page.locator('[data-test=select4].ms-parent').click(); const optionLoc3 = await page.locator('[data-test=select4] .ms-drop ul li').nth(3); optionLoc3.click();