feffery_utils_components 0.0.9 → 0.0.13

package/build/lib/feffery_utils_components/package-info.json

@@ -1,84 +0,0 @@
-{
-  "name": "feffery_utils_components",
-  "version": "0.0.8",
-  "description": "Utility augments components of Dash!",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/https://github.com/CNFeffery/feffery-utils-components.git"
-  },
-  "bugs": {
-    "url": "https://github.com/https://github.com/CNFeffery/feffery-utils-components/issues"
-  },
-  "homepage": "https://github.com/https://github.com/CNFeffery/feffery-utils-components",
-  "main": "build/index.js",
-  "scripts": {
-    "start": "webpack-serve --config ./webpack.serve.config.js --open",
-    "build:js": "webpack --mode production",
-    "build:backends": "dash-generate-components ./src/lib/components feffery_utils_components -p package-info.json --r-prefix '' --jl-prefix ''",
-    "build:backends-activated": "(. venv/bin/activate || venv\\scripts\\activate && npm run build:py_and_r)",
-    "build": "npm run build:js && npm run build:backends",
-    "build:activated": "npm run build:js && npm run build:backends-activated"
-  },
-  "author": "CNFeffery <fefferypzy@gmail.com>",
-  "license": "MIT",
-  "dependencies": {
-    "@ant-design/pro-layout": "^6.24.0",
-    "@charliewilco/gluejar": "^1.0.0",
-    "byte-guide": "^1.0.7",
-    "file-loader": "^6.2.0",
-    "github-markdown-css": "^5.0.0",
-    "less": "^3.13.1",
-    "less-loader": "^5.0.0",
-    "ninja-keys": "^1.1.12",
-    "nprogress": "^0.2.0",
-    "ramda": "^0.26.1",
-    "re-resizable": "^6.9.1",
-    "react-captcha-code": "^1.0.7",
-    "react-contexify": "^5.0.0",
-    "react-copy-to-clipboard": "^5.0.4",
-    "react-icons": "^4.3.1",
-    "react-split": "^2.0.14",
-    "react-syntax-highlighter": "^15.4.4"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
-    "@babel/preset-react": "^7.0.0",
-    "@plotly/dash-component-plugins": "^1.2.0",
-    "@plotly/webpack-dash-dynamic-import": "^1.2.0",
-    "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
-    "copyfiles": "^2.1.1",
-    "css-loader": "^3.0.0",
-    "eslint": "^6.0.1",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-react": "^7.14.2",
-    "npm": "^6.1.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-docgen": "^4.1.1",
-    "react-dom": "^16.8.6",
-    "style-loader": "^0.23.1",
-    "styled-jsx": "^3.2.1",
-    "terser-webpack-plugin": "^2.3.0",
-    "url-loader": "^4.1.1",
-    "webpack": "4.36.1",
-    "webpack-cli": "3.3.6",
-    "webpack-serve": "3.1.0"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-react",
-      "@babel/preset-env"
-    ],
-    "plugins": [
-      "@babel/plugin-transform-react-jsx"
-    ]
-  },
-  "engines": {
-    "node": ">=8.11.0",
-    "npm": ">=6.1.0"
-  }
-}

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

@@ -1,168 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Card, Button } from 'antd';
-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'));
-        };
-    }
-    )
-}
-
-// 定义图片粘贴组件FefferyPasteImage，api参数参考https://github.com/charliewilco/react-gluejar
-const FefferyPasteImage = (props) => {
-    // 取得必要属性或参数
-    let {
-        id,
-        className,
-        style,
-        currentPastedImages,
-        deletedIdx,
-        imageHeight,
-        setProps
-    } = 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}>
-            <Gluejar
-                key={1}
-                onPaste={handlePaste}
-                container={document.getElementById(id)}
-                onError={err => console.error(err)}>
-                {({ images }) => {
-                    if (images.length > 0) {
-                        console.log('渲染！')
-                        return (
-                            <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 }}
-                                                    onClick={() => handleDelete(idx)} />
-                                                <img src={image} key={image} alt={`Pasted: ${image}`}
-                                                    style={{ borderTop: '1px solid #f0f0f0', height: '100%', width: '100%', objectFit: 'contain' }} />
-                                            </Card.Grid>
-                                        ) : null
-                                    }
-                                    )
-                                }
-                            </Card>
-                        );
-                    }
-                    return null;
-                }
-                }
-            </Gluejar>
-        </div >
-    );
-}
-
-// 定义参数或属性
-FefferyPasteImage.propTypes = {
-    // 部件id
-    id: PropTypes.string.isRequired,
-
-    /**
-     * The content of the tab - will only be displayed if this tab is selected
-     */
-    children: PropTypes.node,
-
-    // 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
-};
-
-// 设置默认参数
-FefferyPasteImage.defaultProps = {
-    className: 'feffery-paste-image-container',
-    imageHeight: 200,
-    currentPastedImages: [],
-    deletedIdx: []
-}
-
-
-export default FefferyPasteImage;

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

@@ -1,112 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { WaterMark } from '@ant-design/pro-layout';
-import '@ant-design/pro-layout/dist/layout.css';
-
-const parseChildrenToArray = children => {
-    if (children && !Array.isArray(children)) {
-        return [children];
-    }
-    return children;
-};
-
-// 定义水印部件FefferyWaterMark，api参数参考https://procomponents.ant.design/components/water-mark
-export default class FefferyWaterMark extends Component {
-    render() {
-        // 取得必要属性或参数
-        let {
-            id,
-            children,
-            className,
-            style,
-            content,
-            rotate,
-            zIndex,
-            fontColor,
-            fontSize,
-            gapX,
-            gapY,
-            setProps
-        } = this.props;
-
-        children = parseChildrenToArray(children)
-
-        return (
-            <WaterMark id={id}
-                className={className}
-                style={style}
-                content={content}
-                rotate={rotate}
-                zIndex={zIndex}
-                fontColor={fontColor}
-                fontSize={fontSize}
-                gapX={gapX}
-                gapY={gapY}>
-                {children}
-            </WaterMark>
-        );
-    }
-}
-
-// 定义参数或属性
-FefferyWaterMark.propTypes = {
-    // 部件id
-    id: PropTypes.string,
-
-    /**
-     * The content of the tab - will only be displayed if this tab is selected
-     */
-    children: PropTypes.node,
-
-    // css类名
-    className: PropTypes.string,
-
-    // 自定义css字典
-    style: PropTypes.object,
-
-    // 设置水印文字内容
-    content: PropTypes.string,
-
-    // 设置水印旋转角度，默认-22
-    rotate: PropTypes.number,
-
-    // 设置水印z-index
-    zIndex: PropTypes.number,
-
-    // 设置水印文字颜色
-    fontColor: PropTypes.string,
-
-    // 设置水印字体像素大小，默认16
-    fontSize: PropTypes.number,
-
-    // 水印之间的水平像素间距，默认为212
-    gapX: PropTypes.number,
-
-    // 水印之间的垂直间距，默认为222
-    gapY: 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
-};
-
-// 设置默认参数
-FefferyWaterMark.defaultProps = {
-}