wini-web-components 2.8.2 → 2.8.4

package/src/component/rating/rating.tsx

@@ -0,0 +1,65 @@
+import React, { CSSProperties } from "react"
+import styles from './rating.module.css'
+
+interface RatingProps {
+    id?: string,
+    /**
+    value: 0-5
+    */
+    value?: number,
+    size?: number | string,
+    onChange?: (e: number) => void
+    className?: string,
+    style?: CSSProperties,
+    strokeColor?: string,
+    fillColor?: string,
+}
+
+interface RatingState {
+    value: number,
+}
+
+const autoKeyId = () => window.crypto.randomUUID().replace(/-/g, '')
+
+export class Rating extends React.Component<RatingProps, RatingState> {
+    state: Readonly<RatingState> = {
+        value: this.props.value ?? 0
+    }
+
+    componentDidUpdate(prevProps: Readonly<RatingProps>): void {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ value: this.props.value ?? 0 })
+        }
+    }
+    render(): React.ReactNode {
+        return <div id={this.props.id} className={`row ${styles['rating-container']} ${this.props.className ?? ''}`} style={this.props.style}>
+            {Array.from({ length: 5 }).map((_, i) => {
+                let uniqueId = 'rating-star-grad-0'
+                let stopValue = 0
+                if (this.state.value >= 5) {
+                    uniqueId = 'rating-star-grad-5'
+                    stopValue = 100
+                } else if (this.state.value >= i) {
+                    uniqueId = autoKeyId()
+                    stopValue = (this.state.value - i) * 100
+                }
+                return <svg onClick={() => {
+                    if (this.props.onChange) {
+                        this.setState({ value: i + 1 })
+                        this.props.onChange(i + 1)
+                    }
+                }} key={'rate-' + i} width={"100%"} height={"100%"} style={{ width: this.props.size ?? '2rem', height: this.props.size ?? '2rem' }} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <linearGradient id={uniqueId} x1="0%" x2="100%" y1="0%" y2="0%">
+                            <stop offset="0%" style={{ stopColor: this.props.fillColor ?? 'var(--secondary3-main-color,#FAAD1E)' }} />
+                            <stop offset={`${stopValue}%`} style={{ stopColor: this.props.fillColor ?? 'var(--secondary3-main-color,#FAAD1E)' }} />
+                            <stop offset={`${stopValue}%`} style={{ stopColor: '#00000000' }} />
+                        </linearGradient>
+                    </defs>
+                    <path fillRule="evenodd" clipRule="evenodd" d="M10 1.66667C10.2884 1.66667 10.5518 1.82993 10.6794 2.0878L12.844 6.46194L17.6847 7.16325C17.97 7.20459 18.2071 7.4039 18.2962 7.67736C18.3853 7.95082 18.311 8.25101 18.1045 8.45172L14.6018 11.8563L15.4285 16.6636C15.4772 16.947 15.3604 17.2334 15.127 17.4024C14.8937 17.5714 14.5844 17.5937 14.3292 17.4599L10 15.1897L5.67081 17.4599C5.41557 17.5937 5.10627 17.5714 4.87295 17.4024C4.63964 17.2334 4.52278 16.947 4.57151 16.6636L5.39815 11.8563L1.89545 8.45172C1.68896 8.25101 1.61465 7.95082 1.70377 7.67736C1.79288 7.4039 2.02996 7.20459 2.31533 7.16325L7.15599 6.46194L9.32063 2.0878C9.44825 1.82993 9.71162 1.66667 10 1.66667ZM10 4.12915L8.33846 7.48665C8.22811 7.70963 8.01479 7.86418 7.76802 7.89993L4.05223 8.43827L6.74094 11.0517C6.91947 11.2252 7.00094 11.4752 6.95881 11.7203L6.3243 15.4102L9.64738 13.6676C9.86813 13.5519 10.1319 13.5519 10.3526 13.6676L13.6757 15.4102L13.0412 11.7203C12.9991 11.4752 13.0805 11.2252 13.2591 11.0517L15.9478 8.43827L12.232 7.89993C11.9852 7.86418 11.7719 7.70963 11.6615 7.48665L10 4.12915Z" style={{ fill: this.props.strokeColor ?? 'var(--neutral-text-placeholder-color,#878792)' }} />
+                    <path d="M17.738 7.18949L12.8212 6.47499L10.6249 2.02268C10.5611 1.91426 10.47 1.82438 10.3608 1.76194C10.2515 1.6995 10.1279 1.66666 10.0021 1.66666C9.87623 1.66666 9.75259 1.6995 9.64335 1.76194C9.53411 1.82438 9.44306 1.91426 9.37921 2.02268L7.17875 6.47499L2.26191 7.18949C2.13368 7.208 2.0132 7.26201 1.91406 7.34542C1.81493 7.42882 1.74111 7.5383 1.70095 7.66147C1.66078 7.78463 1.65588 7.91658 1.68678 8.04239C1.71769 8.1682 1.78317 8.28286 1.87583 8.3734L5.43449 11.8411L4.59499 16.7385C4.57311 16.8662 4.58739 16.9975 4.63622 17.1175C4.68505 17.2375 4.76648 17.3414 4.8713 17.4175C4.97612 17.4937 5.10016 17.539 5.22938 17.5483C5.3586 17.5577 5.48785 17.5306 5.60252 17.4704L9.99998 15.1588L14.3974 17.4704C14.5121 17.5306 14.6414 17.5577 14.7706 17.5483C14.8998 17.539 15.0238 17.4937 15.1286 17.4175C15.2335 17.3414 15.3149 17.2375 15.3637 17.1175C15.4126 16.9975 15.4268 16.8662 15.405 16.7385L14.5655 11.8411L18.1241 8.3734C18.2168 8.28295 18.2823 8.16841 18.3132 8.0427C18.3442 7.91699 18.3394 7.78512 18.2994 7.66199C18.2594 7.53886 18.1858 7.42937 18.0868 7.34587C17.9879 7.26238 17.8675 7.20822 17.7394 7.18949H17.738Z" fill={`url(#${uniqueId})`} />
+                </svg>
+            })}
+        </div>
+    }
+}

