From b7d39a6cfe6a5ff985e33fa779f9893ac2ec8153 Mon Sep 17 00:00:00 2001
From: Esen Dzhailobaev <s7b5en@gmail.com>
Date: Tue, 15 Mar 2022 21:20:41 +0600
Subject: [PATCH] feat: range slider CU-2e09ymt (#219)

---
 src/components/range-slider/index.ts          |  2 +
 .../range-slider/range-slider.stories.tsx     | 55 ++++++++++++++
 src/components/range-slider/range-slider.tsx  | 73 +++++++++++++++++++
 src/components/slider/slider.stories.tsx      |  1 +
 src/index.ts                                  |  3 +
 5 files changed, 134 insertions(+)
 create mode 100644 src/components/range-slider/index.ts
 create mode 100644 src/components/range-slider/range-slider.stories.tsx
 create mode 100644 src/components/range-slider/range-slider.tsx

diff --git a/src/components/range-slider/index.ts b/src/components/range-slider/index.ts
new file mode 100644
index 000000000..a4431a781
--- /dev/null
+++ b/src/components/range-slider/index.ts
@@ -0,0 +1,2 @@
+export { default } from './range-slider';
+export type { Props as RangeSliderProps } from './range-slider';
diff --git a/src/components/range-slider/range-slider.stories.tsx b/src/components/range-slider/range-slider.stories.tsx
new file mode 100644
index 000000000..975e4fc87
--- /dev/null
+++ b/src/components/range-slider/range-slider.stories.tsx
@@ -0,0 +1,55 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { Box } from 'rebass';
+import RangeSlider, { Props } from './range-slider';
+import Value from '../typography/value';
+import Divider from '../divider';
+import Labeling from '../typography/labeling';
+
+export default {
+  title: 'Quartz/RangeSlider',
+  component: RangeSlider,
+} as Meta;
+
+export const DefaultSlider: Story<Pick<Props, 'label' | 'step' | 'range'>> = (
+  props,
+) => {
+  const [value, setValue] = useState([2, 4]);
+
+  return (
+    <Box width="700px">
+      <RangeSlider value={value} onChange={setValue} {...props} />
+      <Divider />
+      <Labeling>Current value:</Labeling>
+      <Value>[{value.join(', ')}]</Value>
+    </Box>
+  );
+};
+
+DefaultSlider.args = {
+  label: 'CPU cores',
+  step: 1,
+  range: [0, 10],
+};
+
+export const WithCustomDisplayValue: Story<
+  Pick<Props, 'label' | 'step' | 'range' | 'formatDisplayValue'>
+> = (props) => {
+  const [value, setValue] = useState([128, 256]);
+
+  return (
+    <Box width="700px">
+      <RangeSlider value={value} onChange={setValue} {...props} />
+      <Divider />
+      <Labeling>Current value:</Labeling>
+      <Value>[{value.join(', ')}]</Value>
+    </Box>
+  );
+};
+
+WithCustomDisplayValue.args = {
+  label: 'RAM',
+  step: 128,
+  range: [0, 1024],
+  formatDisplayValue: (value) => `${value} MB`,
+};
diff --git a/src/components/range-slider/range-slider.tsx b/src/components/range-slider/range-slider.tsx
new file mode 100644
index 000000000..dc837c62d
--- /dev/null
+++ b/src/components/range-slider/range-slider.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Range as RCRangeSlider } from 'rc-slider';
+import { FlexProps, Flex } from 'rebass';
+import { useTheme } from 'emotion-theming';
+import { ITheme } from '../../theme/types';
+import Labeling from '../typography/labeling';
+import Value from '../typography/value';
+
+export interface Props extends Omit<FlexProps, 'value' | 'css' | 'onChange'> {
+  label: string;
+  value: number[];
+  range: number[];
+  step: number;
+  disabled?: boolean;
+  onChange: (value: number[]) => void;
+  formatDisplayValue?: (value: number) => string;
+}
+
+const RangeSlider = ({
+  label,
+  defaultValue,
+  value,
+  onChange,
+  range,
+  step,
+  disabled,
+  formatDisplayValue = (displayValue) => displayValue.toString(),
+  ...flexProps
+}: Props) => {
+  const theme = useTheme<ITheme>();
+
+  return (
+    <Flex flexDirection="column" {...flexProps}>
+      <Flex alignItems="center" mb="10px">
+        <Labeling bold mr="8px">
+          {label}
+        </Labeling>
+        <Flex
+          backgroundColor="primaryShade2"
+          px="4px"
+          py="2px"
+          sx={{ borderRadius: '2px' }}
+        >
+          <Value color="primary">{value.map(formatDisplayValue).join('-')}</Value>
+        </Flex>
+      </Flex>
+      <RCRangeSlider
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        min={range[0]}
+        max={range[1]}
+        step={step}
+        railStyle={{
+          backgroundColor: theme.colors.grayShade2,
+        }}
+        trackStyle={[
+          {
+            backgroundColor: theme.colors.primary,
+          },
+        ]}
+        handleStyle={[
+          {
+            borderColor: theme.colors.primary,
+            boxShadow: `0 0 5px ${theme.colors.primary}`,
+          },
+        ]}
+      />
+    </Flex>
+  );
+};
+
+export default RangeSlider;
diff --git a/src/components/slider/slider.stories.tsx b/src/components/slider/slider.stories.tsx
index a2ace0d5a..7e7d39a54 100644
--- a/src/components/slider/slider.stories.tsx
+++ b/src/components/slider/slider.stories.tsx
@@ -44,3 +44,4 @@ WithCustomDisplayValue.args = {
   range: [0, 1024],
   formatDisplayValue: (value) => `${value} MB`,
 };
+
diff --git a/src/index.ts b/src/index.ts
index 3267eb6e0..29e88d653 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -54,6 +54,7 @@ import { SymbolMode } from './components/symbol/types';
 import Collapse from './components/collapse';
 import PerformanceCard from './components/performance-card';
 import Slider from './components/slider';
+import RangeSlider from './components/range-slider';
 import ExpandViewer from './components/expand-viewer';
 
 // Popups
@@ -186,6 +187,7 @@ export {
   Divider,
   PerformanceCard,
   Slider,
+  RangeSlider,
   ExpandViewer,
   // Popups
   usePopup,
@@ -261,6 +263,7 @@ export type ITheme = import('./theme/types').ITheme;
 export type TooltipProps = import('./components/tooltip').TooltipProps;
 export type BadgeProps = import('./components/badges').BadgeProps;
 export type SliderProps = import('./components/slider').SliderProps;
+export type RangeSliderProps = import('./components/range-slider').RangeSliderProps;
 export type EditableSelectProps =
   import('./components/editableSelect').EditableSelectProps;
 export type Select2Props = import('./components/select2').SelectProps;