wini-web-components 0.1.0

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

@@ -0,0 +1,261 @@
+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

@@ -0,0 +1,69 @@
+.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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,90 @@
+.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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,47 @@
+.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

@@ -0,0 +1,34 @@
+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>
+}