feffery_antd_components 0.1.16 → 0.2.0-rc1

package/src/lib/components/grid/AntdCol.react.js

@@ -1,61 +1,65 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Col } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from '../utils';
 
 // 定义列组件AntdCol，api参数参考https://ant.design/components/grid-cn/
-export default class AntdCol extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            span,
-            offset,
-            order,
-            pull,
-            push,
-            flex,
-            xs,
-            sm,
-            md,
-            lg,
-            xl,
-            xxl,
-            setProps,
-            loading_state
-        } = this.props;
-
-        children = parseChildrenToArray(children)
-
-        return (
-            <Col id={id}
-                className={className}
-                style={{ height: '100%', ...style }}
-                key={key}
-                span={span}
-                offset={offset}
-                order={order}
-                pull={pull}
-                push={push}
-                flex={flex}
-                xs={xs}
-                sm={sm}
-                md={md}
-                lg={lg}
-                xl={xl}
-                xxl={xxl}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
-                {children}
-            </Col>
-        );
-    }
+const AntdCol = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        span,
+        offset,
+        order,
+        pull,
+        push,
+        flex,
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+        xxl,
+        setProps,
+        loading_state
+    } = props;
+
+    children = parseChildrenToArray(children)
+
+    return (
+        <Col id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={{ height: '100%', ...style }}
+            key={key}
+            span={span}
+            offset={offset}
+            order={order}
+            pull={pull}
+            push={push}
+            flex={flex}
+            xs={xs}
+            sm={sm}
+            md={md}
+            lg={lg}
+            xl={xl}
+            xxl={xxl}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {children}
+        </Col>
+    );
 }
 
 // 定义参数或属性
@@ -69,7 +73,10 @@ AntdCol.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -241,3 +248,5 @@ AntdCol.propTypes = {
 // 设置默认参数
 AntdCol.defaultProps = {
 }
+
+export default AntdCol;

package/src/lib/components/grid/AntdRow.react.js

@@ -1,45 +1,49 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col } from 'antd';
+import { Row } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from '../utils';
 
 // 定义行组件AntdRow，api参数参考https://ant.design/components/grid-cn/
-export default class AntdRow extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            align,
-            gutter,
-            justify,
-            wrap,
-            setProps,
-            loading_state
-        } = this.props;
-
-        children = parseChildrenToArray(children)
-
-        return (
-            <Row id={id}
-                className={className}
-                style={style}
-                key={key}
-                align={align}
-                gutter={gutter}
-                justify={justify}
-                wrap={wrap}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
-                {children}
-            </Row>
-        );
-    }
+const AntdRow = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        align,
+        gutter,
+        justify,
+        wrap,
+        setProps,
+        loading_state
+    } = props;
+
+    children = parseChildrenToArray(children)
+
+    return (
+        <Row id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            align={align}
+            gutter={gutter}
+            justify={justify}
+            wrap={wrap}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {children}
+        </Row>
+    );
 }
 
 // 定义参数或属性
@@ -53,7 +57,10 @@ AntdRow.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -112,3 +119,5 @@ AntdRow.propTypes = {
 // 设置默认参数
 AntdRow.defaultProps = {
 }
+
+export default AntdRow;

package/src/lib/components/layout/AntdContent.react.js

@@ -1,39 +1,43 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Layout } from 'antd';
+import { useCss } from 'react-use';
+import { isString } from 'lodash';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from '../utils';
 
 const { Content } = Layout;
 
 // 定义内容组件AntdContent，api参数参考https://ant.design/components/layout-cn/
-export default class AntdContent extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            setProps,
-            loading_state
-        } = this.props;
+const AntdContent = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        setProps,
+        loading_state
+    } = props;
 
-        children = parseChildrenToArray(children)
+    children = parseChildrenToArray(children)
 
-        return (
-            <Content id={id}
-                className={className}
-                style={style}
-                key={key}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
-                {children}
-            </Content>
-        );
-    }
+    return (
+        <Content id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {children}
+        </Content>
+    );
 }
 
 // 定义参数或属性
