@mpxjs/webpack-plugin
Version:
mpx compile core
69 lines (68 loc) • 2.79 kB
JSX
/**
* ✘ report-submit
* ✘ report-submit-timeout
* ✔ bindsubmit
* ✔ bindreset
*/
import { View } from 'react-native';
import { useRef, forwardRef, useMemo, createElement } from 'react';
import useNodesRef from './useNodesRef';
import useInnerProps, { getCustomEvent } from './getInnerListeners';
import { FormContext } from './context';
import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren, extendObject } from './utils';
const _Form = forwardRef((fromProps, ref) => {
const { textProps, innerProps: props = {} } = splitProps(fromProps);
const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
const formRef = useRef(null);
useNodesRef(props, ref, formRef, {
style: normalStyle
});
const propsRef = useRef({});
propsRef.current = props;
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
style: extendObject({}, innerStyle, layoutStyle),
ref: formRef
}), [
'bindsubmit',
'bindreset'
], { layoutRef });
const contextValue = useMemo(() => {
const formValuesMap = new Map();
const submit = () => {
const { bindsubmit } = propsRef.current;
const formValue = {};
for (const name of formValuesMap.keys()) {
if (formValuesMap.get(name).getValue) {
formValue[name] = formValuesMap.get(name).getValue();
}
}
bindsubmit && bindsubmit(getCustomEvent('submit', {}, {
detail: {
value: formValue
},
layoutRef
}, propsRef.current));
};
const reset = () => {
const { bindreset } = propsRef.current;
bindreset && bindreset();
formValuesMap.forEach(item => item.resetValue());
};
return {
formValuesMap,
submit,
reset
};
}, []);
return createElement(View, innerProps, createElement(FormContext.Provider, { value: contextValue }, wrapChildren(props, {
hasVarDec,
varContext: varContextRef.current,
textStyle,
textProps
})));
});
_Form.displayName = 'MpxForm';
export default _Form;