wini-web-components 0.3.0 → 0.4.0

package/src/component/input-multi-select/input-multi-select.tsx

@@ -1,261 +0,0 @@
-import { faChevronDown, faChevronUp, faClose, faSearch } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React, { CSSProperties } from 'react'
-import ReactDOM from 'react-dom'
-import './input-multi-select.css'
-import { Checkbox, Text } from '../export-component'
-
-interface SelectMultipleProps {
-    value?: Array<string | number>,
-    options: Required<Array<{ id: string | number, name: string }>>,
-    onChange?: (value?: Array<string | number>) => void,
-    placeholder?: string,
-    disabled: boolean,
-    className?: string,
-    helperText?: string,
-    helperTextColor?: string,
-    style?: CSSProperties,
-    handleSearch?: (e: string) => Promise<Array<{ id: string | number, name: string }>>
-}
-
-interface SelectMultipleState {
-    value: Array<string | number>,
-    offset: DOMRect,
-    isOpen: boolean,
-    onSelect: any,
-    search?: Array<{ id: string | number, name: string }>,
-    style?: Object
-};
-
-export class SelectMultiple extends React.Component<SelectMultipleProps, SelectMultipleState> {
-    constructor(props: SelectMultipleProps) {
-        super(props)
-        this.state = {
-            value: props.value ?? [],
-            offset: {
-                x: 0,
-                y: 0,
-                height: 0,
-                width: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                top: 0,
-                toJSON: function () {
-                    throw new Error('Function not implemented.')
-                }
-            },
-            isOpen: false,
-            onSelect: null,
-        }
-        this.onCheck = this.onCheck.bind(this)
-        this.search = this.search.bind(this);
-    }
-
-    private onCheck(item: { id: string | number, name: string }) {
-        let newValue: Array<string | number> = []
-        if (this.state.value.includes(item.id)) {
-            newValue = this.state.value.filter(vl => vl !== item.id)
-        } else {
-            newValue = [...this.state.value, item.id]
-        }
-        this.setState({
-            ...this.state,
-            value: newValue
-        })
-        if (this.props.onChange) this.props.onChange(newValue)
-    }
-
-    private async search(ev: React.ChangeEvent<HTMLInputElement>) {
-        if (ev.target.value.trim().length) {
-            if (this.props?.handleSearch) {
-                const res = await this.props.handleSearch(ev.target.value.trim())
-                this.setState({
-                    ...this.state,
-                    search: res
-                })
-            } else {
-                this.setState({
-                    ...this.state,
-                    search: this.props.options.filter(e => e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()))
-                })
-            }
-        } else {
-            this.setState({
-                ...this.state,
-                search: undefined
-            })
-        }
-    }
-
-    componentDidUpdate(prevProps: SelectMultipleProps, prevState: SelectMultipleState) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({
-                ...this.state,
-                value: this.props.value ?? []
-            })
-        }
-        if (prevState.isOpen !== this.state.isOpen && this.state.isOpen) {
-            const thisPopupRect = document.body.querySelector('.select-multi-popup')?.getBoundingClientRect()
-            if (thisPopupRect) {
-                let style: { top?: string, left?: string, right?: string, bottom?: string, width?: string, height?: string } | undefined;
-                if (thisPopupRect.right > document.body.offsetWidth) {
-                    style = {
-                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                        width: `${this.state.offset.width}px`,
-                        right: document.body.offsetWidth - this.state.offset.right + 'px'
-                    }
-                }
-                if (thisPopupRect.bottom - 12 > document.body.offsetHeight) {
-                    style = style ? {
-                        ...style,
-                        top: undefined,
-                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
-                    } : {
-                        left: this.state.offset.x + 'px',
-                        width: `${this.state.offset.width}px`,
-                        bottom: document.body.offsetHeight - this.state.offset.bottom + 'px'
-                    }
-                }
-                if (style) this.setState({
-                    ...this.state,
-                    style: style
-                })
-            }
-        }
-    }
-
-    render() {
-        return <div
-            className={`select-multi-container row ${this.props.disabled ? 'disabled' : ''} ${this.props.helperText?.length && 'helper-text'}`}
-            helper-text={this.props.helperText}
-            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
-            onClick={ev => {
-                if (!this.state.isOpen) {
-                    this.setState({
-                        ...this.state,
-                        isOpen: true,
-                        style: undefined,
-                        offset: ((ev.target as HTMLElement).closest('.select-multi-container') ?? (ev.target as HTMLElement)).getBoundingClientRect(),
-                    })
-                }
-            }}
-        >
-            <div className='row' style={{ overflow: 'auto hidden', flex: 1, width: '100%', gap: '0.8rem' }}>
-                {this.state.value?.length ? (
-                    this.state.value.map(item => {
-                        const optionItem = this.props.options.find(e => e.id === item)
-                        return <div
-                            key={item}
-                            className='selected-item-value row'
-                            onClick={(ev) => {
-                                ev.stopPropagation()
-                                let newValue = this.state.value.filter(vl => vl !== item)
-                                this.setState({
-                                    ...this.state,
-                                    value: newValue,
-                                    isOpen: true,
-                                    style: undefined,
-                                    offset: ((ev.target as HTMLElement).closest('.select-multi-container') ?? (ev.target as HTMLElement)).getBoundingClientRect(),
-                                })
-                                if (this.props.onChange) this.props.onChange(newValue)
-                            }}
-                        >
-                            <div className='selected-value-title'>{optionItem?.name}</div>
-                            <FontAwesomeIcon icon={faClose} style={{ color: '#161D24E5', fontSize: '1.2rem' }} />
-                        </div>
-                    })
-                ) : (
-                    <div className='select-multi-placeholder'>
-                        {this.props.placeholder}
-                    </div>
-                )}
-            </div>
-            <FontAwesomeIcon
-                icon={this.state.isOpen ? faChevronUp : faChevronDown}
-                style={{ fontSize: '1.2rem', color: '#888' }}
-            />
-            {this.state.isOpen &&
-                ReactDOM.createPortal(
-                    <div
-                        className='select-multi-popup col'
-                        style={this.state.style ?? {
-                            top: this.state.offset.y + this.state.offset.height + 2 + 'px',
-                            left: this.state.offset.x + 'px',
-                            width: this.state.offset.width,
-                        }}
-                        onMouseOver={ev => {
-                            this.setState({
-                                ...this.state,
-                                onSelect: ev.target
-                            })
-                        }}
-                        onMouseOut={() =>
-                            this.setState({
-                                ...this.state,
-                                onSelect: null
-                            })
-                        }
-                    >
-                        <div className='row header-search'>
-                            <input
-                                autoFocus={true}
-                                placeholder={'Tìm kiếm'}
-                                onChange={this.search}
-                                onBlur={ev => {
-                                    if (this.state.onSelect) {
-                                        ev.target.focus()
-                                    } else {
-                                        this.setState({
-                                            ...this.state,
-                                            isOpen: false,
-                                            onSelect: null
-                                        })
-                                    }
-                                }}
-                            />
-                            <FontAwesomeIcon icon={faSearch} style={{ fontSize: '1.2rem', color: '#161D24D9' }} />
-                        </div>
-                        <div style={{ padding: '1.2rem 1.6rem', width: '100%', borderTop: '1px solid #161D2414', borderBottom: '1px solid #161D2414' }}>
-                            {(() => {
-                                const _list = (this.state.search ?? this.props.options ?? [])
-                                const isSelectedAll = _list.every(item => this.state.value.some(vl => vl === item.id))
-                                return <Text onClick={() => {
-                                    let newValue: Array<string | number> = []
-                                    if (_list.length) {
-                                        if (isSelectedAll) {
-                                            newValue = this.state.value.filter(vl => _list.every(item => vl !== item.id))
-                                        } else {
-                                            newValue = [...this.state.value, ..._list.filter(item => this.state.value.every(vl => vl !== item.id)).map(e => e.id)]
-                                        }
-                                    }
-                                    this.setState({ ...this.state, value: newValue })
-                                    if (this.props.onChange) this.props.onChange(newValue)
-                                }} className='button-text-3' style={{ color: _list.length ? 'var(--primary-color)' : '#00204D99', }}>{_list.length && isSelectedAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả'}</Text>
-                            })()}
-                        </div>
-                        <div className='col select-body'>
-                            {(this.state.search ?? this.props.options ?? []).map(
-                                item => (
-                                    <div key={item.id} className='select-tile row'>
-                                        <Checkbox
-                                            value={this.state.value.some(vl => vl === item.id)}
-                                            onChange={() => { this.onCheck(item) }}
-                                            size={'2rem'}
-                                        />
-                                        <div className='label-3'>
-                                            {item.name}
-                                        </div>
-                                    </div>
-                                )
-                            )}
-                            {(this.state.search?.length === 0 || this.props.options?.length === 0) && (
-                                <div className='no-results-found'>No result found</div>
-                            )}
-                        </div>
-                    </div>,
-                    document.body
-                )}
-        </div>
-    }
-}

