Browse Source

Update vertical slider effects

Ensure vertical styles are reverted when slider unmounts.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
d00424d0a5
1 changed files with 14 additions and 6 deletions
  1. +14
    -6
      packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx

+ 14
- 6
packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx View File

@@ -137,19 +137,27 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
}

const {current: slider} = ref;
const parent = slider?.parentElement as HTMLElement;
const grandParent = parent?.parentElement as HTMLElement;

const isNotFirefox = browser !== 'firefox';
if (isNotFirefox && orient === 'vertical' && slider) {
const parent = slider.parentElement as HTMLElement;
const grandParent = parent.parentElement as HTMLElement;
const trueHeight = slider!.parentElement!.clientWidth;
const trueWidth = slider!.parentElement!.clientHeight;
const shouldEffectExecute = isNotFirefox && orient === 'vertical' && slider && parent && grandParent;
if (shouldEffectExecute) {
const trueHeight = parent.clientWidth;
const trueWidth = parent.clientHeight;

grandParent.dataset.height = grandParent.clientHeight.toString();
grandParent.dataset.width = grandParent.clientWidth.toString();
grandParent.style.height = trueHeight + 'px';
grandParent.style.width = trueWidth + 'px';
}

return () => {
if (slider && isNotFirefox) {
if (shouldEffectExecute) {
grandParent.style.height = grandParent.dataset.height + 'px';
grandParent.style.width = grandParent.dataset.width + 'px';
grandParent.removeAttribute('data-height');
grandParent.removeAttribute('data-width');
}
};
}, [ref, orient, browser]);


Loading…
Cancel
Save