@ackee/lucas 中文文档教程

Question

Lucas

一组 React 组件、高阶组件和我们在其他包中缺少的其他 UI 工具。

包的名称是指 福音传教士卢克 所有画家的赞助人。

Table of contents

• Installation
• API
  • Components
  • Prop types
  • HOC
  • Action types

Installation

使用 npm：

npm i -s @ackee/lucas

使用 yarn：

yarn add @ackee/lucas

API

Components

DataList

显示数据列表的组件，可选择滚动（但默认情况下滚动是打开的）。

Props

• data (object[]): List of objects that determines data supplied to RowComponent.
• RowComponent (ReactComponent|ReactNode): Component or Element used as a list row. If custom root element prop no supplied, then it's table and so this component should have tr as a root element to work properly.
• noDataMessage (ReactNode [optional]): Message displayed when data list is empty. Default is 'No data'.
• scrollable (boolean [optional]): Wheather scrollbars should be displayed when content overflow container. Default is true.
• element (Component|string): Determine type of list root element.

Style

建议使用 widget-data-list__scrollbar-thumb 类名来设置滚动条缩略图的样式，因为默认情况下它是 rgba(0, 0, 0, 0)。 下面是一个简单的拇指样式示例（但大多数情况下这就是您所需要的）

.widget-data-list__scrollbar-thumb {
    background-color: grey;
    border-radius: inherit;
}

示例

import { DataList } from '@ackee/lucas';

const data = [
    { id: 1, text: 'Text 1' },
    { id: 2, text: 'Text 2' },
    { id: 3, text: 'Text 3' },
];

const CustomRowComponent = ({ id, text }) => (
    <tr>
        <td style={rowStyle}>{id}</td>
        <td style={rowStyle}>{text}</td>
    </tr>
);

React.render(
    <div>
        <DataList data={data} RowComponent={CustomRowComponent} noDataMessage="Data list is empty" />
    </div>
)
));

---

Prop types

childrenPropType

children 的道具类型形状。

示例

import { childrenPropType } from '@ackee/lucas'

MyComponent.propTypes = {
    children: childrenPropType,
};

---

HOC

errorBoundary(ErrorComponent): BoundedComponent

用于设置错误边界的高阶组件。 实现与 React 作者描述的 非常相似。

Arguments

ErrorComponent：显示错误的 React 组件。 接收

• prop error which is occured error
• all the props supplied to BoundedComponent

Returns

LOG_ERROR]() 操作

捕获子树中任何位置发生的任何意外错误并调用 [

// components/SimpleError.js
const SimpleError = ({ error }) => (
    <div>
        Error occured!:
        <code>{error.message}</code>
    </div>
);

// components/MainContent.js
const MainContent = () => (
    <div>
        <p>Error will be caught up</p>
        {/* Click on the button bellow generates uncaught error  */}
        <button onClick={(e) => e.callNonExistingFunction()}>Do error</button>
    </div>
);

// containers/MainContent.js
import { errorBoundary } from '@ackee/lucas';
import { compose } from 'redux';
import MainContent from '../components/MainContent';

compose(
    errorBoundary(SimpleError),
)(MainContent);

loadable(LoaderComponent: Component, defaultText?: string): (MyComponent) => LoadableMyComponent

的组件代码>显示加载器 只是给装载机。

HOC 接受两个参数：

• LoaderComponent - component that is used as a loader, so it's displayed while showLoader is truthy
• defaultText [optional] - default text that is provided to LoaderComponent unless loaderText prop is supplied to LoadableComponent

包装的可加载组件接受另外两个道具：

• showLoader - controls if loader is visible
• loaderText [optional] - text that is provided into LoaderComponent

LoaderComponent 接收可加载内容（隐藏在加载器后面直到加载完成的组件）作为子项和两个道具：

• show - loader visibility flag
• text - loader text

Example

// components/Loader.jsx
const Loader = ({ children, show, text }) => (
    <div>
        { children }
        { show && <div className="loader">{text}</div> }
    </div>
);

export default Loader;

// containers/Users.js
import { loadable } from '@ackee/lucas';
import Users from '../components/Users';
import Loader from '../components/Loader';

export default compose(
    connect(
        state => ({
            showLoader: isFetchingUsersSelector(state),
        })
    )
    loadable(SimpleLoader),
)(Users);

makeDropzone(GraphicComponent): DropzoneComponent

高阶组件，方便制作带文件dropzone的文件上传组件。

Arguments

• GraphicComponent: React component that creates dropzone graphic.

Returns

接收两个额外属性的组件：

• isMouseOver (boolean): Determine if user drags with mouse over zone. Useful for changing dropzone style.
• uploadState (FS): Actual state of file upload

File state

文件上传状态，可作为 HOC 的属性访问，因此 makeDropzone.FS。

enum FS {
    failed,
    pending,
    uploading,
    uploaded
}

示例

// components/DropArea.js
const DropArea = ({ isMouseOver, uploadState }) => (
    <div style={{ backgroundColor: isMouseOver ? 'yellow' : 'grey' }}>
        <span className="button--blue button">
            {
                uploadState === makeDropzone.FS.uploaded || uploadState === makeDropzone.FS.failed 
                    ? 'Change'
                    : 'Select'
                }
        </span>
    </div>
);

// containers/Dropzone.js
import { makeDropzone } from '@ackee/lucas';
import { compose } from 'redux';
import DropArea from '../components/DropArea';

export default compose(
    makeDropzone,
)(DropArea);

// components/UploadImages.js
import containers from '@ackee/lucas';
import DropArea from '../containers/Dropzone';

const UploadImages = () => (
    <Dropzone
        onDrop={handleFilesDrop}
        input={{
            accept: 'image/png, image/jpeg',
            multiple: boolean,
        }}
    />
)

pure(equalityChecker): (UnpureComponent) => PureComponent

Makre 提供了纯组件——这意味着该组件在 props 发生变化之前不会重新渲染。

Arguments

• equalityChecker (function(prevProps, nextProps):bool [optional]) - Function that returns boolean which determines if prev props are equal to next props. You can provide your own eqaulity checker, if you don't provide equality checker, lodash's isEqual function is used.

退货： 接受 UnpureComponent（应该针对无用的重新渲染进行优化的 React 组件）并返回 PureComponent（仅当其 props 更改时才重新渲染的组件）的函数。 更改由相等检查器确定。

示例 - 自定义相等性检查器

import { pure } from '@ackee/lucas';
import { compose } from 'redux';

const customEqualityChecker = (props, nextProps) => {
    return props.data.changableProp === nextProps.data.changableProp;
};

compose(
    pure(customEqualityChecker),
)(DataConsumerComponent);

示例 - 默认相等性检查器

import { pure } from '@ackee/lucas';
import { compose } from 'redux';

compose(
    pure(),
)(DataConsumerComponent);

---

Action types

记录操作类型

• LOG_ERROR

import { actionTypes } from '@ackee/lucas';
import { takeEvery } from 'redux-saga/effects';

takeEvery(actionTypes.logging.LOG_ERROR, function* (action) {
    const { error, extra } = action;

    console.log(error, extra);
});