feat:添加input组件

src/_test.tsx

@@ -1,19 +1,36 @@
+import React, { useState } from "react";
+import ReactDom from "react-dom";
+import Modal from "./components/modal/modal";
+import Upload from "./components/upload/upload";
+import Tab from "./components/tab/tab";
+import * as GOJI from "goji_ui";
+import Input from "./components/input";
 
-import React, { useState } from 'react';
-import ReactDom from 'react-dom'
-import Modal from './components/modal/modal';
-import Upload from './components/upload/upload';
-import Tab from './components/tab/tab';
-import Flex from './components/flex/flex';
-import FlexItem from './components/flex_item/flex_item';
+function App() {
+ const [visible, setVisible] = useState(false);
+ const [ev, setEv] = useState(false);
+ const [value, setValue] = useState(10);
 
-import * as GOJI from 'goji_ui'
+ const handleClick = (e: unknown) => {
+ setValue(e?.target.value);
+ console.log("e", e?.target.value);
+ };
 
-function App() {
- const [visible, setVisible] = useState(false)
- const [ev, setEv] = useState(false)
- return <div>
- {/* <GOJI.Tab
+ return (
+ <div>
+ <Input
+ defaultValue={"undefinedssss"}
+ maxLength={10}
+ value={value}
+ onChange={handleClick}
+ onBlur={() => {
+ console.log("kdsk");
+ }}
+ onFocus={() => {
+ console.log("sssss");
+ }}
+ />
+ {/* <GOJI.Tab
  extSelector={'.tab'}
  extension={<div>这是扩展的内容</div>}
  items={[
@@ -29,84 +46,105 @@ function App() {
  }
  ]}
  /> */}
-
-
- <h1>test</h1>
- <button
- onClick={() => {
- setVisible(true)
- }}
- >
- show modal
- </button>
- <Tab
- onTabChange={() => {
- setEv(true)
- }}
- hiddenStyle={{
- height: '0px',
- overflow: 'hidden'
- }}
- tabContentVisible={ev}
- extSelector={'[aria-label="tab"]'}
- extension={<div onClick={() => { setEv(!ev) }} className="ext">这是扩展的内容</div>}
- items={[
- {
- title: "tab1",
- key: "tab1",
- children: <div>tab1</div>
- },
- {
- title: "tab2",
- key: "tab2",
- children: <div>tab2</div>
- }
- ]}
- />
-
- <Modal
- // dontDestroyOnClose={true}
- onClose={() => {
- setVisible(false)
- }}
- visible={visible}
- >
- <div>
- how to set default value for typescript interface field
- <input type="text" />
- </div>
- </Modal>
-
- <Upload
- uploadUrl='/api/video-service/upload'
- beforeUpload={(f) => {
- for (var i = 0; i < f.length; i++) {
- console.log(f[i].name)
- }
- return new Promise((r, j) => {
- setTimeout(() => {
- r(f)
- }, 1000);
- })
- }}
-
- valueFilter={({ response }) => {
- return (response as Record<string, Object>).url
- }}
- onComplete={(res: any[]) => {
- console.log(res)
- }}
- >
- 请选择文件
- </Upload>
-
- <Flex>
- <FlexItem> 1</FlexItem>
- <FlexItem> 1</FlexItem>
- <FlexItem> 1</FlexItem>
- </Flex>
-
- </div >
+ <h1>test</h1>
+ <button
+ onClick={() => {
+ setVisible(true);
+ }}
+ >
+ show modal
+ </button>
+ <Tab
+ onTabChange={() => {
+ setEv(true);
+ }}
+ hiddenStyle={{
+ height: "0px",
+ overflow: "hidden",
+ }}
+ tabContentVisible={ev}
+ extSelector={'[aria-label="tab"]'}
+ extension={
+ <div
+ onClick={() => {
+ setEv(!ev);
+ }}
+ className="ext"
+ >
+ 这是扩展的内容
+ </div>
+ }
+ items={[
+ {
+ title: "tab1",
+ key: "tab1",
+ children: <div>tab1</div>,
+ },
+ {
+ title: "tab2",
+ key: "tab2",
+ children: <div>tab2</div>,
+ },
+ ]}
+ />
+ <Modal
+ // dontDestroyOnClose={true}
+ onClose={() => {
+ setVisible(false);
+ }}
+ visible={visible}
+ >
+ <div>
+ how to set default value for typescript interface field
+ <input type="text" />
+ </div>
+ </Modal>
+ <Upload
+ uploadUrl="/api/video-service/upload"
+ beforeUpload={(f) => {
+ for (var i = 0; i < f.length; i++) {
+ console.log(f[i].name);
+ }
+ return new Promise((r, j) => {
+ setTimeout(() => {
+ r(f);
+ }, 1000);
+ });
+ }}
+ valueFilter={({ response }) => {
+ return (response as Record<string, Object>).url;
+ }}
+ onComplete={(res: any[]) => {
+ console.log(res);
+ }}
+ >
+ 请选择文件
+ </Upload>
+ {/* <DropDown
+ trigger={"click"}
+ visible={modalVisible}
+ setVisible={setModalVisible}
+ onChangeVisible={() => {
+ setModalVisible(!modalVisible);
+ }}
+ position="topRight"
+ width={150}
+ modelContent={[
+ {
+ id: "1",
+ label: "first Item",
+ },
+ {
+ id: "2",
+ label: "second Item",
+ },
+ ]}
+ // className={"modless"}
+ >
+ SHOW MODEL
+ </DropDown> */}
+ </div>
+ );
 }
 
