@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/grid/_story/grid.stories.js

@@ -0,0 +1,290 @@
+import React from 'react';
+
+import './demo.scss';
+import { Col, Row } from '../index';
+
+export default {
+  title: 'Grid'
+}
+
+export const GridDefault = () => (
+  <div>
+    <Row>
+      <Col span={24}>col-24</Col>
+    </Row>
+    <Row>
+      <Col span={12}>col-12</Col>
+      <Col span={12}>col-12</Col>
+    </Row>
+    <Row>
+      <Col span={8}>col-8</Col>
+      <Col span={8}>col-8</Col>
+      <Col span={8}>col-8</Col>
+    </Row>
+    <Row>
+      <Col span={6}>col-6</Col>
+      <Col span={6}>col-6</Col>
+      <Col span={6}>col-6</Col>
+      <Col span={6}>col-6</Col>
+    </Row>
+  </div>
+);
+
+
+export const GridWithGutter = () => (
+  <div className="gutter-example">
+    <p>横向间距16</p>
+    <hr />
+    <Row gutter={16}>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+    </Row>
+    <p>横向间距16，纵向间距48</p>
+    <hr />
+    <Row gutter={[16, 48]}>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+    </Row>
+    <p>横向间距16，纵向间距24</p>
+    <hr />
+    <Row gutter={[16, 24]}>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div className="gutter-box">col-6</div>
+      </Col>
+    </Row>
+  </div>
+);
+
+export const GridWithOffset = () => (
+  <div>
+    <Row>
+      <Col span={8}>col-8</Col>
+      <Col span={8} offset={8}>
+        col-8
+      </Col>
+    </Row>
+    <Row>
+      <Col span={6} offset={6}>
+        col-6 col-offset-6
+      </Col>
+      <Col span={6} offset={6}>
+        col-6 col-offset-6
+      </Col>
+    </Row>
+    <Row>
+      <Col span={12} offset={6}>
+        col-12 col-offset-6
+      </Col>
+    </Row>
+  </div>
+);
+
+export const GridWithPullPush = () => (
+  <div>
+    <Row>
+      <Col span={18} push={6}>
+        col-18 col-push-6
+      </Col>
+      <Col span={6} pull={18}>
+        col-6 col-pull-18
+      </Col>
+    </Row>
+  </div>
+);
+
+export const GridWithTypeFlex = () => (
+  <div>
+    <p>sub-element align left</p>
+    <Row type="flex" justify="start">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element align center</p>
+    <Row type="flex" justify="center">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element align right</p>
+    <Row type="flex" justify="end">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element monospaced arrangement</p>
+    <Row type="flex" justify="space-between">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+
+    <p>sub-element align full</p>
+    <Row type="flex" justify="space-around">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
+  </div>
+);
+
+const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
+
+export const GridWithFlexChildVerticalAlign = () => (
+  <div className="demo5">
+    <p>Align Top</p>
+    <Row type="flex" justify="center" align="top">
+      <Col span={4}>
+        <DemoBox value={100}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={50}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={120}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={80}>col-4</DemoBox>
+      </Col>
+    </Row>
+
+    <p>Align Center</p>
+    <Row type="flex" justify="space-around" align="middle">
+      <Col span={4}>
+        <DemoBox value={100}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={50}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={120}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={80}>col-4</DemoBox>
+      </Col>
+    </Row>
+
+    <p>Align Bottom</p>
+    <Row type="flex" justify="space-between" align="bottom">
+      <Col span={4}>
+        <DemoBox value={100}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={50}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={120}>col-4</DemoBox>
+      </Col>
+      <Col span={4}>
+        <DemoBox value={80}>col-4</DemoBox>
+      </Col>
+    </Row>
+  </div>
+);
+
+export const GridWithFlexOrder = () => (
+  <div>
+    <Row type="flex">
+      <Col span={6} order={4}>
+        1 col-order-4
+      </Col>
+      <Col span={6} order={3}>
+        2 col-order-3
+      </Col>
+      <Col span={6} order={2}>
+        3 col-order-2
+      </Col>
+      <Col span={6} order={1}>
+        4 col-order-1
+      </Col>
+    </Row>
+  </div>
+);
+
+export const GridBootstrap = () => (
+  <div>
+    <Row>
+      <Col xs={2} sm={4} md={6} lg={8} xl={10}>
+        Col
+      </Col>
+      <Col xs={20} sm={16} md={12} lg={8} xl={4}>
+        Col
+      </Col>
+      <Col xs={2} sm={4} md={6} lg={8} xl={10}>
+        Col
+      </Col>
+    </Row>
+    <Row>
+      <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
+        Col
+      </Col>
+      <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
+        Col
+      </Col>
+      <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
+        Col
+      </Col>
+    </Row>
+  </div>
+);

