@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/src/ui/content/Detail/Detail.tsx

@@ -1,248 +0,0 @@
-import React, {useRef, useMemo, useState, useEffect} from 'react';
-import _isArray from 'lodash/isArray';
-import _orderBy from 'lodash/orderBy';
-import {useComponents} from '../../../hooks';
-import DetailItem, {IDetailItemProps} from './DetailItem';
-import {IControlItem} from '../../nav/Controls/Controls';
-
-/**
- * Detail
- * Представление данных в виде таблицы, в которой поля группируются по принципу "ключ-значение".
- */
-export enum DetailLayoutEnum {
-    Horizontal = 'horizontal',
-    Vertical = 'vertical'
-}
-
-export interface IDetailMedia {
-    /**
-     * Максимальная ширина таблицы в px
-     * @example 600
-     */
-    breakpoint: number,
-
-    /**
-     * Количество колонок, которое будет применяться, начиная от указанной ширины и меньше
-     * @example 2
-     */
-    column: number
-}
-
-export interface IDetailResponsive {
-    /**
-     * Перестраивать таблицу при ресайзе
-     */
-    enable?: boolean,
-
-    /**
-     * Брейкпоинты
-     */
-    media: IDetailMedia[]
-}
-
-export interface IDetailProps {
-    /**
-     * Размер ячеек в таблице
-     * @example 'sm'
-     */
-    size?: Size,
-
-    /**
-     * Вариант расположения ячеек "ключ-значение"
-     * @example 'horizontal'
-     */
-    layout?: DetailLayoutEnum
-
-    /**
-     * Перестраивать таблицу при ресайзе
-     * @example {enable: true, media: [{breakpoint: 600, column: 2}]}
-     */
-    responsive?: boolean | IDetailResponsive,
-
-    /**
-     * Максимальное количество колонок
-     * @example 3
-     */
-    column?: number
-
-    /**
-     * Заголовок таблицы
-     * @example 'User info'
-     */
-    title?: string | React.ReactNode
-
-    /**
-     * Контролы, которые нужно расположить рядом с таблицей
-     * @example [{label: __(('Edit')), onClick: () => props.onClick()}]
-     */
-    controls?: IControlItem[],
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    /**
-     * Дополнительный CSS-класс для таблицы
-     */
-    className?: string,
-
-    /**
-     * Дочерние компоненты
-     */
-    children?: React.ReactNode | React.ReactNode[],
-
-    [key: string]: any
-}
-
-export interface IDetailItemOutputProps extends IDetailItemProps {
-    colspan: number,
-    value: IDetailItemProps['children']
-}
-
-export interface IDetailViewProps extends IDetailProps {
-    rows: IDetailItemOutputProps[][],
-    resizedNodeRef?: (node: HTMLElement) => void
-}
-
-export const constants = Object.freeze({
-    MAX_COLUMN: 3,
-    CELLS_IN_COLUMN: 2,
-    TABLE_HEAD_COLSPAN: 1,
-});
-
-const getDetailItems = (children: React.ReactNode | React.ReactNode[]): any[] => (
-    React.Children.toArray(children)
-        .filter((child: any) => child?.type?.displayName === DetailItem.displayName)
-);
-
-const normalizeSpan = (span: number, column: number): number => (span > column)
-    ? column
-    : (span || 1);
-
-const createRows = (detailItems: any[], column: number, layout: DetailLayoutEnum): IDetailItemOutputProps[][] => {
-    const result = [];
-
-    let freeColumns = column;
-    let rowIndex = 0;
-    result[rowIndex] = [];
-
-    detailItems.forEach((detailItem, index) => {
-        if (!freeColumns) {
-            freeColumns = column;
-            rowIndex += 1;
-            result[rowIndex] = [];
-        }
-
-        const isLastDetailItem = index === (detailItems.length - 1);
-
-        let span = normalizeSpan(detailItem.props.span, column);
-        let nextSpan = null;
-        if (!isLastDetailItem) {
-            nextSpan = normalizeSpan(detailItems[index + 1].props.span, column);
-        }
-
-        freeColumns -= span;
-        if (isLastDetailItem || nextSpan > freeColumns) {
-            span += freeColumns;
-            freeColumns = 0;
-        }
-
-        result[rowIndex].push({
-            ...detailItem.props,
-            colspan: layout === DetailLayoutEnum.Horizontal
-                ? span * constants.CELLS_IN_COLUMN - constants.TABLE_HEAD_COLSPAN
-                : span,
-            value: detailItem,
-        });
-    });
-
-    return result;
-};
-
-const normalizeResponsiveProps = (props: IDetailProps['responsive']): IDetailResponsive => (typeof props === 'boolean'
-    ? {
-        enable: props,
-        media: [
-            {
-                breakpoint: 500,
-                column: 1,
-            },
-            {
-                breakpoint: 700,
-                column: 2,
-            },
-            {
-                breakpoint: 1000,
-                column: 3,
-            },
-        ],
-    }
-    : {
-        enable: true,
-        ...props,
-        media: _orderBy(props.media, ['breakpoint'], ['asc']),
-    }
-);
-
-export default function Detail(props: IDetailProps): JSX.Element {
-    const components = useComponents();
-    const detailItems = useMemo(() => getDetailItems(props.children), [props.children]);
-    const responsiveProps = useMemo(() => normalizeResponsiveProps(props.responsive), [props.responsive]);
-
-    const [column, setColumn] = useState(props.column || constants.MAX_COLUMN);
-    const [rows, setRows] = useState(createRows(detailItems, column, props.layout));
-
-    // Add responsive option
-    const resizeObserver = useRef(new ResizeObserver((entries:ResizeObserverEntry[]) => {
-        entries.forEach(entry => {
-            if (!entry.borderBoxSize) {
-                return;
-            }
-
-            const {inlineSize} = (_isArray(entry.borderBoxSize)
-                ? entry.borderBoxSize[0]
-                : entry.borderBoxSize) as ResizeObserverSize;
-
-            // eslint-disable-next-line no-restricted-syntax
-            for (const mediaItem of responsiveProps.media) {
-                if (inlineSize < mediaItem.breakpoint) {
-                    setColumn(mediaItem.column);
-                    return;
-                }
-            }
-
-            setColumn(props.column || constants.MAX_COLUMN);
-        });
-    }));
-    const resizedNodeRef = React.useCallback((node: HTMLDivElement) => {
-        if (!resizeObserver.current) {
-            return;
-        }
-
-        if (node !== null) {
-            resizeObserver.current.observe(node);
-            return;
-        }
-
-        resizeObserver.current.disconnect();
-    }, [resizeObserver]);
-
-    useEffect(() => {
-        setRows(createRows(detailItems, column, props.layout));
-    }, [column, detailItems, props.layout]);
-
-    return components.ui.renderView(props.view || 'content.DetailView', {
-        ...props,
-        rows,
-        ...(responsiveProps.enable ? {resizedNodeRef} : {}),
-    });
-}
-
-Detail.defaultProps = {
-    size: 'sm',
-    layout: DetailLayoutEnum.Horizontal,
-    column: constants.MAX_COLUMN,
-    responsive: true,
-};

