Merge branch 'develop' into refactoring/refactoring-context-menu
This commit is contained in:
commit
3b9a099996
@ -10,6 +10,7 @@ import Box from "../../box";
|
||||
import ContextMenuButton from "../../context-menu-button";
|
||||
import IconButton from "../../icon-button";
|
||||
|
||||
import Slider from "../../slider";
|
||||
import {
|
||||
isDesktop,
|
||||
//isTablet,
|
||||
@ -27,7 +28,6 @@ import {
|
||||
StyledAvatarEditorBody,
|
||||
StyledAvatarContainer,
|
||||
DropZoneContainer,
|
||||
Slider,
|
||||
StyledErrorContainer,
|
||||
} from "./styled-avatar-editor-body";
|
||||
|
||||
@ -458,11 +458,11 @@ class AvatarEditorBody extends React.Component {
|
||||
id="scale"
|
||||
type="range"
|
||||
className="custom-range"
|
||||
onChange={this.handleScale}
|
||||
min={this.state.allowZoomOut ? "0.1" : min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={this.state.scale}
|
||||
onChange={this.handleScale}
|
||||
/>
|
||||
<IconButton
|
||||
size="16"
|
||||
|
@ -15,142 +15,6 @@ const StyledErrorContainer = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Slider = styled.input.attrs({
|
||||
type: "range",
|
||||
})`
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.width};
|
||||
margin: ${(props) => props.theme.avatarEditorBody.slider.margin};
|
||||
background-color: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.backgroundColor};
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.background};
|
||||
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};
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.runnableTrack.focusBackground};
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeTrack.background};
|
||||
border: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeTrack.background};
|
||||
border-radius: ${(props) =>
|
||||
props.theme.avatarEditorBody.slider.rangeTrack.borderRadius};
|
||||
width: ${(props) => props.theme.avatarEditorBody.slider.rangeTrack.width};
|
||||
height: ${(props) => props.theme.avatarEditorBody.slider.rangeTrack.height};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-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};
|
||||
}
|
||||
`;
|
||||
Slider.defaultProps = { theme: Base };
|
||||
|
||||
const DropZoneContainer = styled.div`
|
||||
outline: none;
|
||||
|
||||
@ -333,6 +197,5 @@ export {
|
||||
StyledAvatarEditorBody,
|
||||
StyledAvatarContainer,
|
||||
DropZoneContainer,
|
||||
Slider,
|
||||
StyledErrorContainer,
|
||||
};
|
||||
|
60
packages/asc-web-components/slider/index.js
Normal file
60
packages/asc-web-components/slider/index.js
Normal file
@ -0,0 +1,60 @@
|
||||
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,
|
||||
style,
|
||||
}) => {
|
||||
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
|
||||
style={style}
|
||||
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 };
|
@ -975,7 +975,7 @@ const Base = {
|
||||
|
||||
slider: {
|
||||
width: "100%",
|
||||
margin: "8px 0",
|
||||
margin: "24px 0",
|
||||
backgroundColor: "transparent",
|
||||
|
||||
runnableTrack: {
|
||||
|
Loading…
Reference in New Issue
Block a user