@mrshmllw/smores-react 13.3.3 → 13.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { theme } from '../theme';
|
|
4
3
|
import { margin } from '../utils/space';
|
|
5
4
|
export const SliderInput = forwardRef(function SliderInput({ value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest }, ref) {
|
|
6
5
|
return (React.createElement(StyledSlider, { ref: ref, type: "range", min: min, max: max, step: step, value: value, onChange: (event) => {
|
|
@@ -16,7 +15,7 @@ const StyledSlider = styled.input `
|
|
|
16
15
|
//guard rail as we have a hard coded limit on progress bar length
|
|
17
16
|
max-width: 2000px;
|
|
18
17
|
transition: box-shadow 0.2s ease-in-out;
|
|
19
|
-
background: ${theme.
|
|
18
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
20
19
|
${margin};
|
|
21
20
|
|
|
22
21
|
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
@@ -34,22 +33,22 @@ const StyledSlider = styled.input `
|
|
|
34
33
|
-webkit-appearance: none;
|
|
35
34
|
height: 44px;
|
|
36
35
|
cursor: ew-resize;
|
|
37
|
-
background: ${theme.
|
|
36
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
38
37
|
box-shadow:
|
|
39
38
|
//handles the progress bar
|
|
40
|
-
-1000px 0 0 980px ${theme.
|
|
39
|
+
-1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},
|
|
41
40
|
//added for the focus anim
|
|
42
|
-
inset 0 0 0 44px ${theme.
|
|
41
|
+
inset 0 0 0 44px ${({ theme }) => theme.color.surface.brand[400]};
|
|
43
42
|
border-radius: 50%;
|
|
44
43
|
transition: box-shadow 0.2s ease-in-out;
|
|
45
44
|
position: relative;
|
|
46
45
|
}
|
|
47
46
|
&:active::-webkit-slider-thumb,
|
|
48
47
|
&:focus::-webkit-slider-thumb {
|
|
49
|
-
background: ${theme.
|
|
48
|
+
background: ${({ theme }) => theme.color.background[100]};
|
|
50
49
|
box-shadow:
|
|
51
|
-
-1000px 0 0 980px ${theme.
|
|
52
|
-
inset 0 0 0 4px ${theme.
|
|
50
|
+
-1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},
|
|
51
|
+
inset 0 0 0 4px ${({ theme }) => theme.color.surface.brand[400]};
|
|
53
52
|
}
|
|
54
53
|
}
|
|
55
54
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SliderInput.js","sourceRoot":"","sources":["../../src/SliderInput/SliderInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAqC,MAAM,gBAAgB,CAAA;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EACvE,GAAG;IAEH,OAAO,CACL,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAClB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QACtC,CAAC,QACG,CAAC,SACA,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,SACF,EAAE,KACH,IAAI,GACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAsB;;;;;;;;;gBASvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;IACtD,MAAM;;;;;;;;;;;;;;;;;oBAiBU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;;4BAGlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;2BAE9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;;4BAElC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;0BAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAGtE,CAAA","sourcesContent":["import React, { forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { margin, MarginProps, TransientMarginProps } from '../utils/space'\n\ntype SliderProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'value' | 'onChange'\n> &\n MarginProps & {\n onChange: (value: number) => void\n value: number\n min?: number\n max?: number\n step?: number\n }\n\nexport const SliderInput = forwardRef<HTMLInputElement, SliderProps>(\n function SliderInput(\n { value, onChange, min, max, step, m, mx, my, ml, mr, mt, mb, ...rest },\n ref,\n ) {\n return (\n <StyledSlider\n ref={ref}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={value}\n onChange={(event) => {\n onChange(event.target.valueAsNumber)\n }}\n $m={m}\n $mx={mx}\n $my={my}\n $ml={ml}\n $mr={mr}\n $mt={mt}\n $mb={mb}\n {...rest}\n />\n )\n },\n)\n\nconst StyledSlider = styled.input<TransientMarginProps>`\n outline: 0;\n border: 0;\n padding: 0;\n border-radius: 500px;\n width: 100%;\n //guard rail as we have a hard coded limit on progress bar length\n max-width: 2000px;\n transition: box-shadow 0.2s ease-in-out;\n background: ${({ theme }) => theme.color.background[100]};\n ${margin};\n\n @media screen and (-webkit-min-device-pixel-ratio: 0) {\n overflow: hidden;\n height: 44px;\n -webkit-appearance: none;\n\n &::-webkit-slider-runnable-track {\n height: 44px;\n -webkit-appearance: none;\n transition: box-shadow 0.2s ease-in-out;\n }\n &::-webkit-slider-thumb {\n width: 44px;\n -webkit-appearance: none;\n height: 44px;\n cursor: ew-resize;\n background: ${({ theme }) => theme.color.background[100]};\n box-shadow:\n //handles the progress bar\n -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n //added for the focus anim\n inset 0 0 0 44px ${({ theme }) => theme.color.surface.brand[400]};\n border-radius: 50%;\n transition: box-shadow 0.2s ease-in-out;\n position: relative;\n }\n &:active::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n background: ${({ theme }) => theme.color.background[100]};\n box-shadow:\n -1000px 0 0 980px ${({ theme }) => theme.color.surface.brand[300]},\n inset 0 0 0 4px ${({ theme }) => theme.color.surface.brand[400]};\n }\n }\n`\n"]}
|