feffery_antd_components 0.1.4 → 0.1.7

package/src/lib/components/AntdAnchor.react.js

@@ -5,7 +5,7 @@ import 'antd/dist/antd.css';
 
 const { Link } = Anchor;
 
-// 定义分割线组件AntdAnchor，api参数参考https://ant.design/components/anchor-cn/
+// 定义锚点组件AntdAnchor，api参数参考https://ant.design/components/anchor-cn/
 export default class AntdAnchor extends Component {
     render() {
         // 取得必要属性或参数
@@ -17,6 +17,9 @@ export default class AntdAnchor extends Component {
             align,
             containerId,
             targetOffset,
+            affix,
+            bounds,
+            offsetTop,
             loading_state
         } = this.props;
 
@@ -66,7 +69,10 @@ export default class AntdAnchor extends Component {
                         className={className}
                         style={style}
                         getContainer={containerId ? () => document.getElementById(containerId) : containerId}
-                        targetOffset={targetOffset}>
+                        targetOffset={targetOffset}
+                        affix={affix}
+                        bounds={bounds}
+                        offsetTop={offsetTop}>
                         {linkDict}
                     </Anchor>
                 }
@@ -108,9 +114,18 @@ AntdAnchor.propTypes = {
     // 设置其绑定的容器id
     containerId: PropTypes.string,
 
-    // 设置锚点位移偏移量
+    // 设置锚点位移偏移量，默认与offsetTop相同
     targetOffset: PropTypes.number,
 
+    // 设置是否开启“固定模式”，默认为true
+    affix: PropTypes.bool,
+
+    // 设置锚点区域的边界像素大小，默认为5
+    bounds: PropTypes.number,
+
+    // 设置距离窗口顶部触发锚定效果的指定像素偏移量
+    offsetTop: PropTypes.number,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

package/src/lib/components/AntdButton.react.js

@@ -22,7 +22,7 @@ export default class AntdButton extends Component {
             shape,
             size,
             nClicks,
-            htmlType,
+            loading,
             loading_state
         } = this.props;
 
@@ -45,6 +45,7 @@ export default class AntdButton extends Component {
                     // 更新nClicks
                     setProps({ nClicks: nClicks })
                 }}
+                loading={loading}
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
                 }
@@ -95,6 +96,9 @@ AntdButton.propTypes = {
     // 记录按钮从渲染后开始被点击的次数，默认为0
     nClicks: PropTypes.number,
 
+    // 用于设置是否为按钮渲染“加载中不可点击”效果，默认为false
+    loading: PropTypes.bool,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

package/src/lib/components/AntdCascader.react.js

@@ -33,6 +33,7 @@ export default class AntdCascader extends Component {
             maxTagCount,
             multiple,
             expandTrigger,
+            status,
             setProps,
             persistence,
             persisted_props,
@@ -71,6 +72,7 @@ export default class AntdCascader extends Component {
                     persisted_props={persisted_props}
                     persistence_type={persistence_type}
                     expandTrigger={expandTrigger}
+                    status={status}
                     showSearch={filter}
                     onChange={onSelect}
                     data-dash-is-loading={
@@ -169,6 +171,9 @@ AntdCascader.propTypes = {
     // 设置子菜单展开交互方式，可选的有'click'和'hover'，默认为'click'
     expandTrigger: PropTypes.oneOf(['click', 'hover']),
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

package/src/lib/components/AntdDatePicker.react.js

@@ -54,6 +54,7 @@ export default class AntdDatePicker extends Component {
             defaultValue,
             bordered,
             size,
+            status,
             persistence,
             persisted_props,
             persistence_type,
@@ -90,6 +91,7 @@ export default class AntdDatePicker extends Component {
                         value={value ? moment(value, format) : undefined}
                         defaultValue={defaultValue ? moment(defaultValue, format) : undefined}
                         showTime={showTime}
+                        status={status}
                         persistence={persistence}
                         persisted_props={persisted_props}
                         persistence_type={persistence_type}
@@ -156,6 +158,9 @@ AntdDatePicker.propTypes = {
         'small', 'middle', 'large'
     ]),
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     /**
     * Object that holds the loading state object coming from dash-renderer
     */

package/src/lib/components/AntdDateRangePicker.react.js

@@ -55,6 +55,7 @@ export default class AntdDateRangePicker extends Component {
             bordered,
             size,
             defaultPickerValue,
+            status,
             persistence,
             persisted_props,
             persistence_type,
@@ -101,6 +102,7 @@ export default class AntdDateRangePicker extends Component {
                                 [moment(defaultValue[0], format), moment(defaultValue[1], format)] :
                                 undefined
                         }
+                        status={status}
                         persistence={persistence}
                         persisted_props={persisted_props}
                         persistence_type={persistence_type}
@@ -161,6 +163,9 @@ AntdDateRangePicker.propTypes = {
     // 设置日期面板默认的时间位置
     defaultPickerValue: PropTypes.string,
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     /**
     * Object that holds the loading state object coming from dash-renderer
     */

package/src/lib/components/AntdDraggerUpload.react.js

@@ -26,6 +26,7 @@ const AntdDraggerUpload = (props) => {
         fileListMaxLength,
         fileTypes,
         fileMaxSize,
+        showUploadList,
         multiple,
         directory,
         failedTooltipInfo,
@@ -65,16 +66,38 @@ const AntdDraggerUpload = (props) => {
 
             if (info.file.status === 'done') {
 
-                // 更新任务记录
-                setProps({
-                    lastUploadTaskRecord: {
-                        fileName: info.file.name,
-                        fileSize: info.file.size,
-                        completeTimestamp: new Date().getTime(),
-                        taskStatus: 'success',
-                        taskId: uploadId
+                // 检查是否为多文件上传模式
+                if (multiple || directory) {
+                    // 检查上传列表中是否全部文件都已完成上传
+                    if (info.fileList.every(file => file.status === 'done')) {
+                        console.log(info.fileList)
+                        // 更新任务记录
+                        setProps({
+                            lastUploadTaskRecord: info.fileList.map(
+                                (file) => {
+                                    return {
+                                        fileName: file.name,
+                                        fileSize: file.size,
+                                        completeTimestamp: new Date().getTime(),
+                                        taskStatus: 'success',
+                                        taskId: uploadId
+                                    }
+                                }
+                            )
+                        })
                     }
-                })
+                } else {
+                    // 更新任务记录
+                    setProps({
+                        lastUploadTaskRecord: {
+                            fileName: info.file.name,
+                            fileSize: info.file.size,
+                            completeTimestamp: new Date().getTime(),
+                            taskStatus: 'success',
+                            taskId: uploadId
+                        }
+                    })
+                }
                 message.success(`${info.file.name} 上传成功！`);
             } else if (info.file.status === 'error') {
 
@@ -106,7 +129,11 @@ const AntdDraggerUpload = (props) => {
             )
 
             // 基于fileListMaxLength参数设置，对fileList状态进行更新
-            updateFileList(info.fileList.slice(-fileListMaxLength))
+            if (fileListMaxLength) {
+                updateFileList(info.fileList.slice(-fileListMaxLength))
+            } else {
+                updateFileList(info.fileList)
+            }
         },
     };
 
@@ -187,6 +214,9 @@ AntdDraggerUpload.propTypes = {
     // 自定义上传失败文件鼠标悬浮tooltip文字内容，默认为'上传失败'
     failedTooltipInfo: PropTypes.string,
 
+    // 设置是否显示已上传文件列表，默认为true
+    showUploadList: PropTypes.bool,
+
     // 用于在每次文件上传动作完成后，记录相关的信息
     lastUploadTaskRecord: PropTypes.exact({
         // 记录文件名称
@@ -230,7 +260,7 @@ AntdDraggerUpload.propTypes = {
 
 // 设置默认参数
 AntdDraggerUpload.defaultProps = {
-    fileListMaxLength: 3,
+    fileListMaxLength: null,
     fileMaxSize: 500,
     lastUploadTaskRecord: {},
     locale: 'zh-cn'

package/src/lib/components/AntdImage.react.js

@@ -96,10 +96,16 @@ AntdImage.propTypes = {
     alt: PropTypes.string,
 
     // 设置像素宽度
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
 
     // 设置图像高度
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
 
     // 设置图片源地址，单个字符串传入时为单图片模式
     // 多个字符串数组传入时为多图片切换模式

package/src/lib/components/AntdInput.react.js

@@ -43,6 +43,7 @@ export default class AntdInput extends Component {
             showCount,
             nClicksSearch,
             nSubmit,
+            status,
             setProps,
             loading_state,
             persistence,
@@ -82,6 +83,7 @@ export default class AntdInput extends Component {
                     defaultValue={defaultValue}
                     disabled={disabled}
                     maxLength={maxLength}
+                    status={status}
                     onChange={onChange}
                     onPressEnter={onPressEnter}
                     persistence={persistence}
@@ -105,6 +107,7 @@ export default class AntdInput extends Component {
                     defaultValue={defaultValue}
                     disabled={disabled}
                     maxLength={maxLength}
+                    status={status}
                     onSearch={onSearch}
                     onChange={onChange}
                     onPressEnter={onPressEnter}
@@ -130,6 +133,7 @@ export default class AntdInput extends Component {
                     disabled={disabled}
                     maxLength={maxLength}
                     showCount={showCount}
+                    status={status}
                     onChange={onChange}
                     onPressEnter={onPressEnter}
                     persistence={persistence}
@@ -152,6 +156,7 @@ export default class AntdInput extends Component {
                     value={value}
                     defaultValue={defaultValue}
                     maxLength={maxLength}
+                    status={status}
                     onChange={(e) => {
                         // 若启用md5加密
                         if (passwordUseMd5) {
@@ -254,6 +259,9 @@ AntdInput.propTypes = {
     // 记录search模式下搜索按钮被点按的次数
     nClicksSearch: PropTypes.number,
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.

package/src/lib/components/AntdInputNumber.react.js

@@ -37,6 +37,7 @@ export default class AntdInputNumber extends Component {
             readOnly,
             stringMode,
             nSubmit,
+            status,
             setProps,
             persistence,
             persisted_props,
@@ -78,6 +79,7 @@ export default class AntdInputNumber extends Component {
                 precision={precision}
                 readOnly={readOnly}
                 stringMode={stringMode}
+                status={status}
                 onChange={onChange}
                 onPressEnter={onPressEnter}
                 onStep={onStep}
@@ -169,6 +171,9 @@ AntdInputNumber.propTypes = {
     // 记录聚焦于输入框内部时，enter键被点按的次数
     nSubmit: PropTypes.number,
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

package/src/lib/components/AntdMentions.react.js

@@ -21,6 +21,7 @@ export default class AntdMentions extends Component {
             value,
             options,
             disabled,
+            status,
             setProps,
             loading_state
         } = this.props;
@@ -66,6 +67,7 @@ export default class AntdMentions extends Component {
                 defaultValue={defaultValue}
                 placement={placement}
                 disabled={disabled}
+                status={status}
                 onChange={onChange}
                 onSelect={onSelect}
                 getPopupContainer={(triggerNode) => triggerNode.parentNode.parentNode.parentNode}
@@ -136,6 +138,9 @@ AntdMentions.propTypes = {
     // 设置是否禁用，默认为false
     disabled: PropTypes.bool,
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

package/src/lib/components/AntdMessage.react.js

@@ -17,6 +17,7 @@ export default class AntdMessage extends Component {
             type,
             duration,
             icon,
+            top,
             loading_state,
             setProps
         } = this.props;
@@ -25,7 +26,8 @@ export default class AntdMessage extends Component {
             className: className,
             style: style,
             content: content,
-            duration: duration
+            duration: duration,
+            top: top
         }
 
         if (icon) {
@@ -91,6 +93,9 @@ AntdMessage.propTypes = {
     // 设置通知从显示到自动消失的时长（秒），默认为3，当传入0时表示不会自动消失
     duration: PropTypes.number,
 
+    // 设置消息距离顶端的像素距离，默认为8
+    top: PropTypes.number,
+
     // 设置自定义icon，与AntdIcon中支持的图标相对应
     icon: PropTypes.string,
 

package/src/lib/components/AntdPasteImage.react.js

@@ -0,0 +1,170 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Card, Button, ConfigProvider, Image as Image_ } from 'antd';
+import zhCN from 'antd/lib/locale/zh_CN';
+import { Gluejar } from '@charliewilco/gluejar'
+import { DeleteOutlined } from '@ant-design/icons';
+import './styles.css'
+import 'antd/dist/antd.css';
+
+const urlToBase64 = (url) => {
+    return new Promise((resolve, reject) => {
+        let image = new Image();
+        image.onload = function () {
+            let canvas = document.createElement('canvas');
+            canvas.width = this.naturalWidth;
+            canvas.height = this.naturalHeight;
+            // 将图片插入画布并开始绘制
+            canvas.getContext('2d').drawImage(image, 0, 0);
+            // result
+            let result = canvas.toDataURL('image/png')
+            resolve(result);
+        };
+        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
+        image.setAttribute("crossOrigin", 'Anonymous');
+        image.src = url;
+        // 图片加载失败的错误处理
+        image.onerror = () => {
+            reject(new Error('urlToBase64 error'));
+        };
+    }
+    )
+}
+
+// 定义图片粘贴组件AntdPasteImage，api参数参考https://github.com/charliewilco/react-gluejar
+const AntdPasteImage = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        className,
+        style,
+        currentPastedImages,
+        deletedIdx,
+        imageHeight,
+        setProps,
+        loading_state
+    } = props;
+
+    const handlePaste = useCallback(async (files) => {
+        let results = []
+        for (let i = 0; i < files.images.length; i++) {
+            if (deletedIdx.indexOf(i) === -1) {
+                let result = await urlToBase64(files.images[i])
+                results.push(result)
+            }
+        }
+        setProps({
+            currentPastedImages: results
+        })
+    }, []);
+
+    const handleDelete = useCallback((idx) => {
+        if (!deletedIdx) {
+            deletedIdx = [idx]
+        } else if (deletedIdx.indexOf(idx) === -1) {
+            deletedIdx.push(idx)
+        }
+        setProps({
+            currentPastedImages: currentPastedImages.filter((value, idx) => deletedIdx.indexOf(idx) === -1),
+            deletedIdx: deletedIdx
+        })
+    }, []);
+
+    return (
+        <div id={id}
+            className={className}
+            style={style}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }>
+            <Gluejar
+                key={0}
+                onPaste={handlePaste}>
+                {({ images }) => {
+                    if (images.length > 0) {
+                        return (
+                            <ConfigProvider locale={zhCN}>
+                                <Card style={{ height: '100%', border: 'none' }}>
+                                    {
+                                        images.map((image, idx) => {
+                                            return deletedIdx.indexOf(idx) === -1 ? (
+                                                <Card.Grid
+                                                    style={{ width: '25%', height: imageHeight, padding: 5, cursor: 'pointer', position: 'relative' }}
+                                                >
+                                                    <Button shape="circle" size={"small"} icon={<DeleteOutlined />}
+                                                        style={{ position: 'absolute', 'right': 10, top: 10, zIndex: 1 }}
+                                                        onClick={() => handleDelete(idx)} />
+                                                    <Image_ src={image}
+                                                        key={idx}
+                                                        alt={`Pasted: ${idx}`}
+                                                        width={"100%"}
+                                                        height={"100%"}
+                                                        style={{ borderTop: '1px solid #f0f0f0', objectFit: 'contain' }} />
+                                                </Card.Grid>
+                                            ) : null
+                                        }
+                                        )
+                                    }
+                                </Card>
+                            </ConfigProvider>
+                        );
+                    }
+                    return null;
+                }
+                }
+            </Gluejar>
+        </div >
+    );
+}
+
+// 定义参数或属性
+AntdPasteImage.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 存储当前保存的所有图片的base64字符串
+    currentPastedImages: PropTypes.arrayOf(PropTypes.any),
+
+    // 记录生命周期内第几次接受新图片粘贴，进而辅助删除图片操作
+    deletedIdx: PropTypes.arrayOf(PropTypes.number),
+
+    // 设置每张图片块的像素高度，默认为200
+    imageHeight: PropTypes.number,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    }),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};
+
+// 设置默认参数
+AntdPasteImage.defaultProps = {
+    className: 'feffery-paste-image-container',
+    imageHeight: 200,
+    currentPastedImages: [],
+    deletedIdx: []
+}
+
+export default AntdPasteImage;

package/src/lib/components/AntdSelect.react.js

@@ -38,6 +38,8 @@ export default class AntdSelect extends Component {
             maxTagCount,
             listHeight,
             colorsMode,
+            placement,
+            status,
             loading_state,
             persistence,
             persisted_props,
@@ -148,6 +150,8 @@ export default class AntdSelect extends Component {
                     listHeight={listHeight}
                     disabled={disabled}
                     showSearch={true}
+                    placement={placement}
+                    status={status}
                     persistence={persistence}
                     persisted_props={persisted_props}
                     persistence_type={persistence_type}
@@ -273,6 +277,13 @@ AntdSelect.propTypes = {
     // 色带模式下用于设置连续色带还是离散色带，可选的有'sequential'、'diverging'
     colorsMode: PropTypes.oneOf(['sequential', 'diverging']),
 
+    // 用于设置悬浮展开层的方位，可选的有'bottomLeft'、'bottomRight'、'topLeft'、'topRight'
+    // 默认为'bottomLeft'
+    placement: PropTypes.oneOf(['bottomLeft', 'bottomRight', 'topLeft', 'topRight']),
+
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not