package/src/ui/content/Detail/DetailItem.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-/**
- * DetailItem
- * Элемент "ключ-значение" в таблице Detail
- */
-export interface IDetailItemProps {
-    /**
-     * Наименование
-     * @example 'Product'
-     */
-    label: string | number | React.ReactNode,
-
-    /**
-     * Значение
-     * @example 'Cloud Database'
-     */
-    children: React.ReactNode,
-
-    /**
-     * Количество колонок, которое занимает элемент
-     * @example 3
-     */
-    span?: number,
-
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView,
-
-    /**
-     * Дополнительный CSS-класс для ячейки с наименованием
-     */
-    labelClassName?: string,
-
-    /**
-     * Дополнительный CSS-класс для ячейки со значением
-     */
-    contentClassName?: string
-}
-
-export default function DetailItem(props: IDetailItemProps): JSX.Element {
-    return props.children as JSX.Element;
-}
-
-DetailItem.defaultProps = {
-    span: 1,
-};
-
-DetailItem.displayName = 'DetailItem';

package/src/ui/content/Detail/demo/basic.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import Detail from '../Detail';
-import DetailItem from '../DetailItem';
-
-/**
- * Basic table with title
- * @order 1
- * @col 8
- */
-export default () => (
-    <>
-        <Detail
-            title="Users"
-            responsive={false}
-        >
-            <DetailItem label="Product">Cloud Database</DetailItem>
-            <DetailItem label="Billing Mode">Prepaid</DetailItem>
-            <DetailItem label="Automatic Renewal">YES</DetailItem>
-            <DetailItem label="Order time">2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Usage Time" span={2}>2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Status" span={3}>Running</DetailItem>
-            <DetailItem label="Negotaited Amount">$80.00</DetailItem>
-            <DetailItem label="Discount">$20.00</DetailItem>
-            <DetailItem label="Official Receipts">$60.00</DetailItem>
-            <DetailItem label="Config Info">
-                Data disk type: MongoDB
-                <br />
-                Database version: 3.4
-                <br />
-                Package: dds.mongo.mid
-                <br />
-                Storage space: 10 GB
-                <br />
-                Replication factor: 3
-                <br />
-                Region: East China 1
-                <br />
-            </DetailItem>
-        </Detail>
-    </>
-);