package/src/component/select1/select1.module.css

@@ -0,0 +1,108 @@
+.select1-container {
+    border-radius: 0.8rem;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.8rem 1.6rem;
+    border: var(--neutral-bolder-border);
+    border-radius: 0.8rem;
+    gap: 0.8rem;
+    position: relative;
+    cursor: context-menu;
+}
+
+.select1-container:focus-within {
+    border-color: var(--primary-main-color);
+}
+
+.select1-container.disabled {
+    background-color: var(--neutral-disable-background-color) !important;
+    pointer-events: none !important;
+}
+
+.select1-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.select1-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -0.4rem;
+    width: max-content;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    font-family: inherit;
+    transform: translateY(100%);
+}
+
+.select1-container>input {
+    flex: 1;
+    width: 100%;
+    border: none;
+    outline: none;
+    padding: 0;
+    background-color: transparent !important;
+    font: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    text-overflow: inherit;
+}
+
+.select1-container input:read-only {
+    cursor: context-menu;
+}
+
+.select1-popup {
+    position: absolute;
+    z-index: 10;
+    background-color: var(--neutral-absolute-background-color);
+    border-radius: 0.8rem;
+    border: var(--neutral-main-border);
+    height: fit-content;
+    box-shadow: 0 0 12px 0 #00204d1f;
+    align-items: center;
+}
+
+.select1-popup>.select-body {
+    max-height: 100%;
+    flex: 1;
+    align-items: start;
+    max-height: 28rem;
+    min-height: 8rem;
+    width: 100%;
+    padding: 0.4rem 0;
+    overflow: hidden auto;
+}
+
+.select1-popup>.select-body .select-tile {
+    justify-content: start;
+    align-items: center;
+    padding: 0.8rem 1.6rem;
+    gap: 0.8rem;
+    width: 100%;
+    cursor: context-menu;
+}
+
+.select1-popup>.select-body .select-tile:hover {
+    background-color: var(--neutral-hover-background-color);
+}
+
+.select1-popup>.select-body .select-tile.disabled {
+    background-color: var(--neutral-disable-background-color) !important;
+}
+
+.select1-popup>.select-body .select-tile.disabled * {
+    color: var(--neutral-text-disabled-color) !important;
+}
+
+.no-results-found {
+    padding: 0.8rem;
+    font: 400 1.4rem/2rem "Inter";
+    color: var(--neutral-text-title-reverse-color);
+}

