@orcado/yoyui 0.0.1

package/components/lib/slider/Slider.js

@@ -0,0 +1,376 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { SliderBase } from './SliderBase';
+
+export const Slider = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SliderBase.getProps(inProps, context);
+
+        const elementRef = React.useRef(null);
+        const handleIndex = React.useRef(0);
+        const sliderHandleClick = React.useRef(false);
+        const dragging = React.useRef(false);
+        const initX = React.useRef(0);
+        const initY = React.useRef(0);
+        const barWidth = React.useRef(0);
+        const barHeight = React.useRef(0);
+        const touchId = React.useRef();
+        const value = props.range ? (props.value ?? [props.min, props.max]) : (props.value ?? props.min ?? 0);
+        const horizontal = props.orientation === 'horizontal';
+        const vertical = props.orientation === 'vertical';
+
+        const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({ type: 'mousemove', listener: (event) => onDrag(event) });
+        const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({ type: 'mouseup', listener: (event) => onDragEnd(event) });
+        const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ type: 'touchmove', listener: (event) => onDrag(event) });
+        const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', listener: (event) => onDragEnd(event) });
+
+        const { ptm, cx, sx, isUnstyled } = SliderBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(SliderBase.css.styles, isUnstyled, { name: 'slider' });
+
+        const spin = (event, dir) => {
+            const val = props.range ? value[handleIndex.current] : value;
+            const step = (props.step || 1) * dir;
+
+            updateValue(event, val + step);
+            event.preventDefault();
+        };
+
+        const onDragStart = (event, index) => {
+            if (props.disabled) {
+                return;
+            }
+
+            dragging.current = true;
+            updateDomData();
+            sliderHandleClick.current = true;
+
+            if (props.range && value[0] === props.max) {
+                handleIndex.current = 0;
+            } else {
+                handleIndex.current = index;
+            }
+
+            event.preventDefault();
+        };
+
+        const onDrag = (event) => {
+            if (dragging.current) {
+                setValue(event);
+                event.preventDefault();
+            }
+        };
+
+        const onDragEnd = (event) => {
+            if (dragging.current) {
+                dragging.current = false;
+
+                const newValue = setValue(event);
+
+                props.onSlideEnd && props.onSlideEnd({ originalEvent: event, value: newValue });
+
+                touchId.current = undefined;
+
+                unbindDocumentMouseMoveListener();
+                unbindDocumentMouseUpListener();
+                unbindDocumentTouchMoveListener();
+                unbindDocumentTouchEndListener();
+            }
+        };
+
+        const onMouseDown = (event, index) => {
+            bindDocumentMouseMoveListener();
+            bindDocumentMouseUpListener();
+            onDragStart(event, index);
+        };
+
+        const onTouchStart = (event, index) => {
+            if (event.changedTouches && event.changedTouches[0]) {
+                touchId.current = event.changedTouches[0].identifier;
+            }
+
+            bindDocumentTouchMoveListener();
+            bindDocumentTouchEndListener();
+            onDragStart(event, index);
+        };
+
+        const onKeyDown = (event, index) => {
+            if (props.disabled) {
+                return;
+            }
+
+            handleIndex.current = index;
+            const key = event.key;
+
+            switch (key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    spin(event, 1);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    spin(event, -1);
+                    break;
+
+                case 'PageUp':
+                    spin(event, 10);
+                    event.preventDefault();
+                    break;
+
+                case 'PageDown':
+                    spin(event, -10);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    spin(event, -value);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    spin(event, props.max);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onBarClick = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (!sliderHandleClick.current) {
+                updateDomData();
+                const value = setValue(event);
+
+                props.onSlideEnd && props.onSlideEnd({ originalEvent: event, value });
+            }
+
+            sliderHandleClick.current = false;
+        };
+
+        const updateDomData = () => {
+            const rect = elementRef.current.getBoundingClientRect();
+
+            initX.current = rect.left + DomHandler.getWindowScrollLeft();
+            initY.current = rect.top + DomHandler.getWindowScrollTop();
+            barWidth.current = elementRef.current.offsetWidth;
+            barHeight.current = elementRef.current.offsetHeight;
+        };
+
+        const trackTouch = (event) => {
+            const _event = Array.from(event.changedTouches ?? []).find((t) => t.identifier === touchId.current) || event;
+
+            return {
+                pageX: _event.pageX,
+                pageY: _event.pageY
+            };
+        };
+
+        const setValue = (event) => {
+            let handleValue;
+
+            const { pageX, pageY } = trackTouch(event);
+
+            if (!pageX || !pageY) {
+                return;
+            }
+
+            if (horizontal) {
+                handleValue = ((pageX - initX.current) * 100) / barWidth.current;
+            } else {
+                handleValue = ((initY.current + barHeight.current - pageY) * 100) / barHeight.current;
+            }
+
+            let newValue = (props.max - props.min) * (handleValue / 100) + props.min;
+
+            if (props.step) {
+                const oldValue = props.range ? value[handleIndex.current] : value;
+                const diff = newValue - oldValue;
+
+                if (diff < 0) {
+                    newValue = oldValue + Math.ceil(newValue / props.step - oldValue / props.step) * props.step;
+                } else if (diff > 0) {
+                    newValue = oldValue + Math.floor(newValue / props.step - oldValue / props.step) * props.step;
+                }
+            } else {
+                newValue = Math.floor(newValue);
+            }
+
+            return updateValue(event, newValue);
+        };
+
+        const updateValue = (event, val) => {
+            let parsedValue = parseFloat(val.toFixed(10));
+            let newValue = parsedValue;
+
+            if (props.range) {
+                if (handleIndex.current === 0) {
+                    if (parsedValue < props.min) {
+                        parsedValue = props.min;
+                    } else if (parsedValue > props.max) {
+                        parsedValue = props.max;
+                    }
+                } else if (parsedValue > props.max) {
+                    parsedValue = props.max;
+                } else if (parsedValue < props.min) {
+                    parsedValue = props.min;
+                }
+
+                newValue = [...value];
+                newValue[handleIndex.current] = parsedValue;
+
+                if (props.onChange) {
+                    props.onChange({
+                        originalEvent: event,
+                        value: newValue
+                    });
+                }
+            } else {
+                if (parsedValue < props.min) {
+                    parsedValue = props.min;
+                } else if (parsedValue > props.max) {
+                    parsedValue = props.max;
+                }
+
+                newValue = parsedValue;
+
+                if (props.onChange) {
+                    props.onChange({
+                        originalEvent: event,
+                        value: newValue
+                    });
+                }
+            }
+
+            return newValue;
+        };
+
+        const createHandle = (leftValue, bottomValue, index) => {
+            leftValue = ObjectUtils.isEmpty(leftValue) ? null : leftValue;
+            bottomValue = ObjectUtils.isEmpty(bottomValue) ? null : bottomValue;
+
+            const style = {
+                transition: dragging.current ? 'none' : null,
+                left: leftValue != null ? leftValue + '%' : null,
+                bottom: bottomValue != null ? bottomValue + '%' : null
+            };
+
+            const handleProps = mergeProps(
+                {
+                    className: cx('handle', { index, handleIndex }),
+                    style: { ...sx('handle', { dragging, leftValue, bottomValue }), ...style },
+                    tabIndex: props.tabIndex,
+                    role: 'slider',
+                    onMouseDown: (event) => onMouseDown(event, index),
+                    onTouchStart: (event) => onTouchStart(event, index),
+                    onKeyDown: (event) => onKeyDown(event, index),
+                    'aria-valuemin': props.min,
+                    'aria-valuemax': props.max,
+                    'aria-valuenow': leftValue || bottomValue || 0,
+                    'aria-orientation': props.orientation,
+                    ...ariaProps
+                },
+                ptm('handle')
+            );
+
+            return <span {...handleProps} />;
+        };
+
+        const createRangeSlider = () => {
+            const handleValueStart = ((value[0] < props.min ? props.min : value[0] - props.min) * 100) / (props.max - props.min);
+            const handleValueEnd = ((value[1] > props.max ? props.max : value[1] - props.min) * 100) / (props.max - props.min);
+
+            const rangeStartHandle = horizontal ? createHandle(handleValueStart, null, 0) : createHandle(null, handleValueStart, 0);
+            const rangeEndHandle = horizontal ? createHandle(handleValueEnd, null, 1) : createHandle(null, handleValueEnd, 1);
+            const rangeSliderWidth = handleValueEnd > handleValueStart ? handleValueEnd - handleValueStart : handleValueStart - handleValueEnd;
+            const rangeSliderPosition = handleValueEnd > handleValueStart ? handleValueStart : handleValueEnd;
+
+            const rangeStyle = horizontal ? { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
+
+            const rangeProps = mergeProps(
+                {
+                    className: cx('range'),
+                    style: { ...sx('range'), ...rangeStyle }
+                },
+                ptm('range')
+            );
+
+            return (
+                <>
+                    <span {...rangeProps} />
+                    {rangeStartHandle}
+                    {rangeEndHandle}
+                </>
+            );
+        };
+
+        const createSingleSlider = () => {
+            let handleValue;
+
+            if (value < props.min) {
+                handleValue = props.min;
+            } else if (value > props.max) {
+                handleValue = props.max;
+            } else {
+                handleValue = ((value - props.min) * 100) / (props.max - props.min);
+            }
+
+            const rangeStyle = horizontal ? { width: handleValue + '%' } : { height: handleValue + '%' };
+            const handle = horizontal ? createHandle(handleValue, null, null) : createHandle(null, handleValue, null);
+
+            const rangeProps = mergeProps(
+                {
+                    className: cx('range'),
+                    style: { ...sx('range'), ...rangeStyle }
+                },
+                ptm('range')
+            );
+
+            return (
+                <>
+                    <span {...rangeProps} />
+                    {handle}
+                </>
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const otherProps = SliderBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+
+        const content = props.range ? createRangeSlider() : createSingleSlider();
+        const rootProps = mergeProps(
+            {
+                style: props.style,
+                className: classNames(props.className, cx('root', { vertical, horizontal })),
+                onClick: onBarClick
+            },
+            SliderBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {content}
+            </div>
+        );
+    })
+);
+
+Slider.displayName = 'Slider';

package/components/lib/slider/SliderBase.js

@@ -0,0 +1,97 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    handle: ({ index, handleIndex }) =>
+        classNames('p-slider-handle', {
+            'p-slider-handle-start': index === 0,
+            'p-slider-handle-end': index === 1,
+            'p-slider-handle-active': handleIndex.current === index
+        }),
+    range: 'p-slider-range',
+    root: ({ props, vertical, horizontal }) =>
+        classNames('p-slider p-component', {
+            'p-disabled': props.disabled,
+            'p-slider-horizontal': horizontal,
+            'p-slider-vertical': vertical
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-slider {
+        position: relative;
+    }
+    
+    .p-slider .p-slider-handle {
+        position: absolute;
+        cursor: grab;
+        touch-action: none;
+        display: block;
+        z-index: 1;
+    }
+    
+    .p-slider .p-slider-handle.p-slider-handle-active {
+        z-index: 2;
+    }
+    
+    .p-slider-range {
+        position: absolute;
+        display: block;
+    }
+    
+    .p-slider-horizontal .p-slider-range {
+        top: 0;
+        left: 0;
+        height: 100%;
+    }
+    
+    .p-slider-horizontal .p-slider-handle {
+        top: 50%;
+    }
+    
+    .p-slider-vertical {
+        height: 100px;
+    }
+    
+    .p-slider-vertical .p-slider-handle {
+        left: 50%;
+    }
+    
+    .p-slider-vertical .p-slider-range {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+}
+`;
+
+const inlineStyles = {
+    handle: { position: 'absolute' },
+    range: { position: 'absolute' }
+};
+
+export const SliderBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Slider',
+        id: null,
+        value: null,
+        min: 0,
+        max: 100,
+        orientation: 'horizontal',
+        step: null,
+        range: false,
+        style: null,
+        className: null,
+        disabled: false,
+        tabIndex: 0,
+        onChange: null,
+        onSlideEnd: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});

package/components/lib/slider/package.json

@@ -0,0 +1,7 @@
+{
+    "main": "./slider.cjs.js",
+    "module": "./slider.esm.js",
+    "unpkg": "./slider.min.js",
+    "types": "./slider.d.ts",
+    "sideEffects": false
+}

package/components/lib/slider/slider.d.ts

@@ -0,0 +1,165 @@
+/**
+ *
+ * Slider is a component to provide input with a drag handle.
+ *
+ * [Live Demo](https://www.primereact.org/slider/)
+ *
+ * @module slider
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SliderPassThroughType<T> = PassThroughType<T, SliderPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SliderPassThroughMethodOptions {
+    props: SliderProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SliderProps.pt}
+ */
+export interface SliderPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SliderPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: SliderPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the handle's DOM element.
+     */
+    handle?: SliderPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom change event.
+ * @see {@link SliderProps.onChange}
+ * @event
+ */
+interface SliderChangeEvent {
+    /**
+     * Slide event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value: number | [number, number];
+}
+
+/**
+ * Custom slide event.
+ * @see {@link SliderProps.onSlideEnd}
+ * @extends {SliderChangeEvent}
+ * @event
+ */
+interface SliderSlideEndEvent extends SliderChangeEvent {}
+
+/**
+ * Defines valid properties in Slider component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> {
+    /**
+     * Value of the component.
+     * @defaultValue 0
+     */
+    value?: number | [number, number] | undefined;
+    /**
+     * Mininum boundary value.
+     * @defaultValue 0
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     * @defaultValue 100
+     */
+    max?: number | undefined;
+    /**
+     * Orientation of the slider, valid values are horizontal and vertical.
+     * @defaultValue horizontal
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * When speficed, allows two boundary values to be picked.
+     * @defaultValue false
+     */
+    range?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke on value change via slide.
+     * @param {SliderChangeEvent} event - Custom change event
+     */
+    onChange?(event: SliderChangeEvent): void;
+    /**
+     * Callback to invoke when slide ends.
+     * @param {SliderSlideEndEvent} event - Custom slide event
+     */
+    onSlideEnd?(event: SliderSlideEndEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SliderPassThroughOptions}
+     */
+    pt?: SliderPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Slider**
+ *
+ * _Slider is a component to provide input with a drag handle._
+ *
+ * [Live Demo](https://www.primereact.org/slider/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Slider extends React.Component<SliderProps, any> {
+    /**
+     * Returns the reference of slider's container.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}