Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(slider): add option to hide slider value #494

Merged
merged 2 commits into from
Mar 31, 2021
Merged

feat(slider): add option to hide slider value #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3e0c28
feat(slider): hideValue prop added
Deep-Codes Mar 30, 2021
ec9c610
test(slider): test added for hideValue prop
Deep-Codes Mar 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions components/slider/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,57 @@ exports[`Slider should render correctly 1`] = `
top: 50%;
transform: translate(-50%, -50%);
height: 1.25rem;
min-width: 1.25rem;
line-height: 1.25rem;
border-radius: 0.625rem;
user-select: none;
font-weight: 700;
font-size: 0.75rem;
z-index: 100;
background-color: #0070f3;
color: #fff;
text-align: center;
padding: 0 calc(0.86 * 8pt);
}

.dot.disabled {
cursor: not-allowed !important;
background-color: #eaeaea;
color: #888;
}

.dot.click {
transition: all 200ms ease;
}

.dot:hover {
cursor: grab;
}

.dot:active {
cursor: grabbing;
}
</style></div><style>
.slider {
width: 100%;
height: 0.5rem;
border-radius: 50px;
background-color: #111;
position: relative;
cursor: pointer;
}
</style></div>"
`;

exports[`Slider should work with hideValue 1`] = `
"<div class=\\"slider \\"><div class=\\"dot \\"><style>
.dot {
position: absolute;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
height: 1.25rem;
min-width: 1.25rem;
line-height: 1.25rem;
border-radius: 0.625rem;
user-select: none;
Expand Down Expand Up @@ -57,6 +108,7 @@ exports[`Slider should work with markers 1`] = `
top: 50%;
transform: translate(-50%, -50%);
height: 1.25rem;
min-width: 1.25rem;
line-height: 1.25rem;
border-radius: 0.625rem;
user-select: none;
Expand Down Expand Up @@ -115,6 +167,7 @@ exports[`Slider should work with markers 2`] = `
top: 50%;
transform: translate(-50%, -50%);
height: 1.25rem;
min-width: 1.25rem;
line-height: 1.25rem;
border-radius: 0.625rem;
user-select: none;
Expand Down
4 changes: 4 additions & 0 deletions components/slider/__tests__/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,8 @@ describe('Slider', () => {
wrapper = mount(<Slider step={20} showMarkers />)
expect(wrapper.html()).toMatchSnapshot()
})
it('should work with hideValue', () => {
let wrapper = mount(<Slider initialValue={20} hideValue />)
expect(wrapper.html()).toMatchSnapshot()
})
})
1 change: 1 addition & 0 deletions components/slider/slider-dot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const SliderDot = React.forwardRef<
top: 50%;
transform: translate(-50%, -50%);
height: 1.25rem;
min-width: 1.25rem;
line-height: 1.25rem;
border-radius: 0.625rem;
user-select: none;
Expand Down
5 changes: 4 additions & 1 deletion components/slider/slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import SliderDot from './slider-dot'
import SliderMark from './slider-mark'

interface Props {
hideValue?: boolean
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following default values need to be added to the:

hideValue: false,

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright i would add default props here:

https://github.com/geist-org/react/blob/18d08f8accc70a66cc69140846598665b686f0df/components/slider/slider.tsx#L28

and in docs update the table for hideValue prop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a Commit should work

if not let me know more than happy to ammend

Also, have 2 more PRs to work on this Repo 💙

value?: number
initialValue?: number
step?: number
Expand All @@ -26,6 +27,7 @@ interface Props {
}

const defaultProps = {
hideValue: false,
initialValue: 0,
step: 1,
min: 0,
Expand Down Expand Up @@ -63,6 +65,7 @@ const getValue = (
}

const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
hideValue,
disabled,
step,
max,
Expand Down Expand Up @@ -151,7 +154,7 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
ref={sliderRef}
{...props}>
<SliderDot disabled={disabled} ref={dotRef} isClick={isClick} left={currentRatio}>
{value}
{hideValue || value}
</SliderDot>
{showMarkers && <SliderMark max={max} min={min} step={step} />}
<style jsx>{`
Expand Down
1 change: 1 addition & 0 deletions pages/en-us/components/slider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ Display the current value and an inputable range.
| **min** | the minimum value of slider | `number` | - | 0 |
| **disabled** | disable slider interaction | `boolean` | `false` |
| **showMarkers** | show each marker | `boolean` | - | `false` |
| **hideValue** | hide slider value | `boolean` | - | `false` |
| **onChange** | called when the value of silder changes | `(val: number) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |

Expand Down
1 change: 1 addition & 0 deletions pages/zh-cn/components/slider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export const meta = {
| **min** | 滑块可选的最小值 | `number` | - | 0 |
| **disabled** | 禁用所有操作 | `boolean` | `false` |
| **showMarkers** | 显示每一个标记 | `boolean` | - | `false` |
| **hideValue** | 是否隐藏滑块中的数字 | `boolean` | - | `false` |
| **onChange** | 当滑块的值改变时被调用 | `(val: number) => void` | - | - |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |

Expand Down