@para-ui/core 2.1.32 → 2.1.35

package/docs/view/upload/codeString.tsx

@@ -0,0 +1,248 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicUpload = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const onChange = (files: UploadFile[]) => {
+    console.log('onChange:::', files);
+};
+
+<Upload
+    name={'file'}
+    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+    onChange={onChange}
+>
+    点击上传
+</Upload>
+`;
+
+export const imageUpload = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const {ImageUpload} = Upload;
+
+const defaultImageList: UploadFile[] = [{
+    uid: '1',
+    name: '1号.png',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+}, {
+    uid: '2',
+    name: '这是2号选手.png',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+}];
+
+const onChange = (files: UploadFile[]) => {
+    console.log('onChange:::', files);
+};
+
+<ImageUpload
+    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+    defaultFileList={defaultImageList}
+    onChange={onChange}
+>
+    上传图片
+</ImageUpload>
+`;
+
+export const updateAvatar = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const {ImageUpload} = Upload;
+
+const onChange = (files: UploadFile[]) => {
+    console.log('onChange:::', files);
+};
+
+<ImageUpload
+    defaultImage={{
+        imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        imageName: 'avatar'
+    }}
+    showUploadList={false}
+    stash={true}
+    beforeUpload={(file) => false}
+    onChange={onChange}
+>
+    更换头像
+</ImageUpload>
+`;
+
+
+export const cropImage = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const {ImageUpload,ImgCrop} = Upload;
+
+const onChange = (files: UploadFile[]) => {
+    console.log('onChange:::', files);
+};
+
+<ImgCrop rotate>
+    <ImageUpload
+        showUploadList={false}
+        stash={true}
+        beforeUpload={(file) => false}
+        onChange={onChange}
+    >
+        裁切图片
+    </ImageUpload>
+</ImgCrop>
+`;
+
+export const alreadyUploadList = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const defaultFileList: UploadFile[] = [
+    {
+        uid: '1',
+        name: 'xxx.png',
+        type: 'image/png'
+    },
+    {
+        uid: '2',
+        name: 'yyy.png'
+    },
+    {
+        uid: '3',
+        name: 'zzz.png'
+    }
+];
+
+const onChange = (files: UploadFile[]) => {
+    console.log('onChange:::', files);
+};
+
+<Upload
+    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+    defaultFileList={defaultFileList}
+    onChange={onChange}
+>
+    上传文件
+</Upload>
+`;
+
+export const controlUpload = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const [fileList, setFileList] = React.useState<UploadFile[]>([{
+    uid: '-1',
+    name: 'xxx.png'
+}]);
+
+const onChange = (files: UploadFile[]) => {
+   setFileList(files);
+};
+
+<Upload
+    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+    fileList={fileList}
+    maxCount={3}
+    onChange={onChange}
+>
+    上传文件
+</Upload>
+`;
+
+export const directoryUpload = `
+import Upload from '@para-ui/core/Upload';
+
+<Upload action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'} directory>
+    上传文件夹
+</Upload>
+`;
+
+export const manualUpload = `
+import Upload from '@para-ui/core/Upload';
+import Button from '@para-ui/core/Button';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+import {Post} from '@paraview/lib';
+
+const [uploading, setUploading] = React.useState<boolean>(false);
+const [manualFileList, setManualFileList] = React.useState<UploadFile[]>([]);
+
+const onChange = (files: UploadFile[]) => {
+    setManualFileList(files);
+};
+
+const handleUpload = async () => {
+    const formData = new FormData();
+    manualFileList.forEach((file: UploadFile) => {
+        formData.append('files[]', file.originFileObj ?? '');
+    });
+    setUploading(true);
+    const {err} = await Post({
+        url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+        data: formData,
+        global: true
+    });
+    setUploading(false);
+    if (err) {
+        return Message.error('upload failed');
+    }
+    setManualFileList([]);
+    Message.success('upload successfully');
+};
+
+<Upload
+    stash={true}
+    fileList={manualFileList}
+    beforeUpload={(file: any) => false}
+    onChange={onChange}
+>
+    手动上传
+</Upload>
+<Button
+    onClick={handleUpload}
+    disabled={manualFileList.length === 0}
+    loading={uploading}
+    style={{marginTop: 16}}
+>
+    {uploading ? 'Uploading' : 'Start Upload'}
+</Button>
+`;
+
+export const dragUpload = `
+import Upload from '@para-ui/core/Upload';
+import {UploadFile} from '@para-ui/core/Upload/interface';
+
+const {Dragger} = Upload;
+
+const defaultFileList: UploadFile[] = [
+    {
+        uid: '1',
+        name: 'xxx.png',
+        type: 'image/png'
+    },
+    {
+        uid: '2',
+        name: 'yyy.png'
+    },
+    {
+        uid: '3',
+        name: 'zzz.png'
+    }
+];
+
+const onChange = (files: UploadFile[]) => {
+   console.log('onChange:::', files);
+};
+
+<Dragger
+    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+    multiple={true}
+    name={'file'}
+    defaultFileList={defaultFileList}
+    onChange={onChange}
+/>
+`;
+
+