package/grid/_story/grid.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Col, Row } from '../index';
+
+const stories = storiesOf('Grid', module);
+
+stories.add('grid default', () => (
+    <>
+        <Row>
+            <Col span={12}>col-24</Col>
+            <Col span={12}>col-12</Col>
+            <Col span={12}>col-12</Col>
+        </Row>
+    </>
+));

package/grid/col.tsx

@@ -0,0 +1,133 @@
+/**
+ * Implementation reference from: https://github.com/ant-design/ant-design/blob/master/components/grid/col.tsx
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { RowContext } from './row';
+import classnames from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/grid/constants';
+
+const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
+
+export interface ColSize {
+    span?: number;
+    order?: number;
+    offset?: number;
+    push?: number;
+    pull?: number;
+}
+
+export interface ColProps {
+    span?: number;
+    order?: number;
+    offset?: number;
+    push?: number;
+    pull?: number;
+    className?: string;
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    xs?: number | ColSize;
+    sm?: number | ColSize;
+    md?: number | ColSize;
+    lg?: number | ColSize;
+    xl?: number | ColSize;
+    xxl?: number | ColSize;
+}
+
+class Col extends React.Component<ColProps> {
+    static contextType = RowContext;
+
+    static propTypes = {
+        span: PropTypes.number,
+        order: PropTypes.number,
+        offset: PropTypes.number,
+        push: PropTypes.number,
+        pull: PropTypes.number,
+        className: PropTypes.string,
+        children: PropTypes.node,
+        xs: objectOrNumber,
+        sm: objectOrNumber,
+        md: objectOrNumber,
+        lg: objectOrNumber,
+        xl: objectOrNumber,
+        xxl: objectOrNumber,
+        prefixCls: PropTypes.string,
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX,
+    };
+
+    render() {
+        const { props } = this;
+        const { prefixCls, span, order, offset, push, pull, className, children, ...others } = props;
+
+        let sizeClassObj = {};
+
+        const prefix = `${prefixCls}-col`;
+
+        ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+            let sizeProps: ColSize = {};
+            if (typeof props[size] === 'number') {
+                sizeProps.span = props[size];
+            } else if (typeof props[size] === 'object') {
+                sizeProps = props[size] || {};
+            }
+
+            delete others[size];
+
+            sizeClassObj = {
+                ...sizeClassObj,
+                [`${prefix}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+                [`${prefix}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+                [`${prefix}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+                [`${prefix}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+                [`${prefix}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+            };
+        });
+        const classes = classnames(
+            prefix,
+            {
+                [`${prefix}-${span}`]: span !== undefined,
+                [`${prefix}-order-${order}`]: order,
+                [`${prefix}-offset-${offset}`]: offset,
+                [`${prefix}-push-${push}`]: push,
+                [`${prefix}-pull-${pull}`]: pull,
+            },
+            className,
+            sizeClassObj
+        );
+        let { style } = others;
+        let gutters;
+        try {
+            gutters = this.context.gutters;
+        } catch (error) {
+            throw new Error('please make sure <Col> inside <Row>');
+        }
+
+        style = {
+            ...(gutters[0] > 0 ?
+                {
+                    paddingLeft: gutters[0] / 2,
+                    paddingRight: gutters[0] / 2,
+                } :
+                {}),
+            ...(gutters[1] > 0 ?
+                {
+                    paddingTop: gutters[1] / 2,
+                    paddingBottom: gutters[1] / 2,
+                } :
+                {}),
+            ...style,
+        };
+
+        return (
+            <div {...others} style={style} className={classes}>
+                {children}
+            </div>
+        );
+    }
+}
+
+export default Col;

package/grid/index.tsx

@@ -0,0 +1,7 @@
+import Row from './row';
+import Col from './col';
+
+export { Row, Col };
+
+export { ColSize, ColProps } from './col';
+export { Breakpoint, Gutter, RowProps } from './row';

package/grid/row.tsx

@@ -0,0 +1,174 @@
+/**
+ * Implementation reference from: https://github.com/ant-design/ant-design/blob/master/components/grid/row.tsx
+ */
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/grid/constants';
+import '@douyinfe/semi-foundation/grid/grid.scss';
+import { registerMediaQuery } from '../_utils';
+
+const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+
+export const RowContext = React.createContext<{ gutters: Gutter | [Gutter, Gutter] }>(null);
+
+export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+
+export type Gutter = number | Partial<Record<Breakpoint, number>>;
+
+export interface RowProps {
+    type?: 'flex';
+    align?: 'top' | 'middle' | 'bottom';
+    justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    gutter?: Gutter | [Gutter, Gutter];
+    prefixCls?: string;
+}
+
+export interface RowState {
+    screens: Partial<Record<Breakpoint, boolean>>;
+}
+
+const responsiveMap = {
+    xs: '(max-width: 575px)',
+    sm: '(min-width: 576px)',
+    md: '(min-width: 768px)',
+    lg: '(min-width: 992px)',
+    xl: '(min-width: 1200px)',
+    xxl: '(min-width: 1600px)',
+};
+
+class Row extends React.Component<RowProps, RowState> {
+    static propTypes = {
+        type: PropTypes.oneOf(['flex']),
+        align: PropTypes.oneOf(['top', 'middle', 'bottom']),
+        justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
+        className: PropTypes.string,
+        style: PropTypes.object,
+        children: PropTypes.node,
+        gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+        prefixCls: PropTypes.string,
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX,
+    };
+
+    static RowContext = {
+        gutters: PropTypes.any,
+    };
+
+    state = {
+        screens: {
+            xs: true,
+            sm: true,
+            md: true,
+            lg: true,
+            xl: true,
+            xxl: true,
+        }
+    };
+
+    unRegisters: Array<() => void> = [];
+
+    componentDidMount() {
+        this.unRegisters = Object.keys(responsiveMap).map(screen => registerMediaQuery(responsiveMap[screen], {
+            match: () => {
+                if (typeof this.props.gutter !== 'object') {
+                    return;
+                }
+                this.setState(prevState => ({
+                    screens: {
+                        ...prevState.screens,
+                        [screen]: true,
+                    },
+                }));
+            },
+            unmatch: () => {
+                if (typeof this.props.gutter !== 'object') {
+                    return;
+                }
+                this.setState(prevState => ({
+                    screens: {
+                        ...prevState.screens,
+                        [screen]: false,
+                    },
+                }));
+            },
+        }));
+    }
+
+    componentWillUnmount() {
+        this.unRegisters.forEach(unRegister => unRegister());
+    }
+
+    getGutter() {
+        const { gutter = 0 } = this.props;
+        const results: [number, number] = [0, 0];
+        const normalizedGutter = Array.isArray(gutter) ? gutter.slice(0, 2) : [gutter, 0];
+        normalizedGutter.forEach((g, index) => {
+            if (typeof g === 'object') {
+                for (let i = 0; i < responsiveArray.length; i++) {
+                    const breakpoint = responsiveArray[i];
+                    if (this.state.screens[breakpoint] && g[breakpoint] !== undefined) {
+                        results[index] = g[breakpoint];
+                        break;
+                    }
+                }
+            } else {
+                results[index] = g || 0;
+            }
+        });
+        return results;
+    }
+
+    render() {
+        const { prefixCls, type, justify, align, className, style, children, ...others } = this.props;
+        const gutters = this.getGutter();
+
+        const prefix = `${prefixCls}-row`;
+
+        const classes = classnames(
+            {
+                [prefix]: type !== 'flex',
+                [`${prefix}-${type}`]: type,
+                [`${prefix}-${type}-${justify}`]: type && justify,
+                [`${prefix}-${type}-${align}`]: type && align,
+            },
+            className
+        );
+        const rowStyle = {
+            ...(gutters[0] > 0 ?
+                {
+                    marginLeft: gutters[0] / -2,
+                    marginRight: gutters[0] / -2,
+                } :
+                {}),
+            ...(gutters[1] > 0 ?
+                {
+                    marginTop: gutters[1] / -2,
+                    marginBottom: gutters[1] / -2,
+                } :
+                {}),
+            ...style,
+        };
+
+        const otherProps = { ...others };
+        delete otherProps.gutter;
+        return (
+            <RowContext.Provider
+                value={{
+                    gutters,
+                }}
+            >
+                <div {...otherProps} className={classes} style={rowStyle}>
+                    {children}
+                </div>
+            </RowContext.Provider>
+        );
+    }
+}
+
+export default Row;