package/src/ui/content/Detail/demo/colors.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import {Card} from '../../../content';
-
-const colors = {
-    primary: 'primary',
-    sd: 'secondary',
-    sc: 'success',
-    if: 'info',
-    wr: 'warning',
-    dn: 'danger',
-    lg: 'light',
-    dr: 'dark',
-};
-
-function capitalize(s) {
-    return s[0].toUpperCase() + s.slice(1);
-}
-
-export default () => (
-    <div style={{display: 'flex', flexWrap: 'wrap'}}>
-        {Object.values(colors).map(color => (
-            <div style={{marginRight: '30px', marginBottom: '30px'}} key={color}>
-                <>
-                    <Card
-                        style={{width: '320px'}}
-                        header='Header'
-                        title={capitalize(color) + ' card title'}
-                        color={color}
-                    >
-                        Some quick example text to build on the card title and make up the bulk of the card's content.
-                    </Card>
-                </>
-            </div>
-        ))}
-    </div>
-);

package/src/ui/content/Detail/demo/controls.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import Detail from '../Detail';
-import DetailItem from '../DetailItem';
-
-/**
- * Table with controls
- * @order 3
- * @col 8
- */
-export default () => (
-    <>
-        <Detail
-            controls={[{label: 'Edit'}]}
-            responsive={false}
-        >
-            <DetailItem label="Product">Cloud Database</DetailItem>
-            <DetailItem label="Billing Mode">Prepaid</DetailItem>
-            <DetailItem label="Automatic Renewal">YES</DetailItem>
-            <DetailItem label="Order time">2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Usage Time" span={2}>2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Status" span={3}>Running</DetailItem>
-            <DetailItem label="Negotaited Amount">$80.00</DetailItem>
-            <DetailItem label="Discount">$20.00</DetailItem>
-            <DetailItem label="Official Receipts">$60.00</DetailItem>
-            <DetailItem label="Config Info">
-                Data disk type: MongoDB
-                <br />
-                Database version: 3.4
-                <br />
-                Package: dds.mongo.mid
-                <br />
-                Storage space: 10 GB
-                <br />
-                Replication factor: 3
-                <br />
-                Region: East China 1
-                <br />
-            </DetailItem>
-        </Detail>
-    </>
-);

package/src/ui/content/Detail/demo/layout.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import Detail, {DetailLayoutEnum} from '../Detail';
-import DetailItem from '../DetailItem';
-
-/**
- * Table with vertical layout
- * @order 4
- * @col 8
- */
-export default () => (
-    <>
-        <Detail
-            layout={DetailLayoutEnum.Vertical}
-            responsive={false}
-        >
-            <DetailItem label="Product">Cloud Database</DetailItem>
-            <DetailItem label="Billing Mode">Prepaid</DetailItem>
-            <DetailItem label="Automatic Renewal">YES</DetailItem>
-            <DetailItem label="Order time">2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Usage Time" span={2}>2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Status" span={3}>Running</DetailItem>
-            <DetailItem label="Negotaited Amount">$80.00</DetailItem>
-            <DetailItem label="Discount">$20.00</DetailItem>
-            <DetailItem label="Official Receipts">$60.00</DetailItem>
-            <DetailItem label="Config Info">
-                Data disk type: MongoDB
-                <br />
-                Database version: 3.4
-                <br />
-                Package: dds.mongo.mid
-                <br />
-                Storage space: 10 GB
-                <br />
-                Replication factor: 3
-                <br />
-                Region: East China 1
-                <br />
-            </DetailItem>
-        </Detail>
-    </>
-);

