Skip to content
This repository was archived by the owner on Mar 16, 2024. It is now read-only.

Commit b1de6aa

Browse files
luangjokajluangjokaj
authored
Merge pull request #3 from cherry-design-system/feat/input-range
feat: input range component
2 parents 61e24e3 + f11e209 commit b1de6aa

File tree

15 files changed

+243
-15
lines changed

15 files changed

+243
-15
lines changed

‎@types/cherry.d.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ declare class Input extends React.Component<InputProps, any> {}
2626

2727
declare class ToggleInput extends React.Component<ToggleInputProps, any> {}
2828

29+
declare class RangeSlider extends React.Component<RangeSliderProps, any> {}
30+
2931
declare class Select extends React.Component<SelectProps, any> {}
3032

3133
declare class Textarea extends React.Component<TextareaProps, any> {}
@@ -177,6 +179,13 @@ interface ToggleInputProps
177179
theme?: object;
178180
}
179181

182+
interface RangeSliderProps
183+
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
184+
type?: "range";
185+
size?: "default" | "big";
186+
theme?: object;
187+
}
188+
180189
interface SelectProps
181190
extends Omit<React.InputHTMLAttributes<HTMLSelectElement>, "size"> {
182191
children?: React.ReactNode;
@@ -242,10 +251,11 @@ export {
242251
H4,
243252
H5,
244253
H6,
245-
Input,
246-
ToggleInput,
254+
RangeSlider,
247255
Select,
248256
Textarea,
257+
ToggleInput,
258+
Input,
249259
Label,
250260
MinHeight,
251261
Space,

‎dist/cherry.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/cherry.module.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cherry-components",
3-
"version": "0.0.2-1",
3+
"version": "0.0.2-2",
44
"description": "Cherry React Components",
55
"main": "dist/cherry.js",
66
"module": "dist/cherry.module.js",

‎src/Layout/Input/Input.styles.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
resetButtonStyles,
66
} from "../../helperStyles";
77
import { Breakpoints, mq } from "../../mq";
8+
import { rangeSliderStyles } from "./RangeSlider/RangeSlider.styles";
89

910
export const inputStyles = (
1011
theme,
@@ -98,6 +99,11 @@ export const inputStyles = (
9899
border-radius: 50%;
99100
`}
100101
102+
${type === "range" &&
103+
css`
104+
${rangeSliderStyles(theme, size, disabled)}
105+
`}
106+
101107
${disabled &&
102108
css`
103109
background: ${theme.colors.grayLight};

‎src/Layout/Input/RangeSlider/RangeSlider.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import { localTheme } from "../../../theme";
3+
import { Label } from "../../Label/Label";
4+
import { inputStyles } from "../Input.styles";
5+
6+
function RangeSlider({
7+
className,
8+
size = "default",
9+
theme = localTheme,
10+
...props
11+
}) {
12+
return (
13+
<input
14+
type="range"
15+
className={className}
16+
css={inputStyles(
17+
theme,
18+
"range",
19+
size,
20+
props.disabled,
21+
false,
22+
false,
23+
false,
24+
)}
25+
{...props}
26+
/>
27+
);
28+
}
29+
30+
export { RangeSlider };

‎src/Layout/Input/RangeSlider/RangeSlider.styles.js‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { css } from "@emotion/react";
2+
import { resetButtonStyles } from "../../../helperStyles";
3+
4+
export const rangeSliderStyles = (theme, size, disabled) => css`
5+
padding: 0;
6+
height: 10px;
7+
font-size: 0;
8+
box-shadow: none;
9+
border: none;
10+
11+
&::-webkit-slider-runnable-track {
12+
width: 100%;
13+
cursor: pointer;
14+
background: ${theme.colors.grayLight};
15+
border-radius: 25px;
16+
border: 2px solid ${theme.colors.grayLight};
17+
transition: all 0.3s ease;
18+
box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
19+
}
20+
21+
&::-webkit-slider-thumb {
22+
${resetButtonStyles}
23+
border: 0 solid transparent;
24+
border-radius: 50%;
25+
background: ${theme.colors.secondary};
26+
cursor: pointer;
27+
box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
28+
transition: all 0.3s ease;
29+
}
30+
31+
&::-moz-range-track {
32+
width: 100%;
33+
height: 6px;
34+
cursor: pointer;
35+
background: ${theme.colors.grayLight};
36+
border-radius: 25px;
37+
border: 2px solid ${theme.colors.grayLight};
38+
transition: all 0.3s ease;
39+
box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
40+
}
41+
42+
&::-moz-range-thumb {
43+
border: 0 solid transparent;
44+
height: 22px;
45+
width: 22px;
46+
border-radius: 50%;
47+
background: ${theme.colors.secondary};
48+
cursor: pointer;
49+
box-shadow: 0 0 0 0 ${theme.colors.secondaryLight};
50+
transition: all 0.3s ease;
51+
}
52+
53+
@media (hover: hover) {
54+
&:hover:not([disabled]) {
55+
&::-webkit-slider-runnable-track {
56+
border-color: ${theme.colors.secondary};
57+
}
58+
59+
&::-moz-range-track {
60+
border-color: ${theme.colors.secondary};
61+
}
62+
}
63+
}
64+
65+
&:focus:not([disabled]) {
66+
box-shadow: none;
67+
68+
&::-webkit-slider-runnable-track {
69+
border-color: ${theme.colors.secondary};
70+
background: ${theme.colors.grayLight};
71+
box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
72+
}
73+
74+
&::-webkit-slider-thumb {
75+
border-color: ${theme.colors.grayLight};
76+
box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
77+
outline: none;
78+
}
79+
80+
&::-moz-range-track {
81+
border-color: ${theme.colors.secondary};
82+
box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
83+
}
84+
85+
&::-moz-range-thumb {
86+
border-color: ${theme.colors.grayLight};
87+
box-shadow: 0 0 0 4px ${theme.colors.secondaryLight};
88+
outline: none;
89+
}
90+
}
91+
92+
&:active:not([disabled]) {
93+
box-shadow: none;
94+
95+
&::-webkit-slider-runnable-track {
96+
box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
97+
}
98+
99+
&::-webkit-slider-thumb {
100+
box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
101+
}
102+
103+
&::-moz-range-track {
104+
box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
105+
}
106+
107+
&::-moz-range-thumb {
108+
box-shadow: 0 0 0 2px ${theme.colors.secondaryLight};
109+
}
110+
}
111+
112+
${size === "big"
113+
? css`
114+
min-width: 200px;
115+
116+
&::-webkit-slider-runnable-track {
117+
height: 14px;
118+
}
119+
120+
&::-webkit-slider-thumb {
121+
width: 32px;
122+
height: 32px;
123+
margin-top: -11px;
124+
}
125+
126+
&::-moz-range-track {
127+
height: 10px;
128+
}
129+
130+
&::-moz-range-thumb {
131+
width: 32px;
132+
height: 32px;
133+
}
134+
`
135+
: css`
136+
min-width: 130px;
137+
138+
&::-webkit-slider-runnable-track {
139+
height: 10px;
140+
}
141+
142+
&::-webkit-slider-thumb {
143+
height: 22px;
144+
width: 22px;
145+
margin-top: -8px;
146+
}
147+
148+
&::-moz-range-track {
149+
height: 6px;
150+
}
151+
152+
&::-moz-range-thumb {
153+
width: 22px;
154+
height: 22px;
155+
}
156+
`}
157+
158+
${disabled &&
159+
css`
160+
&::-webkit-slider-runnable-track {
161+
cursor: not-allowed;
162+
}
163+
164+
&::-webkit-slider-thumb {
165+
background: ${theme.colors.gray};
166+
cursor: not-allowed;
167+
}
168+
169+
&::-moz-range-track {
170+
cursor: not-allowed;
171+
}
172+
173+
&::-moz-range-thumb {
174+
background: ${theme.colors.gray};
175+
cursor: not-allowed;
176+
}
177+
`}
178+
`;

‎src/Layout/Input/RangeSlider/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { RangeSlider } from "./RangeSlider";

‎src/Layout/Input/ToggleInput.js‎ renamed to ‎src/Layout/Input/ToggleInput/ToggleInput.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { localTheme } from "../../theme";
3-
import { Label } from "../Label";
4-
import { radioCheckWrapperStyles } from "./Input.styles";
2+
import { localTheme } from "../../../theme";
3+
import { Label } from "../../Label";
4+
import { radioCheckWrapperStyles } from "../Input.styles";
55
import { toggleInputStyles } from "./ToggleInput.styles";
66

77
function ToggleInput({

0 commit comments

Comments
 (0)