feffery_utils_components 0.0.4 → 0.0.5

package/feffery_utils_components/feffery_utils_components.min.js.LICENSE.txt

@@ -4,13 +4,6 @@
   http://jedwatson.github.io/classnames
 */
 
-/*!
- * Determine if an object is a Buffer
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
 /**
  * @license
  * Lodash <https://lodash.com/>
@@ -37,12 +30,3 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/** @license React v17.0.2
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/feffery_utils_components/metadata.json

@@ -98,51 +98,79 @@
       }
     }
   },
-  "src/lib/components/FefferyMarkdown.react.js": {
+  "src/lib/components/FefferyPasteImage.react.js": {
     "description": "",
-    "displayName": "FefferyMarkdown",
+    "displayName": "FefferyPasteImage",
     "methods": [],
     "props": {
       "id": {
         "type": {
           "name": "string"
         },
-        "required": false,
+        "required": true,
         "description": ""
       },
-      "markdownStr": {
+      "children": {
         "type": {
-          "name": "string"
+          "name": "node"
         },
         "required": false,
-        "description": ""
+        "description": "The content of the tab - will only be displayed if this tab is selected"
       },
-      "codeStyle": {
+      "className": {
         "type": {
           "name": "string"
         },
         "required": false,
         "description": "",
         "defaultValue": {
-          "value": "'coy-without-shadows'",
+          "value": "'feffery-paste-image-container'",
           "computed": false
         }
       },
-      "renderHtml": {
+      "style": {
         "type": {
-          "name": "bool"
+          "name": "object"
         },
         "required": false,
         "description": ""
       },
-      "linkTarget": {
+      "currentPastedImages": {
         "type": {
-          "name": "string"
+          "name": "arrayOf",
+          "value": {
+            "name": "any"
+          }
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "deletedIdx": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "number"
+          }
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "imageHeight": {
+        "type": {
+          "name": "number"
         },
         "required": false,
         "description": "",
         "defaultValue": {
-          "value": "'_blank'",
+          "value": "200",
           "computed": false
         }
       },

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Utility augments components of Dash!",
   "repository": {
     "type": "git",
@@ -25,9 +25,8 @@
   "license": "MIT",
   "dependencies": {
     "@ant-design/pro-layout": "^6.24.0",
-    "@tanem/react-nprogress": "^3.0.77",
+    "@charliewilco/gluejar": "^1.0.0",
     "github-markdown-css": "^5.0.0",
-    "katex": "^0.15.1",
     "less": "^3.13.1",
     "less-loader": "^5.0.0",
     "ramda": "^0.26.1",
@@ -35,13 +34,7 @@
     "react-contexify": "^5.0.0",
     "react-copy-to-clipboard": "^5.0.4",
     "react-icons": "^4.3.1",
-    "react-markdown": "^7.1.0",
-    "react-syntax-highlighter": "^15.4.4",
-    "rehype-highlight": "^5.0.0",
-    "rehype-katex": "^6.0.1",
-    "rehype-raw": "^6.1.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.0"
+    "react-syntax-highlighter": "^15.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",
@@ -71,8 +64,17 @@
     "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Utility augments components of Dash!",
   "repository": {
     "type": "git",
@@ -23,9 +23,8 @@
   "license": "MIT",
   "dependencies": {
     "@ant-design/pro-layout": "^6.24.0",
-    "@tanem/react-nprogress": "^3.0.77",
+    "@charliewilco/gluejar": "^1.0.0",
     "github-markdown-css": "^5.0.0",
-    "katex": "^0.15.1",
     "less": "^3.13.1",
     "less-loader": "^5.0.0",
     "ramda": "^0.26.1",
@@ -33,13 +32,7 @@
     "react-contexify": "^5.0.0",
     "react-copy-to-clipboard": "^5.0.4",
     "react-icons": "^4.3.1",
-    "react-markdown": "^7.1.0",
-    "react-syntax-highlighter": "^15.4.4",
-    "rehype-highlight": "^5.0.0",
-    "rehype-katex": "^6.0.1",
-    "rehype-raw": "^6.1.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.0"
+    "react-syntax-highlighter": "^15.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",
@@ -69,8 +62,17 @@
     "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/FefferyUtilsComponents.jl

@@ -3,10 +3,10 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.4"
+const version = "0.0.5"
 
 include("jl/''_fefferycaptcha.jl")
-include("jl/''_fefferymarkdown.jl")
+include("jl/''_fefferypasteimage.jl")
 include("jl/''_fefferysyntaxhighlighter.jl")
 include("jl/''_fefferywatermark.jl")
 
@@ -19,14 +19,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.4/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.5/feffery_utils_components/feffery_utils_components.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js
 ),
 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js.map",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.4/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.5/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferypasteimage.jl

@@ -0,0 +1,35 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferypasteimage
+
+"""
+    ''_fefferypasteimage(;kwargs...)
+    ''_fefferypasteimage(children::Any;kwargs...)
+    ''_fefferypasteimage(children_maker::Function;kwargs...)
+
+
+A FefferyPasteImage component.
+
+Keyword arguments:
+- `children` (a list of or a singular dash component, string or number; optional): The content of the tab - will only be displayed if this tab is selected
+- `id` (String; required)
+- `className` (String; optional)
+- `currentPastedImages` (Array of Bool | Real | String | Dict | Arrays; optional)
+- `deletedIdx` (Array of Reals; optional)
+- `imageHeight` (Real; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `style` (Dict; optional)
+"""
+function ''_fefferypasteimage(; kwargs...)
+        available_props = Symbol[:children, :id, :className, :currentPastedImages, :deletedIdx, :imageHeight, :loading_state, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferypasteimage", "FefferyPasteImage", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferypasteimage(children::Any; kwargs...) = ''_fefferypasteimage(;kwargs..., children = children)
+''_fefferypasteimage(children_maker::Function; kwargs...) = ''_fefferypasteimage(children_maker(); kwargs...)
+

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

@@ -0,0 +1,168 @@
+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/FefferySyntaxHighlighter.react.js

@@ -62,9 +62,9 @@ const FefferySyntaxHighlighter = (props) => {
                 style={
                     {
                         position: 'absolute',
-                        right: '5px',
-                        top: '5px',
-                        padding: '6px',
+                        right: '2px',
+                        top: '2px',
+                        padding: 0,
                         margin: 0,
                         background: 'transparent',
                         border: 'none transparent',

package/src/lib/components/styles.css

@@ -1,3 +1,16 @@
 .linenumber react-syntax-highlighter-line-number {
     min-width: 2rem!important;
+}
+
+
+.feffery-paste-image-container {
+    height: 400px;
+    overflow: auto;
+    border: 1px solid #d9d9d9;
+    transition: all .3s,height 0s;
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAkdJREFUSEtjZMABcnNny3ByMpQyMzNpISv59u3XtokTM/tx6UMXZ4QJJCTM5+Dh+WIB4zMxMe83M1NhkJUVRdFz8eJ9hgcPXr/+9etXGEzi3z+mG9OmZb/AZinYgqbqqWVvvzC2Gyv8YgLxP3xjYvjwR4AhM8sTq0Obm1czmCj+gsu9+cx879MPxicNbTn2WH2Qnzftb5rTF7Dhh2+yM7z8yMzw8x8rgyAfKwPci1Cd/xkYGF69+8Ugwv2bQV3yN4OqxB+wzPaLnA+fvGdxmDAh8wGyJWD9teVT70dYflUAsb/+ZGTgZAMZQxgwIdl+9Bbbg0uPmBOnTMk9gNcCwsZiV0GRBTP38eC1l52dlYGL+efnt1/++5Hlg23XJRmi4/1xWjJ16jqGz5+/MTAw/N84aVJ2AMlBRMiCSZPWMLS3JzLk509nYGRknDZxYmY2zBKMSMbmTEIW9PevZOjqSgFrBVnCwMAwf9KkrCQQgyoW9PQsZ+jtTYO7DdkSqljQ2bmU4f9/rEm7iioWgJz+8+d3hl+/fsJ9cfHi7W+HDl3zppoF6JbQxAJkS2hmAcyS06evUD+IkJP44cNnvh4+fNWHqnGAbMGhQ+c/HzlyyQ9sQU3ZlIeRVt/kcJUFhDIaNn0oFlSXTX0UZfVVlmYWVJVNeRxk8l2GlQV7PbDrJv7CjhgfzFEQ/R0oyvtPCJvim+/FGWLjfUmqKlCCCKSzrHhyAA87QzA2U5i5RMKcXUzYSLHhwYNniEgmpLGsbG4XITXY5Lu6kssAynVWbI/9nxAAAAAASUVORK5CYII=), auto;
+}
+
+.feffery-paste-image-container:hover {
+    border: 1px solid rgb(64, 169, 255);
 }

package/src/lib/index.js

@@ -2,11 +2,12 @@
 import FefferyCaptcha from "./components/FefferyCaptcha.react";
 import FefferyWaterMark from "./components/FefferyWaterMark.react";
 import FefferySyntaxHighlighter from "./components/FefferySyntaxHighlighter.react";
-import FefferyMarkdown from "./components/FefferyMarkdown.react";
+import FefferyPasteImage from "./components/FefferyPasteImage.react";
+
 
 export {
     FefferyCaptcha,
     FefferyWaterMark,
     FefferySyntaxHighlighter,
-    FefferyMarkdown
-};
+    FefferyPasteImage
+};