nsfi / ppfish-components Goto Github PK
View Code? Open in Web Editor NEWFish Design: 面向B端设计的企业级UI组件库
Home Page: https://nsfi.github.io/ppfish-components/
License: MIT License
Fish Design: 面向B端设计的企业级UI组件库
Home Page: https://nsfi.github.io/ppfish-components/
License: MIT License
./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?
Fom表单,时间类控件中,类型为RangePicker[showTime]的日历,选中的具体日期和展示的日期不一致,比如,我选择1月1日,展示出来的是1月3日
AudioPlayer怎么播放m3u8格式的音频?
初步定位是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>
);
}
预期步骤条图标应显示为自定义iconfont,但没有生效,仍显示为默认圆点
可以插入表格、调节单元格列宽、行、列合并等
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>
);
}
customInsertImage 只有一个callback,点击上传图片直接进入方法,并没有弹出上传图片的框?咋回事!
请问一下,支持插入视频功能么?
我看到quill有视频插入,但是在咱们的文档中,好想并没有看到视频功能;
想问一下有没有办法调用quill的工具栏的视频功能呢?
rt FormItem都要写一遍太不方便拉
"ppfish": "^1.7.3",
安装版本: "_id": "[email protected]",
试过2.0.0版本,在safari下RichEditor也无法编辑
safari浏览器下,点击红色区域无法获取光标,无法输入
如果没有 overflow: hidden, border-radius 在加载完图片后无效
@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}
/>
);
}`
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>
);
}
引言:
从 Element、AntD 、Material-UI等优秀组件站点中,可以看到组件门户具备的一些特质:
分类清晰,便于检索
案例case比较具体和丰富,可覆盖多数应用场景
以表格形式聚合API信息
支持codepen等在线编辑器调试
较为详细的组件使用文档
如题
想在之前antd的项目里尝试引入ppfish 但是webpack.config配置了以后总会报错
modal 中 form 使用getFieldDecorator 对自定义组件函数式绑定,modal关闭后(destroyOnClose)没有重置form数据
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);
defaultText、endText、errorText、loadingText 支持传入组件。
目前是支持的,但是 props 验证导致报了很多错误。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.