package/src/ui/content/Detail/demo/responsive.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import Detail from '../Detail';
-import DetailItem from '../DetailItem';
-
-/**
- * When the screen width resizes, the number of columns changes
- * @order 4
- * @col 8
- */
-export default () => (
-    <>
-        <Detail
-            column={4}
-            responsive={{
-                media: [
-                    {
-                        breakpoint: 500,
-                        column: 1,
-                    },
-                    {
-                        breakpoint: 700,
-                        column: 2,
-                    },
-                    {
-                        breakpoint: 900,
-                        column: 3,
-                    },
-                ],
-            }}
-        >
-            <DetailItem label="Product">Cloud Database</DetailItem>
-            <DetailItem label="Billing Mode">Prepaid</DetailItem>
-            <DetailItem label="Automatic Renewal">YES</DetailItem>
-            <DetailItem label="Order time">2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Usage Time" span={2}>2018-04-24  18:00:00</DetailItem>
-            <DetailItem label="Status" span={3}>Running</DetailItem>
-            <DetailItem label="Negotaited Amount">$80.00</DetailItem>
-            <DetailItem label="Discount">$20.00</DetailItem>
-            <DetailItem label="Official Receipts">$60.00</DetailItem>
-            <DetailItem label="Config Info">
-                Data disk type: MongoDB
-                <br />
-                Database version: 3.4
-                <br />
-                Package: dds.mongo.mid
-                <br />
-                Storage space: 10 GB
-                <br />
-                Replication factor: 3
-                <br />
-                Region: East China 1
-                <br />
-            </DetailItem>
-        </Detail>
-    </>
-);

package/src/ui/content/Detail/demo/sizes.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-
-import Detail from '../Detail';
-import DetailItem from '../DetailItem';
-
-const sizes = {
-    sm: 'Small',
-    md: 'Middle',
-    lg: 'Large',
-};
-
-/**
- * Table with different cell's sizes
- * @order 2
- * @col 8
- */
-export default () => (
-    <>
-        {Object.keys(sizes).map(size => (
-            <div style={{marginBottom: '30px'}} key={size}>
-                <Detail
-                    title={sizes[size]}
-                    size={size}
-                    responsive={false}
-                >
-                    <DetailItem label="Product">Cloud Database</DetailItem>
-                    <DetailItem label="Billing Mode">Prepaid</DetailItem>
-                    <DetailItem label="Automatic Renewal">YES</DetailItem>
-                    <DetailItem label="Order time">2018-04-24  18:00:00</DetailItem>
-                    <DetailItem label="Usage Time" span={2}>2018-04-24  18:00:00</DetailItem>
-                    <DetailItem label="Status" span={3}>Running</DetailItem>
-                    <DetailItem label="Negotaited Amount">$80.00</DetailItem>
-                    <DetailItem label="Discount">$20.00</DetailItem>
-                    <DetailItem label="Official Receipts">$60.00</DetailItem>
-                    <DetailItem label="Config Info">
-                        Data disk type: MongoDB
-                        <br />
-                        Database version: 3.4
-                        <br />
-                        Package: dds.mongo.mid
-                        <br />
-                        Storage space: 10 GB
-                        <br />
-                        Replication factor: 3
-                        <br />
-                        Region: East China 1
-                        <br />
-                    </DetailItem>
-                </Detail>
-            </div>
-        ))}
-    </>
-);

package/src/ui/content/Detail/index.ts

@@ -1,4 +0,0 @@
-import Detail from './Detail';
-import DetailItem from './DetailItem';
-
-export {Detail, DetailItem};