Web: Components: create slider component
This commit is contained in:
parent
250eeaaa60
commit
7bfcc8b249
58
packages/asc-web-components/slider/index.js
Normal file
58
packages/asc-web-components/slider/index.js
Normal file
@ -0,0 +1,58 @@
|
||||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { StyledSlider } from "./styled-slider";
|
||||
|
||||
const Slider = ({
|
||||
id,
|
||||
type,
|
||||
className,
|
||||
onChange,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
value,
|
||||
withPouring,
|
||||
}) => {
|
||||
const [size, setSize] = useState("0%");
|
||||
|
||||
const handleChange = (e) => {
|
||||
let target = e.target;
|
||||
|
||||
const max = target.max;
|
||||
const min = target.min;
|
||||
const val = target.value;
|
||||
|
||||
setSize(((val - min) * 100) / (max - min) + "%");
|
||||
onChange && onChange(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledSlider
|
||||
id={id}
|
||||
type={type}
|
||||
className={className}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
size={value && withPouring ? size : "0%"}
|
||||
withPouring={withPouring}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Slider.propTypes = {
|
||||
id: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
value: PropTypes.number,
|
||||
withPouring: PropTypes.bool,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
};
|
||||
|
||||
export default Slider;
|
33
packages/asc-web-components/slider/slider.stories.js
Normal file
33
packages/asc-web-components/slider/slider.stories.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React, { useState } from "react";
|
||||
import Slider from ".";
|
||||
|
||||
export default {
|
||||
title: "Components/Slider",
|
||||
component: Slider,
|
||||
parameters: {
|
||||
docs: { description: { component: "Components/Slider" } },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = ({ ...args }) => {
|
||||
const [value, setValue] = useState(0);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const target = e.target;
|
||||
setValue(target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ width: "400px", height: "50px" }}>
|
||||
<Slider {...args} value={value} onChange={handleChange} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
min: 0,
|
||||
max: 5,
|
||||
step: 0.1,
|
||||
withPouring: false,
|
||||
};
|
23
packages/asc-web-components/slider/slider.test.js
Normal file
23
packages/asc-web-components/slider/slider.test.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
import { mount } from "enzyme";
|
||||
import Slider from ".";
|
||||
|
||||
describe("<Textarea />", () => {
|
||||
it("renders without error", () => {
|
||||
const wrapper = mount(<Slider />);
|
||||
|
||||
expect(wrapper).toExist();
|
||||
});
|
||||
|
||||
it("accepts id", () => {
|
||||
const wrapper = mount(<Slider id="testId" />);
|
||||
|
||||
expect(wrapper.prop("id")).toEqual("testId");
|
||||
});
|
||||
|
||||
it("accepts className", () => {
|
||||
const wrapper = mount(<Slider className="test" />);
|
||||
|
||||
expect(wrapper.prop("className")).toEqual("test");
|
||||
});
|
||||
});
|
134
packages/asc-web-components/slider/styled-slider.js
Normal file
134
packages/asc-web-components/slider/styled-slider.js
Normal file
@ -0,0 +1,134 @@
|
||||
import styled from "styled-components";
|
||||
import { Base } from "../themes";
|
||||
|
||||
const StyledSlider = styled.input.attrs({
|
||||
type: "range",
|
||||
})`
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.width};
|
||||
margin: ${(props) => props.theme.avatarEditorBody.slider.margin};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.focusBackground};
|
||||
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.borderRadius};
|
||||
|
||||
-webkit-appearance: none;
|
||||
|
||||
background-image: ${(props) =>
|
||||
props.withPouring && `linear-gradient(#2da7db, #2da7db)`};
|
||||
background-size: ${(props) => `${props.size} 100%`};
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
border: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.borderRadius};
|
||||
width: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.width};
|
||||
height: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.height};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
margin-top: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.marginTop};
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.sliderThumb.width};
|
||||
height: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.height};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.background};
|
||||
border: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.height};
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-webkit-box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.boxShadow};
|
||||
box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.sliderThumb.boxShadow};
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.height};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.borderRadius};
|
||||
cursor: pointer;
|
||||
-moz-box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.boxShadow};
|
||||
box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeThumb.boxShadow};
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.track.background};
|
||||
border-color: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.track.borderColor};
|
||||
border-width: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.track.borderWidth};
|
||||
color: ${(props) => props.theme.avatarEditorBody.slider.track.color};
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.track.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.track.height};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillLower.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.fillLower.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillLower.borderRadius};
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillUpper.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.fillUpper.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillUpper.borderRadius};
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.thumb.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.thumb.height};
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.background};
|
||||
border: ${(props) => props.theme.avatarEditorBody.slider.thumb.border};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.borderRadius};
|
||||
cursor: pointer;
|
||||
margin-top: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.marginTop};
|
||||
/*Needed to keep the Edge thumb centred*/
|
||||
box-shadow: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.thumb.boxShadow};
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillLower.focusBackground};
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-upper {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.fillUpper.focusBackground};
|
||||
}
|
||||
`;
|
||||
StyledSlider.defaultProps = { theme: Base };
|
||||
|
||||
const StyledRangeSlider = styled.div`
|
||||
background: red;
|
||||
`;
|
||||
|
||||
export { StyledSlider, StyledRangeSlider };
|
Loading…
Reference in New Issue
Block a user