package/src/component/select1/select1.tsx

@@ -0,0 +1,271 @@
+import styles from './select1.module.css'
+import React, { createRef, CSSProperties, ReactNode, useState } from 'react'
+import { Winicon } from '../wini-icon/winicon'
+import { Text } from '../text/text'
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { PopupOverlay } from '../popup/popup'
+
+export interface OptionsItem {
+    id: string | number,
+    parentId?: string,
+    name: string | ReactNode,
+    title?: string | ((onSelect: (e: OptionsItem) => void) => ReactNode),
+    disabled?: boolean
+}
+
+interface Select1Props extends WithTranslation {
+    id?: string,
+    value?: string | number,
+    options: Required<Array<OptionsItem>>,
+    onChange?: (v?: OptionsItem) => void,
+    placeholder?: string,
+    disabled?: boolean,
+    className?: string,
+    helperText?: string,
+    helperTextColor?: string,
+    style?: CSSProperties,
+    handleSearch?: (e: string) => Promise<Array<OptionsItem>>,
+    handleLoadmore?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => void,
+    handleLoadChildren?: () => {}
+    readOnly?: boolean,
+    popupClassName?: string,
+    prefix?: ReactNode,
+    suffix?: ReactNode,
+    onOpenOptions?: (popupRef: HTMLDivElement) => void
+}
+
+interface Select1State {
+    value?: string | number,
+    options: Required<Array<OptionsItem>>,
+    offset: DOMRect,
+    isOpen: boolean,
+    onSelect: any,
+    selected?: string | number,
+    search?: Array<OptionsItem>,
+    style?: Object
+};
+
+class TSelect1 extends React.Component<Select1Props, Select1State> {
+    private containerRef = createRef<HTMLDivElement>()
+    private inputRef = createRef<HTMLInputElement>()
+    constructor(props: Select1Props) {
+        super(props)
+        this.state = {
+            value: props.value,
+            options: props.options,
+            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.search = this.search.bind(this)
+        this.onSelect = this.onSelect.bind(this)
+        this.onKeyDown = this.onKeyDown.bind(this)
+        if (this.inputRef.current) this.inputRef.current.value = `${this.state.options.find(e => e.id === this.state.value)?.name ?? ""}`
+    }
+
+    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 => typeof e.name === "string" && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()))
+                })
+            }
+        } else {
+            this.setState({ ...this.state, search: undefined })
+        }
+    }
+
+    private onSelect(item: OptionsItem) {
+        if (item.disabled) {
+            this.setState({ ...this.state, isOpen: false, onSelect: undefined, selected: undefined })
+            this.inputRef.current?.blur()
+        } else {
+            let newState = { ...this.state, isOpen: false, value: item.id, onSelect: undefined, selected: undefined }
+            if (!newState.options.some(e => e.id === item.id)) newState.options.push(item)
+            this.setState(newState)
+            this.inputRef.current?.blur()
+        }
+        if (this.props.onChange) this.props.onChange(item)
+    }
+
+    private onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
+        if ((this.state.options?.length || this.state.search?.length) && this.state.isOpen) {
+            switch (ev.key.toLowerCase()) {
+                case "enter":
+                    ev.preventDefault()
+                    const _selectItem = (this.state.search ?? this.state.options).find(e => e.id === this.state.selected)
+                    if (_selectItem) this.onSelect(_selectItem)
+                    break;
+                case "arrowup":
+                    ev.preventDefault()
+                    if (this.state.selected) {
+                        let _index = (this.state.search ?? this.state.options).findIndex((e) => e.id === this.state.selected)
+                        _index = ((_index === 0) ? this.props.options.length : _index) - 1
+                        this.setState({ ...this.state, selected: this.props.options[_index]?.id })
+                    }
+                    break;
+                case "arrowdown":
+                    ev.preventDefault()
+                    if (this.state.selected) {
+                        let _index = (this.state.search ?? this.state.options).findIndex((e) => e.id === this.state.selected)
+                        _index = ((_index + 1 === this.props.options.length) ? -1 : _index) + 1
+                        this.setState({ ...this.state, selected: this.props.options[_index]?.id })
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
+    componentDidUpdate(prevProps: Select1Props, prevState: Select1State) {
+        if (prevProps.options !== this.props.options) {
+            this.setState({ ...this.state, options: this.props.options })
+            if (this.inputRef.current) this.inputRef.current.value = `${this.props.options.find(e => e.id === this.state.value)?.name ?? ""}`
+        }
+        if (prevProps.value !== this.props.value) this.setState({ ...this.state, value: this.props.value })
+        if (prevState.value !== this.state.value && this.inputRef.current) this.inputRef.current.value = `${this.state.options.find(e => e.id === this.state.value)?.name ?? ""}`
+        //
+        if (this.state.isOpen && prevState.isOpen !== this.state.isOpen) {
+            const thisPopupRect = this.containerRef.current!.querySelector(`.select1-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',
+                        right: document.body.offsetWidth - this.state.offset.right + 'px'
+                    }
+                }
+                let _bottom = thisPopupRect.bottom - 8
+                const thisContainerRect = this.containerRef.current?.getBoundingClientRect()
+                if (thisContainerRect) {
+                    if (_bottom > document.body.offsetHeight) {
+                        style = { ...(style ?? {}), top: `${thisContainerRect.y - 2 - thisPopupRect.height}px` }
+                    }
+                }
+                if (style) {
+                    style.left ??= (style.right ? undefined : `${this.state.offset.x}px`)
+                    style.width ??= `${this.state.offset.width}px`
+                    this.setState({ ...this.state, style: style })
+                }
+            }
+        }
+    }
+
+    componentDidMount(): void {
+        if (this.inputRef.current) this.inputRef.current.value = `${this.state.options.find(e => e.id === this.state.value)?.name ?? ""}`
+    }
+
+    render() {
+        const { t } = this.props;
+        const _value = this.state.options.find(e => e.id === this.state.value)
+        return <div
+            id={this.props.id}
+            ref={this.containerRef}
+            className={`${styles['select1-container']} row ${this.props.disabled ? styles['disabled'] : ''} ${this.props.helperText?.length && styles['helper-text']} ${this.props.className ?? 'body-3'}`}
+            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={() => {
+                if (!this.state.isOpen) {
+                    this.setState({
+                        ...this.state,
+                        isOpen: true,
+                        style: undefined,
+                        offset: this.containerRef?.current?.getBoundingClientRect() as any,
+                    })
+                    this.inputRef.current?.focus()
+                }
+            }}
+        >
+            {this.props.prefix}
+            {(!_value || typeof _value.name === "string" || typeof _value.name === "number") ? <input ref={this.inputRef} readOnly={this.props.readOnly} onChange={this.search} placeholder={this.props.placeholder}
+                onBlur={ev => {
+                    if (this.state.onSelect && !this.props.readOnly) ev.target.focus()
+                }}
+            /> : _value.name}
+            {this.props.suffix ?? <div ref={iconRef => {
+                if (iconRef?.parentElement && iconRef.parentElement.getBoundingClientRect().width < 88) iconRef.style.display = "none"
+            }} className='row' >
+                <Winicon src={this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow"} size={"1.2rem"} />
+            </div>}
+            {this.state.isOpen && <PopupOverlay
+                onOpen={this.props.onOpenOptions}
+                className={`hidden-overlay`}
+                onClose={(ev) => {
+                    if (ev.target !== this.inputRef.current) this.setState({ ...this.state, isOpen: false })
+                }}
+            >
+                <div className={`${styles['select1-popup']} select1-popup col ${this.props.popupClassName ?? ""}`} 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,
+                }}>
+                    <div className={`col ${styles['select-body']}`} onScroll={this.props.handleLoadmore ? (ev) => {
+                        if (this.props.handleLoadmore) {
+                            let scrollElement = ev.target as HTMLDivElement
+                            this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev)
+                        }
+                    } : undefined}>
+                        {(this.state.search ?? this.state.options).filter(e => !e.parentId).map(item => {
+                            return <OptionsItemTile
+                                key={item.id}
+                                item={item}
+                                children={(this.state.search ?? this.state.options).filter(e => e.parentId === item.id)}
+                                selected={this.state.selected === item.id}
+                                onClick={this.onSelect}
+                                treeData={(this.state.search ?? this.state.options).some(e => e.parentId)}
+                            />
+                        })}
+                        {(!this.state.search?.length && !this.props.options?.length) && (
+                            <div className={styles['no-results-found']}>{t("noResultFound")}</div>
+                        )}
+                    </div>
+                </div>
+            </PopupOverlay>}
+        </div>
+    }
+}
+
+interface OptionTileProps {
+    item: OptionsItem,
+    children?: Array<OptionsItem>,
+    selected?: boolean,
+    onClick: (e: OptionsItem) => void,
+    treeData?: boolean
+}
+
+function OptionsItemTile({ item, children, selected, onClick, treeData }: OptionTileProps) {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    return item.title && typeof item.title !== "string" ? <>{item.title(onClick)}</> : <div className='col' style={{ width: '100%' }}>
+        <div className={`${styles['select-tile']} row ${item.disabled ? styles["disabled"] : ""}`} style={{ paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: selected ? "var(--neutral-selected-background-color)" : undefined }} onClick={() => {
+            if (children?.length) {
+                setIsOpen(!isOpen)
+            } else onClick(item)
+        }}>
+            {treeData ? <div className='row' style={{ width: '1.4rem', height: '1.4rem' }}>
+                {children?.length ? <Winicon src={isOpen ? "fill/arrows/triangle-down" : "fill/arrows/triangle-right"} size={"1.2rem"} /> : null}
+            </div> : undefined}
+            {((item.title && typeof item.title === "string") || typeof item.name === "string") ? <Text className='body-3'>{item.title && typeof item.title === "string" ? item.title : item.name}</Text> : item.name}
+        </div>
+        {children?.length ? <div className='col' style={{ display: isOpen ? "flex" : "none", width: '100%' }}>{children.map(e => <OptionsItemTile key={e.id} item={e} onClick={onClick} />)}</div> : undefined}
+    </div>
+}
+
+export const Select1 = withTranslation()(TSelect1)

package/src/component/switch/switch.module.css

@@ -0,0 +1,53 @@
+.switch-container {
+    position: relative;
+    display: inline-block;
+    background-color: var(--off-bg) !important;
+    border-radius: 50vw !important;
+    border: none;
+    outline: none;
+}
+
+.switch-container>input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    border: none;
+    outline: none;
+}
+
+.switch-container>.slider {
+    font-size: var(--size);
+    position: absolute;
+    height: calc(100% - 0.2em);
+    aspect-ratio: 1 / 1;
+    left: 0.1em;
+    top: 0.1em;
+    background-color: var(--dot-color);
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+.switch-container>input:checked+.slider {
+    -webkit-transform: translateX(calc(0.8 * (100% + 0.2em)));
+    -ms-transform: translateX(calc(0.8 * (100% + 0.2em)));
+    transform: translateX(calc(0.8 * (100% + 0.2em)));
+}
+
+.switch-container:has(> input:checked) {
+    background-color: var(--on-bg) !important;
+}
+
+.switch-container:has(> input:disabled:not(*:checked)) {
+    pointer-events: none;
+    border: var(--neutral-bolder-border);
+    background-color: var(--neutral-disable-background-color) !important;
+}
+
+.switch-container:has(> input:disabled:not(*:checked)) .slider {
+    background-color: var(--neutral-text-disabled-color) !important;
+}
+
+.switch-container:has(> input:disabled:checked) {
+    pointer-events: none;
+    background-color: var(--primary-lighter-color) !important;
+}

package/src/component/switch/switch.tsx

@@ -0,0 +1,68 @@
+import React, { CSSProperties } from 'react';
+import styles from './switch.module.css';
+
+interface SwitchProps {
+    id?: string,
+    onChange?: (value: boolean) => void,
+    value?: boolean,
+    disabled?: boolean,
+    className?: string,
+    style?: CSSProperties,
+    size?: number | string,
+    dotColor?: string,
+    onBackground?: string,
+    offBackground?: string,
+    name?: string,
+}
+
+interface SwitchState {
+    value?: boolean,
+}
+
+export class Switch extends React.Component<SwitchProps, SwitchState> {
+    state: Readonly<SwitchState> = {
+        value: this.props.value ?? false
+    }
+
+    componentDidUpdate(prevProps: Readonly<SwitchProps>): void {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ value: this.props.value })
+        }
+    }
+
+    render() {
+        const propStyle = {
+            '--off-bg': this.props.offBackground ?? 'var(--neutral-main-background-color)',
+            '--on-bg': this.props.onBackground ?? 'var(--primary-main-color)',
+            '--dot-color': this.props.dotColor ?? '#ffffff',
+            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '2rem'
+        }
+        let convertStyle: CSSProperties = {
+            height: this.props.size ?? '2rem',
+            width: `calc(${this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '2rem'} * 9 / 5)`,
+            ...propStyle
+        }
+        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={`${styles['switch-container']} row ${this.props.className ?? ''}`} style={convertStyle} >
+            <input type="checkbox" checked={this.state.value} name={this.props.name} disabled={this.props.disabled}
+                onChange={() => {
+                    const newValue = !this.state.value
+                    this.setState({ value: newValue })
+                    if (this.props.onChange) this.props.onChange(newValue)
+                }}
+            />
+            <span className={styles['slider']}></span>
+        </label>
+    }
+}

package/src/component/table/table.css

@@ -0,0 +1,74 @@
+.custom-table {
+    border: none;
+    min-width: 100%;
+    border-collapse: collapse;
+}
+
+.custom-table>.tb-header {
+    top: -1px;
+    z-index: 4;
+    position: sticky;
+    background-color: #f9fafb;
+}
+
+.custom-table>.tb-header>tr {
+    border-top: var(--neutral-bolder-border);
+    border-bottom: var(--neutral-bolder-border);
+}
+
+.custom-table .tb-cell {
+    height: 4.4rem;
+    text-align: left;
+    padding: 0 2.4rem;
+    font: 400 1.4rem/2.2rem 'Inter';
+    color: #00204DCC;
+    vertical-align: middle;
+}
+
+.custom-table tr>td {
+    background-color: #ffffff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 52rem;
+}
+
+.custom-table>.tb-header>tr>td {
+    font: 600 1.2rem/2rem 'Inter';
+    white-space: nowrap;
+    color: #00204D99;
+    background-color: #f9fafb;
+}
+
+.custom-table tr.selected {
+    background-color: #f5f7fa;
+}
+
+.custom-table tr.selected>td {
+    background-color: #f5f7fa;
+}
+
+.tb-row>.tb-cell.tb-cell-fixed {
+    z-index: 2;
+    position: sticky;
+    /* box-shadow: 1px 0px 6px 0px rgba(45, 50, 57, 0.06); */
+    background-color: #ffffff;
+}
+
+.tb-header .tb-cell.tb-cell-fixed {
+    z-index: 2;
+    position: sticky;
+    /* box-shadow: 1px 0px 6px 0px rgba(45, 50, 57, 0.06); */
+    background-color: #f9fafb;
+}
+
+.tb-cell[align-cell='start'] {
+    text-align: start;
+}
+
+.tb-cell[align-cell='center'] {
+    text-align: center;
+}
+
+.tb-cell[align-cell='end'] {
+    text-align: end;
+}