package/src/component/pagination/pagination.css

@@ -1,69 +0,0 @@
-.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 {
-    display: flex;
-    flex-direction: row !important;
-    height: 4rem !important;
-    background-color: white;
-    overflow: hidden !important;
-    border: 1px solid rgba(88, 88, 91, 0.24);
-    box-sizing: border-box;
-    border-radius: 8px;
-    padding: 0;
-    margin: 0;
-    order: 2;
-}
-
-.pagination>* {
-    width: 3.4rem !important;
-    height: 100% !important;
-    background-color: white;
-    box-sizing: border-box;
-    padding: 0;
-    border: 0;
-    color: #1C2430;
-    font: 400 1.4rem/normal 'Inter' !important;
-    white-space: nowrap;
-    list-style: none;
-
-}
-
-.pagination>*>* {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.pagination>*.active {
-    background-color: var(--infor-color) !important;
-}
-
-.pagination>*.active>* {
-    color: white;
-}
-
-.pagination>*:not(:last-child) {
-    border-right: 1px solid rgba(88, 88, 91, 0.24);
-}
-
-.pagination>:first-child,
-.pagination>:last-child {
-    width: 8rem !important;
-}

package/src/component/pagination/pagination.tsx

@@ -1,65 +0,0 @@
-import React, { CSSProperties } from "react";
-import ReactPaginate from "react-paginate";
-import './pagination.css';
-import { Select1, Text } from "../export-component";
-
-export function Pagination({ currentPage, itemPerPage, totalItem, onChangePage, hiddenPageSize = false, hiddenTotal = false, style }: { currentPage: number, itemPerPage: number, totalItem: number, onChangePage: Function, hiddenPageSize: boolean, hiddenTotal: boolean, style: CSSProperties }) {
-    if (currentPage > 1 && (totalItem === 0 || (Math.floor(totalItem / itemPerPage) + (totalItem % itemPerPage === 0 ? 0 : 1)) < currentPage)) {
-        onChangePage(1, itemPerPage);
-        return <div></div>;
-    }
-    if (totalItem > 0) {
-        return (
-            <div className="row custom-pagination" style={style}>
-                {hiddenTotal ? null : <Text className="regular2">
-                    Hiển thị {itemPerPage * (currentPage - 1) + 1}-{((itemPerPage * (currentPage - 1) + itemPerPage) > totalItem) ? totalItem : (itemPerPage * (currentPage - 1) + itemPerPage)} trong tổng số {totalItem} bản ghi
-                </Text>}
-                <div className="row ">
-                    {hiddenPageSize ? null : <div className="row items-per-page-container" >
-                        <Text className="regular2">Items/page</Text>
-                        <div className="row">
-                            <Select1
-                                searchPlaceholder={'Search'}
-                                style={{ width: '8.6rem' }}
-                                placeholder={itemPerPage.toString()}
-                                options={[10, 20, 50, 100, 200].map((item, _) => { return { id: item, name: item } })}
-                                onChange={(ev: any) => {
-                                    onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
-                                }}
-                            />
-                        </div>
-                    </div>}
-                    <ReactPaginate
-                        breakLabel="..."
-                        nextLabel="Next"
-                        onPageChange={(ev) => {
-                            onChangePage(ev.selected + 1, itemPerPage);
-                        }}
-                        forcePage={currentPage - 1}
-                        // initialPage={currentPage - 1}
-                        pageCount={Math.ceil(totalItem / itemPerPage)}
-                        previousLabel="Previous"
-                        containerClassName="pagination row"
-                        pageClassName=""
-                        pageLinkClassName="nav-link"
-                        previousClassName="nav-link"
-                        previousLinkClassName="nav-link"
-                        nextClassName="nav-link regular2"
-                        nextLinkClassName="nav-link"
-                        activeClassName="active"
-                        hrefBuilder={(pageIndex: number) =>
-                            pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? `/page/${pageIndex}` : '#'
-                        }
-                        renderOnZeroPageCount={null}
-                    />
-                </div>
-            </div>
-        )
-    } else {
-        return (
-            <div >
-
-            </div>
-        )
-    }
-}

package/src/component/popup/popup.css

@@ -1,90 +0,0 @@
-.popup-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10;
-}
-
-.popup-container {
-    position: relative;
-    background-color: #ffffff;
-    border-radius: 0.8rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-    overflow: visible;
-    max-width: 86%;
-    max-height: 80%;
-}
-
-.popup-container .view-form {
-    border-radius: 0;
-}
-
-.popup-header {
-    align-items: center;
-    justify-content: start;
-    padding: 1.6rem 2.4rem;
-    border-bottom: 1px solid rgba(0, 53, 128, 0.08);
-}
-
-.popup-footer {
-    column-gap: 0.8rem;
-    justify-content: end;
-    padding: 1.2rem 2.4rem;
-    box-shadow: 0 -1px 6px 0 #2D32390F;
-}
-
-.popup-footer>.popup-action {
-    height: 4rem;
-    padding: 0 1.6rem;
-    border-radius: 0.8rem;
-    background-color: #f2f5f8;
-    align-items: center;
-}
-
-.popup-footer>.popup-submit {
-    color: #ffffff;
-    background-color: var(--infor-color);
-}
-
-.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: #ffffff;
-    box-shadow: 0px 1px 6px 0px #2d32390f;
-}
-
-.popup-body {
-    width: 100%;
-    max-height: 100%;
-    flex: 1;
-    overflow: auto;
-}
-
-.popup-overlay.hidden-overlay {
-    background-color: rgba(0, 0, 0, 0.01);
-}
-
-.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;
-}

