@dktunited-techoff/techoff-suite-ui 1.6.5 → 1.6.7

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.
Files changed (18) hide show
  1. package/esm/components/TsInput/TsInput/TsInput.css +1 -0
  2. package/esm/components/TsInput/TsInput/TsInput.d.ts +1 -1
  3. package/esm/components/TsInput/TsInput/TsInput.js +4 -18
  4. package/esm/components/TsInput/TsInput/TsInput.js.map +1 -1
  5. package/esm/components/TsInput/TsInput/TsInput.tsx +4 -19
  6. package/esm/components/TsInput/TsInput/TsInput.types.d.ts +1 -1
  7. package/esm/components/TsInput/TsInput/TsInput.types.tsx +1 -1
  8. package/lib/components/TsInput/TsInput/TsInput.css +1 -0
  9. package/lib/components/TsInput/TsInput/TsInput.d.ts +1 -1
  10. package/lib/components/TsInput/TsInput/TsInput.js +4 -18
  11. package/lib/components/TsInput/TsInput/TsInput.js.map +1 -1
  12. package/lib/components/TsInput/TsInput/TsInput.tsx +4 -19
  13. package/lib/components/TsInput/TsInput/TsInput.types.d.ts +1 -1
  14. package/lib/components/TsInput/TsInput/TsInput.types.tsx +1 -1
  15. package/package.json +1 -1
  16. package/src/components/TsInput/TsInput/TsInput.css +1 -0
  17. package/src/components/TsInput/TsInput/TsInput.tsx +4 -19
  18. package/src/components/TsInput/TsInput/TsInput.types.tsx +1 -1
package/esm/components/TsInput/TsInput/TsInput.css CHANGED
@@ -24,6 +24,7 @@
24
24
  }
25
25
  .ts-input-error--label {
26
26
  font-size: 12px;
27
+ font-weight: 500;
27
28
  }
28
29
  input::placeholder {
29
30
  color: #7a7a7a;
package/esm/components/TsInput/TsInput/TsInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsInputProps } from './TsInput.types';
3
3
  import './TsInput.css';
4
- export declare const TsInput: ({ icon, label, value, onChange, onValidate, ...props }: TsInputProps) => React.JSX.Element;
4
+ export declare const TsInput: ({ error, icon, label, value, onChange, ...props }: TsInputProps) => React.JSX.Element;
package/esm/components/TsInput/TsInput/TsInput.js CHANGED
@@ -1,30 +1,16 @@
1
1
  import * as React from 'react';
2
- import { useState } from 'react';
3
2
  import { TsIcon } from '../../TsIcon/TsIcon';
4
3
  import './TsInput.css';
