@sqrzro/admin 2.0.0 → 2.1.0-bz.0

package/src/core/FilterItem/index.tsx

@@ -1,172 +0,0 @@
-'use client';
-
-import React, { memo, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-
-import { ApiService } from '@sqrzro/utility';
-import { useClickOutside } from '@sqrzro/hooks';
-
-import CloseButton from '../CloseButton';
-import Icon from '../Icon';
-import InputPanel from '../InputPanel';
-
-import type { FilterField } from '../../filters/interfaces';
-
-import type {
-    InputEvent,
-    InputEventHandler,
-    Remote,
-    StrictSimpleObject,
-} from '../../utility/interfaces';
-
-// Import styles from './FilterItem.module.css';
-
-interface PanelOptions {
-    isScollable?: boolean;
-    // eslint-disable-next-line @typescript-eslint/sort-type-constituents
-    size?: 'sm' | 'md' | 'lg';
-}
-
-interface FilterItemProps extends FilterField {
-    onCancel: InputEventHandler;
-    onChange: InputEventHandler;
-    value?: string[] | string;
-}
-
-const DEFAULT_PANEL_OPTIONS: PanelOptions = { size: 'md' };
-
-function parseRemote(remote: Remote): Remote {
-    if (Array.isArray(remote)) {
-        return [remote[0], { ...remote[1], simpleview: '1' }];
-    }
-    return [remote, { simpleview: '1' }];
-}
-
-function FilterItem({
-    data,
-    label,
-    name,
-    props,
-    remote,
-    renderField,
-    renderSummary,
-    onCancel,
-    onChange,
-    panelOptions,
-    value,
-}: FilterItemProps): React.ReactElement {
-    const [isOpen, setIsOpen, node] = useClickOutside();
-    const [isDisabled, setIsDisabled] = useState(Boolean(remote));
-
-    const [remoteData, setRemoteData] = useState<StrictSimpleObject[]>([]);
-    const [panelIndex, setPanelIndex] = useState(0);
-
-    function toggleIsOpen(): void {
-        setIsOpen(!isOpen);
-    }
-
-    function handleChange(event: InputEvent): void {
-        if (event.target.value !== '[internal]') {
-            onChange(event);
-
-            if (!props?.isMultiple) {
-                setIsOpen(false);
-            }
-        }
-    }
-
-    function handleCancel(): void {
-        onCancel({ target: { name, value: name } });
-
-        setPanelIndex(0);
-        setIsOpen(false);
-    }
-
-    async function handleRemote(): Promise<void> {
-        if (!remote) {
-            return;
-        }
-
-        const response = await ApiService.get<StrictSimpleObject[]>(parseRemote(remote));
-        setRemoteData(response.data);
-        setIsDisabled(false);
-    }
-
-    useEffect(() => {
-        void handleRemote();
-    }, []);
-
-    const summaryArgs = {
-        data: remote ? remoteData : data,
-        props,
-        value,
-    };
-
-    const summary = renderSummary ? renderSummary(summaryArgs) : value;
-
-    const field = renderField({
-        data: remote ? remoteData : data,
-        extraProps: props,
-        name,
-        onChange: handleChange,
-        panelIndex,
-        setPanelIndex,
-        value,
-    });
-
-    const parsedPanelOptions = Array.isArray(panelOptions) ? panelOptions : [panelOptions];
-
-    return (
-        <div
-            ref={node}
-            className="/*clsx(styles.root, isDisabled && styles.rootIsDisabled)*/"
-            data-testid="filter-item-root"
-        >
-            <div className="/*clsx(styles.inner, value && styles.innerHasValue)*/">
-                <div className="/*styles.icon*/">
-                    {Array.isArray(value) && value.length > 1 ? (
-                        <span className="/*styles.count*/">{value.length}</span>
-                    ) : (
-                        <Icon icon="filter" size={12} />
-                    )}
-                </div>
-                <div className="/*styles.label*/" data-testid="filter-item-label">
-                    {summary || label}
-                </div>
-                {value ? (
-                    <i className="/*styles.close*/">
-                        <CloseButton label="Cancel" onClick={handleCancel} size="sm" />
-                    </i>
-                ) : null}
-                <button
-                    className="/*clsx(styles.control, value && styles.controlHasValue)*/"
-                    onClick={toggleIsOpen}
-                    type="button"
-                >
-                    {isOpen ? 'Close' : 'Open'}
-                </button>
-            </div>
-
-            {isOpen ? (
-                <InputPanel {...DEFAULT_PANEL_OPTIONS} {...(parsedPanelOptions[panelIndex] || {})}>
-                    {field}
-                </InputPanel>
-            ) : null}
-        </div>
-    );
-}
-
-FilterItem.propTypes = {
-    label: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    renderField: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    props: PropTypes.shape({
-        isMultiple: PropTypes.bool,
-    }),
-    renderSummary: PropTypes.func,
-};
-
-export default memo(FilterItem);

package/src/core/Filters/Filters.module.css

@@ -1,86 +0,0 @@
-.root {
-    background-color: var(--clr-white);
-    border: .1rem var(--clr-grey400) solid;
-    border-radius: .5rem;
-    margin-bottom: 3rem;
-    padding: 1rem;
-
-    @media (--media-med) {
-        background-color: transparent;
-        border-color: transparent;
-        padding: 0;
-    }
-}
-
-.control {
-    @media (--media-med) {
-        display: none;
-    }
-}
-
-.controlIsOpen {
-    display: none;
-}
-
-.content {
-    display: none;
-    position: relative;
-    z-index: 1;
-
-    @media (--media-med) {
-        display: flex;
-        justify-content: space-between;
-    }
-}
-
-.contentIsOpen {
-    display: block;
-}
-
-.close {
-    display: none;
-}
-
-.closeIsOpen {
-    display: block;
-
-    @media (--media-med) {
-        display: none;
-    }
-}
-
-.search {
-    margin-bottom: 1rem;
-    min-width: 30rem;
-
-    @media (--media-med) {
-        margin-bottom: 0;
-    }
-}
-
-.section {
-    @media (--media-med) {
-        align-items: center;
-        display: flex;
-    }
-}
-
-.divider {
-    display: none;
-
-    @media (--media-med) {
-        background-color: var(--clr-grey400);
-        display: block;
-        height: 2rem;
-        margin: 0 2rem;
-        width: .1rem;
-    }
-}
-
-.actions {
-    display: flex;
-}
-
-.actions > * {
-    margin-left: 1rem;
-}