package/docs/view/upload/index.scss

@@ -0,0 +1,7 @@
+.paraui-upload-demo {
+  .code-box-demo {
+    .paraui-upload-drag {
+      width: 100%;
+    }
+  }
+}

package/docs/view/upload/index.tsx

@@ -0,0 +1,207 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Upload from 'src/Upload';
+import Button from 'src/Button';
+import {Message} from 'src/Message';
+import {UploadFile} from 'src/Upload/interface';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicUpload,
+    imageUpload,
+    alreadyUploadList,
+    controlUpload,
+    directoryUpload,
+    manualUpload,
+    dragUpload,
+    updateAvatar,
+    cropImage
+} from './codeString';
+import apiData, {imgCropApi} from './api';
+import {Post} from '@paraview/lib';
+import './index.scss';
+
+const {ImageUpload, Dragger, ImgCrop} = Upload;
+
+//upload
+const ParaUpload: FunctionComponent = () => {
+
+    const [uploading, setUploading] = React.useState<boolean>(false);
+    const [manualFileList, setManualFileList] = React.useState<UploadFile[]>([]);
+    const [image, setImage] = React.useState<any>({
+        imageUrl: '',
+        imageName: ''
+    });
+
+
+    const onChange = (files: UploadFile[]) => {
+        console.log('onChange:::', files);
+        setManualFileList(files);
+        // setImage(
+        //     {
+        //         imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        //     }
+        // )
+    };
+
+    const defaultImageList: UploadFile[] = [{
+        uid: '1',
+        name: '1号.png',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }, {
+        uid: '2',
+        name: '这是2号选手.png',
+        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }];
+
+    const defaultFileList: UploadFile[] = [
+        {
+            uid: '1',
+            name: 'xxx.png',
+            type: 'image/png'
+        },
+        {
+            uid: '2',
+            name: 'yyy.png'
+        },
+        {
+            uid: '3',
+            name: 'zzz.png'
+        }
+    ];
+
+    const [fileList, setFileList] = React.useState<UploadFile[]>([{
+        uid: '-1',
+        name: 'xxx.png'
+    }]);
+
+    const handleControlChange = (files: UploadFile[]) => {
+        setFileList(files);
+    };
+
+    const handleUpload = async () => {
+        const formData = new FormData();
+        manualFileList.forEach((file: UploadFile) => {
+            formData.append('files[]', file.originFileObj ?? '');
+        });
+        setUploading(true);
+        const {err} = await Post({
+            url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+            data: formData,
+            global: true
+        });
+        setUploading(false);
+        if (err) {
+            return Message.error('upload failed');
+        }
+        setManualFileList([]);
+        Message.success('upload successfully');
+    };
+
+    return (
+        <div className={'paraui-upload-demo'}>
+            <Title name={'上传'}>代码演示</Title>
+            <CodeBox code={basicUpload} title={'基本'} description={'经典款式，用户点击按钮弹出文件选择框。'}>
+                <Upload
+                    name={'file'}
+                    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+                    onChange={onChange}
+                >
+                    点击上传
+                </Upload>
+            </CodeBox>
+            <CodeBox code={imageUpload} title={'照片墙'} description={'用户可以上传图片并在列表中显示缩略图。'}>
+                <ImageUpload
+                    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+                    onChange={onChange}
+                    defaultFileList={defaultImageList}
+                >
+                    上传图片
+                </ImageUpload>
+            </CodeBox>
+            <CodeBox code={updateAvatar} title={'更换头像'} description={'点击上传头像。'}>
+                <ImageUpload
+                    defaultImage={image}
+                    showUploadList={false}
+                    stash={true}
+                    beforeUpload={(file) => false}
+                    onChange={onChange}
+                >
+                    更换头像
+                </ImageUpload>
+            </CodeBox>
+            <CodeBox code={cropImage} title={'上传前裁切图片'} description={'配合 ImgCrop 实现上传前裁切图片。'}>
+                <ImgCrop rotate>
+                    <ImageUpload
+                        showUploadList={false}
+                        stash={true}
+                        beforeUpload={(file) => false}
+                        onChange={onChange}
+                    >
+                        裁切图片
+                    </ImageUpload>
+                </ImgCrop>
+            </CodeBox>
+            <CodeBox code={alreadyUploadList} title={'已上传的文件列表'} description={'使用 defaultFileList 设置已上传的内容。'}>
+                <Upload
+                    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+                    defaultFileList={defaultFileList}
+                    onChange={onChange}
+                >
+                    上传文件
+                </Upload>
+            </CodeBox>
+            <CodeBox code={controlUpload} title={'完全控制的上传列表'}
+                     description={'使用 fileList 对列表进行完全控制，可以实现各种自定义功能。maxCount 限制上传数量'}>
+                <Upload
+                    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+                    fileList={fileList}
+                    maxCount={3}
+                    onChange={handleControlChange}
+                >
+                    上传文件
+                </Upload>
+            </CodeBox>
+            <CodeBox code={directoryUpload} title={'文件夹上传'}
+                     description={'支持上传一个文件夹里的所有文件'}>
+                <Upload action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'} directory>
+                    上传文件夹
+                </Upload>
+            </CodeBox>
+            <CodeBox code={manualUpload} title={'手动上传'}
+                     description={'beforeUpload 返回 false 后，手动上传文件。'}>
+                <Upload
+                    stash={true}
+                    fileList={manualFileList}
+                    beforeUpload={(file) => false}
+                    onChange={onChange}
+                >
+                    手动上传
+                </Upload>
+                <Button
+                    onClick={handleUpload}
+                    disabled={manualFileList.length === 0}
+                    loading={uploading}
+                    style={{marginTop: 16}}
+                >
+                    {uploading ? 'Uploading' : 'Start Upload'}
+                </Button>
+            </CodeBox>
+            <CodeBox code={dragUpload} title={'拖拽上传'}
+                     description={'把文件拖入指定区域，完成上传，同样支持点击上传。设置 multiple 后，可以一次上传多个文件'}>
+                <Dragger
+                    action={'https://www.mocky.io/v2/5cc8019d300000980a055e76'}
+                    multiple={true}
+                    name={'file'}
+                    defaultFileList={defaultFileList}
+                    onChange={onChange}
+                />
+            </CodeBox>
+
+            <APITable data={apiData}/>
+            <APITable data={imgCropApi} showApi={false} subTitle={'ImgCrop'}/>
+        </div>
+    );
+};
+
+export default ParaUpload;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@para-ui/core",
   "private": false,
