@dktunited-techoff/techoff-suite-ui 1.6.6 → 1.6.8

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.d.ts +1 -1
  2. package/esm/components/TsInput/TsInput/TsInput.js +4 -18
  3. package/esm/components/TsInput/TsInput/TsInput.js.map +1 -1
  4. package/esm/components/TsInput/TsInput/TsInput.tsx +4 -19
  5. package/esm/components/TsInput/TsInput/TsInput.types.d.ts +1 -1
  6. package/esm/components/TsInput/TsInput/TsInput.types.tsx +1 -1
  7. package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
  8. package/lib/components/TsInput/TsInput/TsInput.d.ts +1 -1
  9. package/lib/components/TsInput/TsInput/TsInput.js +4 -18
  10. package/lib/components/TsInput/TsInput/TsInput.js.map +1 -1
  11. package/lib/components/TsInput/TsInput/TsInput.tsx +4 -19
  12. package/lib/components/TsInput/TsInput/TsInput.types.d.ts +1 -1
  13. package/lib/components/TsInput/TsInput/TsInput.types.tsx +1 -1
  14. package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
  15. package/package.json +1 -1
  16. package/src/components/TsInput/TsInput/TsInput.tsx +4 -19
  17. package/src/components/TsInput/TsInput/TsInput.types.tsx +1 -1
  18. package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
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,KAAK,IAAI,KAAK,KAAK,EAAE,IAAI,CACxB,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/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -6,6 +6,10 @@ import { icons } from '../../../TsIcon/icons';
6
6
  <Meta title="Components/Input" />
7
7
 
8
8
  export const inputArgTypes = {
9
+ error: {
10
+ control: 'text',
11
+ description: 'Error of the input.',
12
+ },
9
13
  icon: {
10
14
  control: 'select',
11
15
  options: Object.keys(icons),
@@ -48,6 +52,7 @@ Input allows the user to enter content and data when the expected user input is
48
52
  <Story
49
53
  name="Overview"
50
54
  args={{
55
+ error: '',
51
56
  icon: '',
52
57
  label: 'Label',
53
58
  placeholder: 'Enter some text',
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,KAAK,IAAI,KAAK,KAAK,EAAE,IAAI,CACxB,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/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -6,6 +6,10 @@ import { icons } from '../../../TsIcon/icons';
6
6
  <Meta title="Components/Input" />
7
7
 
8
8
  export const inputArgTypes = {
9
+ error: {
10
+ control: 'text',
11
+ description: 'Error of the input.',
12
+ },
9
13
  icon: {
10
14
  control: 'select',
11
15
  options: Object.keys(icons),
@@ -48,6 +52,7 @@ Input allows the user to enter content and data when the expected user input is
48
52
  <Story
49
53
  name="Overview"
50
54
  args={{
55
+ error: '',
51
56
  icon: '',
52
57
  label: 'Label',
53
58
  placeholder: 'Enter some text',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.6.6",
3
+ "version": "1.6.8",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
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'>;
package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -6,6 +6,10 @@ import { icons } from '../../../TsIcon/icons';
6
6
  <Meta title="Components/Input" />
7
7
 
8
8
  export const inputArgTypes = {
9
+ error: {
10
+ control: 'text',
11
+ description: 'Error of the input.',
12
+ },
9
13
  icon: {
10
14
  control: 'select',
11
15
  options: Object.keys(icons),
@@ -48,6 +52,7 @@ Input allows the user to enter content and data when the expected user input is
48
52
  <Story
49
53
  name="Overview"
50
54
  args={{
55
+ error: '',
51
56
  icon: '',
52
57
  label: 'Label',
53
58
  placeholder: 'Enter some text',