@ably/ui 14.0.0-dev.bc1b6fe → 14.0.0-dev.f6c8d86
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/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useState,useEffect,useRef}from"react";import Icon from"
|
|
1
|
+
import React,{useState,useEffect,useRef}from"react";import Icon from"../core/Icon.tsx";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("li",{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.f6c8d86",
|
|
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",
|
package/src/core/Accordion.tsx
CHANGED
|
@@ -7,14 +7,14 @@ type AccordionData = {
|
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
type AccordionRowProps = {
|
|
10
|
-
bottomBorder
|
|
11
|
-
topBorder
|
|
10
|
+
bottomBorder: boolean;
|
|
11
|
+
topBorder: boolean;
|
|
12
12
|
active: boolean;
|
|
13
13
|
last: boolean;
|
|
14
14
|
name: string;
|
|
15
15
|
index;
|
|
16
16
|
children: ReactNode;
|
|
17
|
-
arrowIcon
|
|
17
|
+
arrowIcon: boolean;
|
|
18
18
|
setActiveIndex: (index: number) => void;
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -105,7 +105,7 @@ const Accordion = ({
|
|
|
105
105
|
arrowIcon,
|
|
106
106
|
autoClose,
|
|
107
107
|
}: AccordionProps) => {
|
|
108
|
-
const [activeIndexes, setActiveIndexes] = useState
|
|
108
|
+
const [activeIndexes, setActiveIndexes] = useState([]);
|
|
109
109
|
|
|
110
110
|
const handleSetIndex = (index: number) => {
|
|
111
111
|
const currentIndexIsActive = activeIndexes.includes(index);
|
package/src/core/Slider.tsx
CHANGED