@mw-kit/mw-ui 1.7.38 → 1.7.40
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,4 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export declare const NavBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
3
|
+
percent: number;
|
|
4
|
+
position: 'bottom' | 'top';
|
|
5
|
+
}, never>;
|
|
2
6
|
export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
|
|
3
7
|
interface StyledLabelProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
|
|
4
8
|
disabled: 1 | 0;
|
|
@@ -26,8 +30,4 @@ interface MarkerProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
|
|
|
26
30
|
bullet: 1 | 0;
|
|
27
31
|
}
|
|
28
32
|
export declare const Marker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, MarkerProps, never>;
|
|
29
|
-
export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
30
|
-
percent: number;
|
|
31
|
-
position: 'bottom' | 'top';
|
|
32
|
-
}, never>;
|
|
33
33
|
export {};
|
package/dist/index.js
CHANGED
|
@@ -12649,7 +12649,7 @@ var Container$1 = styled__default.div(_templateObject$7 || (_templateObject$7 =
|
|
|
12649
12649
|
var theme = _ref2.theme;
|
|
12650
12650
|
return theme.spacings.s1;
|
|
12651
12651
|
});
|
|
12652
|
-
var OverflowContainer = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n overflow-y: overlay;\n width: 100%;\n\n max-height: ", ";\n\n scrollbar-color: ", ";\n scrollbar-width: auto;\n\n ::-webkit-scrollbar {\n width: 7px;\n }\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ", ";\n"])), function (_ref3) {
|
|
12652
|
+
var OverflowContainer = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n overflow-y: overlay;\n width: 100%;\n position: relative;\n\n max-height: ", ";\n\n scrollbar-color: ", ";\n scrollbar-width: auto;\n\n ::-webkit-scrollbar {\n width: 7px;\n }\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ", ";\n"])), function (_ref3) {
|
|
12653
12653
|
var height = _ref3.height;
|
|
12654
12654
|
return height || '100%';
|
|
12655
12655
|
}, function (_ref4) {
|
|
@@ -15559,79 +15559,88 @@ var bullet = styled.css(_templateObject$q || (_templateObject$q = _taggedTemplat
|
|
|
15559
15559
|
var theme = _ref4.theme;
|
|
15560
15560
|
return theme.getColor('black', 10);
|
|
15561
15561
|
});
|
|
15562
|
-
var
|
|
15563
|
-
var LabelContainer$4 = styled__default.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin-bottom: ", ";\n"])), function (_ref5) {
|
|
15562
|
+
var NavBar = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n position: absolute;\n z-index: 2;\n\n left: 0;\n width: 100%;\n height: calc(33px + ", ");\n transition: height 0.25s ease-in-out;\n overflow: hidden;\n\n ", "\n\n > div {\n position: absolute;\n z-index: 2;\n\n width: 100px;\n left: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n border-radius: 4px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n"])), function (_ref5) {
|
|
15564
15563
|
var theme = _ref5.theme;
|
|
15565
15564
|
return theme.spacings.s1;
|
|
15565
|
+
}, function (_ref6) {
|
|
15566
|
+
var position = _ref6.position;
|
|
15567
|
+
return position === 'bottom' ? styled.css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n bottom: 100%;\n > div {\n bottom: ", ";\n }\n "])), function (_ref7) {
|
|
15568
|
+
var theme = _ref7.theme;
|
|
15569
|
+
return theme.spacings.s1;
|
|
15570
|
+
}) : styled.css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n top: 100%;\n > div {\n top: ", ";\n }\n "])), function (_ref8) {
|
|
15571
|
+
var theme = _ref8.theme;
|
|
15572
|
+
return theme.spacings.s1;
|
|
15573
|
+
});
|
|
15574
|
+
}, function (_ref9) {
|
|
15575
|
+
var percent = _ref9.percent;
|
|
15576
|
+
if (percent < 10) return '0%';
|
|
15577
|
+
if (percent > 90) return 'calc(100% - 100px)';
|
|
15578
|
+
return "calc(" + percent + "% - 50px + 22px * " + (50 - percent) / 100 + ")";
|
|
15579
|
+
}, function (_ref10) {
|
|
15580
|
+
var theme = _ref10.theme;
|
|
15581
|
+
return theme.colors.blue;
|
|
15582
|
+
}, function (_ref11) {
|
|
15583
|
+
var theme = _ref11.theme;
|
|
15584
|
+
return theme.colors.white;
|
|
15585
|
+
}, function (_ref12) {
|
|
15586
|
+
var theme = _ref12.theme;
|
|
15587
|
+
return theme.spacings.s1;
|
|
15566
15588
|
});
|
|
15567
|
-
var
|
|
15568
|
-
|
|
15589
|
+
var Input$2 = styled__default.input(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n appearance: none;\n width: 100%;\n height: 10px;\n background-color: transparent;\n outline: none;\n position: relative;\n z-index: 3;\n margin: 0;\n\n :not(:disabled) {\n cursor: pointer;\n }\n\n /** firefox */\n ::-moz-range-thumb {\n ", "\n }\n /** ie */\n ::-ms-thumb {\n ", "\n }\n /** chrome */\n ::-webkit-slider-thumb {\n ", "\n }\n"])), bullet, bullet, bullet);
|
|
15590
|
+
var LabelContainer$4 = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin-bottom: ", ";\n"])), function (_ref13) {
|
|
15591
|
+
var theme = _ref13.theme;
|
|
15592
|
+
return theme.spacings.s1;
|
|
15593
|
+
});
|
|
15594
|
+
var Label$5 = styled__default.label(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n ", ";\n line-height: 19px;\n\n width: ", ";\n box-sizing: border-box;\n display: block;\n position: relative;\n\n ", "\n\n > ", " {\n ", "\n }\n\n :not(:hover) ", " {\n height: 0;\n }\n"])), function (_ref14) {
|
|
15595
|
+
var theme = _ref14.theme;
|
|
15569
15596
|
return theme.useTypography('p');
|
|
15570
|
-
}, function (
|
|
15571
|
-
var width =
|
|
15597
|
+
}, function (_ref15) {
|
|
15598
|
+
var width = _ref15.width;
|
|
15572
15599
|
return width || '100%';
|
|
15573
|
-
}, function (
|
|
15574
|
-
var disabled =
|
|
15600
|
+
}, function (_ref16) {
|
|
15601
|
+
var disabled = _ref16.disabled;
|
|
15575
15602
|
if (!disabled) return;
|
|
15576
|
-
return styled.css(
|
|
15577
|
-
}, LabelContainer$4, function (
|
|
15578
|
-
var required =
|
|
15579
|
-
return required && styled.css(
|
|
15580
|
-
});
|
|
15581
|
-
var InputContainer$1 = styled__default.div(
|
|
15582
|
-
var theme =
|
|
15583
|
-
invalid =
|
|
15603
|
+
return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n opacity: 0.5;\n "])));
|
|
15604
|
+
}, LabelContainer$4, function (_ref17) {
|
|
15605
|
+
var required = _ref17.required;
|
|
15606
|
+
return required && styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n :after {\n content: ' *';\n }\n "])));
|
|
15607
|
+
}, NavBar);
|
|
15608
|
+
var InputContainer$1 = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n gap: 6px;\n\n > div {\n position: relative;\n }\n\n ", "\n"])), function (_ref18) {
|
|
15609
|
+
var theme = _ref18.theme,
|
|
15610
|
+
invalid = _ref18.invalid;
|
|
15584
15611
|
|
|
15585
15612
|
if (!invalid) {
|
|
15586
|
-
return styled.css(
|
|
15613
|
+
return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n ", " > span {\n background-color: ", ";\n }\n\n ", " {\n /** firefox */\n ::-moz-range-thumb {\n border-color: ", ";\n }\n /** ie */\n ::-ms-thumb {\n border-color: ", ";\n }\n /** chrome */\n ::-webkit-slider-thumb {\n border-color: ", ";\n }\n }\n "])), SelectedArea, theme.colors.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
|
|
15587
15614
|
}
|
|
15588
15615
|
|
|
15589
|
-
return styled.css(
|
|
15616
|
+
return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n ", " > span {\n background-color: ", ";\n }\n\n ", " {\n /** firefox */\n ::-moz-range-thumb {\n border-color: ", ";\n }\n /** ie */\n ::-ms-thumb {\n border-color: ", ";\n }\n /** chrome */\n ::-webkit-slider-thumb {\n border-color: ", ";\n }\n }\n "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
|
|
15590
15617
|
});
|
|
15591
|
-
var MinMaxLabelContainer = styled__default.div(
|
|
15592
|
-
var LabelsContainer = styled__default.div(
|
|
15593
|
-
var position =
|
|
15618
|
+
var MinMaxLabelContainer = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n padding-bottom: 2px;\n"])));
|
|
15619
|
+
var LabelsContainer = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 7px;\n\n ", "\n"])), function (_ref19) {
|
|
15620
|
+
var position = _ref19.position;
|
|
15594
15621
|
|
|
15595
15622
|
if (position === 'bottom') {
|
|
15596
|
-
return styled.css(
|
|
15623
|
+
return styled.css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: column-reverse;\n }\n\n ", " {\n :after {\n bottom: calc(100% + 10.5px);\n }\n }\n\n ", " {\n align-items: start;\n }\n "])), InputContainer$1, Marker, MinMaxLabelContainer);
|
|
15597
15624
|
}
|
|
15598
15625
|
|
|
15599
|
-
return styled.css(
|
|
15626
|
+
return styled.css(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: column;\n }\n\n ", " {\n :after {\n top: calc(100% + 8px);\n }\n }\n\n ", " {\n align-items: end;\n }\n "])), InputContainer$1, Marker, MinMaxLabelContainer);
|
|
15600
15627
|
});
|
|
15601
|
-
var SelectedArea = styled__default.div(
|
|
15602
|
-
var theme =
|
|
15628
|
+
var SelectedArea = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n background-color: ", ";\n\n height: 3px;\n width: 100%;\n position: absolute;\n bottom: calc(50% - 2px);\n left: 0;\n display: flex;\n z-index: 1;\n\n > span {\n width: ", "%;\n display: block;\n box-sizing: border-box;\n height: 100%;\n }\n"])), function (_ref20) {
|
|
15629
|
+
var theme = _ref20.theme;
|
|
15603
15630
|
return theme.getColor('greyishBlue', 10);
|
|
15604
|
-
}, function (
|
|
15605
|
-
var percent =
|
|
15631
|
+
}, function (_ref21) {
|
|
15632
|
+
var percent = _ref21.percent;
|
|
15606
15633
|
return percent;
|
|
15607
15634
|
});
|
|
15608
|
-
var MarkersContainer = styled__default.div(
|
|
15609
|
-
var Marker = styled__default.div(
|
|
15610
|
-
var left =
|
|
15635
|
+
var MarkersContainer = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n height: 17px;\n"])));
|
|
15636
|
+
var Marker = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n width: 40px;\n text-align: center;\n left: ", ";\n z-index: 2;\n\n :first-child {\n left: 0;\n text-align: left;\n\n :after {\n left: 0;\n }\n }\n :last-child {\n right: 0;\n left: unset;\n text-align: right;\n\n :after {\n right: 0;\n left: unset;\n }\n }\n\n ", "\n"])), function (_ref22) {
|
|
15637
|
+
var left = _ref22.left;
|
|
15611
15638
|
return left;
|
|
15612
|
-
}, function (
|
|
15613
|
-
var bullet =
|
|
15614
|
-
theme =
|
|
15639
|
+
}, function (_ref23) {
|
|
15640
|
+
var bullet = _ref23.bullet,
|
|
15641
|
+
theme = _ref23.theme;
|
|
15615
15642
|
if (!bullet) return;
|
|
15616
|
-
return styled.css(
|
|
15617
|
-
});
|
|
15618
|
-
var Text = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n ", "\n width: 80px;\n left: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n border-radius: 4px;\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])), function (_ref16) {
|
|
15619
|
-
var position = _ref16.position;
|
|
15620
|
-
return position === 'bottom' ? styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n bottom: calc(100% + 10px);\n "]))) : styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n top: calc(100% + 10px);\n "])));
|
|
15621
|
-
}, function (_ref17) {
|
|
15622
|
-
var percent = _ref17.percent;
|
|
15623
|
-
if (percent < 10) return '0%';
|
|
15624
|
-
if (percent > 90) return 'calc(100% - 80px)';
|
|
15625
|
-
return "calc(" + percent + "% - 40px + 22px * " + (50 - percent) / 100 + ")";
|
|
15626
|
-
}, function (_ref18) {
|
|
15627
|
-
var theme = _ref18.theme;
|
|
15628
|
-
return theme.colors.blue;
|
|
15629
|
-
}, function (_ref19) {
|
|
15630
|
-
var theme = _ref19.theme;
|
|
15631
|
-
return theme.colors.white;
|
|
15632
|
-
}, function (_ref20) {
|
|
15633
|
-
var theme = _ref20.theme;
|
|
15634
|
-
return theme.spacings.s1;
|
|
15643
|
+
return styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n :after {\n content: '';\n position: absolute;\n left: calc(50% - 5px);\n width: 10px;\n height: 10px;\n border-radius: 100%;\n border: 1px solid ", ";\n background-color: ", ";\n box-shadow: 0px 1px 3px ", ";\n }\n "])), theme.colors.lightestGrey, theme.colors.white, theme.getColor('black', 10));
|
|
15635
15644
|
});
|
|
15636
15645
|
|
|
15637
15646
|
var getMarkers = function getMarkers(props) {
|
|
@@ -15831,10 +15840,10 @@ var Range = React__default.forwardRef(function (props, ref) {
|
|
|
15831
15840
|
}, marker.label);
|
|
15832
15841
|
})), React__default.createElement("div", null, React__default.createElement(Input$2, Object.assign({
|
|
15833
15842
|
ref: ref
|
|
15834
|
-
}, inputProps)), React__default.createElement(
|
|
15843
|
+
}, inputProps)), React__default.createElement(NavBar, {
|
|
15835
15844
|
percent: value * 100 / max,
|
|
15836
15845
|
position: position
|
|
15837
|
-
}, React__default.createElement(Icon, {
|
|
15846
|
+
}, React__default.createElement("div", null, React__default.createElement(Icon, {
|
|
15838
15847
|
type: 'feather',
|
|
15839
15848
|
icon: 'minus_circle',
|
|
15840
15849
|
color: 'white',
|
|
@@ -15844,7 +15853,7 @@ var Range = React__default.forwardRef(function (props, ref) {
|
|
|
15844
15853
|
icon: 'plus_circle',
|
|
15845
15854
|
color: 'white',
|
|
15846
15855
|
onClick: canIncrement ? increment : undefined
|
|
15847
|
-
})), React__default.createElement(SelectedArea, {
|
|
15856
|
+
}))), React__default.createElement(SelectedArea, {
|
|
15848
15857
|
percent: percent
|
|
15849
15858
|
}, Array(spans).fill(1).map(function (_value, index) {
|
|
15850
15859
|
return React__default.createElement("span", {
|