|
|
@@ -14,6 +14,7 @@ import {
|
|
|
SelectItem,
|
|
|
} from "@ui-kitten/components";
|
|
|
import { Cascader, BottomModal } from "beeshell";
|
|
|
+import { useCreation } from "@umijs/hooks";
|
|
|
import { useModel } from "flooks";
|
|
|
import moment from "moment";
|
|
|
import OpenTime from "./OpenTime";
|
|
|
@@ -83,94 +84,125 @@ function* flattenSelect(array, key) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function getInputProps(
|
|
|
+ type,
|
|
|
+ value,
|
|
|
+ placeholder,
|
|
|
+ onChange,
|
|
|
+ secureTextEntry,
|
|
|
+ renderIcon
|
|
|
+) {
|
|
|
+ let _props = {
|
|
|
+ defaultValue: value || "",
|
|
|
+ placeholder,
|
|
|
+ };
|
|
|
+ if (type === "phone") {
|
|
|
+ _props = {
|
|
|
+ ..._props,
|
|
|
+ dataDetectorTypes: "phoneNumber",
|
|
|
+ maxLength: 11,
|
|
|
+ keyboardType: "phone-pad",
|
|
|
+ };
|
|
|
+ } else if (type === "password") {
|
|
|
+ _props = {
|
|
|
+ ..._props,
|
|
|
+ accessoryRight: ImageProps => renderIcon(ImageProps),
|
|
|
+ secureTextEntry,
|
|
|
+ };
|
|
|
+ } else if (type === "code") {
|
|
|
+ _props = {
|
|
|
+ ..._props,
|
|
|
+ maxLength: 6,
|
|
|
+ keyboardType: "numeric",
|
|
|
+ };
|
|
|
+ } else if (type === "amount" || type === "money") {
|
|
|
+ _props = {
|
|
|
+ ..._props,
|
|
|
+ keyboardType: "numeric",
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (onChange) {
|
|
|
+ _props = {
|
|
|
+ ..._props,
|
|
|
+ onChangeText: nextValue => onChange(nextValue),
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ return _props;
|
|
|
+}
|
|
|
+
|
|
|
+const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;
|
|
|
+
|
|
|
+const Label = ({ type, labelStyle, label, appearance }) => {
|
|
|
+ return (
|
|
|
+ <View
|
|
|
+ style={[
|
|
|
+ appearance === "inner" ? styles.labelleft : styles.label,
|
|
|
+ type === "img" ? { alignSelf: "flex-start" } : {},
|
|
|
+ labelStyle || {},
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Text
|
|
|
+ category="c1"
|
|
|
+ style={{
|
|
|
+ textAlign: appearance !== "inner" ? "right" : "left",
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {label}
|
|
|
+ </Text>
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const Btn = ({ btnText }) => (
|
|
|
+ <Button
|
|
|
+ appearance="ghost"
|
|
|
+ size="tiny"
|
|
|
+ style={{ paddingVertical: 8, marginLeft: 5 }}
|
|
|
+ >
|
|
|
+ {btnText}
|
|
|
+ </Button>
|
|
|
+);
|
|
|
const FormInput = React.memo(props => {
|
|
|
- const { appearance, type, selectList } = props;
|
|
|
+ const {
|
|
|
+ placeholder,
|
|
|
+ appearance,
|
|
|
+ type,
|
|
|
+ selectList,
|
|
|
+ value,
|
|
|
+ style,
|
|
|
+ sub,
|
|
|
+ onChange,
|
|
|
+ labelStyle,
|
|
|
+ label,
|
|
|
+ } = props;
|
|
|
+
|
|
|
const [secureTextEntry, setSecureTextEntry] = React.useState(true);
|
|
|
const { cancel, confirm } = useModel("wordsModel");
|
|
|
const toggleSecureEntry = () => {
|
|
|
setSecureTextEntry(!secureTextEntry);
|
|
|
};
|
|
|
-
|
|
|
// eslint-disable-next-line no-shadow
|
|
|
const renderIcon = props => (
|
|
|
<TouchableWithoutFeedback onPress={toggleSecureEntry}>
|
|
|
<Icon {...props} name={secureTextEntry ? "eye-off" : "eye"} />
|
|
|
</TouchableWithoutFeedback>
|
|
|
);
|
|
|
- function getInputProps(props) {
|
|
|
- let _props = {
|
|
|
- value: props.value || "",
|
|
|
- placeholder: props.placeholder,
|
|
|
- };
|
|
|
- if (type === "phone") {
|
|
|
- _props = {
|
|
|
- ..._props,
|
|
|
- dataDetectorTypes: "phoneNumber",
|
|
|
- maxLength: 11,
|
|
|
- keyboardType: "phone-pad",
|
|
|
- };
|
|
|
- } else if (type === "password") {
|
|
|
- _props = {
|
|
|
- ..._props,
|
|
|
- accessoryRight: ImageProps => renderIcon(ImageProps),
|
|
|
- secureTextEntry,
|
|
|
- };
|
|
|
- } else if (type === "code") {
|
|
|
- _props = {
|
|
|
- ..._props,
|
|
|
- maxLength: 6,
|
|
|
- keyboardType: "numeric",
|
|
|
- };
|
|
|
- } else if (type === "amount" || props.type === "money") {
|
|
|
- _props = {
|
|
|
- ..._props,
|
|
|
- keyboardType: "numeric",
|
|
|
- };
|
|
|
- }
|
|
|
- if (props.onChange) {
|
|
|
- _props = {
|
|
|
- ..._props,
|
|
|
- onChangeText: nextValue => props.onChange(nextValue),
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- return _props;
|
|
|
- }
|
|
|
-
|
|
|
- const inputProps = getInputProps(props);
|
|
|
-
|
|
|
- // const myInput = () => {
|
|
|
- // if (inputProps != null) {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // };
|
|
|
-
|
|
|
- const Label = ({ type, labelStyle, label }) => {
|
|
|
- return (
|
|
|
- <View
|
|
|
- style={[
|
|
|
- appearance === "inner" ? styles.labelleft : styles.label,
|
|
|
- type === "img" ? { alignSelf: "flex-start" } : {},
|
|
|
- labelStyle || {},
|
|
|
- ]}
|
|
|
- >
|
|
|
- <Text
|
|
|
- category="c1"
|
|
|
- style={{
|
|
|
- textAlign: appearance !== "inner" ? "right" : "left",
|
|
|
- }}
|
|
|
- >
|
|
|
- {label}
|
|
|
- </Text>
|
|
|
- </View>
|
|
|
+ const inputProps = useCreation(() => {
|
|
|
+ return getInputProps(
|
|
|
+ type,
|
|
|
+ value,
|
|
|
+ placeholder,
|
|
|
+ onChange,
|
|
|
+ secureTextEntry,
|
|
|
+ renderIcon
|
|
|
);
|
|
|
- };
|
|
|
- const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;
|
|
|
+ }, [type, value, placeholder, onChange, secureTextEntry, renderIcon]);
|
|
|
|
|
|
const [bottomModalX, changeBottomModalx] = React.useState("");
|
|
|
const [selectVal, setSelectVal] = React.useState("");
|
|
|
|
|
|
- const selectInfo = React.useMemo(() => {
|
|
|
+ const selectInfo = useCreation(() => {
|
|
|
if (type === "select" && props.value && selectList) {
|
|
|
const childrens = [...flattenSelect(selectList, "children")];
|
|
|
return (
|
|
|
@@ -180,21 +212,11 @@ const FormInput = React.memo(props => {
|
|
|
);
|
|
|
}
|
|
|
return { name: " " };
|
|
|
- }, [props.value, type, selectList]);
|
|
|
+ }, [value, type, selectList]);
|
|
|
|
|
|
const [open, ChangeOpen] = React.useState(false);
|
|
|
|
|
|
- const Btn = ({ btnText }) => (
|
|
|
- <Button
|
|
|
- appearance="ghost"
|
|
|
- size="tiny"
|
|
|
- style={{ paddingVertical: 8, marginLeft: 5 }}
|
|
|
- >
|
|
|
- {btnText}
|
|
|
- </Button>
|
|
|
- );
|
|
|
-
|
|
|
- function getMain(type, props) {
|
|
|
+ function getMain(type, props, inputProps) {
|
|
|
if (type === "select") {
|
|
|
return (
|
|
|
<>
|
|
|
@@ -305,7 +327,14 @@ const FormInput = React.memo(props => {
|
|
|
return (
|
|
|
<Input
|
|
|
{...inputProps}
|
|
|
- accessoryLeft={leftprops => <Label {...props} {...leftprops} />}
|
|
|
+ accessoryLeft={() => (
|
|
|
+ <Label
|
|
|
+ type={type}
|
|
|
+ labelStyle={labelStyle}
|
|
|
+ label={label}
|
|
|
+ appearance={appearance}
|
|
|
+ />
|
|
|
+ )}
|
|
|
accessoryRight={() => <Btn btnText={props.btnText} />}
|
|
|
size="small"
|
|
|
style={styles.input}
|
|
|
@@ -317,7 +346,14 @@ const FormInput = React.memo(props => {
|
|
|
return (
|
|
|
<Input
|
|
|
{...inputProps}
|
|
|
- accessoryLeft={leftprops => <Label {...props} {...leftprops} />}
|
|
|
+ accessoryLeft={() => (
|
|
|
+ <Label
|
|
|
+ type={type}
|
|
|
+ labelStyle={labelStyle}
|
|
|
+ label={label}
|
|
|
+ appearance={appearance}
|
|
|
+ />
|
|
|
+ )}
|
|
|
size="small"
|
|
|
style={styles.input}
|
|
|
appearance="inner"
|
|
|
@@ -335,22 +371,29 @@ const FormInput = React.memo(props => {
|
|
|
level="1"
|
|
|
style={[
|
|
|
styles.inputContainer,
|
|
|
- { ...props.style },
|
|
|
- props.type === "img" ? { flexDirection: "column" } : {},
|
|
|
+ { ...style },
|
|
|
+ type === "img" ? { flexDirection: "column" } : {},
|
|
|
{ paddingVertical: appearance === "inner" ? 0 : 10 },
|
|
|
]}
|
|
|
>
|
|
|
- {appearance !== "inner" && <Label {...props} />}
|
|
|
+ {appearance !== "inner" && (
|
|
|
+ <Label
|
|
|
+ type={type}
|
|
|
+ labelStyle={labelStyle}
|
|
|
+ label={label}
|
|
|
+ appearance={appearance}
|
|
|
+ />
|
|
|
+ )}
|
|
|
|
|
|
- {(!props.value || props.value === " ") && (
|
|
|
+ {(!value || value === " ") && (
|
|
|
<Text category="c1" style={styles.sub}>
|
|
|
- {props.sub}
|
|
|
+ {sub}
|
|
|
</Text>
|
|
|
)}
|
|
|
|
|
|
- {getMain(props.type, props)}
|
|
|
+ {getMain(type, props, inputProps)}
|
|
|
|
|
|
- {appearance !== "inner" && props.type === "code" && Btn(props)}
|
|
|
+ {appearance !== "inner" && type === "code" && Btn(props)}
|
|
|
</Layout>
|
|
|
);
|
|
|
});
|