nsfi / ppfish-components Goto Github PK

modal 中 form 使用getFieldDecorator 对自定义组件函数式绑定，modal关闭后(destroyOnClose)没有重置form数据

RichEditor 工具栏如何拓展？
我想
加入 字体选择，h1、h2、h3选择；
可以 添加 自定义工具 按钮；

like

quilljs里可以

这样配置，
但是在ppfish-components - RichEditor 里这样配置不生效

@gtopia

引言:

从 Element、AntD 、Material-UI等优秀组件站点中，可以看到组件门户具备的一些特质：
分类清晰，便于检索
案例case比较具体和丰富，可覆盖多数应用场景
以表格形式聚合API信息
支持codepen等在线编辑器调试
较为详细的组件使用文档

预期步骤条图标应显示为自定义iconfont,但没有生效，仍显示为默认圆点

类似这样

rt FormItem都要写一遍太不方便拉

defaultText、endText、errorText、loadingText 支持传入组件。
目前是支持的，但是 props 验证导致报了很多错误。

业务描述：
通过RichEditor组件，编辑了富文本内容。系统发送富文本内容到邮箱，样式异常。
当前状态：
已经引入了quill的css文件
import 'react-quill/dist/quill.core.css';
当前样式还是有问题，例如

、

这些标签还是渲染错误。还依赖其他的css文件吗？

富文本样式：




展示样式是自己写了一个div，加了ql-editor的类名：


部分标签展示异常，请教一下，怎么处理？

Fom表单，时间类控件中，类型为RangePicker[showTime]的日历，选中的具体日期和展示的日期不一致，比如，我选择1月1日，展示出来的是1月3日

如题
想在之前antd的项目里尝试引入ppfish 但是webpack.config配置了以后总会报错

customInsertImage 只有一个callback，点击上传图片直接进入方法，并没有弹出上传图片的框？咋回事！

  constructor(props){
    super(props);
    this.state = {
      treeData: [
        { title: 'Expand to load', key: '0', icon:<IconGrid className="img-icon-14" /> },
        { title: 'Expand to load', key: '1', icon:<IconImage className="img-icon-14" /> },
        { title: 'Tree Node', key: '2', isLeaf: true, icon:<IconPie className="img-icon-14"/> },
      ],
      expandedKeys: []
    }
  }

  onLoadData = (treeNode) => {
    return new Promise((resolve) => {
      if (treeNode.props.children) {
        resolve();
        return;
      }
      setTimeout(() => {
        treeNode.props.dataRef.children = [
          { title: 'Child Node', key: `${treeNode.props.eventKey}-0`, icon:<IconGrid className="img-icon-14" /> },
          { title: 'Child Node', key: `${treeNode.props.eventKey}-1`, icon:<IconImage className="img-icon-14" /> },
        ];
        this.setState({
          treeData: [...this.state.treeData],
        });
        resolve();
      }, 1000);
    });
  }

  renderTreeNodes = (data) => {
    const TreeNode = Tree.TreeNode;
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item} icon={item.icon}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} dataRef={item} />;
    });
  }
  
  onExpand = (expandedKeyList) => {
    this.setState({expandedKeys: expandedKeyList})
  }

  render() {
    const TreeNode = Tree.TreeNode;
    return (
      <Tree loadData={this.onLoadData} showIcon expandedKeys={this.state.expandedKeys} onExpand={this.onExpand}>
        {this.renderTreeNodes(this.state.treeData)}
      </Tree>
    );
  }

蓝色的就收不起来了 必须红色的先收起来, 再去收起蓝色的

请问一下，支持插入视频功能么？
我看到quill有视频插入，但是在咱们的文档中，好想并没有看到视频功能；
想问一下有没有办法调用quill的工具栏的视频功能呢？

"ppfish": "^1.7.3",

安装版本： "_id": "[email protected]",
试过2.0.0版本，在safari下RichEditor也无法编辑

safari浏览器下，点击红色区域无法获取光标，无法输入

可以插入表格、调节单元格列宽、行、列合并等

如果没有 overflow: hidden， border-radius 在加载完图片后无效

AudioPlayer怎么播放m3u8格式的音频？

react 版本 16.8.4
react-router 版本 4.3.1

报错信息：

react-dom.development.js:9254 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

index.js:1446 The above error occurred in the <Route> component:

猜测原因：
PicturePreview的dom节点挂载到documen.body上