-  "version": "2.1.32",
+  "version": "2.1.35",
   "main": "./index.js",
   "typings": "./index.d.ts",
   "description": "Powered by Para FED",

package/publish.sh

@@ -0,0 +1,5 @@
+rm -rf .npmrc
+nrm use npm
+npm run build
+cd dist
+npm publish --access public

package/run.js

@@ -0,0 +1,43 @@
+/* v 0.0.3 */
+const {
+    dev,
+    version,
+    name
+} = require("./package");
+const fs = require("fs");
+const env = process.argv[2] || ""; // dev 调试模式
+const indexPaths = [
+    "./docs/index.tsx"
+    // 多入口需要在此添加入口文件，以便自动切换模式
+];
+
+function run(path) {
+    console.log('rewite index: ', path);
+    const data = fs.readFileSync(path);
+    const index = data.toString().replace(/(\/\* @dynamic (.*?) \*\/\n*\n*\r*\s*\t*)(.*?)(\n*\n*\r*\s*\t*\/\* @dynamic end \*\/)/gi, (a, s1, s2, s3, s4) => {
+        let code = "";
+        switch (s2) {
+            case "debug":
+                code = env === "dev" ? `import Debugger from '@paraview/lib/debugger';` : '';
+                break;
+            case "Debugger":
+                code = env === "dev" ? `await Debugger.init(debug);` : `await Context.load(${env === "dev-cbu" ? "\"" + dev.context + "\"" : ""});`;
+                break;
+            case "init":
+                code = env === "dev" ? `init(${JSON.stringify(dev.debug || [])})` : "init();";
+                break;
+            case "version":
+                code = `window.ParaWeb = {name:'${name}',version: '${version}', env: '${env || ""}', buildTime: '${new Date().toLocaleString()}'}`;
+                break;
+        }
+        return `${s1}${code}${s4}`;
+    });
+    try {
+        fs.writeFileSync(path, index);
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+indexPaths.forEach(p => run(p));
+console.log("React Cli Running...");

package/scripts/extract-css.js

@@ -0,0 +1,9 @@
+const fs = require('fs-extra');
+const path = require('path');
+const tsconfig = require('../tsconfig.json');
+let stylePath = path.resolve(__dirname, '../temp/style.css');
+let isExist = fs.existsSync(stylePath);
+if (isExist) {
+    fs.copySync(stylePath, path.join(__dirname, '../', tsconfig.compilerOptions.outDir, 'style.css'));
+    fs.removeSync(path.join(__dirname, '../temp'));
+}