Make slider id generative

Joystream · Aug 8, 2023 · a0a1031 · a0a1031
1 parent d37c5a0
commit a0a1031
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx b/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx
@@ -96,11 +96,7 @@ export const SetupTokenStep = ({ setPrimaryButtonProps, onSubmit, form }: SetupT
         description="Define the share of your channel revenue that goes to yourself vs shared with your token holders.
 Recommended values — Channel: 80%, Holders:20%. "
       >
-        <Controller
-          name="revenueShare"
-          control={control}
-          render={({ field }) => <RatioSlider id="revenueShare" {...field} />}
-        />
+        <Controller name="revenueShare" control={control} render={({ field }) => <RatioSlider {...field} />} />
       </FormField>
       <FormField
         label="Annual creator reward"
@@ -112,11 +108,7 @@ Recommended values — Channel: 80%, Holders:20%. "
         }}
         description="Define your own reward for managing the tokens. 10% means that if you have 10000k of tokens exist and this amount does not change, an additional 1k tokens will get minted and added to your wallet gradually over the course of 1 year."
       >
-        <Controller
-          name="creatorReward"
-          control={control}
-          render={({ field }) => <RatioSlider id="creatorReward" {...field} />}
-        />
+        <Controller name="creatorReward" control={control} render={({ field }) => <RatioSlider {...field} />} />
       </FormField>
     </CrtFormWrapper>
   )

diff --git a/packages/atlas/src/components/_inputs/Slider/RatioSlider.tsx b/packages/atlas/src/components/_inputs/Slider/RatioSlider.tsx
@@ -1,6 +1,7 @@
 import { ChangeEventHandler, forwardRef, useMemo, useState } from 'react'
 
 import { sizes } from '@/styles'
+import { createId } from '@/utils/createId'
 
 import { Range, Track, Wrapper } from './RatioSlider.styles'
 
@@ -15,7 +16,7 @@ type RatioSliderProps = {
 }
 
 export const RatioSlider = forwardRef<HTMLInputElement, RatioSliderProps>(
-  ({ min = 0, max = 100, step = 10, defaultValue = 50, value: controlledValue, onChange, id = '' }, ref) => {
+  ({ min = 0, max = 100, step = 10, defaultValue = 50, value: controlledValue, onChange, id }, ref) => {
     const [internalValue, setInternalValue] = useState<number>(defaultValue)
     const value = controlledValue ?? internalValue
 
@@ -37,14 +38,16 @@ export const RatioSlider = forwardRef<HTMLInputElement, RatioSliderProps>(
       )
     }, [step, length])
 
+    const internalId = useMemo(() => id ?? createId(), [id])
+
     return (
       <Wrapper>
         <Range ref={ref} type="range" min={min} max={max} step={step} value={value} onChange={handleChange} />
 
         <Track xmlns="http://www.w3.org/2000/svg">
           <circle className="knob" cx={valuePercent} cy={sizes(3)} r={sizes(2)} />
 
-          <mask id={`cutout-mask-${id}`}>
+          <mask id={`cutout-mask-${internalId}`}>
             <rect x="-5%" y="0%" width="110%" height="100%" fill="#fff" />
             <circle className="cutout-mask" cx={valuePercent} cy={sizes(3)} r={sizes(3)} />
           </mask>