package/src/component/popup/popup.tsx

@@ -1,105 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react'
-import ReactDOM from 'react-dom'
-import './popup.css'
-
-interface PopupState {
-    readonly open?: boolean,
-    heading?: ReactNode,
-    content?: ReactNode,
-    footer?: ReactNode,
-    clickOverlayClosePopup?: boolean,
-    style?: CSSProperties,
-    hideButtonClose?: boolean,
-}
-
-export const showPopup = ({ ref, heading, content, footer, clickOverlayClosePopup, style, hideButtonClose }: {
-    ref: React.MutableRefObject<Popup | undefined>,
-    heading?: ReactNode,
-    content?: ReactNode,
-    footer?: ReactNode,
-    clickOverlayClosePopup?: boolean,
-    style?: CSSProperties,
-    hideButtonClose?: boolean
-}) => {
-    ref?.current?.onOpen({
-        heading: heading,
-        content: content,
-        footer: footer,
-        clickOverlayClosePopup: clickOverlayClosePopup,
-        style: style,
-        hideButtonClose: hideButtonClose
-    })
-}
-
-export const closePopup = (ref: React.MutableRefObject<Popup>) => {
-    ref.current.onClose()
-}
-
-export class Popup extends React.Component<Object, PopupState> {
-    private ref: React.RefObject<HTMLDivElement>;
-    constructor(props: Object | Readonly<Object>) {
-        super(props);
-        this.ref = React.createRef();
-    }
-    state: Readonly<PopupState> = {
-        open: false,
-    }
-
-    onOpen(data: PopupState) {
-        this.setState({ open: true, ...data })
-    }
-
-    onClose() {
-        this.setState({ open: false })
-    }
-
-    componentDidUpdate(prevProps: Readonly<Object>, prevState: Readonly<PopupState>) {
-        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
-            const thisPopupRect = this.ref.current?.getBoundingClientRect()
-            if (thisPopupRect) {
-                let style: CSSProperties | undefined;
-                if (thisPopupRect.right > document.body.offsetWidth) {
-                    style = { ...this.state.style, right: '0.4rem' }
-                    delete style.left
-                }
-                if (thisPopupRect.bottom > document.body.offsetHeight) {
-                    style = style ? {
-                        ...style,
-                        bottom: '0.4rem'
-                    } : {
-                        ...this.state.style,
-                        bottom: '0.4rem'
-                    }
-                    delete style.top
-                }
-                if (style) this.setState({ ...this.state, style: style })
-            }
-        }
-    }
-
-    render() {
-        return (
-            <>
-                {this.state.open &&
-                    ReactDOM.createPortal(
-                        <div className={`popup-overlay ${this.state.clickOverlayClosePopup ? 'hidden-overlay' : ''}`} onClick={this.state.clickOverlayClosePopup ? (ev) => {
-                            if ((ev.target as HTMLElement).classList.contains('popup-overlay'))
-                                this.onClose()
-                        } : undefined}>
-                            <div ref={this.ref} className='popup-container col' onClick={e => e.stopPropagation()} style={this.state.style} >
-                                {this.state.heading}
-                                {this.state.content}
-                                {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>
-                        </div>,
-                        document.body
-                    )}
-            </>
-        )
-    }
-}

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

