krl-alfred 2.17.22 → 2.17.23
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.
|
@@ -22,11 +22,16 @@ var StepSlider = function (_a) {
|
|
|
22
22
|
var handleSetPosition = function () {
|
|
23
23
|
if (sliderRef.current) {
|
|
24
24
|
var selectedIndex = options.findIndex(function (option) { return option.value === internalValue; });
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
// StepsWrapper'ı bul (ikinci child)
|
|
26
|
+
var stepsWrapper = sliderRef.current.children[1];
|
|
27
|
+
if (stepsWrapper && selectedIndex !== -1) {
|
|
28
|
+
var selectedOptionElement = stepsWrapper.children[selectedIndex];
|
|
29
|
+
if (selectedOptionElement) {
|
|
30
|
+
// Step'in sol pozisyonunu al ve indicator'ı oraya yerleştir
|
|
31
|
+
setIndicatorStyle({
|
|
32
|
+
left: "".concat(selectedOptionElement.offsetLeft + 25, "px"),
|
|
33
|
+
});
|
|
34
|
+
}
|
|
30
35
|
}
|
|
31
36
|
}
|
|
32
37
|
};
|
|
@@ -44,6 +49,6 @@ var StepSlider = function (_a) {
|
|
|
44
49
|
onChange(value);
|
|
45
50
|
}
|
|
46
51
|
};
|
|
47
|
-
return ((0, jsx_runtime_1.jsxs)(StepSlider_styled_1.Container, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", { children: label }) }))), (0, jsx_runtime_1.jsxs)(StepSlider_styled_1.StepSliderStyled, __assign({ ref: sliderRef }, { children: [(0, jsx_runtime_1.jsx)(StepSlider_styled_1.IndicatorStyled, { style: indicatorStyle }), options.map(function (option) { return ((0, jsx_runtime_1.jsx)(StepSlider_styled_1.StepOptionStyled, __assign({ isActive: option.value === internalValue, onClick: function () { return handleClick(option.value); } }, { children: option.value === internalValue ? option.activeLabel : option.label }), option.value)); })] }))] }));
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(StepSlider_styled_1.Container, { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "top" }, { children: (0, jsx_runtime_1.jsx)("label", { children: label }) }))), (0, jsx_runtime_1.jsxs)(StepSlider_styled_1.StepSliderStyled, __assign({ ref: sliderRef }, { children: [(0, jsx_runtime_1.jsx)(StepSlider_styled_1.IndicatorStyled, { style: indicatorStyle }), (0, jsx_runtime_1.jsx)(StepSlider_styled_1.StepsWrapper, { children: options.map(function (option) { return ((0, jsx_runtime_1.jsx)(StepSlider_styled_1.StepOptionStyled, __assign({ isActive: option.value === internalValue, onClick: function () { return handleClick(option.value); } }, { children: option.value === internalValue ? option.activeLabel : option.label }), option.value)); }) })] }))] }));
|
|
48
53
|
};
|
|
49
54
|
exports.default = StepSlider;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
3
|
export declare const StepSliderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
|
+
export declare const StepsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
5
|
export declare const IndicatorStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
6
|
export declare const StepOptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
6
7
|
isActive: boolean;
|
|
@@ -7,10 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StepOptionStyled = exports.IndicatorStyled = exports.StepSliderStyled = exports.Container = void 0;
|
|
10
|
+
exports.StepOptionStyled = exports.IndicatorStyled = exports.StepsWrapper = exports.StepSliderStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n"], ["\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n"])));
|
|
13
|
-
exports.StepSliderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
var
|
|
13
|
+
exports.StepSliderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n background-color: white;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n height: 48px;\n padding: 0 1.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n margin-bottom: 0.5rem;\n"], ["\n position: relative;\n background-color: white;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n height: 48px;\n padding: 0 1.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n margin-bottom: 0.5rem;\n"])));
|
|
14
|
+
exports.StepsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n position: relative;\n z-index: 1;\n pointer-events: none;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 100%;\n position: relative;\n z-index: 1;\n pointer-events: none;\n"])));
|
|
15
|
+
exports.IndicatorStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color: white;\n border-radius: 6px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n width: 64px !important;\n height: 64px;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color: white;\n border-radius: 6px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n width: 64px !important;\n height: 64px;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
|
|
16
|
+
exports.StepOptionStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n text-align: center;\n padding: 16px 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--body-semi-bold-14-17);\n min-width: 34px;\n user-select: ", ";\n pointer-events: ", ";\n &:hover {\n color: var(--dark);\n }\n span {\n display: block;\n text-align: center;\n font: var(--body-semi-bold-14-17);\n color: var(--grey-50);\n b {\n display: block;\n font: var(--headline-extra-bold-18-22);\n color: var(--dark);\n }\n }\n"], ["\n text-align: center;\n padding: 16px 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--body-semi-bold-14-17);\n min-width: 34px;\n user-select: ", ";\n pointer-events: ", ";\n &:hover {\n color: var(--dark);\n }\n span {\n display: block;\n text-align: center;\n font: var(--body-semi-bold-14-17);\n color: var(--grey-50);\n b {\n display: block;\n font: var(--headline-extra-bold-18-22);\n color: var(--dark);\n }\n }\n"])), function (props) { return props.isActive ? 'none' : 'auto'; }, function (props) { return props.isActive ? 'none' : 'auto'; });
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -19,17 +19,22 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
19
19
|
var StepSlider_1 = __importDefault(require("../StepSlider"));
|
|
20
20
|
exports.default = {
|
|
21
21
|
title: 'Components/StepSlider',
|
|
22
|
-
component: function (props) { return (0, jsx_runtime_1.jsx)(StepSlider_1.default, __assign({}, props)); },
|
|
22
|
+
component: function (props) { return (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '405px' } }, { children: (0, jsx_runtime_1.jsx)(StepSlider_1.default, __assign({}, props)) })); },
|
|
23
23
|
tags: ['autodocs'],
|
|
24
24
|
};
|
|
25
25
|
var options = [
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{
|
|
26
|
+
{
|
|
27
|
+
value: '1', label: '1-2 Ay', activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "1-2" }), " ay"] }))
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
value: '3', label: '3-6 Ay', activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "3-6" }), " ay"] }))
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
value: '6', label: '6+ Ay', activeLabel: ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("b", { children: "6+" }), " ay"] }))
|
|
34
|
+
},
|
|
30
35
|
];
|
|
31
36
|
var Default = function () {
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: options, selectedValue: '1', label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" }));
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '405px' } }, { children: (0, jsx_runtime_1.jsx)(StepSlider_1.default, { options: options, selectedValue: '1', label: "Ne kadar s\u00FCreli\u011Fine kiralamay\u0131 d\u00FC\u015F\u00FCn\u00FCyorsun?" }) })));
|
|
33
38
|
};
|
|
34
39
|
exports.Default = Default;
|
|
35
40
|
var WithLongLabels = function () {
|