DHIS2 丙类

这个软件包包含了跨 Dhis2 应用程序和库使用的常见道具类型.

安装

yarn add @dhis2/prop-types

可用道具类型

职能

阵列 With Length( [min], [最大], [propType]) ⇒ Error | null

确保道具值是最小和最大之间的数组. 如果有第三个 propType 参数被传递到数组中的每个项目都需要是该正则类型

条件( propType) ⇒ Error | null

有条件地确定通过道具上的道具类型

组件实例( 组件) ⇒ Error | null

确保道具值是一个特定组件的实例

互通性( 偏好命名, propType) ⇒ Error | null

确保特定列表中只有一个财产节俭 此函数还会检查当前属性值是否属于指定类型

需要如果( 姊妹方案) Name ⇒ Error | null

确保道具在给定的兄弟姐妹道具时有值(即按需要处理) 也有一个值,并确保道具是正确的道具型

阵列 With Length( [min], [max], [propType]] * Error | null

确保道具值是最小和最大之间的数组. 如果有第三个 propType 参数被传递到数组中的每个项目都需要是该正则类型

仁爱:全球职能
回返数字 : Error | null - 如果满足所有条件或错误,返回无效

示例

import React from 'react'
import { arrayWithLength } from '@dhis2/prop-types'

const LotsOfLists = (props) => <div {...props}>Does nothing</div>

LotsOfLists.propTypes = {
    arrayWithMaxThreeNumbers: arrayWithLength(0, 3, propTypes.number),
    arrayWithAtLeastSixStrings: arrayWithLength(6, undefined, propTypes.string),
    arrayWithAtLeastTenItems: arrayWithLength(10),
    mandatoryArrayBetweenOneAndTen: arrayWithLength(1, 10).isRequired,
}

条件( propTypes) @% Error | null

以一个/几个通过道具的值确定道具的道具类型. 这将限制 propType 相对于 oneOfType。 。 。 .

仁爱:全球职能
回返数字 : Error | null - 如果满足所有条件或错误,返回无效

示例

import React from 'react'
import { conditional } from '@dhis2/prop-types'

const Select = ({ multiple, selected: _selected, options }) => {
    const selected = multiple ? _selected : [ _selected ]

    return (
        // ...
    )
}

const option = propTypes.shape({
    value: propTypes.string.isReuqired,
    labe: propTypes.string.isReuqired,
})

LotsOfLists.propTypes = {
    // ...
    options: propTypes.arrayOf(option).isRequired,
    selected: conditional(
        props => props.multiple ? propTypes.arrayOf(option) : option
    ).isRequired,
    // ...
}

组件实例 Error | null

确保道具值是一个特定组件的实例

仁爱:全球职能
回返数字 : Error | null - 如果满足所有条件或错误,返回无效

示例

import React from 'react'
import { instanceOfComponent } from '@dhis2/prop-types'
import { Button } from './Button'

const ButtonWrap = ({ children }) => <div>{children}</div>
// This would allow the ButtonWrap to be empty
ButtonWrap.propTypes = {
    children: instanceOfComponent(Button),
}

// Enforce presence of a Button instance
ButtonWrap.propTypes = {
    children: instanceOfComponent(Button).isRequired,
}

// Enforce presence of a multiple children, all Button instances
ButtonWrap.propTypes = {
    children: proptypes.arrayOf(instanceOfComponent(Button)).isRequired,
}

互通性( 偏好性命名, propType) @% Error | null

确保特定列表中只有一个财产节俭 此函数还会检查当前属性值是否属于指定类型

仁爱:全球职能
回返数字 : Error | null - 如果满足所有条件或错误,返回无效

示例

import React from 'react'
import cx from 'classnames'
import propTypes from 'prop-types'
import { mutuallyExclusive } from '@dhis2/prop-types'

const Alert = ({ danger, warning, success, children }) => (
    <div className={cx({ danger, warning, success })}>{children}</div>
)

const statusPropType = mutuallyExclusive(
    ['danger', 'warning', 'success'],
    propTypes.bool
)

Alert.propTypes = {
    children: propTypes.node,
    danger: statusPropType,
    warning: statusPropType,
    success: statusPropType,
}

如果( 姊妹方案Name ) @% 1 Error | null

确保道具在给定的兄弟姐妹道具时有值(即按需要处理) 也有一个值,并确保道具是正确的道具型

仁爱:全球职能
回返数字 : Error | null - 如果满足所有条件或错误,返回无效

示例

import React from 'react'
import { requiredIf } from '@dhis2/prop-types'

const Test = ({ someBool, someString }) => (
    <div>
        <h1>someBool: {someBool ? 'true' : 'false'}</h1>
        <h1>someString: {someString}</h1>
    </div>
)
Test.propTypes = {
    someBool: propTypes.bool,
    someString: requiredIf((props) => props.someBool, propTypes.string),
}

移动到 @dhis2/prop-types 五.3

变化摘要

@dhis2/prop-types 曾直接依赖 prop-types 库和再出口其出口:

• 在v1中,我们曾导出一个包含所有正则道具型和DHIS2自定义道具型的默认对象. 我们还将所有普通和定制的道具型作为命名的出口品.
• 在v2中,我们采取了一种略有不同的做法:
  • DHIS2自定义道具型号作为命名出口提供
  • 默认导出是一个包含所有自定义道具类型的对象
  • 常规道具型是通过 PropTypes 导出
• 而现在在v3,我们不再出口 从什么 prop-types 软件包。 相反,我们只是将我们自己的自定义道具型功能暴露为命名出口.

从 v1 移到 v3

这些步骤是:

1. 安装版本 v3. 0.0, 例如运行 yarn upgrade @dhis2/prop-types --latest。确保 package.json 有条目 "@dhis2/prop-types": "^3.x.x"
2. 为新版本准备文件, 运行此版本提供的代码:
   • 确保最新版本 @dhis2/cli 已安装.
   • 通过运行确保代码模块可用 :

     d2 utils codemod list
     

     你应该看看 @dhis2/prop-types:prop-types-v1-v3.js 列出.
   • 通过运行应用代码模块 :

     d2 utils codemod apply @dhis2/prop-types:prop-types-v1-v3.js **/*.js`
     

3. 确保 prop-types 软件包在 package.json。 。 。 .
4. 扫描项目从 @dhis2/prop-types (开展全球搜索) from '@dhis2/prop-types' {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}会把戏的.
   • 如果遇到任何这种进口,项目仍需要这种依赖.
   • 极有可能,搜索不会产生任何结果,这意味着 @dhis2/prop-types 应去除依赖.

从v2 移到v3

没有可转换组件文件的编码器,但这应该是相当直接的:

1. 替换 import { PropTypes } from '@dhis2/prop-types' 与 import PropTypes from 'prop-types'。 。 。 .
2. 前一步应正确更新工程中的大部分组件文件. 如果仍有组件文件从 @dhis2/prop-types,那么这些文件可能实际上是使用DHIS2自定义道具类型,这些文件应该单独处理.

组件文件更新后,依存于 package.json 需要按照v1 - > 3迁移部分第3和第4步所示的同样方式,尽可能地更新.

报告问题

问题跟踪器可见于 DHIS2 吉拉 下划线 液态 项目.

深链接 :

• 错误
• 特性
• 任务