建议解决方案：

PicturePreview的dom节点不要挂载到documen.body上，
或者可新增参数自定义挂载节点

相关代码 123行

document.body.appendChild(mask ? this.$root : this.$el);

import { Tabs } from 'ppfish'
export default function Index() {
  return (
    <div>
      <p>Hello Next.js</p>
      <Tabs defaultActiveKey="1" type="highlighted-section">
        <Tabs.TabPane tab="Tab 1" key="1">Tab 1</Tabs.TabPane>
        <Tabs.TabPane tab="Tab 2" key="2">Tab 2</Tabs.TabPane>
        <Tabs.TabPane tab="Tab 3" key="3">Tab 3</Tabs.TabPane>
      </Tabs>
    </div>
  );
}

直接在 next 里这样使用会报错：

@hepeguo
兼容方案： 通过异步方式加载数据，分页数据请求增加一条总计数据，当前页数据为： pageSize+1， 则导致当前页数据展示少一条，这在预期内；
方案问题：后续分页将展示“无数据” 实际有数据传递。
希望：支持table-header API 或者，对兼容方案的场景可以处理一下。

兼容方案代码示例（结合console 与界面表现一起查看）基于远程加载数据案例：
` constructor() {
super();
this.state = {
data: [],
pagination: {},
loading: false,
}
}

handleTableChange = (pagination, filters, sorter) => {
const pager = { ...this.state.pagination };
pager.current = pagination.current;
this.setState({
pagination: pager,
});
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
}
i=0;
fetch = (params = {}) => {
console.log('params:', params);
this.setState({ loading: true });
++this.i;
fetch('https://randomuser.me/api?results=10').then((res) => {
return res.json()
}).then((data) => {
const pagination = { ...this.state.pagination };
// Read total count from server
// pagination.total = data.totalCount;
let { results } = data;
results = (results || []).map(itm => {
itm.email += _${this.i};
return itm; }),
console.log(results[0]&&results[0].email);
pagination.total = 200;
this.setState({
loading: false,
data: results,
pagination,
});
});
}

componentDidMount() {
this.fetch();
}
i=0;
j=0;
render() {
const columns = [{
title: 'Name',
dataIndex: 'name',
sorter: true,
render: name => ${name.first} ${name.last},
width: '20%',
}, {
title: 'Gender',
dataIndex: 'gender',
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
width: '20%',
}, {
title: 'Email',
dataIndex: 'email',
}];
let { pagination, data } = this.state;
pagination.pageSize = 2;
++this.j;
const dataList = data.map(itm => {
itm.email += _${this.j};
return itm;
});
console.log(data[0]&&data[0].email, dataList[0]&&dataList[0].email);

return (
  <Table
    columns={columns}
    rowKey={record => record.login.uuid}
    dataSource={dataList}
    pagination={pagination}
    loading={this.state.loading}
    onChange={this.handleTableChange}
  />
);

}`

./node_modules/_ppfish@1.8.1@ppfish/lib/components/Cascader/style/index.less (./node_modules/_css-loader@4.3.0@css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_resolve-url-loader@3.1.2@resolve-url-loader??ref--5-oneOf-8-3!./node_modules/_less-loader@7.3.0@less-loader/dist/cjs.js??ref--5-oneOf-8-4!./node_modules/_ppfish@1.8.1@ppfish/lib/components/Cascader/style/index.less)

    .iconfont-font("\e68c");
    .iconfont-size-under-12px(8px);
  ^

Error evaluating function unit: the first argument to unit must be a number. Have you forgotten parenthesis?

初步定位是Model动画问题，暂时设置Modal组件的transitionName属性为""关闭动画来解决

import React, { useState } from "react";
import { Modal, Button } from "ppfish";
import MonacoEditor from "react-monaco-editor";

export default function App() {
  const [show, setShow] = useState(false);
  return (
    <div className="App">
      <Button
        onClick={() => {
          setShow(true);
        }}
      >
        显示弹窗
      </Button>
      <Modal
        title="JSON数据预览"
        visible={show}
        width="800px"
        onOk={() => {
          setShow(false);
        }}
        onCancel={() => {
          setShow(false);
        }}
      >
        <MonacoEditor
          width="600"
          height="500"
          language="json"
          theme="vs-dark"
          value={""}
        />
      </Modal>
    </div>
  );
}