sheinsight/shineout

高性能React组件库

English | 简体中文

A components library for React

Features

• A concise and friendly API
• A set of high-performance React components out of the box.
• Always backward compatible
• Flexible theme customization

Requirements

react >= 16.0.0
react-dom >= 16.0.0

Browsers support

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Examples

• Concise And Intelligent Form

• Performance Table With 10000 Records

Installation

yarn add shineout

// or

npm install shineout

CDN

<link rel="stylesheet" href="https://unpkg.com/shineout/dist/theme.default.css" />
<script crossorigin src="https://unpkg.com/shineout/dist/shineout.min.js"></script>

Usage

import { Button } from 'shineout'

<Button />

And import style manually:

import 'shineout/dist/theme.default.css' // or 'shineout/dist/theme.antd.css'

Internationalization

See i18n

Links

• Home page
• Components
• Smart Form
• Performance Table
• Shineout template

Development

clone locally:

$ git clone [email protected]:sheinsight/shineout.git
$ cd shineout
$ yarn
$ yarn start

Open your browser and visit http://localhost:3000

LICENSE

MIT

shineout's Issues

Image.Upload

Hey mate ,
How can I show a image preview in the browser without uploading the image file to the any server?
My opinion; If any action URL is set to the property shall be upload processed.

  const readFile = async (file) => {
        return new Promise(resolve => {
            const reader = new FileReader();
            reader.addEventListener('load',  () => resolve(reader.result), false );
            reader.readAsDataURL(file)
        })
    };

 const onChangeImage = async (e) => {
        if (e.target.files && e.target.files.length > 0) {
            const imageData = await readFile(e.target.files[0]); // blob image data
            upload({
               action:"//upload-url.con",
                imageData,
            })
        }
    };

<Upload.Image
drop
accept="image/*"
name="file"
onChange={onChangeImage}
/>

webpack 引入问题

直接 npm install 后还需要做什么 webpack 配置 ? 你文档中的配置都是过了，还是有问题哇？

如下，单纯引入，并没有做webpack 的配置

./node_modules/shineout/lib/styles/spin/chasing-dots.less 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import '../variables.less';
| 
| @chasing-dots-prefix: ~'@{so-prefix}-chasing-dots';

提供类似antd notification功能组件

如题

image 图片样式问题

不设置高度会多出一部分

怎么安装 antd的版本样式

Table 选中行

table 选中某行，高亮显示怎么加？应该有一个参数可以设置就好了，对于主从表来说，主表选中某记录，从表跟着显示相应明细，主表中没有高亮显示，会不知是选择了哪条记录

form 表单 defaultValue 设置后，提交一次后，第二次校验无效

<Form
        onSubmit={() => { store.saveData({ dataList }); }}
        onError={() => message.error(errorMsg)}
      >
        <Form.Item required >
          <Form.Field defaultValue={d.judgeFlag} rules={[rules.required(''), rules[`judgeFlag${index}`]]} name={`judgeFlag${index}`}>
            {({ onChange, error }) =>
              <Select
                size="small"
                format="id"
                keygen="id"
                absolute
                style={{ width: '180px' }}
                renderItem="title"
                prediction={(v, dp) => v === dp.id}
                error={error}
                className={error ? style.empty : ''}
                value={d.judgeFlag}
                data={judgeFlagOptions}
                onChange={(val) => {
                  // console.log(val);
                  onChange(val);
                  store.dataListItemChange({
                    index,
                    data: val,
                    key: 'judgeFlag',
                  });
                }}
              />
            }
          </Form.Field>
        </Form.Item>       <div className={style.toolBar}>
          <Form.Item label="">
            <Form.Button loading={!ready} >保存</Form.Button>
            <Button onClick={cancelEdit}>取消</Button>
          </Form.Item>
        </div>
</Form>

类似以上用法

Failed Compile

./node_modules/shineout/lib/DatePicker/Range.js
Module not found: Can't resolve 'core-js/modules/es6.array.sort' in 'E:\Projects\App.Bidding\bidding.http\ClientApp\node_modules\shineout\lib\DatePicker'