@@ -47,7 +51,10 @@ AntdContent.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -80,3 +87,5 @@ AntdContent.propTypes = {
 // 设置默认参数
 AntdContent.defaultProps = {
 }
+
+export default AntdContent;

package/src/lib/components/layout/AntdFooter.react.js

@@ -1,39 +1,43 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Layout } from 'antd';
+import { isString } from 'lodash';
+import { useCss } from 'react-use';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from '../utils';
 
 const { Footer } = Layout;
 
 // 定义页尾组件AntdFooter，api参数参考https://ant.design/components/layout-cn/
-export default class AntdFooter extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            setProps,
-            loading_state
-        } = this.props;
+const AntdFooter = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        setProps,
+        loading_state
+    } = props;
 
-        children = parseChildrenToArray(children)
+    children = parseChildrenToArray(children)
 
-        return (
-            <Footer id={id}
-                className={className}
-                style={style}
-                key={key}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
-                {children}
-            </Footer>
-        );
-    }
+    return (
+        <Footer id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {children}
+        </Footer>
+    );
 }
 
 // 定义参数或属性
@@ -47,7 +51,10 @@ AntdFooter.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -79,4 +86,6 @@ AntdFooter.propTypes = {
 
 // 设置默认参数
 AntdFooter.defaultProps = {
-}
+}
+
+export default AntdFooter;

package/src/lib/components/layout/AntdHeader.react.js

@@ -1,39 +1,43 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Layout } from 'antd';
+import { isString } from 'lodash';
+import { useCss } from 'react-use';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from '../utils';
 
 const { Header } = Layout;
 
 // 定义页首组件AntdHeader，api参数参考https://ant.design/components/layout-cn/
-export default class AntdHeader extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            setProps,
-            loading_state
-        } = this.props;
+const AntdHeader = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        setProps,
+        loading_state
+    } = props;
 
-        children = parseChildrenToArray(children)
+    children = parseChildrenToArray(children)
 
-        return (
-            <Header id={id}
-                className={className}
-                style={style}
-                key={key}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
-                {children}
-            </Header>
-        );
-    }
+    return (
+        <Header id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {children}
+        </Header>
+    );
 }
 
 // 定义参数或属性
@@ -47,7 +51,10 @@ AntdHeader.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -80,3 +87,5 @@ AntdHeader.propTypes = {
 // 设置默认参数
 AntdHeader.defaultProps = {
 }
+
+export default AntdHeader;

package/src/lib/components/layout/AntdLayout.react.js

@@ -1,37 +1,41 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Layout } from 'antd';
+import { isString } from 'lodash';
+import { useCss } from 'react-use';
 import 'antd/dist/antd.css';
 import { parseChildrenToArray } from '../utils';
 
 // 定义布局组件AntdLayout，api参数参考https://ant.design/components/layout-cn/
-export default class AntdLayout extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            key,
-            setProps,
-            loading_state
-        } = this.props;
+const AntdLayout = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        className,
+        style,
+        key,
+        setProps,
+        loading_state
+    } = props;
 
-        children = parseChildrenToArray(children)
+    children = parseChildrenToArray(children)
 
-        return (
-            <Layout id={id}
-                className={className}
-                style={style}
-                key={key}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }>
-                {children}
-            </Layout>
-        );
-    }
+    return (
+        <Layout id={id}
+            className={
+                isString(className) ?
+                    className :
+                    useCss(className)
+            }
+            style={style}
+            key={key}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            {children}
+        </Layout>
+    );
 }
 
 // 定义参数或属性
@@ -45,7 +49,10 @@ AntdLayout.propTypes = {
     children: PropTypes.node,
 
     // css类名
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
 
     // 自定义css字典
     style: PropTypes.object,
@@ -78,3 +85,5 @@ AntdLayout.propTypes = {
 // 设置默认参数
 AntdLayout.defaultProps = {
 }
+
+export default AntdLayout;