-ReactDom.render(<App />, document.getElementById("app"))
+ReactDom.render(<App />, document.getElementById("app"));

src/components/input/index.css

@@ -0,0 +1,36 @@
+.inputBox {
+ border: 1px solid #036df7;
+ display: inline;
+ padding: 4px;
+ border-radius: 5px;
+ margin: 10px;
+}
+.inputBox input {
+ outline: none;
+ border: none;
+ height: 19px;
+}
+.inputBox .numberLimit {
+ font-size: 14px;
+}
+.action {
+ border: 1px solid red;
+ display: inline;
+ padding: 4px;
+ border-radius: 5px;
+ margin: 10px;
+}
+.action input {
+ outline: none;
+ border: none;
+ height: 19px;
+}
+.action .numberLimit {
+ font-size: 14px;
+}
+.message {
+ margin: 0;
+ padding: 0;
+ color: red;
+ font-size: 12px;
+}

src/components/input/index.less

@@ -0,0 +1,39 @@
+.inputBox {
+ border: 1px solid rgb(3, 109, 247);
+ display: inline;
+ padding: 4px;
+ border-radius: 5px;
+ margin: 10px;
+ input {
+ outline: none;
+ border: none;
+ height: 19px;
+ }
+
+ .numberLimit {
+ font-size: 14px;
+ }
+}
+
+.action {
+ border: 1px solid red;
+ display: inline;
+ padding: 4px;
+ border-radius: 5px;
+ margin: 10px;
+ input {
+ outline: none;
+ border: none;
+ height: 19px;
+ }
+ .numberLimit {
+ font-size: 14px;
+ }
+}
+
+.message {
+ margin: 0;
+ padding: 0;
+ color: red;
+ font-size: 12px;
+}

src/components/input/index.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import "./index.less";
+
+interface IProps extends React.HTMLProps<HTMLInputElement> {
+ className?: string | undefined;
+ style?: React.CSSProperties;
+ value: string | number | undefined;
+ maxLength?: number | undefined;
+ defaultValue?: string | undefined;
+}
+
+const Input = (props: IProps) => {
+ const { value, defaultValue, maxLength, className, style } = props;
+ const [inputLength, setInputLength] = useState(0);
+
+ useEffect(() => {
+ if (value === "string") {
+ let inputValues = value?.split("").length;
+ setInputLength(inputValues);
+ } else {
+ setInputLength(0);
+ }
+ }, [value]);
+
+ useEffect(() => {
+ if (defaultValue) {
+ if (typeof defaultValue === "number") {
+ let defaultValueArrayLength = defaultValue
+ ?.toString()
+ ?.split("")?.length;
+ setInputLength(defaultValueArrayLength);
+ } else if (typeof defaultValue === "string") {
+ let defaultValues = defaultValue.split("").length;
+ setInputLength(defaultValues);
+ } else {
+ setInputLength(0);
+ }
+ }
+ }, []);
+
+ return (
+ <>
+ <div
+ className={`${inputLength <= 10 ? "inputBox" : "action"} ${className}`}
+ style={{ ...style }}
+ >
+ <input {...props} />
+ <span className="numberLimit">{`${inputLength}/${
+ maxLength && maxLength
+ }`}</span>
+ </div>
+ {inputLength > 10 && (
+ <span className="message">内容超过10，请重新输入</span>
+ )}
+ </>
+ );
+};
+
+export default Input;