fix(slider): Slider imports (#222)

- Made slider value label optional
pancakeswap · Mar 16, 2021 · ed2d693 · ed2d693
1 parent 9bd6b01
commit ed2d693
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@pancakeswap-libs/eslint-config-pancake": "0.1.0",
     "@rollup/plugin-typescript": "^8.2.0",
+    "@rollup/plugin-url": "^6.0.0",
     "@storybook/addon-a11y": "^6.1.18",
     "@storybook/addon-actions": "^6.1.18",
     "@storybook/addon-essentials": "^6.1.18",

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,4 +1,5 @@
 import typescript from "@rollup/plugin-typescript";
+import url from "@rollup/plugin-url";
 import pkg from "./package.json";
 
 export default {
@@ -7,5 +8,5 @@ export default {
     { file: pkg.main, format: "cjs" },
     { file: pkg.module, format: "es" },
   ],
-  plugins: [typescript()],
+  plugins: [url(), typescript()],
 };
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -31,8 +31,7 @@ const Slider: React.FC<SliderProps> = ({ min, max, value, onValueChanged, valueL
           isCurrentValueMaxValue={isCurrentValueMaxValue}
         />
       </BunnySlider>
-
-      <SliderLabel progress={labelOffset}>{valueLabel}</SliderLabel>
+      {valueLabel && <SliderLabel progress={labelOffset}>{valueLabel}</SliderLabel>}
     </SliderContainer>
   );
 };

diff --git a/src/components/Slider/styles.ts b/src/components/Slider/styles.ts
@@ -1,12 +1,8 @@
 import { InputHTMLAttributes } from "react";
 import styled from "styled-components";
 import { Box } from "../Box";
-
-// Using require instead of import to avoid trouble with TS bunding and SVG types
-/* eslint-disable @typescript-eslint/no-var-requires */
-const bunnyHead = require("./svg/bunnyhead-main.svg");
-const bunnyHeadMax = require("./svg/bunnyhead-max.svg");
-/* eslint-enable @typescript-eslint/no-var-requires */
+import bunnyHeadMain from "./svg/bunnyhead-main.svg";
+import bunnyHeadMax from "./svg/bunnyhead-max.svg";
 
 export const SliderContainer = styled(Box)`
   position: relative;
@@ -44,7 +40,7 @@ export const StyledInput = styled.input<StyledInputProps>`
 
   ::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background-image: url(${({ isCurrentValueMaxValue }) => (isCurrentValueMaxValue ? bunnyHeadMax : bunnyHead)});
+    background-image: url(${({ isCurrentValueMaxValue }) => (isCurrentValueMaxValue ? bunnyHeadMax : bunnyHeadMain)});
     width: 24px;
     height: 32px;
     cursor: pointer;
@@ -57,7 +53,7 @@ export const StyledInput = styled.input<StyledInputProps>`
   }
   ::-moz-range-thumb {
     -webkit-appearance: none;
-    background-image: url(${({ isCurrentValueMaxValue }) => (isCurrentValueMaxValue ? bunnyHeadMax : bunnyHead)});
+    background-image: url(${({ isCurrentValueMaxValue }) => (isCurrentValueMaxValue ? bunnyHeadMax : bunnyHeadMain)});
     width: 24px;
     height: 32px;
     cursor: pointer;
@@ -73,7 +69,7 @@ export const StyledInput = styled.input<StyledInputProps>`
   }
   ::-ms-thumb {
     -webkit-appearance: none;
-    background-image: url(${({ isCurrentValueMaxValue }) => (isCurrentValueMaxValue ? bunnyHeadMax : bunnyHead)});
+    background-image: url(${({ isCurrentValueMaxValue }) => (isCurrentValueMaxValue ? bunnyHeadMax : bunnyHeadMain)});
     width: 24px;
     height: 32px;
     cursor: pointer;

diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts
@@ -5,5 +5,5 @@ export default interface SliderProps extends BoxProps {
   max: number;
   value: number;
   onValueChanged: (newValue: number) => void;
-  valueLabel: string;
+  valueLabel?: string;
 }
diff --git a/src/index.d.ts → src/types/index.d.ts b/src/index.d.ts → src/types/index.d.ts
diff --git a/yarn.lock b/yarn.lock
@@ -2307,6 +2307,15 @@
     "@rollup/pluginutils" "^3.1.0"
     resolve "^1.17.0"
 
+"@rollup/plugin-url@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-url/-/plugin-url-6.0.0.tgz#20fbc8cda9bc5f0c31d7225f633002ce73e920b0"
+  integrity sha512-UHGyoo3EbLufCZtXon/baNf75PAYT+Gs/NUgFMx2ZaDQ314PKNP0pJTrpbhDqFkZADzpkqJWyQOfJ2Nd6Qk4TA==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    make-dir "^3.1.0"
+    mime "^2.4.6"
+
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -10099,6 +10108,11 @@ mime@^2.4.4:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.0.tgz#2b4af934401779806ee98026bb42e8c1ae1876b1"
   integrity sha512-ft3WayFSFUVBuJj7BMLKAQcSlItKtfjsKDDsii3rqFDAZ7t11zRe8ASw/GlmivGwVUYtwkQrxiGGpL6gFvB0ag==
 
+mime@^2.4.6:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"