5
- export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }) => {
6
- const [error, setError] = useState();
7
- // ########
8
- // Handlers
9
- const handleBlur = (e) => {
10
- props.onBlur?.(e);
11
- if (onValidate) {
12
- const validateResult = onValidate();
13
- if (validateResult instanceof Promise)
14
- validateResult.then(setError);
15
- else
16
- setError(validateResult);
17
- }
18
- };
4
+ export const TsInput = ({ error, icon, label, value, onChange, ...props }) => {
19
5
  // #########
20
6
  // Rendering
21
7
  return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
22
8
  label && React.createElement("div", { className: "ts-input-label" }, label),
23
- React.createElement("div", { className: `ts-input-container ${error ? 'ts-input-container--error' : ''}` },
24
- React.createElement("input", { type: "text", value: value, onBlur: handleBlur, onChange: e => onChange(e.target.value), ...props }),
9
+ React.createElement("div", { className: `ts-input-container ${error || error !== '' ? 'ts-input-container--error' : ''}` },
10
+ React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
25
11
  icon && (React.createElement("div", { className: "ts-input-icon" },
26
12
  React.createElement(TsIcon, { name: icon, size: "16" })))),
27
- error && (React.createElement("div", { className: "ts-input-error" },
13
+ (error || error !== '') && (React.createElement("div", { className: "ts-input-error" },
28
14
  React.createElement("div", { className: "ts-input-error--icon" },
29
15
  React.createElement(TsIcon, { name: "alert-circle", size: "16" })),
30
16
  React.createElement("div", { className: "ts-input-error--label" }, error)))));
package/esm/components/TsInput/TsInput/TsInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7C,WAAW;IACX,WAAW;IACX,MAAM,UAAU,GAAG,CAAC,CAA+B,EAAE,EAAE;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,UAAU,EAAE;YACd,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;YACpC,IAAI,cAAc,YAAY,OAAO;gBAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;gBAChE,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9E,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YAC1G,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACzF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9F,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,IAAI,CAC1B,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -1,31 +1,16 @@
1
1
  import * as React from 'react';
2
- import { FocusEvent, useState } from 'react';
3
2
  import { TsIcon } from '../../TsIcon/TsIcon';
4
3
  import { TsInputProps } from './TsInput.types';
5
4
  import './TsInput.css';
6
5
 
7
- export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }: TsInputProps) => {
8
- const [error, setError] = useState<string>();
9
-
10
- // ########
11
- // Handlers
12
- const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
13
- props.onBlur?.(e);
14
-
15
- if (onValidate) {
16
- const validateResult = onValidate();
17
- if (validateResult instanceof Promise) validateResult.then(setError);
18
- else setError(validateResult);
19
- }
20
- };
21
-
6
+ export const TsInput = ({ error, icon, label, value, onChange, ...props }: TsInputProps) => {
22
7
  // #########
23
8
  // Rendering
24
9
  return (
25
10
  <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
26
11
  {label && <div className="ts-input-label">{label}</div>}
27
- <div className={`ts-input-container ${error ? 'ts-input-container--error' : ''}`}>
28
- <input type="text" value={value} onBlur={handleBlur} onChange={e => onChange(e.target.value)} {...props} />
12
+ <div className={`ts-input-container ${error || error !== '' ? 'ts-input-container--error' : ''}`}>
13
+ <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
29
14
  {icon && (
30
15
  <div className="ts-input-icon">
31
16
  <TsIcon name={icon} size="16" />
@@ -33,7 +18,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
33
18
  )}
34
19
  </div>
35
20
 
36
- {error && (
21
+ {(error || error !== '') && (
37
22
  <div className="ts-input-error">
38
23
  <div className="ts-input-error--icon">
39
24
  <TsIcon name="alert-circle" size="16" />
package/esm/components/TsInput/TsInput/TsInput.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  export type TsInputProps = {
3
+ error?: string;
3
4
  icon?: string;
4
5
  label?: string;
5
6
  onChange: (value: string) => void;
6
- onValidate?: () => Promise<string | undefined> | string | undefined;
7
7
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/esm/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
3
  export type TsInputProps = {
4
+ error?: string;
4
5
  icon?: string;
5
6
  label?: string;
6
7
  onChange: (value: string) => void;
7
- onValidate?: () => Promise<string | undefined> | string | undefined;
8
8
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/lib/components/TsInput/TsInput/TsInput.css CHANGED
@@ -24,6 +24,7 @@
24
24
  }
25
25
  .ts-input-error--label {
26
26
  font-size: 12px;
27
+ font-weight: 500;
27
28
  }
28
29
  input::placeholder {
29
30
  color: #7a7a7a;
package/lib/components/TsInput/TsInput/TsInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsInputProps } from './TsInput.types';
3
3
  import './TsInput.css';
4
- export declare const TsInput: ({ icon, label, value, onChange, onValidate, ...props }: TsInputProps) => React.JSX.Element;
4
+ export declare const TsInput: ({ error, icon, label, value, onChange, ...props }: TsInputProps) => React.JSX.Element;
package/lib/components/TsInput/TsInput/TsInput.js CHANGED
@@ -2,32 +2,18 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TsInput = void 0;
4
4
  const React = require("react");
5
- const react_1 = require("react");
6
5
  const TsIcon_1 = require("../../TsIcon/TsIcon");
7
6
  require("./TsInput.css");
8
- const TsInput = ({ icon, label, value, onChange, onValidate, ...props }) => {
9
- const [error, setError] = (0, react_1.useState)();
10
- // ########
11
- // Handlers
12
- const handleBlur = (e) => {
13
- props.onBlur?.(e);
14
- if (onValidate) {
15
- const validateResult = onValidate();
16
- if (validateResult instanceof Promise)
17
- validateResult.then(setError);
18
- else
19
- setError(validateResult);
20
- }
21
- };
7
+ const TsInput = ({ error, icon, label, value, onChange, ...props }) => {
22
8
  // #########
23
9
  // Rendering
24
10
  return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
25
11
  label && React.createElement("div", { className: "ts-input-label" }, label),
26
- React.createElement("div", { className: `ts-input-container ${error ? 'ts-input-container--error' : ''}` },
27
- React.createElement("input", { type: "text", value: value, onBlur: handleBlur, onChange: e => onChange(e.target.value), ...props }),
12
+ React.createElement("div", { className: `ts-input-container ${error || error !== '' ? 'ts-input-container--error' : ''}` },
13
+ React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
28
14
  icon && (React.createElement("div", { className: "ts-input-icon" },
29
15
  React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })))),
30
- error && (React.createElement("div", { className: "ts-input-error" },
16
+ (error || error !== '') && (React.createElement("div", { className: "ts-input-error" },
31
17
  React.createElement("div", { className: "ts-input-error--icon" },
32
18
  React.createElement(TsIcon_1.TsIcon, { name: "alert-circle", size: "16" })),
33
19
  React.createElement("div", { className: "ts-input-error--label" }, error)))));
package/lib/components/TsInput/TsInput/TsInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAA6C;AAC7C,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAU,CAAC;IAE7C,WAAW;IACX,WAAW;IACX,MAAM,UAAU,GAAG,CAAC,CAA+B,EAAE,EAAE;QACrD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,UAAU,EAAE;YACd,MAAM,cAAc,GAAG,UAAU,EAAE,CAAC;YACpC,IAAI,cAAc,YAAY,OAAO;gBAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;gBAChE,QAAQ,CAAC,cAAc,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9E,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YAC1G,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,eAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,OAAO,WAuClB"}
1
+ {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACzF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9F,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,IAAI,CAC1B,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,eAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,OAAO,WAyBlB"}
package/lib/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -1,31 +1,16 @@
1
1
  import * as React from 'react';
2
- import { FocusEvent, useState } from 'react';
3
2
  import { TsIcon } from '../../TsIcon/TsIcon';
4
3
  import { TsInputProps } from './TsInput.types';
5
4
  import './TsInput.css';
6
5
 
7
- export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }: TsInputProps) => {
8
- const [error, setError] = useState<string>();
9
-
10
- // ########
11
- // Handlers
12
- const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
13
- props.onBlur?.(e);
14
-
15
- if (onValidate) {
16
- const validateResult = onValidate();
17
- if (validateResult instanceof Promise) validateResult.then(setError);
18
- else setError(validateResult);
19
- }
20
- };
21
-
6
+ export const TsInput = ({ error, icon, label, value, onChange, ...props }: TsInputProps) => {
22
7
  // #########
23
8
  // Rendering
24
9
  return (
25
10
  <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
26
11
  {label && <div className="ts-input-label">{label}</div>}
27
- <div className={`ts-input-container ${error ? 'ts-input-container--error' : ''}`}>
28
- <input type="text" value={value} onBlur={handleBlur} onChange={e => onChange(e.target.value)} {...props} />
12
+ <div className={`ts-input-container ${error || error !== '' ? 'ts-input-container--error' : ''}`}>
13
+ <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
29
14
  {icon && (
30
15
  <div className="ts-input-icon">
31
16
  <TsIcon name={icon} size="16" />
@@ -33,7 +18,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
33
18
  )}
34
19
  </div>
35
20
 
36
- {error && (
21
+ {(error || error !== '') && (
37
22
  <div className="ts-input-error">
38
23
  <div className="ts-input-error--icon">
39
24
  <TsIcon name="alert-circle" size="16" />
package/lib/components/TsInput/TsInput/TsInput.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  export type TsInputProps = {
3
+ error?: string;
3
4
  icon?: string;
4
5
  label?: string;
5
6
  onChange: (value: string) => void;
6
- onValidate?: () => Promise<string | undefined> | string | undefined;
7
7
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/lib/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
3
  export type TsInputProps = {
4
+ error?: string;
4
5
  icon?: string;
5
6
  label?: string;
6
7
  onChange: (value: string) => void;
7
- onValidate?: () => Promise<string | undefined> | string | undefined;
8
8
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.6.5",
3
+ "version": "1.6.7",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsInput/TsInput/TsInput.css CHANGED
@@ -24,6 +24,7 @@
24
24
  }
25
25
  .ts-input-error--label {
26
26
  font-size: 12px;
27
+ font-weight: 500;
27
28
  }
28
29
  input::placeholder {
29
30
  color: #7a7a7a;
package/src/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -1,31 +1,16 @@
1
1
  import * as React from 'react';
2
- import { FocusEvent, useState } from 'react';
3
2
  import { TsIcon } from '../../TsIcon/TsIcon';
4
3
  import { TsInputProps } from './TsInput.types';
5
4
  import './TsInput.css';
6
5
 
7
- export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }: TsInputProps) => {
8
- const [error, setError] = useState<string>();
9
-
10
- // ########
11
- // Handlers
12
- const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
13
- props.onBlur?.(e);
14
-
15
- if (onValidate) {
16
- const validateResult = onValidate();
17
- if (validateResult instanceof Promise) validateResult.then(setError);
18
- else setError(validateResult);
19
- }
20
- };
21
-
6
+ export const TsInput = ({ error, icon, label, value, onChange, ...props }: TsInputProps) => {
22
7
  // #########
23
8
  // Rendering
24
9
  return (
25
10
  <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
26
11
  {label && <div className="ts-input-label">{label}</div>}
27
- <div className={`ts-input-container ${error ? 'ts-input-container--error' : ''}`}>
28
- <input type="text" value={value} onBlur={handleBlur} onChange={e => onChange(e.target.value)} {...props} />
12
+ <div className={`ts-input-container ${error || error !== '' ? 'ts-input-container--error' : ''}`}>
13
+ <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
29
14
  {icon && (
30
15
  <div className="ts-input-icon">
31
16
  <TsIcon name={icon} size="16" />
@@ -33,7 +18,7 @@ export const TsInput = ({ icon, label, value, onChange, onValidate, ...props }:
33
18
  )}
34
19
  </div>
35
20
 
36
- {error && (
21
+ {(error || error !== '') && (
37
22
  <div className="ts-input-error">
38
23
  <div className="ts-input-error--icon">
39
24
  <TsIcon name="alert-circle" size="16" />
package/src/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
3
  export type TsInputProps = {
4
+ error?: string;
4
5
  icon?: string;
5
6
  label?: string;
6
7
  onChange: (value: string) => void;
7
- onValidate?: () => Promise<string | undefined> | string | undefined;
8
8
  } & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;