feffery_utils_components 0.0.4 → 0.0.5

package/usage.py

@@ -1,12 +1,23 @@
 import feffery_utils_components as fuc
 import dash
 from dash.dependencies import Input, Output
-import dash_html_components as html
+from dash import html
 
 app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
+        fuc.FefferyPasteImage(
+            id='test',
+            style={
+                'height': '500px',
+                'width': '800px',
+                'marginBottom': '100px'
+            }
+        ),
+        html.Div(id='test-output'),
+
+
         fuc.FefferyCaptcha(id='captcha-demo',
                            charNum=10,
                            width=300,
@@ -53,180 +64,12 @@ app.layout = html.Div(
 ''',
             language='python',
             codeStyle='coy-without-shadows'
-        ),
-
-        fuc.FefferyMarkdown(
-            renderHtml=True,
-            codeStyle='dracula',
-            markdownStr=r'''
-
-这是行内数学公式测试$c = \pm\sqrt{a^2 + b^2}$
-
-块公式测试：
-
-$$
-
-x = \begin{cases}
-   a &\text{if } b \\
-   c &\text{if } d
-\end{cases}
-
-\\
-
-\begin{bmatrix}
-1&2&\cdots&4\\\
-7&6&\cdots&5\\\
-\vdots&\vdots&\ddots&\vdots\\\
-8&9&\cdots&0
-\end{bmatrix}
-
-$$
-
-## 代码示例
-
-```py
-html.Div(
-    [
-        fac.AntdBackTop(
-            containerId='back-top-container-demo',
-            duration=1
-        ),
-        fac.AntdTitle(
-            '向下滑动一段距离',
-            level=4
-        )
-    ] + [
-        html.Div(
-            [
-                i if i % 2 == 0 else html.Br() for i in range(200)
-            ]
         )
     ],
-    id='back-top-container-demo',
     style={
-        'maxHeight': '500px',
-        'overflowY': 'auto',
-        'position': 'relative',
-        'backgroundColor': 'rgba(240, 240, 240, 0.2)',
-        'padding': '20px'
+        'padding': '100px'
     }
 )
-```
-
-## 1 最新版本安装方式
-
-```bash
-pip install feffery-antd-components==0.0.1rc6
-```
-
-## 2 最新开发版本安装方式
-
-```bash
-pip install git+https://github.com/CNFeffery/feffery-antd-components.git
-```
-
-国内镜像加速安装方式：
-
-```bash
-pip install git+https://hub.fastgit.org/CNFeffery/feffery-antd-components.git
-```
-
-或：
-
-```bash
-pip install git+https://github.com.cnpmjs.org/CNFeffery/feffery-antd-components.git
-```
-
-## 3 应用部署CDN加速使用方式
-
-```Python
-# 实例化Dash对象时，设置参数serve_locally=False会强制浏览器端从unpkg加载各个依赖的
-# xxx.min.js静态资源，从而避免消耗服务器带宽，适合中小型站点加速用户访问
-app = dash.Dash(serve_locally=False)
-```
-
-## 4 已实现部件目录
-
-- [x] 日期选择框：`AntdDatePicker`
-- [x] 日期范围选择框：`AntdDateRangePicker`
-- [x] 分割线：`AntdDivider`
-- [x] 按钮：`AntdButton`
-- [x] 下拉选择：`AntdSelect`
-- [x] 树形控件：`AntdTree`
-- [x] 表格控件：`AntdTable`
-- [x] 锚点：`AntdAnchor`
-- [x] 穿梭框：`AntdTransfer`
-- [x] 滑杆输入：`AntdSlider`
-- [x] 步骤条：`AntdSteps`
-- [x] 导航菜单：`AntdMenu`
-- [x] 折叠面板：`AntdCollapse`
-- [x] 栅格系统
-  - `AntdRow`
-  - `AntdCol`
-- [x] 布局
-  - `AntdLayout`
-  - `AntdHeader`
-  - `AntdContent`
-  - `AntdFooter`
-  - `AntdSider`
-- [x] 对话框：`AntdModal`
-- [x] 警告提示：`AntdAlert`
-- [x] 通知提醒框：`AntdNotification`
-- [x] 全局提示：`AntdMessage`
-- [x] 标签：`AntdTag`
-- [x] 结果：`AntdResult`
-- [x] 输入框：`AntdInput`
-- [x] 文字提示：`AntdTooltip`
-- [x] 选择框：`AntdCheckbox`
-- [x] 组合选择框：`AntdCheckboxGroup`
-- [x] 加载动画：`AntdSpin`
-- [x] 开关：`AntdSwitch`
-- [x] 排版
-  - `AntdTypography`
-  - `AntdParagraph`
-  - `AntdTitle`
-  - `AntdText`
-  - `AntdLink`
-- [x] 标签页
-  - `AntdTabs`
-  - `AntdTabPane`
-- [x] 分页：`AntdPagination`
-- [x] 骨架屏：`AntdSkeleton`
-- [x] 树选择：`AntdTreeSelect`
-- [x] 抽屉：`AntdDrawer`
-- [x] 气泡卡片：`AntdPopover`
-- [x] 空状态：`AntdEmpty`
-- [x] 级联选择：`AntdCascader`
-- [x] 单选框：`AntdRadio`
-- [x] 上传：`AntdUpload`
-- [x] 气泡确认框：`AntdPopconfirm`
-- [x] 回到顶部：`AntdBackTop`
-
-## 5 在线交互式说明文档
-
-<a href='http://fac.feffery.tech/' target='_blank'>文档地址</a>（待同步至最新pypi版本）
-
-## 6 TODO计划
-
-- [ ] 表单：`AntdForm`
-- [ ] 卡片：`AntdCard`
-- [ ] 头像：`AntdAvatar`
-- [ ] 徽标数：`AntdBadge`
-- [ ] 描述列表：`AntdDescriptions`
-- [ ] 评分：`AntdRate`
-- [ ] 日历：`AntdCalendar`
-- [ ] 走马灯：`AntdCarousel`
-- [ ] 评论：`AntdComment`
-- [ ] 统计数值：`AntdStatistic`
-- [ ] 时间轴：`AntdTimeline`
-- [ ] 进度条：`AntdProgress`
-- [ ] 回到顶部：`AntdBackTop`
-- [ ] 图片：`AntdImage`
-
-'''
-        )
-    ]
-)
 
 
 @app.callback(
@@ -243,5 +86,20 @@ def test(captcha):
     return captcha
 
 
+@app.callback(
+    Output('test-output', 'children'),
+    Input('test', 'currentPastedImages')
+)
+def test_(currentPastedImages):
+
+    if currentPastedImages:
+        return [
+            html.Img(
+                src=currentPastedImage
+            )
+            for currentPastedImage in currentPastedImages
+        ]
+
+
 if __name__ == '__main__':
     app.run_server(debug=True)

package/.Rbuildignore

@@ -1,34 +0,0 @@
-# ignore JS config files/folders
-node_modules/
-coverage/
-src/
-lib/
-.babelrc
-.builderrc
-.eslintrc
-.npmignore
-.editorconfig
-.eslintignore
-.prettierrc
-.circleci
-.github
-
-# demo folder has special meaning in R
-# this should hopefully make it still
-# allow for the possibility to make R demos
-demo/.*\.js
-demo/.*\.html
-demo/.*\.css
-
-# ignore Python files/folders
-setup.py
-usage.py
-setup.py
-requirements.txt
-MANIFEST.in
-CHANGELOG.md
-test/
-# CRAN has weird LICENSE requirements
-LICENSE.txt
-^.*\.Rproj$
-^\.Rproj\.user$

package/.babelrc

@@ -1,6 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ]
-}

package/feffery_utils_components/FefferyMarkdown.py

@@ -1,50 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class FefferyMarkdown(Component):
-    """A FefferyMarkdown component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- codeStyle (string; default 'coy-without-shadows')
-
-- linkTarget (string; default '_blank')
-
-- loading_state (dict; optional)
-
-    `loading_state` is a dict with keys:
-
-    - component_name (string; optional):
-        Holds the name of the component that is loading.
-
-    - is_loading (boolean; optional):
-        Determines if the component is loading or not.
-
-    - prop_name (string; optional):
-        Holds which property is loading.
-
-- markdownStr (string; optional)
-
-- renderHtml (boolean; optional)"""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, markdownStr=Component.UNDEFINED, codeStyle=Component.UNDEFINED, renderHtml=Component.UNDEFINED, linkTarget=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'codeStyle', 'linkTarget', 'loading_state', 'markdownStr', 'renderHtml']
-        self._type = 'FefferyMarkdown'
-        self._namespace = 'feffery_utils_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'codeStyle', 'linkTarget', 'loading_state', 'markdownStr', 'renderHtml']
-        self.available_wildcard_properties =            []
-        _explicit_args = kwargs.pop('_explicit_args')
-        _locals = locals()
-        _locals.update(kwargs)  # For wildcard attrs
-        args = {k: _locals[k] for k in _explicit_args if k != 'children'}
-        for k in []:
-            if k not in args:
-                raise TypeError(
-                    'Required argument `' + k + '` was not specified.')
-        super(FefferyMarkdown, self).__init__(**args)

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

@@ -1,163 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
-import rehypeKatex from 'rehype-katex'
-import rehypeRaw from 'rehype-raw'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { AiOutlineCheck, AiOutlineCopy } from "react-icons/ai";
-import {
-    a11yDark,
-    atomDark,
-    coldarkCold,
-    coldarkDark,
-    coy,
-    coyWithoutShadows,
-    darcula,
-    dracula,
-    nord,
-    okaidia,
-    prism,
-    solarizedlight,
-    twilight
-} from 'react-syntax-highlighter/dist/esm/styles/prism';
-
-import 'katex/dist/katex.min.css'
-import 'github-markdown-css'
-import './styles.css'
-
-
-// 定义markdown渲染组件FefferyMarkdown，api参数参考https://github.com/remarkjs/react-markdown
-const FefferyMarkdown = (props) => {
-    // 取得必要属性或参数
-    let {
-        id,
-        markdownStr,
-        codeStyle,
-        renderHtml,
-        linkTarget,
-        setProps
-    } = props;
-
-    const str2style = new Map([
-        ['a11y-dark', a11yDark],
-        ['atom-dark', atomDark],
-        ['coldark-cold', coldarkCold],
-        ['coldark-dark', coldarkDark],
-        ['coy', coy],
-        ['coy-without-shadows', coyWithoutShadows],
-        ['darcula', darcula],
-        ['dracula', dracula],
-        ['nord', nord],
-        ['okaidia', okaidia],
-        ['prism', prism],
-        ['solarizedlight', solarizedlight],
-        ['twilight', twilight]
-    ])
-
-    return (
-        <div className='markdown-body' style={{ marginBottom: '10px' }}>
-            <ReactMarkdown id={id}
-                linkTarget={linkTarget}
-                remarkPlugins={[remarkGfm, remarkMath]}
-                rehypePlugins={renderHtml ? [rehypeRaw, rehypeKatex] : [rehypeKatex]}
-                components={{
-                    code: ({ node, inline, className, children, ...props }) => {
-                        const [isCopied, setIsCopied] = useState(false);
-                        const match = /language-(\w+)/.exec(className || '')
-                        return !inline && match ? (
-                            <div style={{ position: 'relative' }}>
-                                <CopyToClipboard
-                                    onCopy={() => {
-                                        setIsCopied(true);
-                                        setTimeout(() => setIsCopied(false), 1500);
-                                    }}
-                                    style={
-                                        {
-                                            position: 'absolute',
-                                            right: '5px',
-                                            top: '5px',
-                                            padding: '6px',
-                                            margin: 0,
-                                            background: 'transparent',
-                                            border: 'none transparent',
-                                            cursor: 'pointer',
-                                            zIndex: 999
-                                        }
-                                    }
-                                    text={String(children).replace(/\n$/, '')}
-                                >
-                                    <button type="button" aria-label="Copy to Clipboard Button">
-                                        {isCopied ? <AiOutlineCheck style={{ color: 'rgb(91, 199, 38)', fontSize: '18px' }} />
-                                            : <AiOutlineCopy style={{ color: 'rgb(24, 144, 255)', fontSize: '18px' }} />}
-                                    </button>
-                                </CopyToClipboard>
-                                <SyntaxHighlighter
-                                    children={String(children).replace(/\n$/, '')}
-                                    style={str2style.get(codeStyle)}
-                                    showLineNumbers={true}
-                                    language={match[1]}
-                                    PreTag="div"
-                                    {...props} />
-                            </div>
-                        ) : (
-                            <code className={className} {...props}>
-                                {children}
-                            </code>
-                        )
-                    }
-                }}>
-                {markdownStr}
-            </ReactMarkdown>
-        </div>
-    );
-}
-
-// 定义参数或属性
-FefferyMarkdown.propTypes = {
-    // 部件id
-    id: PropTypes.string,
-
-    // 设置要渲染的原始markdown内容
-    markdownStr: PropTypes.string,
-
-    // 设置代码风格，默认为'coy-without-shadows'
-    codeStyle: PropTypes.string,
-
-    // 设置是否渲染markdown中的html源码，默认为false
-    renderHtml: PropTypes.bool,
-
-    // 设置markdown中链接的跳转方式，默认为'_blank'
-    linkTarget: PropTypes.string,
-
-    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
-};
-
-// 设置默认参数
-FefferyMarkdown.defaultProps = {
-    linkTarget: '_blank',
-    codeStyle: 'coy-without-shadows'
-}
-
-export default FefferyMarkdown;