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

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

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

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

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

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

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

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

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

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

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