coject 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -5
- package/dist/cjs/Components/Input/index.js +9 -2
- package/dist/cjs/Components/Input/index.js.map +1 -1
- package/dist/cjs/Components/Input/theme.d.ts +10 -0
- package/dist/cjs/Components/Input/theme.js +37 -0
- package/dist/cjs/Components/Input/theme.js.map +1 -0
- package/dist/esm/Components/Input/index.js +7 -3
- package/dist/esm/Components/Input/index.js.map +1 -1
- package/dist/esm/Components/Input/theme.d.ts +10 -0
- package/dist/esm/Components/Input/theme.js +35 -0
- package/dist/esm/Components/Input/theme.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,77 @@
|
|
|
1
|
-
|
|
1
|
+
<h1 align="center">Coject</h1>
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers axios moment moment-hijri react-hook-form react-toastify tss-react
|
|
3
|
+
<p align="center">Promise based HTTP client for the browser and node.js</p>
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://coject.com/"><b>Website</b></a> •
|
|
7
|
+
<a href="https://coject.com/docs/intro"><b>Documentation</b></a>
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
<div align="center">
|
|
11
|
+
[](https://www.npmjs.org/package/coject)
|
|
12
|
+
[](https://cdnjs.com/libraries/coject)
|
|
13
|
+
[](https://github.com/coject/coject/actions/workflows/ci.yml)
|
|
14
|
+
[](https://gitpod.io/#https://github.com/coject/coject)
|
|
15
|
+
[](https://coveralls.io/r/mzabriskie/coject)
|
|
16
|
+
[](https://packagephobia.now.sh/result?p=coject)
|
|
17
|
+
[](https://bundlephobia.com/package/coject@latest)
|
|
18
|
+
[](https://npm-stat.com/charts.html?package=coject)
|
|
19
|
+
[](https://gitter.im/mzabriskie/coject)
|
|
20
|
+
[](https://www.codetriage.com/coject/coject)
|
|
21
|
+
[](https://snyk.io/test/npm/coject)
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
# Coject v1.2
|
|
25
|
+
|
|
26
|
+
The [Coject](https://coject.com/) library exported as [React.js](https://react.dev/) components.
|
|
27
|
+
All Component Is Dependency On [Material UI](https://mui.com/) Library.
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
|
|
31
|
+
Using npm:
|
|
32
|
+
```shell
|
|
33
|
+
// npm install
|
|
34
|
+
$ npm i coject
|
|
35
|
+
|
|
36
|
+
// yarn install
|
|
37
|
+
$ yarn add coject
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Dependency npm [For JavaScript/TypeScript Project]:
|
|
41
|
+
```shell
|
|
42
|
+
// npm install
|
|
43
|
+
$ npm i @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers @types/moment @types/moment-hijri coject moment moment-hijri react-hook-form react-toastify tss-react
|
|
44
|
+
|
|
45
|
+
// yarn install
|
|
46
|
+
$ yarn add @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers @types/moment @types/moment-hijri coject moment moment-hijri react-hook-form react-toastify tss-react
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
In React.js:
|
|
50
|
+
```js
|
|
51
|
+
// Load Input Components
|
|
52
|
+
import { Form, Input } from 'coject';
|
|
53
|
+
|
|
54
|
+
// Use It Inside Component
|
|
55
|
+
function FormApp() {
|
|
56
|
+
return (
|
|
57
|
+
<>
|
|
58
|
+
<Form onSubmit={(formData) => console.log(formData)}>
|
|
59
|
+
<Input type="email" name="username" lable="Username" />
|
|
60
|
+
<Input type="password" name="password" lable="Password" />
|
|
61
|
+
</Form>
|
|
62
|
+
</>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const root = createRoot(document.getElementById('root'));
|
|
67
|
+
root.render(<App />);
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
See the [package source](https://github.com/coject/coject) for more details.
|
|
71
|
+
|
|
72
|
+
**Note:**<br>
|
|
73
|
+
Install [Material UI](https://www.npmjs.com/package/n_) for Coject use in the React.js > 16.
|
|
74
|
+
|
|
75
|
+
## Support
|
|
76
|
+
|
|
77
|
+
Tested in Chrome 74-75, Firefox 66-67, IE 11, Edge 18, Safari 11-12, & Node.js 8-12.
|
|
@@ -33,6 +33,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
33
33
|
}
|
|
34
34
|
return t;
|
|
35
35
|
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
36
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
40
|
exports.Input = void 0;
|
|
38
41
|
const react_1 = __importStar(require("react"));
|
|
@@ -40,16 +43,20 @@ const react_1 = __importStar(require("react"));
|
|
|
40
43
|
const react_hook_form_1 = require("react-hook-form");
|
|
41
44
|
// Material UI
|
|
42
45
|
const material_1 = require("@mui/material");
|
|
46
|
+
// Styles
|
|
47
|
+
const theme_1 = __importDefault(require("./theme"));
|
|
43
48
|
const Input = (_a) => {
|
|
44
49
|
var { name, value, label } = _a, props = __rest(_a, ["name", "value", "label"]);
|
|
50
|
+
const { classes } = (0, theme_1.default)();
|
|
45
51
|
const { register, setValue, control } = (0, react_hook_form_1.useFormContext)() || {};
|
|
46
52
|
// Value
|
|
47
53
|
(0, react_1.useEffect)(() => {
|
|
48
54
|
if (value)
|
|
49
55
|
control && setValue(name, value);
|
|
50
|
-
}, [value]);
|
|
56
|
+
}, [control, name, setValue, value]);
|
|
51
57
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
52
|
-
react_1.default.createElement(material_1.
|
|
58
|
+
react_1.default.createElement(material_1.Box, { className: classes.root },
|
|
59
|
+
react_1.default.createElement(material_1.TextField, Object.assign({}, (control && register(name)), { defaultValue: value, label: label ? label : name }, props)))));
|
|
53
60
|
};
|
|
54
61
|
exports.Input = Input;
|
|
55
62
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../resources/Components/Input/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../resources/Components/Input/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6C;AAE7C,kBAAkB;AAClB,qDAAiD;AAEjD,cAAc;AACd,4CAA+C;AAE/C,SAAS;AACT,oDAAgC;AASzB,MAAM,KAAK,GAAe,CAAC,EAAgC,EAAE,EAAE;QAApC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,OAAY,EAAP,KAAK,cAA9B,0BAAgC,CAAF;IAC5D,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,eAAS,GAAE,CAAC;IAChC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAA,gCAAc,GAAE,IAAI,EAAE,CAAC;IAE/D,QAAQ;IACR,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,KAAK;YAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAErC,OAAO,CACH,8BAAC,eAAK,CAAC,QAAQ;QACX,8BAAC,cAAG,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;YACxB,8BAAC,oBAAS,oBAAK,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAM,KAAK,EAAI,CACzG,CACO,CACpB,CAAC;AACN,CAAC,CAAC;AAhBW,QAAA,KAAK,SAgBhB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare const useStyles: (params: void, muiStyleOverridesParams?: {
|
|
2
|
+
props: Record<string, unknown>;
|
|
3
|
+
ownerState?: Record<string, unknown> | undefined;
|
|
4
|
+
} | undefined) => {
|
|
5
|
+
classes: Record<"root", string>;
|
|
6
|
+
theme: import("@mui/material").Theme;
|
|
7
|
+
css: import("tss-react/types").Css;
|
|
8
|
+
cx: import("tss-react/types").Cx;
|
|
9
|
+
};
|
|
10
|
+
export default useStyles;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const mui_1 = require("tss-react/mui");
|
|
4
|
+
const useStyles = (0, mui_1.makeStyles)()((theme) => {
|
|
5
|
+
return {
|
|
6
|
+
root: {
|
|
7
|
+
margin: 0,
|
|
8
|
+
width: "100%",
|
|
9
|
+
"& input": {
|
|
10
|
+
padding: "12px",
|
|
11
|
+
fontSize: "14px"
|
|
12
|
+
},
|
|
13
|
+
"& fieldset": {
|
|
14
|
+
borderRadius: "unset"
|
|
15
|
+
},
|
|
16
|
+
"& label": {
|
|
17
|
+
top: "-5px",
|
|
18
|
+
fontSize: "14px",
|
|
19
|
+
textTransform: "capitalize",
|
|
20
|
+
"&.MuiInputLabel-shrink": {
|
|
21
|
+
top: "2px"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"& legend": {
|
|
25
|
+
fontSize: "10px"
|
|
26
|
+
},
|
|
27
|
+
"& .MuiAutocomplete-root": {
|
|
28
|
+
"& .MuiInputBase-root, & input": {
|
|
29
|
+
cursor: "pointer",
|
|
30
|
+
backgroundColor: theme.palette.grey[100]
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
exports.default = useStyles;
|
|
37
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../resources/Components/Input/theme.tsx"],"names":[],"mappings":";;AAAA,uCAA2C;AAE3C,MAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO;QACH,IAAI,EAAE;YACF,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,MAAM;YACb,SAAS,EAAE;gBACP,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,MAAM;aACnB;YACD,YAAY,EAAE;gBACV,YAAY,EAAE,OAAO;aACxB;YACD,SAAS,EAAE;gBACP,GAAG,EAAE,MAAM;gBACX,QAAQ,EAAE,MAAM;gBAChB,aAAa,EAAE,YAAY;gBAC3B,wBAAwB,EAAE;oBACtB,GAAG,EAAE,KAAK;iBACb;aACJ;YACD,UAAU,EAAE;gBACR,QAAQ,EAAE,MAAM;aACnB;YACD,yBAAyB,EAAE;gBACvB,+BAA+B,EAAE;oBAC7B,MAAM,EAAE,SAAS;oBACjB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;iBAC3C;aACJ;SACJ;KACJ,CAAA;AACL,CAAC,CAAC,CAAC;AAEH,kBAAe,SAAS,CAAC"}
|
|
@@ -13,16 +13,20 @@ import React, { useEffect } from "react";
|
|
|
13
13
|
// React Hook Form
|
|
14
14
|
import { useFormContext } from "react-hook-form";
|
|
15
15
|
// Material UI
|
|
16
|
-
import { TextField } from "@mui/material";
|
|
16
|
+
import { Box, TextField } from "@mui/material";
|
|
17
|
+
// Styles
|
|
18
|
+
import useStyles from "./theme";
|
|
17
19
|
export const Input = (_a) => {
|
|
18
20
|
var { name, value, label } = _a, props = __rest(_a, ["name", "value", "label"]);
|
|
21
|
+
const { classes } = useStyles();
|
|
19
22
|
const { register, setValue, control } = useFormContext() || {};
|
|
20
23
|
// Value
|
|
21
24
|
useEffect(() => {
|
|
22
25
|
if (value)
|
|
23
26
|
control && setValue(name, value);
|
|
24
|
-
}, [value]);
|
|
27
|
+
}, [control, name, setValue, value]);
|
|
25
28
|
return (React.createElement(React.Fragment, null,
|
|
26
|
-
React.createElement(
|
|
29
|
+
React.createElement(Box, { className: classes.root },
|
|
30
|
+
React.createElement(TextField, Object.assign({}, (control && register(name)), { defaultValue: value, label: label ? label : name }, props)))));
|
|
27
31
|
};
|
|
28
32
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../resources/Components/Input/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,kBAAkB;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,cAAc;AACd,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../resources/Components/Input/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,kBAAkB;AAClB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,cAAc;AACd,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,SAAS;AACT,OAAO,SAAS,MAAM,SAAS,CAAC;AAShC,MAAM,CAAC,MAAM,KAAK,GAAe,CAAC,EAAgC,EAAE,EAAE;QAApC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,OAAY,EAAP,KAAK,cAA9B,0BAAgC,CAAF;IAC5D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,IAAI,EAAE,CAAC;IAE/D,QAAQ;IACR,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,KAAK;YAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAErC,OAAO,CACH,oBAAC,KAAK,CAAC,QAAQ;QACX,oBAAC,GAAG,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;YACxB,oBAAC,SAAS,oBAAK,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAM,KAAK,EAAI,CACzG,CACO,CACpB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare const useStyles: (params: void, muiStyleOverridesParams?: {
|
|
2
|
+
props: Record<string, unknown>;
|
|
3
|
+
ownerState?: Record<string, unknown> | undefined;
|
|
4
|
+
} | undefined) => {
|
|
5
|
+
classes: Record<"root", string>;
|
|
6
|
+
theme: import("@mui/material").Theme;
|
|
7
|
+
css: import("tss-react/types").Css;
|
|
8
|
+
cx: import("tss-react/types").Cx;
|
|
9
|
+
};
|
|
10
|
+
export default useStyles;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { makeStyles } from "tss-react/mui";
|
|
2
|
+
const useStyles = makeStyles()((theme) => {
|
|
3
|
+
return {
|
|
4
|
+
root: {
|
|
5
|
+
margin: 0,
|
|
6
|
+
width: "100%",
|
|
7
|
+
"& input": {
|
|
8
|
+
padding: "12px",
|
|
9
|
+
fontSize: "14px"
|
|
10
|
+
},
|
|
11
|
+
"& fieldset": {
|
|
12
|
+
borderRadius: "unset"
|
|
13
|
+
},
|
|
14
|
+
"& label": {
|
|
15
|
+
top: "-5px",
|
|
16
|
+
fontSize: "14px",
|
|
17
|
+
textTransform: "capitalize",
|
|
18
|
+
"&.MuiInputLabel-shrink": {
|
|
19
|
+
top: "2px"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"& legend": {
|
|
23
|
+
fontSize: "10px"
|
|
24
|
+
},
|
|
25
|
+
"& .MuiAutocomplete-root": {
|
|
26
|
+
"& .MuiInputBase-root, & input": {
|
|
27
|
+
cursor: "pointer",
|
|
28
|
+
backgroundColor: theme.palette.grey[100]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
export default useStyles;
|
|
35
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../resources/Components/Input/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;IACrC,OAAO;QACH,IAAI,EAAE;YACF,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,MAAM;YACb,SAAS,EAAE;gBACP,OAAO,EAAE,MAAM;gBACf,QAAQ,EAAE,MAAM;aACnB;YACD,YAAY,EAAE;gBACV,YAAY,EAAE,OAAO;aACxB;YACD,SAAS,EAAE;gBACP,GAAG,EAAE,MAAM;gBACX,QAAQ,EAAE,MAAM;gBAChB,aAAa,EAAE,YAAY;gBAC3B,wBAAwB,EAAE;oBACtB,GAAG,EAAE,KAAK;iBACb;aACJ;YACD,UAAU,EAAE;gBACR,QAAQ,EAAE,MAAM;aACnB;YACD,yBAAyB,EAAE;gBACvB,+BAA+B,EAAE;oBAC7B,MAAM,EAAE,SAAS;oBACjB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;iBAC3C;aACJ;SACJ;KACJ,CAAA;AACL,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}
|