@@ -1,47 +0,0 @@
-.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-title>.heading-text {
-    font: 600 1.4rem/2.2rem 'Inter';
-    color: #00204D;
-}
-
-.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;
-}
-
-.progress-bar-container>.progress-bar-tile>.text-value {
-    font: 400 1.4rem/2.2rem 'Inter';
-    color: #00204DE5;
-}

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

@@ -1,34 +0,0 @@
-import { CSSProperties, ReactNode, useState } from 'react'
-import './progress-bar.css'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { ComponentStatus, getStatusIcon } from '../export-component'
-
-export function ProgressBar({ status = ComponentStatus.INFOR, percent = 100, titleText, title, hideTitle = false, progressBarOnly = false, fullColor = 'var(--background)', percentColor = 'var(--infor-color)', style, progressBarStyle }: {
-    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 className="progress-bar-container col" style={style ? { padding: progressBarOnly ? '0' : '1.6rem 2.4rem', ...style } : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }}>
-        {(hideTitle || progressBarOnly) ? null : (title ?? <div className="progress-bar-title row">
-            <div className="heading-text">{titleText}</div>
-            <button type="button" className="suffix-action" onClick={() => { setOpenDetails(!openDetails) }}><FontAwesomeIcon icon={openDetails ? faChevronDown : faChevronUp} /></button>
-        </div>)}
-        {openDetails ? <div className='progress-bar-tile row' >
-            <div className="progress-bar-value" style={{ '--percent-color': percentColor, '--full-color': fullColor, '--percent': `${percent}%`, ...(progressBarStyle ?? {}) } as CSSProperties}></div>
-            {progressBarOnly || status === ComponentStatus.INFOR ? null : <div className='status-icon'>{getStatusIcon(status)}</div>}
-            {progressBarOnly ? null : <div className='text-value'>{percent}/100</div>}
-        </div> : null}
-
-    </div>
-}