How to use @uform/utils - 10 common examples
To help you get started, we’ve selected a few @uform/utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
alibaba / uform / packages / react / src / shared / broadcast.tsx View on Github 
export const FormConsumer = ({
children,
selector
}: {
// TODO formApi
children: React.ReactElement | ((formApi: any) => React.ReactElement)
selector?: IOption['selector']
}): React.ReactElement => {
const formApi = useForm({ selector })
if (!formApi) {
return
}
if (isFn(children)) {
return children(formApi)
} else {
return children ||
}
}children: rawChildren,
cols: rawCols,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
title,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
description,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
help,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
extra,
...props
} = this.props
const children = toArr(rawChildren)
const childNum = children.length
const cols = toArr(rawCols).map(col => normalizeCol(col))
if (cols.length < childNum) {
const offset: number = childNum - cols.length
const lastSpan: number =
24 -
cols.reduce((buf, col) => {
return (
buf +
Number(col.span ? col.span : 0) +
Number(col.offset ? col.offset : 0)
)
}, 0)
for (let i = 0; i < offset; i++) {
cols.push({ span: Math.floor(lastSpan / offset) })
}const {
children: rawChildren,
cols: rawCols,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
title,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
description,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
help,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
extra,
...props
} = this.props
const children = toArr(rawChildren)
const cols = toArr(rawCols).map(col => normalizeCol(col))
const childNum = children.length
if (cols.length < childNum) {
let offset: number = childNum - cols.length
let lastSpan: number =
24 -
cols.reduce((buf, col) => {
return (
buf +
Number(col.span ? col.span : 0) +
Number(col.offset ? col.offset : 0)
)
}, 0)
for (let i = 0; i < offset; i++) {
cols.push({ span: Math.floor(lastSpan / offset) })
}renderGrid() {
const {
children: rawChildren,
cols: rawCols,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
title,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
description,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
help,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
extra,
...props
} = this.props
const children = toArr(rawChildren)
const cols = toArr(rawCols).map(col => normalizeCol(col))
const childNum = children.length
if (cols.length < childNum) {
let offset: number = childNum - cols.length
let lastSpan: number =
24 -
cols.reduce((buf, col) => {
return (
buf +
Number(col.span ? col.span : 0) +
Number(col.offset ? col.offset : 0)
)
}, 0)
for (let i = 0; i < offset; i++) {
cols.push({ span: Math.floor(lastSpan / offset) })private renderGrid() {
const {
children: rawChildren,
cols: rawCols,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
title,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
description,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
help,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
extra,
...props
} = this.props
const children = toArr(rawChildren)
const childNum = children.length
const cols = toArr(rawCols).map(col => normalizeCol(col))
if (cols.length < childNum) {
const offset: number = childNum - cols.length
const lastSpan: number =
24 -
cols.reduce((buf, col) => {
return (
buf +
Number(col.span ? col.span : 0) +
Number(col.offset ? col.offset : 0)
)
}, 0)
for (let i = 0; i < offset; i++) {styled(({ children, schema, className }) => {
const { title, help, text, name, extra, ...props } = schema['x-props']
const ref: React.RefObject = useRef()
const arrChildren = toArr(children)
const split = String(text).split('%s')
useLayoutEffect(() => {
if (ref.current) {
const elements = ref.current.querySelectorAll('.text-box-field')
const syncLayouts = Array.prototype.map.call(
elements,
(el: HTMLElement) => {
return [
el,
() => {
const ctrl = el.querySelector(
'.ant-form-item-control:first-child'
)
if (ctrl) {
el.style.width = ctrl.getBoundingClientRect().width + 'px'
}styled(({ children, schema, className }) => {
const { title, help, text, name, extra, ...props } = schema['x-props']
const ref: React.RefObject = useRef()
const arrChildren = toArr(children)
const split = String(text).split('%s')
let index = 0
useLayoutEffect(() => {
if (ref.current) {
const elements = ref.current.querySelectorAll('.text-box-field')
const syncLayouts = Array.prototype.map.call(
elements,
(el: HTMLElement) => {
return [
el,
() => {
const ctrl = el.querySelector(
'.next-form-item-control:first-child'
)
if (ctrl) {
el.style.width = ctrl.getBoundingClientRect().width + 'px'broadcast.subscribe(({ type, state, schema, ...others }) => {
if (type !== 'submit' && type !== 'reset') {
if (initialized) {
if (options.selector) {
if (
(isFn(options.selector) && options.selector({ type, state })) ||
(isArr(options.selector) &&
options.selector.indexOf(type) > -1) ||
(isStr(options.selector) && options.selector === type)
) {
setState({
status: type,
state,
schema,
...others
})
}
}
} else {
finalValue = {
status: type,
state,export const mapTextComponent = (
Target: React.ComponentClass,
props,
{
editable,
name
}: { editable: boolean | ((name: string) => boolean); name: string }
): React.ComponentClass => {
if (editable !== undefined) {
if (isFn(editable)) {
if (!editable(name)) {
return Text
}
} else if (editable === false) {
return Text
}
}
return Target
}(buf, fn: any) => {
return isFn(fn) ? fn(buf) : buf
},
payload,