`{
"name": "ClientApp",
"version": "0.4.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-brands-svg-icons": "^5.8.1",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.18.0",
"ckeditor4-react": "^0.1.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.3.2",
"history": "latest",
"hoist-non-react-statics": "^3.3.0",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap-select": "^0.14.0",
"react-bootstrap-sweetalert": "^4.4.1",
"react-cropper": "^1.2.0",
"react-date-range": "^1.0.0-beta",
"react-dom": "^16.8.6",
"react-easy-crop": "^1.10.0",
"react-fast-compare": "^2.0.4",
"react-helmet": "^5.2.0",
"react-helmet-async": "^1.0.2",
"react-image-lightbox": "^5.1.0",
"react-maskedinput": "^4.0.1",
"react-placeholder": "^3.0.2",
"react-redux": "^7.0.1",
"react-router-dom": "^5.0.0",
"react-scripts": "^2.1.8",
"react-text-mask": "^5.4.3",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"redux-modal": "^3.0.1",
"redux-promise": "^0.6.0",
"redux-saga": "^1.0.2",
"redux-saga-modal": "^0.3.0",
"rimraf": "^2.6.3",
"shineout": "^1.2.8",
"styled-components": "^4.2.0",
"sweetalert2": "^8.8.1"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"node-sass": "^4.11.0",
"raw-loader": "^2.0.0",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6"
},
"eslintConfig": {
"extends": "react-app",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
}
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

}
`

没有折叠面板，配合Antd下拉框显示异常

集成shineout后包warning：Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed

`
./node_modules/shineout/lib/styles/normalize.less (./node_modules/css-loader??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-7-3!./node_modules/shineout/lib/styles/normalize.less)
Warning

(121:3) Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
`

环境：
react 16.8.1
shineout 1.2.4
less: 3.9.0
less-loader: 4.1.0

React was passed "javascript:;".

Hey mate,
React is the future version of React will block javascript:
URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML try using dangerouslySetInnerHTML instead. React was passed "javascript:;".

Tooltip不显示提示文字

问题描述:
Tooltip组件里添加了自定义Icon组件后,鼠标移入Icon并没有显示tip.
直接使用Icon组件则没有问题

复现代码如下

import { Icon, Tooltip } from 'shineout';

const FontAwesome = Icon(null, 'FontAwesome', 'fa');

const TipIcon = ({ name }) => <FontAwesome name={name} className={styles.tipIcon} />;
...
<Form.Item required={required} label="xxx" rules={rules}>
            
              <Tooltip tip="xxxx" position="bottom" >
               {/* <FontAwesome name={name} className={styles.tipIcon} /> */} {/* 没有问题 */}
                 <TipIcon name="question-circle" /> {/* 有问题 */ }
              </Tooltip>
</Form.Item>

<Image/> "lazy" not working in Modal

When using lazy={true} of Image in a Modal, images would not load even when it become visible.

Demo:
https://codesandbox.io/embed/sleepy-dijkstra-pd9q9

Table 控件指定id属性无效

Table 控件指定id属性无效，Table控件生成的html代码里会忽略掉id属性，name属性也时一样

Table组件显示树状数据时， 如果数据量大， 后面的行收缩展开时会出现空白

1万条一级节点， 加上7万条二级节点

在几千行的位置点展开

收缩的时候， 整个表格就变成空白了， 鼠标再滚动一下， 才会刷新出数据

Form里Input会改变绑定field的类型

如果field是number类型，绑定到它的Input就算设置type为number，一旦修改后，值就变成了string。

用Input.Number倒是没这个问题，但是右边有增减箭头不能去掉

cascade select doesn't clear

