@popsure/dirty-swan 0.66.23 → 0.66.24
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.
- package/dist/cjs/index.js +4 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/segmentedControl/index.js +4 -5
- package/dist/esm/components/segmentedControl/index.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/segmentedControl/index.tsx +5 -11
- package/src/lib/components/segmentedControl/style.module.scss +7 -3
|
@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { useState, useRef, useEffect } from 'react';
|
|
3
3
|
import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = ".style-module_background-container__2Gjka {\n position: relative;\n display: inline-block;\n background-color: var(--ds-
|
|
6
|
-
var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw"};
|
|
5
|
+
var css_248z = ".style-module_background-container__2Gjka {\n position: relative;\n display: inline-block;\n background-color: var(--ds-orange-50);\n border-radius: 8px;\n padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n display: flex;\n align-items: center;\n}\n\n.style-module_chip__3rgLT {\n cursor: pointer;\n z-index: 2;\n padding-left: 16px;\n padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n outline-color: var(--ds-primary-900);\n outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n position: absolute;\n background-color: var(--ds-neutral-900);\n border-radius: 8px;\n top: 8px;\n z-index: 1;\n transition: width 0.3s, left 0.3s;\n}\n\n.style-module_text-color__6bLC9 {\n transition: color 0.15s ease-in;\n}";
|
|
6
|
+
var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw","text-color":"style-module_text-color__6bLC9"};
|
|
7
7
|
styleInject(css_248z);
|
|
8
8
|
|
|
9
9
|
var SegmentedControl = function (_a) {
|
|
@@ -19,15 +19,14 @@ var SegmentedControl = function (_a) {
|
|
|
19
19
|
setSelectedChipBackgroundWidthLeft({ left: left, width: width });
|
|
20
20
|
}, [selectedIndex]);
|
|
21
21
|
return (jsx("div", { className: className, children: jsxs("div", { className: styles['background-container'], children: [jsx("div", { ref: chipContainer, className: styles['chip-container'], style: { height: "".concat(height, "px") }, children: values.map(function (value, index) {
|
|
22
|
+
var selectedColor = selectedIndex === index ? 'tc-white' : 'tc-neutral-900';
|
|
22
23
|
return (jsx("div", { role: "button", tabIndex: 0, onKeyDown: function (e) {
|
|
23
24
|
if (e.key === 'Enter' || e.code === 'Space') {
|
|
24
25
|
onChange(index);
|
|
25
26
|
}
|
|
26
27
|
}, onClick: function () {
|
|
27
28
|
onChange(index);
|
|
28
|
-
}, className: styles.chip, children: typeof value === 'string' ? (jsx("div", { className: "p-h4 ta-center ".concat(
|
|
29
|
-
? 'tc-neutral-600'
|
|
30
|
-
: 'tc-purple-600'), children: value.subtitle })] })) }, typeof value === 'string' ? value : value.title));
|
|
29
|
+
}, className: styles.chip, children: typeof value === 'string' ? (jsx("div", { className: "p-h4 ta-center ".concat(selectedColor, " ").concat(styles['text-color']), children: value })) : (jsxs(Fragment, { children: [jsx("div", { className: "p-h4 ta-center ".concat(selectedColor, " ").concat(styles['text-color']), children: value.title }), jsx("div", { className: "p-p--small ta-center ".concat(selectedColor, " ").concat(styles['text-color']), children: value.subtitle })] })) }, typeof value === 'string' ? value : value.title));
|
|
31
30
|
}) }), jsx("div", { className: styles['select-chip-background'], style: {
|
|
32
31
|
width: "".concat(selectedChipBackgroundWidthLeft.width, "px"),
|
|
33
32
|
height: "".concat(height - 16, "px"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n title: string;\n subtitle: string;\n}\n\nexport interface SegmentedControlProps {\n className?: string;\n values: Array<TitleWithSubtitle> | Array<string>;\n selectedIndex: number;\n onChange: (selectedIndex: number) => void;\n}\n\nconst SegmentedControl = ({\n className = '',\n values,\n selectedIndex,\n onChange,\n}: SegmentedControlProps) => {\n const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n useState<{\n left: number;\n width: number;\n }>({ left: 0, width: 0 });\n const chipContainer = useRef<HTMLDivElement | null>(null);\n const height = typeof values[0] === 'string' ? 48 : 66;\n\n useEffect(() => {\n const selectedChip = chipContainer.current?.children[\n selectedIndex\n ] as HTMLDivElement;\n const left = selectedChip.offsetLeft;\n const width = selectedChip.offsetWidth;\n setSelectedChipBackgroundWidthLeft({ left, width });\n }, [selectedIndex]);\n\n return (\n <div className={className}>\n <div className={styles['background-container']}>\n <div\n ref={chipContainer}\n className={styles['chip-container']}\n style={{ height: `${height}px` }}\n >\n {values.map((value: TitleWithSubtitle | string, index: number) => {\n return (\n <div\n role=\"button\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.code === 'Space') {\n onChange(index);\n }\n }}\n onClick={() => {\n onChange(index);\n }}\n className={styles.chip}\n key={typeof value === 'string' ? value : value.title}\n >\n {typeof value === 'string' ? (\n <div\n className={`p-h4 ta-center ${
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n title: string;\n subtitle: string;\n}\n\nexport interface SegmentedControlProps {\n className?: string;\n values: Array<TitleWithSubtitle> | Array<string>;\n selectedIndex: number;\n onChange: (selectedIndex: number) => void;\n}\n\nconst SegmentedControl = ({\n className = '',\n values,\n selectedIndex,\n onChange,\n}: SegmentedControlProps) => {\n const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n useState<{\n left: number;\n width: number;\n }>({ left: 0, width: 0 });\n const chipContainer = useRef<HTMLDivElement | null>(null);\n const height = typeof values[0] === 'string' ? 48 : 66;\n\n useEffect(() => {\n const selectedChip = chipContainer.current?.children[\n selectedIndex\n ] as HTMLDivElement;\n const left = selectedChip.offsetLeft;\n const width = selectedChip.offsetWidth;\n setSelectedChipBackgroundWidthLeft({ left, width });\n }, [selectedIndex]);\n\n return (\n <div className={className}>\n <div className={styles['background-container']}>\n <div\n ref={chipContainer}\n className={styles['chip-container']}\n style={{ height: `${height}px` }}\n >\n {values.map((value: TitleWithSubtitle | string, index: number) => {\n const selectedColor = selectedIndex === index ? 'tc-white' : 'tc-neutral-900';\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.code === 'Space') {\n onChange(index);\n }\n }}\n onClick={() => {\n onChange(index);\n }}\n className={styles.chip}\n key={typeof value === 'string' ? value : value.title}\n >\n {typeof value === 'string' ? (\n <div\n className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}\n >\n {value}\n </div>\n ) : (\n <>\n <div\n className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}\n >\n {value.title}\n </div>\n <div\n className={`p-p--small ta-center ${selectedColor} ${styles['text-color']}`}\n >\n {value.subtitle}\n </div>\n </>\n )}\n </div>\n );\n })}\n </div>\n <div\n className={styles['select-chip-background']}\n style={{\n width: `${selectedChipBackgroundWidthLeft.width}px`,\n height: `${height - 16}px`,\n left: `${selectedChipBackgroundWidthLeft.left}px`,\n }}\n />\n </div>\n </div>\n );\n};\n\nexport { SegmentedControl };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -45,6 +45,8 @@ const SegmentedControl = ({
|
|
|
45
45
|
style={{ height: `${height}px` }}
|
|
46
46
|
>
|
|
47
47
|
{values.map((value: TitleWithSubtitle | string, index: number) => {
|
|
48
|
+
const selectedColor = selectedIndex === index ? 'tc-white' : 'tc-neutral-900';
|
|
49
|
+
|
|
48
50
|
return (
|
|
49
51
|
<div
|
|
50
52
|
role="button"
|
|
@@ -62,27 +64,19 @@ const SegmentedControl = ({
|
|
|
62
64
|
>
|
|
63
65
|
{typeof value === 'string' ? (
|
|
64
66
|
<div
|
|
65
|
-
className={`p-h4 ta-center ${
|
|
66
|
-
selectedIndex === index ? '' : 'tc-purple-600'
|
|
67
|
-
}`}
|
|
67
|
+
className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}
|
|
68
68
|
>
|
|
69
69
|
{value}
|
|
70
70
|
</div>
|
|
71
71
|
) : (
|
|
72
72
|
<>
|
|
73
73
|
<div
|
|
74
|
-
className={`p-h4 ta-center ${
|
|
75
|
-
selectedIndex === index ? '' : 'tc-purple-600'
|
|
76
|
-
}`}
|
|
74
|
+
className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}
|
|
77
75
|
>
|
|
78
76
|
{value.title}
|
|
79
77
|
</div>
|
|
80
78
|
<div
|
|
81
|
-
className={`p-p--small ta-center ${
|
|
82
|
-
selectedIndex === index
|
|
83
|
-
? 'tc-neutral-600'
|
|
84
|
-
: 'tc-purple-600'
|
|
85
|
-
}`}
|
|
79
|
+
className={`p-p--small ta-center ${selectedColor} ${styles['text-color']}`}
|
|
86
80
|
>
|
|
87
81
|
{value.subtitle}
|
|
88
82
|
</div>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
position: relative;
|
|
3
3
|
display: inline-block;
|
|
4
4
|
|
|
5
|
-
background-color: var(--ds-
|
|
5
|
+
background-color: var(--ds-orange-50);
|
|
6
6
|
border-radius: 8px;
|
|
7
7
|
|
|
8
8
|
padding: 0 8px;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
padding-right: 16px;
|
|
23
23
|
|
|
24
24
|
&:focus {
|
|
25
|
-
outline-color: var(--ds-
|
|
25
|
+
outline-color: var(--ds-primary-900);
|
|
26
26
|
outline-offset: 2px;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
.select-chip-background {
|
|
31
31
|
position: absolute;
|
|
32
32
|
|
|
33
|
-
background-color:
|
|
33
|
+
background-color: var(--ds-neutral-900);
|
|
34
34
|
border-radius: 8px;
|
|
35
35
|
|
|
36
36
|
top: 8px;
|
|
@@ -39,3 +39,7 @@
|
|
|
39
39
|
|
|
40
40
|
transition: width 0.3s, left 0.3s;
|
|
41
41
|
}
|
|
42
|
+
|
|
43
|
+
.text-color {
|
|
44
|
+
transition: color 0.15s ease-in;
|
|
45
|
+
}
|