Skip to content

[UIK-5136][slider] rewrite component to TS#2918

Open
slizhevskyv-semrush wants to merge 5 commits into
release/v17from
UIK-5136/rewrite-component-to-ts
Open

[UIK-5136][slider] rewrite component to TS#2918
slizhevskyv-semrush wants to merge 5 commits into
release/v17from
UIK-5136/rewrite-component-to-ts

Conversation

@slizhevskyv-semrush
Copy link
Copy Markdown
Contributor

Changelog

@semcore/slider

Fixed

  • Rewrite component to TS. Deprecate atomic types. Atomic types are part of NSSlider namespace.

Motivation and Context

Rewrite component to TS. Deprecate atomic types in favor of namespaces. Nothing changed in how component works. (I hope :D)

How has this been tested?

Screenshots (if appropriate):

Types of changes

  • Bug fix (non-breaking change which fixes an issue).
  • New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to not work as expected).
  • Nice improve.

Checklist:

  • I have updated the documentation accordingly.
  • I have added new tests on added of fixed functionality.

Comment thread semcore/slider/src/Slider.tsx
@ilyabrower ilyabrower force-pushed the release/v17 branch 2 times, most recently from 036c37b to c160d60 Compare May 13, 2026 12:25
<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] I have updated the documentation accordingly.
- [ ] I have added new tests on added of fixed functionality.
const delayArr = this.asProps.animationsDisabled ? [0, 0] : propToArray(this.asProps.delay);
const delay = this.asProps.visible ? delayArr[0] : delayArr[1];
const duration = this.asProps.animationsDisabled ? 0 : this.asProps.duration + 100;
let { duration } = this.asProps;
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ilyabrower please take a look at this logic, hope it's correct.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about duration[1] - duration[0]. I think, if this is array, it works like delay - for show and hide.
So, you can do the same as for delay for the duration:

const durationArr = animationsDisabled ? [0, 0] : propToArray(this.asProps.duration);
const duration = visible ? durationArr[0] + 100 : durationArr[1] + 100;

Comment thread semcore/add-filter/src/AddFilter.tsx Outdated
defaultVisibleFilters: [],
};
defaultVisibleFilters: [] as AddFilterDefaultProps['defaultVisibleFilters'],
} as const;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

? maybe

static defaultProps: AddFilterDefaultProps = {
    i18n: localizedMessages,
    locale: 'en',
    defaultVisibleFilters: [],
  };

> {
static displayName = 'Animation';
static style = style;
static defaultProps = {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you think about set type here instead of as const ?
It's a really big object and maybe it will be easy to see the problem right here instead of in createComponent function....

const delayArr = this.asProps.animationsDisabled ? [0, 0] : propToArray(this.asProps.delay);
const delay = this.asProps.visible ? delayArr[0] : delayArr[1];
const duration = this.asProps.animationsDisabled ? 0 : this.asProps.duration + 100;
let { duration } = this.asProps;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about duration[1] - duration[0]. I think, if this is array, it works like delay - for show and hide.
So, you can do the same as for delay for the duration:

const durationArr = animationsDisabled ? [0, 0] : propToArray(this.asProps.duration);
const duration = visible ? durationArr[0] + 100 : durationArr[1] + 100;

// @ts-nocheck
import { createBaseComponent, sstyled } from '@semcore/core';
import { createBaseComponent, type Intergalactic } from '@semcore/core';
import { sstyled } from '@semcore/core';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all in one import, I think

@@ -1,4 +1,5 @@
import { createBaseComponent, sstyled } from '@semcore/core';
import { createBaseComponent, type Intergalactic } from '@semcore/core';
import { sstyled } from '@semcore/core';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the same

> {
static displayName = 'FeaturePopover';
static style = style;
static defaultProps = {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just type?

static defaultProps = {
defaultValue: null,
};
defaultValue: '',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's double check it

Comment thread semcore/slider/src/Slider.tsx Outdated
static style = style;

sliderRef = React.createRef(null);
sliderRef = React.createRef() as React.MutableRefObject<HTMLButtonElement | null>;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed as and handleRef and manually set ref in render...

Comment thread semcore/slider/src/Slider.tsx Outdated
if (value > max) value = max;
if (value < min) value = min;
if (max !== undefined && value > max) value = max;
if (min !== undefined && value < min) value = min;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed unnecessary checks

Comment thread semcore/slider/src/Slider.tsx Outdated
const result = index + min;

if (min !== undefined && index < min) return min;
if (max !== undefined && result > max) return max;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and here too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment