wini-web-components 2.8.2 → 2.8.5

package/src/component/pagination/pagination.module.css

@@ -0,0 +1,48 @@
+.custom-pagination {
+    width: 100%;
+    height: 100%;
+    justify-content: space-between;
+    gap: 1.6rem;
+}
+
+.custom-pagination>.row {
+    gap: 1.6rem;
+    height: 100%;
+}
+
+.items-per-page-container {
+    gap: 8px;
+    height: 100%;
+}
+
+.pagination {
+    gap: 0.8rem;
+}
+
+.pagination>li {
+    width: 2.4rem;
+    height: 2.4rem;
+    color: #161C2499;
+    justify-content: center;
+    border-radius: 0.4rem;
+    font-weight: 600;
+}
+
+.pagination>li * {
+    color: inherit;
+    font: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    text-align: inherit;
+    letter-spacing: inherit;
+}
+
+.pagination>li.active {
+    background-color: var(--infor-background);
+}
+
+.pagination>li.active {
+    color: var(--infor-main-color);
+}

package/src/component/pagination/pagination.tsx

@@ -0,0 +1,88 @@
+import { CSSProperties, useEffect, useRef } from "react";
+import ReactPaginate from "react-paginate";
+import styles from './pagination.module.css';
+import { Select1 } from "../select1/select1";
+import { Text } from "../text/text";
+import { TextField } from "../text-field/text-field";
+import { Winicon } from "../wini-icon/winicon";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+    id?: string,
+    currentPage: number,
+    itemPerPage: number,
+    totalItem: number,
+    onChangePage: Function,
+    hideGoToPage?: boolean,
+    hidePageSize?: boolean,
+    style: CSSProperties,
+}
+
+export function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize = false, hideGoToPage = false, style }: Props) {
+    const goToPageRef = useRef<TextField>(null)
+    const { t } = useTranslation()
+
+    useEffect(() => {
+        if (goToPageRef.current) {
+            const _inputPage = goToPageRef.current.getInput()
+            if (_inputPage) _inputPage.value = currentPage.toString()
+        }
+    }, [currentPage])
+
+    if (currentPage > 1 && (totalItem === 0 || (Math.floor(totalItem / itemPerPage) + (totalItem % itemPerPage === 0 ? 0 : 1)) < currentPage)) {
+        onChangePage(1, itemPerPage);
+        return <div></div>;
+    } else if (totalItem > 0) {
+        return <div id={id} className={`${styles['custom-pagination']} row`} style={style}>
+            {hidePageSize ? null : <div className="row" style={{ gap: '0.8rem' }}>
+                <Select1
+                    readOnly
+                    placeholder={itemPerPage.toString()}
+                    options={[10, 20, 50, 80, 100, 150, 200].map((item, _) => { return { id: item, name: item } })}
+                    style={{ borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }}
+                    onChange={(ev: any) => {
+                        onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
+                    }}
+                />
+                <Text className="body-3">{t("ofItems", { totalItem: totalItem })}</Text>
+            </div>}
+            <div style={{ flex: 1 }} />
+            <ReactPaginate
+                onPageChange={(ev) => {
+                    onChangePage(ev.selected + 1, itemPerPage);
+                }}
+                forcePage={currentPage - 1}
+                breakClassName="row button-text-3"
+                breakLabel="..."
+                pageCount={Math.ceil(totalItem / itemPerPage)}
+                previousClassName="row"
+                previousLabel={<Winicon src={"fill/arrows/left-arrow"} size={"1.4rem"} />}
+                nextClassName="row"
+                nextLabel={<Winicon src={"fill/arrows/right-arrow"} size={"1.4rem"} />}
+                containerClassName={`${styles['pagination']} row`}
+                pageClassName="row button-text-3"
+                activeClassName={styles['active']}
+                hrefBuilder={(pageIndex: number) =>
+                    pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? `/page/${pageIndex}` : '#'
+                }
+                renderOnZeroPageCount={null}
+            />
+            {hideGoToPage ? null : <>
+                <div style={{ height: '1.6rem', backgroundColor: "var(--neutral-bolder-border-color)", width: 1 }} />
+                <Text className="label-3">{t("go")} {t("page").toLowerCase()}</Text>
+                <TextField
+                    ref={goToPageRef as any}
+                    style={{ width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }}
+                    className="body-3"
+                    type="number"
+                    onBlur={(ev) => {
+                        const _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined
+                        if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
+                            onChangePage(_tmp, itemPerPage)
+                        } else ev.target.value = ""
+                    }}
+                />
+            </>}
+        </div>
+    } else return <div id={id} />
+}

package/src/component/popup/popup.css

@@ -0,0 +1,136 @@
+.popup-overlay {
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100dvw !important;
+    height: 100dvh !important;
+    background-color: #000000B2;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    z-index: 99;
+}
+
+.popup-container {
+    position: relative;
+    background-color: var(--neutral-absolute-background-color);
+    border-radius: 0.8rem;
+    border: var(--neutral-main-border);
+    overflow: visible;
+    max-width: 86%;
+    max-height: 80%;
+}
+
+.popup-header {
+    align-items: center;
+    justify-content: start;
+    padding: 1.6rem 2.4rem;
+    border-bottom: var(--neutral-main-border);
+}
+
+.popup-footer {
+    column-gap: 0.8rem;
+    justify-content: end;
+    padding: 1.2rem 2.4rem;
+    border-top: var(--neutral-main-border);
+}
+
+.popup-container>.popup-close-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
+    width: 3.2rem;
+    height: 3.2rem;
+    padding: 0.6rem;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--neutral-absolute-background-color);
+    box-shadow: 0px 15px 50px 0px rgba(27, 32, 50, .1);
+}
+
+.popup-overlay.hidden-overlay {
+    background-color: transparent;
+    width: fit-content !important;
+    height: fit-content !important;
+}
+
+.popup-overlay.hidden-overlay>* {
+    position: fixed !important;
+    z-index: 99;
+    border-radius: 0.8rem;
+    background-color: var(--neutral-absolute-background-color);
+}
+
+.popup-overlay>* {
+    transition: width 0.8s ease-in-out, max-width 0.8s ease-in-out, height 0.8s ease-in-out, max-height 0.8s ease-in-out, border-radius 0.8s ease-in-out;
+    box-shadow: 2px 0px 16px 0px hsla(0, 0%, 0%, 0.04);
+}
+
+.popup-overlay.hidden-overlay>.popup-container {
+    position: absolute;
+    width: max-content;
+    height: max-content;
+    background-color: transparent;
+}
+
+.popup-overlay.hidden-overlay>.popup-container .popup-close-btn {
+    display: none !important;
+}
+
+@keyframes open-drawer-right-to-left {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.right-drawer {
+    top: 0;
+    right: 0;
+    height: 100dvh;
+    animation: open-drawer-right-to-left 0.6s ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+@keyframes open-drawer-left-to-right {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.left-drawer {
+    top: 0;
+    left: 0;
+    height: 100dvh;
+    animation: open-drawer-left-to-right 0.6s ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+@keyframes show-dropdown-popup {
+    0% {
+        opacity: 0;
+        height: 0;
+        width: 0;
+        transform: scale(0);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.dropdown-popup {
+    animation: show-dropdown-popup 0.4s ease-in-out;
+}

package/src/component/popup/popup.tsx

@@ -0,0 +1,125 @@
+import React, { CSSProperties, ReactNode, useEffect, useRef } from 'react'
+import './popup.css'
+
+interface PopupState {
+    readonly open?: boolean,
+    heading?: ReactNode,
+    body?: ReactNode,
+    content?: ReactNode,
+    footer?: ReactNode,
+    clickOverlayClosePopup?: boolean,
+    style?: CSSProperties,
+    className?: string,
+    hideButtonClose?: boolean,
+}
+
+export const showPopup = (props: {
+    ref: React.RefObject<Popup | undefined>,
+    heading?: ReactNode,
+    content?: ReactNode,
+    body?: ReactNode,
+    footer?: ReactNode,
+    clickOverlayClosePopup?: boolean,
+    style?: CSSProperties,
+    className?: string,
+    hideButtonClose?: boolean
+}) => {
+    props.ref?.current?.onOpen({
+        heading: props.heading,
+        content: props.content,
+        body: props.body,
+        footer: props.footer,
+        clickOverlayClosePopup: props.clickOverlayClosePopup,
+        style: props.style,
+        className: props.className,
+        hideButtonClose: props.hideButtonClose
+    })
+}
+
+export const closePopup = (ref: React.RefObject<Popup>) => {
+    ref.current.onClose()
+}
+
+export class Popup extends React.Component<Object, PopupState> {
+    constructor(props: Object | Readonly<Object>) {
+        super(props);
+    }
+    state: Readonly<PopupState> = {
+        open: false,
+    }
+
+    onOpen(data: PopupState) {
+        this.setState({ open: true, ...data })
+    }
+
+    onClose() {
+        this.setState({ open: false })
+    }
+
+    render() {
+        return (
+            <>
+                {this.state.open &&
+                    <PopupOverlay className={this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''} onClose={this.state.clickOverlayClosePopup ? () => { this.onClose() } : undefined}>
+                        {this.state.content ?? <div className={`popup-container col ${this.state.className ?? ""}`} onClick={e => e.stopPropagation()} style={this.state.style} >
+                            {this.state.heading}
+                            {this.state.body}
+                            {this.state.footer}
+                            {this.state.hideButtonClose ? null : <button type='button' onClick={() => this.onClose()} className='popup-close-btn row' >
+                                <svg width='100%' height='100%' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' style={{ width: '2rem', height: '2rem' }} >
+                                    <path fillRule='evenodd' clipRule='evenodd' d='M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z' fill='#00204D' fillOpacity={0.6} />
+                                </svg>
+                            </button>}
+                        </div>}
+                    </PopupOverlay>}
+            </>
+        )
+    }
+}
+
+export function PopupOverlay({ children, onClose, className, style, onOpen }: { children?: ReactNode, className?: string, onClose?: (ev: MouseEvent) => void, style?: CSSProperties, onOpen?: (ev: HTMLDivElement) => void }) {
+    const overlayRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (overlayRef.current && onClose) {
+            const onClickDropDown = (ev: any) => {
+                if (ev.target === overlayRef.current || !overlayRef.current!.contains(ev.target)) onClose(ev)
+            }
+            window.document.body.addEventListener("mousedown", onClickDropDown)
+            return () => {
+                window.document.body.removeEventListener("mousedown", onClickDropDown)
+            }
+        }
+    }, [overlayRef.current])
+
+    useEffect(() => {
+        if (overlayRef.current && onOpen) onOpen(overlayRef.current)
+    }, [overlayRef.current, onOpen])
+
+    useEffect(() => {
+        if (overlayRef.current && overlayRef.current.firstChild) {
+            const popupContent = overlayRef.current.firstChild as HTMLElement
+            const rect = popupContent.getBoundingClientRect()
+            if (rect.x < 0) {
+                popupContent.style.left = "0px"
+                popupContent.style.right = "unset"
+            } else if (rect.right > document.body.offsetWidth) {
+                popupContent.style.right = "0px"
+                popupContent.style.left = "unset"
+            }
+            if (rect.y < 0) {
+                popupContent.style.top = "0px"
+                popupContent.style.bottom = "unset"
+            } else if (rect.bottom > document.body.offsetHeight) {
+                popupContent.style.bottom = "0px"
+                popupContent.style.top = "unset"
+            }
+        }
+    }, [overlayRef])
+
+    return <div
+        ref={overlayRef}
+        className={`popup-overlay ${className ?? ""}`}
+        style={style}
+    >{children}</div>
+}

package/src/component/progress-bar/progress-bar.module.css

@@ -0,0 +1,42 @@
+.progress-bar-container {
+    row-gap: 1.2rem;
+    width: 38.2rem;
+}
+
+.progress-bar-container>.progress-bar-title {
+    justify-content: space-between;
+    width: 100%;
+}
+
+.progress-bar-container>.progress-bar-tile {
+    column-gap: 1.6rem;
+    width: 100%;
+    height: 2.2rem;
+}
+
+.progress-bar-container>.progress-bar-tile>.progress-bar-value {
+    border-radius: 10rem;
+    width: 100%;
+    flex: 1;
+    height: 0.6rem;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--full-color);
+}
+
+.progress-bar-container>.progress-bar-tile>.progress-bar-value::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--percent);
+    height: 0.6rem;
+    border-radius: 10rem;
+    background-color: var(--percent-color);
+    transition: width ease-in-out 1s;
+}
+
+.status-icon>div {
+    width: 1.6rem !important;
+    height: 1.6rem !important;
+}

package/src/component/progress-bar/progress-bar.tsx

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactNode, useState } from 'react'
+import styles from './progress-bar.module.css'
+import React from 'react'
+import { ComponentStatus, getStatusIcon, Winicon } from '../../index'
+
+export function ProgressBar({ id, status = ComponentStatus.INFOR, percent = 100, titleText, title, hideTitle = false, progressBarOnly = false, fullColor = 'var(--neutral-main-background-color)', percentColor = 'var(--primary-main-color)', style, progressBarStyle }: {
+    id?: string,
+    percent: number,
+    titleText?: string,
+    title?: ReactNode,
+    hideTitle: boolean,
+    progressBarOnly: boolean,
+    fullColor: string,
+    percentColor: string,
+    style?: CSSProperties,
+    status: ComponentStatus,
+    progressBarStyle?: CSSProperties
+}) {
+    const [openDetails, setOpenDetails] = useState(true)
+
+    return <div id={id} className={`col ${styles["progress-bar-container"]}`} style={style ? { padding: progressBarOnly ? '0' : '1.6rem 2.4rem', ...style } : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }}>
+        {(hideTitle || progressBarOnly) ? null : (title ?? <div className={`row ${styles["progress-bar-title"]}`}>
+            <div className="heading-8">{titleText}</div>
+            <Winicon src={openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow"} onClick={() => { setOpenDetails(!openDetails) }} />
+        </div>)}
+        {openDetails ? <div className={`row ${styles["progress-bar-tile"]}`} >
+            <div className={styles["progress-bar-value"]} style={{ '--percent-color': percentColor, '--full-color': fullColor, '--percent': `${percent}%`, ...(progressBarStyle ?? {}) } as CSSProperties}></div>
+            {progressBarOnly || status === ComponentStatus.INFOR ? null : <div className={`${styles["status-icon"]}`}>{getStatusIcon(status)}</div>}
+            {progressBarOnly ? null : <div className='label-4'>{percent}/100</div>}
+        </div> : null}
+
+    </div>
+}

package/src/component/progress-circle/progress-circle.tsx

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react'
+import './progress-circle.css'
+import React from 'react'
+
+export function ProgressCircle(props: {
+    id?: string,
+    /** value:  0 - 100 (%)*/
+    percent?: number,
+    style?: CSSProperties,
+    fillColor?: string,
+    percentColor?: string,
+    strokeWidth?: number,
+    strokeColor?: string,
+    textStyle?: CSSProperties
+}) {
+    const radius = 30 - (props.strokeWidth ?? 4)
+    const diameter = Math.PI * 2 * radius;
+    const strokeOffset = (1 - ((props.percent ?? 0) / 100)) * diameter;
+    return <svg id={props.id} width="100%" height="100%" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '6rem', height: '6rem', ...(props.style ?? {}) }} >
+        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: "none", stroke: props.strokeColor ?? "var(--neutral-main-background-color)", strokeWidth: props.strokeWidth ?? '4px', }} />
+        <path d={`M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`} style={{ fill: props.fillColor ?? "none", stroke: props.percentColor ?? "var(--primary-main-color)", strokeWidth: props.strokeWidth ?? '4px', strokeLinecap: 'round', strokeDasharray: `${diameter}px ${diameter}px`, strokeDashoffset: `${strokeOffset}px` }} />
+        <text x="50%" y="50%" dy=".3em" textAnchor="middle" fontSize={"1.6rem"} fontWeight={'600'} style={{ fill: "var(neutral-text-title-color)", ...(props.textStyle ?? {}) }}>{props.percent ?? 0}%</text>
+    </svg>
+}
+

package/src/component/radio-button/radio-button.module.css

@@ -0,0 +1,51 @@
+.radio-btn-container {
+    height: max(var(--size), 14px);
+    width: max(var(--size), 14px);
+    aspect-ratio: 1 / 1 !important;
+    border-radius: 50%;
+    box-sizing: border-box;
+    border: 2px solid var(--off-color);
+    background-color: transparent !important;
+    transition: border-color ease-in-out 0.5s;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.radio-btn-container>input {
+    display: none;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.radio-btn-container>.checkmark {
+    height: inherit;
+    width: inherit;
+    scale: 0.5;
+    transform-origin: center center;
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility, opacity ease-in-out 0.5s;
+}
+
+.radio-btn-container>input:checked~.checkmark {
+    visibility: visible;
+    opacity: 1;
+    background-color: var(--active-color);
+}
+
+.radio-btn-container:has(> input:checked) {
+    border-color: var(--active-color) !important;
+}
+
+.radio-btn-container:has(input:disabled) {
+    pointer-events: none !important;
+    border-color: var(--off-color) !important;
+    background-color: var(--neutral-disable-background-color) !important;
+}
+
+.radio-btn-container>input:disabled~.checkmark {
+    display: block !important;
+    background-color: var(--neutral-text-disabled-color);
+}

package/src/component/radio-button/radio-button.tsx

@@ -0,0 +1,60 @@
+import React, { CSSProperties } from 'react';
+import styles from './radio-button.module.css';
+import { UseFormRegister } from 'react-hook-form';
+
+interface RadioButtonProps {
+    id?: string,
+    onChange?: React.ChangeEventHandler<HTMLInputElement>,
+    value?: string | number | readonly string[],
+    disabled?: boolean,
+    style?: CSSProperties,
+    size?: number | string,
+    defaultChecked?: boolean,
+    name?: string,
+    activeColor?: string,
+    offColor?: string,
+    className?: string,
+    register?: UseFormRegister<{}>,
+}
+
+
+export class RadioButton extends React.Component<RadioButtonProps> {
+    render(): React.ReactNode {
+        let convertStyle: CSSProperties = {
+            '--off-color': this.props.offColor ?? 'var(--neutral-bolder-border-color)',
+            '--active-color': this.props.activeColor ?? 'var(--primary-main-color)',
+            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '20px'
+        } as CSSProperties
+        if (this.props.style) {
+            delete this.props.style.width
+            delete this.props.style.minWidth
+            delete this.props.style.maxWidth
+            delete this.props.style.height
+            delete this.props.style.minHeight
+            delete this.props.style.maxHeight
+            convertStyle = {
+                ...this.props.style,
+                ...convertStyle,
+            }
+        }
+
+        return <label id={this.props.id} className={`row ${styles['radio-btn-container']} ${this.props.className ?? ''}`} style={convertStyle} >
+            {this.props.register ?
+                <input
+                    {...this.props.register}
+                    type="radio"
+                    value={this.props.value}
+                    disabled={this.props.disabled}
+                /> :
+                <input type="radio"
+                    name={this.props.name}
+                    value={this.props.value}
+                    defaultChecked={this.props.defaultChecked}
+                    disabled={this.props.disabled}
+                    onChange={this.props.onChange}
+                />
+            }
+            <span className={styles['checkmark']}></span>
+        </label>
+    }
+}

package/src/component/rating/rating.module.css

@@ -0,0 +1,11 @@
+.rating-container {
+    gap: 0.8rem;
+}
+
+.rating-container svg {
+    cursor: pointer;
+}
+
+.rating-container svg > * {
+    pointer-events: none !important;
+}