I selecting the parent select object, the child select object changes, but after the parent select object cleared, then child select object is not cleared.

 <Form.Item>
                                                        <Input.Group size={"default"}>
                                                            <i className={"so-icon so-icon-default fa-envelope"}>
                                                                <FontAwesomeIcon icon={faMapMarkerAlt}/>
                                                            </i>
                                                            <Select
                                                                clearable
                                                                style={{fontSize: "1rem"}}
                                                                format="ilId"
                                                                keygen="ilId"
                                                                name="ilId"
                                                                renderItem="adi"
                                                                data={this.props.iller.list}
                                                                onFilter={text => il => il.adi.toLocaleLowerCase('TR').indexOf(text.toLocaleLowerCase("TR")) >= 0}
                                                                onChange={this.onIlHandleChange}
                                                                placeholder="İl"
                                                                required={true}
                                                                rules={[rules.required("Lütfen Seçiniz"), rules.min(1, 'Lütfen Seçiniz')]}
                                                            />
                                                        </Input.Group>
                                                    </Form.Item>

        <Form.Item defaultValue={this.state.ilceId}>
                                                        <Input.Group size={"default"}>
                                                            <Select clearable
                                                                    style={{fontSize: "1rem"}}
                                                                    multiple
                                                                    format="ilceId"
                                                                    keygen="ilceId"
                                                                    renderItem="adi"
                                                                    name="ilceId"
                                                                    data={this.state.ilceler}
                                                                    onFilter={text => ilce => ilce.adi.toLocaleLowerCase("TR").indexOf(text.toLocaleLowerCase("TR")) >= 0}
                                                                    onChange={this.onIlceHandleChange}
                                                                    placeholder="İlçeler"
                                                                    required={true}
                                                                    rules={[rules.required("Lütfen Seçiniz"), rules.min(1, 'Lütfen Seçiniz')]}
                                                            />
                                                        </Input.Group>
                                                    </Form.Item>


    onIlHandleChange = (value, item, isSelect) => {

        if (isSelect) {
            this.setState({
                ...this.state,
                ilId: item.ilId,
                ilceId: [],
                ilceler: item.ilceler
            });
        } else {
            this.setState({
                ...this.state,
                ilId: null,
                ilceler: [],
                ilceId: []
            });
        }


    };

 onIlceHandleChange = (value, item, isSelect) => {
        if (isSelect) {
            this.setState({
                ...this.state,
                ilceId: value
            })
        } else {
            this.setState({
                ...this.state,
                ilceId: []
            })
        }
    };

TypeScript适配问题

在ts项目中引入shineout时，会提示缺少包含shineout的.d.ts的声明文件，请问在ts项目中该怎么引入呢

大佬~能否加一点一点注释。。。

slider 组件源码不是太容易看懂，小弟也在学习当中，能否在关键部分写一点注释。。。

form 的 label 能不能 默认 break word ?

如题
多语言情况下 label长度不够的时候会换行,此时希望label是根据单词换行的,
当然可以在label里写组件自己定义样式, 但是好烦啊,希望可以默认..

需要带 Icon 的按钮

如果自己在按钮上加 Icon，会导致按钮loading时，出现一个 loading Icon 和 自己加的，共两个 Icon

Table 不能设置整体居中

要在 columns 上一个个设置。如果在 Table 上设置 style={{ textAlign: 'center' }}，单元格居中，但是表头未居中。

Iconfont 本地文件使用，API文档未给出说明

这样写产生 ES lint 报错

更新代码运行，怎么报错

message模块

点多次消息组件，会出现多个消息模块。

npm包跟github上的代码有些不同，用了表格，发现表头底部border是2px，github上代码已经更新为1px了，好看点

Input 被设为 disabled 时，focus 样式未移除

有个场景，表格当前行输入后回车从服务器拿到数据，新增一行自动聚焦，拿到数据的行设置为 disabled，结果导致 input-focus 那个 class 没有移除，已经 disabled 的输入框仍然有个外发光。

antd 的方式是没问题的：

树形表格显示展开收起图标不可控

实现不了动态加载子数据，可参考antd，列如：子数据字段名：children，当children为[]空数组时显示图标，当children为null、undefined。等空值时不显示图标

这个运行bootstrap4吗？

因为系统使用coreUI作为框架，table等想用你这个，而coreUI是使用bootstrap4的，之前有用你的reactui

table rowSpan 合并问题

根据函数返回的结果（bool）判断是否合并行，a、b为相邻的两行数据。

我想咨询下根据索引index进行合并，怎么进行，比如
index>=0 && index<=2
我试了下，如果只是相邻两行对比数据，不够灵活

好牛批的控件库，沙发

控件都是自己写的吗？写了多长时间啊？
我最新在写Tree控件，网上找到了这个控件库，对于Tree各层之间状态事件管理很纠结，不知道该怎么管理好。
原先我考虑了context，用来管理控件公共变量状态事件，各层之间就靠props传递，传来传去自己都搞蒙了。
看了兄弟的源码，用的是一个Datum类对象来管理，存储状态和事件，然后通过props传入各层，逻辑都写在类里了，外部只需要管理自己组件的状态和dom操作等，看起来很方便。这么设计有什么好处吗？大数据情况怎么样？
还有看源码，发现各组件传递props很暴力，多是整个props（或者other）传入，这样传入很多（或者对象很大，比如Datum），会不会有什么影响啊？小弟初学React时间不长，求大神指教。谢谢！

针对Ts的table没有onScroll属性吗

针对Ts的table没有onScroll属性吗

使用树组件后报错

ERROR in ./~/_shineout@1.1.6@shineout/lib/styles/spin/four-dots.less
Module parse failed: /node_modules/_shineout@1.1.6@shineout/lib/styles/spin/four-dots.less Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)

table固定表头问题

table固定表头之后滚动懒加载时，表头和表格数据之前出现较大空隙

npm run build 报错，怎么解决，还有就是拉去最新代码无法运行

表格能设置列伸缩吗？

Input 表现为非受控组件

import { Input as InputShine } from 'shineout';
import { Input as InputAntd } from 'antd';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      iptValue: '1'
    }
  }

  render() {
    return (
      <div>
        <h1>Shineout: （仍然可以输入）</h1>
        <InputShine value={this.state.iptValue} />
        <h1>Antd: （受控组件，没有绑定事件输入是无效的）</h1>
        <InputAntd value={this.state.iptValue} />
      </div>
    )
  }
}

export default App;

Table 性能问题

SeperateTable.js

这里，如果pageSize 较大的话，性能很差，建议优化一下：

resetWidth(left = this.lastResetLeft || 0, right = this.lastResetRight || 0) {
this.lastResetLeft = left
this.lastResetRight = right
setTranslate(this.tbody, -${left}px, -${this.lastScrollTop}px)
setTranslate(this.thead, -${left}px, '0')
;[this.thead, this.tbody].forEach(el => {
;[].forEach.call(el.parentNode.querySelectorAll('td, th'), cell => {
if (cell.classList.contains(tableClass(CLASS_FIXED_LEFT))) {
setTranslate(cell, ${left}px, '0')
} else if (cell.classList.contains(tableClass(CLASS_FIXED_RIGHT))) {
setTranslate(cell, -${right}px, '0')
} else if (cell.style.transform) {
setTranslate(cell, '0', '0')
}
})
})
}

Select多选数据separator问题

          <Select
                width="200px"
                multiple
                data={[1,2,3,4,5,6]}
                keygen
                datum={{ separator: ',' }}
             />

在与这样的配置联动时, 先将此项置为空字符串,再进行多选时会出现 “,1,2,3”这样的数据,最前面多一个逗号

babel老版本问题

使用了@babel/runtime,使用babel7一下就无法启动

select下拉框无法调节高度，下拉框未到底的时候就向上显示，感觉很奇怪

table 树形表格展开收起按钮触发问题

点击展开收起按钮会触发onRowClick，是否事件冒泡导致，能否禁止

Carousel组件错误

Carousel 轮播

点击第四项展示的是上次点击浏览的图片

Table 行内单元格内容高度不一致时，垂直居中失效

not include "Radio" in "Form" components?

i think should be include"Radio" in "Form" components. more time, we use "radio" in "Form" components!

examples:

<Form style={{ maxWidth: 500 }} rules={rules} onSubmit={d => console.log(d)}>
    <Form.Item required label="Name">
        <Input name="Name" trim />
    </Form.Item>

     <Form.Item required label="Password" tip="Use at least one letter, one numeral, and seven characters.">
         <Input name="password" trim type="password" bind={['repeatPassword']} />
     </Form.Item>

     <Form.Item label="Repeat Password">
            <Input name="repeatPassword" type="password" />
     </Form.Item>

    <Form.Item label="Repeat Password">
         <Radio.Group
                    keygen
                    data={data}
                    onChange={c => console.log(c)}
                    defaultValue="blue"
                    renderItem={renderItem}
         />
     </Form.Item>

                <Form.Item label="">
                    <Form.Button>Sumbit</Form.Button>
                </Form.Item>
</Form>

DatePicker如何设置中文

DatePicker默认是英文,如何设置中文呀,试了一试引入shineout/lib/locale/zh-CN没有作用

按需加载有问题

node_modules/shineout/css/styles/select.css
node_modules/shineout/css/styles/treeSelect.css
出现'so'-导致运行报错。

Datetime Picker range end datetime classname

Range function end day position className doesn't set "so-datepicker-hover-end".

version: 1.4.x

bug :

true :

Dropdown 自定义内容

content 怎么使用 自定义的 html 或组件

Tab 的shape 选line 怎么改颜色？

.so-tabs-line .so-tabs-active:after
这个的颜色怎么改，覆盖样式吗？