@ably/ui 14.0.0-dev.5379086 → 14.0.0-dev.64a4085
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/core/Expander.js +1 -1
- package/core/Slider.js +1 -1
- package/package.json +1 -1
- package/src/core/Expander/Expander.stories.tsx +58 -72
- package/src/core/Expander.tsx +2 -10
- package/src/core/Slider.tsx +1 -1
package/core/Expander.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useRef,useState}from"react";const Expander=({height=200,
|
|
1
|
+
import React,{useEffect,useRef,useState}from"react";const Expander=({height=200,children})=>{const innerRef=useRef(null);const[contentHeight,setContentHeight]=useState(height);const[expanded,setExpanded]=useState(false);useEffect(()=>{var _innerRef_current;var _innerRef_current_clientHeight;setContentHeight((_innerRef_current_clientHeight=(_innerRef_current=innerRef.current)===null||_innerRef_current===void 0?void 0:_innerRef_current.clientHeight)!==null&&_innerRef_current_clientHeight!==void 0?_innerRef_current_clientHeight:height)},[height,expanded]);const showControls=contentHeight>height;return React.createElement(React.Fragment,null,React.createElement("div",{style:{height:expanded?contentHeight:height},className:"overflow-hidden transition-all relative"},showControls&&!expanded&&React.createElement("div",{className:"h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0"}),React.createElement("div",{ref:innerRef},children)),showControls&&React.createElement("div",{onClick:()=>setExpanded(!expanded),onKeyDown:e=>e.key==="Enter"&&setExpanded(!expanded),tabIndex:0,className:"mt-16 cursor-pointer font-bold text-gui-blue-default-light hover:text-gui-blue-hover-light active:text-gui-blue-active-light focus:text-gui-blue-focus"},expanded?"View less -":"View all +"))};export default Expander;
|
package/core/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";import"./Slider/component.css";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute -bottom-40 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{setActiveIndex(prevIndex=>(prevIndex+1)%children.length);resetInterval()};const prev=()=>{setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);resetInterval()};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-
|
|
1
|
+
import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";import"./Slider/component.css";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute -bottom-40 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{setActiveIndex(prevIndex=>(prevIndex+1)%children.length);resetInterval()};const prev=()=>{setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);resetInterval()};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-hidden w-full py-40"},React.createElement("div",{className:"flex items-center transition-transform ease-in-out duration-500",style:{transform:`translateX(-${activeIndex*100}%)`}},children.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500",style:{opacity:activeIndex===index?1:.1}},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",size:"1.5rem"}))))))};export default Slider;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "14.0.0-dev.
|
|
3
|
+
"version": "14.0.0-dev.64a4085",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -17,71 +17,7 @@ export default {
|
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const longContentInner = (
|
|
21
|
-
<div>
|
|
22
|
-
<p>Ipsum</p>
|
|
23
|
-
<ul className="mb-16 list-inside list-disc">
|
|
24
|
-
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
25
|
-
<li>Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.</li>
|
|
26
|
-
<li>Mauris molestie felis et scelerisque ullamcorper.</li>
|
|
27
|
-
<li>Maecenas congue ligula ut commodo tristique.</li>
|
|
28
|
-
<li>
|
|
29
|
-
Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
|
|
30
|
-
venenatis.
|
|
31
|
-
</li>
|
|
32
|
-
<li>Donec nec turpis vel urna egestas fringilla.</li>
|
|
33
|
-
</ul>
|
|
34
|
-
<p>Ipsum</p>
|
|
35
|
-
<ul className="mb-16 list-inside list-disc">
|
|
36
|
-
<li>Mauris ut nibh vel metus cursus semper.</li>
|
|
37
|
-
<li>Ut mattis tortor eu urna accumsan gravida.</li>
|
|
38
|
-
<li>Nunc pellentesque neque at elit pretium tempor.</li>
|
|
39
|
-
<li>Curabitur finibus magna vitae nunc varius fermentum.</li>
|
|
40
|
-
</ul>
|
|
41
|
-
<ul className="mb-16 list-inside list-disc">
|
|
42
|
-
<li>Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam.</li>
|
|
43
|
-
<li>Praesent in eros efficitur, consequat ante eu, faucibus arcu.</li>
|
|
44
|
-
<li>Nulla laoreet nibh a odio interdum, non molestie diam auctor.</li>
|
|
45
|
-
</ul>
|
|
46
|
-
<p>Ipsum</p>
|
|
47
|
-
<ul className="mb-16 list-inside list-disc">
|
|
48
|
-
<li>
|
|
49
|
-
Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate
|
|
50
|
-
lacus.
|
|
51
|
-
</li>
|
|
52
|
-
<li>Quisque in mi sed ex vulputate varius in a leo.</li>
|
|
53
|
-
<li>Etiam posuere dolor at tortor aliquam imperdiet.</li>
|
|
54
|
-
<li>
|
|
55
|
-
Maecenas quis neque consequat, ultricies est sit amet, congue est.
|
|
56
|
-
</li>
|
|
57
|
-
<li>Aenean a elit sed nibh pretium lacinia sed convallis sapien.</li>
|
|
58
|
-
</ul>
|
|
59
|
-
<p>Ipsum</p>
|
|
60
|
-
<ul className="mb-16 list-inside list-disc">
|
|
61
|
-
<li>
|
|
62
|
-
Nulla malesuada libero id dolor aliquam, non sagittis mi scelerisque.
|
|
63
|
-
</li>
|
|
64
|
-
<li>
|
|
65
|
-
Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est.
|
|
66
|
-
</li>
|
|
67
|
-
<li>In porta arcu nec purus tincidunt vulputate.</li>
|
|
68
|
-
</ul>
|
|
69
|
-
</div>
|
|
70
|
-
);
|
|
71
|
-
|
|
72
20
|
export const LongContent = {
|
|
73
|
-
render: () => <Expander>{longContentInner}</Expander>,
|
|
74
|
-
parameters: {
|
|
75
|
-
docs: {
|
|
76
|
-
description: {
|
|
77
|
-
story:
|
|
78
|
-
"A larger amount of content that exceeds the height cut-off, controls shown.",
|
|
79
|
-
},
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export const ShortContent = {
|
|
85
21
|
render: () => (
|
|
86
22
|
<Expander>
|
|
87
23
|
<div>
|
|
@@ -99,6 +35,44 @@ export const ShortContent = {
|
|
|
99
35
|
</li>
|
|
100
36
|
<li>Donec nec turpis vel urna egestas fringilla.</li>
|
|
101
37
|
</ul>
|
|
38
|
+
<p>Ipsum</p>
|
|
39
|
+
<ul className="mb-16 list-inside list-disc">
|
|
40
|
+
<li>Mauris ut nibh vel metus cursus semper.</li>
|
|
41
|
+
<li>Ut mattis tortor eu urna accumsan gravida.</li>
|
|
42
|
+
<li>Nunc pellentesque neque at elit pretium tempor.</li>
|
|
43
|
+
<li>Curabitur finibus magna vitae nunc varius fermentum.</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<ul className="mb-16 list-inside list-disc">
|
|
46
|
+
<li>
|
|
47
|
+
Curabitur vehicula mi iaculis, luctus augue eu, venenatis quam.
|
|
48
|
+
</li>
|
|
49
|
+
<li>Praesent in eros efficitur, consequat ante eu, faucibus arcu.</li>
|
|
50
|
+
<li>Nulla laoreet nibh a odio interdum, non molestie diam auctor.</li>
|
|
51
|
+
</ul>
|
|
52
|
+
<p>Ipsum</p>
|
|
53
|
+
<ul className="mb-16 list-inside list-disc">
|
|
54
|
+
<li>
|
|
55
|
+
Praesent aliquam diam tincidunt, sollicitudin tortor eget, vulputate
|
|
56
|
+
lacus.
|
|
57
|
+
</li>
|
|
58
|
+
<li>Quisque in mi sed ex vulputate varius in a leo.</li>
|
|
59
|
+
<li>Etiam posuere dolor at tortor aliquam imperdiet.</li>
|
|
60
|
+
<li>
|
|
61
|
+
Maecenas quis neque consequat, ultricies est sit amet, congue est.
|
|
62
|
+
</li>
|
|
63
|
+
<li>Aenean a elit sed nibh pretium lacinia sed convallis sapien.</li>
|
|
64
|
+
</ul>
|
|
65
|
+
<p>Ipsum</p>
|
|
66
|
+
<ul className="mb-16 list-inside list-disc">
|
|
67
|
+
<li>
|
|
68
|
+
Nulla malesuada libero id dolor aliquam, non sagittis mi
|
|
69
|
+
scelerisque.
|
|
70
|
+
</li>
|
|
71
|
+
<li>
|
|
72
|
+
Etiam tincidunt lacus eu diam laoreet consectetur sit amet non est.
|
|
73
|
+
</li>
|
|
74
|
+
<li>In porta arcu nec purus tincidunt vulputate.</li>
|
|
75
|
+
</ul>
|
|
102
76
|
</div>
|
|
103
77
|
</Expander>
|
|
104
78
|
),
|
|
@@ -106,26 +80,38 @@ export const ShortContent = {
|
|
|
106
80
|
docs: {
|
|
107
81
|
description: {
|
|
108
82
|
story:
|
|
109
|
-
"A
|
|
83
|
+
"A larger amount of content that exceeds the height cut-off, controls shown.",
|
|
110
84
|
},
|
|
111
85
|
},
|
|
112
86
|
},
|
|
113
87
|
};
|
|
114
88
|
|
|
115
|
-
export const
|
|
89
|
+
export const ShortContent = {
|
|
116
90
|
render: () => (
|
|
117
|
-
<Expander
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
91
|
+
<Expander>
|
|
92
|
+
<div>
|
|
93
|
+
<p>Ipsum</p>
|
|
94
|
+
<ul className="mb-16 list-inside list-disc">
|
|
95
|
+
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
|
96
|
+
<li>
|
|
97
|
+
Sed convallis ex pharetra, tristique tellus vel, rhoncus velit.
|
|
98
|
+
</li>
|
|
99
|
+
<li>Mauris molestie felis et scelerisque ullamcorper.</li>
|
|
100
|
+
<li>Maecenas congue ligula ut commodo tristique.</li>
|
|
101
|
+
<li>
|
|
102
|
+
Pellentesque venenatis elit vitae urna condimentum, in mollis arcu
|
|
103
|
+
venenatis.
|
|
104
|
+
</li>
|
|
105
|
+
<li>Donec nec turpis vel urna egestas fringilla.</li>
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
122
108
|
</Expander>
|
|
123
109
|
),
|
|
124
110
|
parameters: {
|
|
125
111
|
docs: {
|
|
126
112
|
description: {
|
|
127
113
|
story:
|
|
128
|
-
"A
|
|
114
|
+
"A smaller amount of content that doesn't exceed the height cut-off, therefore no controls shown.",
|
|
129
115
|
},
|
|
130
116
|
},
|
|
131
117
|
},
|
package/src/core/Expander.tsx
CHANGED
|
@@ -2,14 +2,10 @@ import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
|
|
|
2
2
|
|
|
3
3
|
type ExpanderProps = {
|
|
4
4
|
height?: number;
|
|
5
|
-
className?: string;
|
|
6
|
-
fadeClassName?: string;
|
|
7
5
|
};
|
|
8
6
|
|
|
9
7
|
const Expander = ({
|
|
10
8
|
height = 200,
|
|
11
|
-
className,
|
|
12
|
-
fadeClassName,
|
|
13
9
|
children,
|
|
14
10
|
}: PropsWithChildren<ExpanderProps>) => {
|
|
15
11
|
const innerRef = useRef<HTMLDivElement>(null);
|
|
@@ -26,14 +22,10 @@ const Expander = ({
|
|
|
26
22
|
<>
|
|
27
23
|
<div
|
|
28
24
|
style={{ height: expanded ? contentHeight : height }}
|
|
29
|
-
className=
|
|
25
|
+
className="overflow-hidden transition-all relative"
|
|
30
26
|
>
|
|
31
27
|
{showControls && !expanded && (
|
|
32
|
-
<div
|
|
33
|
-
className={`h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0 left-0 right-0 ${
|
|
34
|
-
fadeClassName ?? ""
|
|
35
|
-
}`}
|
|
36
|
-
></div>
|
|
28
|
+
<div className="h-64 w-full bg-gradient-to-t from-white to-transparent absolute bottom-0"></div>
|
|
37
29
|
)}
|
|
38
30
|
<div ref={innerRef}>{children}</div>
|
|
39
31
|
</div>
|
package/src/core/Slider.tsx
CHANGED
|
@@ -120,7 +120,7 @@ const Slider = ({ children, options }: SliderProps) => {
|
|
|
120
120
|
onTouchMove={handleTouchMove}
|
|
121
121
|
onTouchEnd={handleTouchEnd}
|
|
122
122
|
>
|
|
123
|
-
<div className="overflow-
|
|
123
|
+
<div className="overflow-hidden w-full py-40">
|
|
124
124
|
<div
|
|
125
125
|
className="flex items-center transition-transform ease-in-out duration-500"
|
|
126
126
|
style={{ transform: `translateX(-${activeIndex * 100}%)` }}
|