armtek-uikit-react 1.0.100 → 1.0.102

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 (5) hide show
  1. package/assets/Loader.scss +40 -33
  2. package/package.json +1 -1
  3. package/ui/Form/Select/Select.js +23 -5
  4. package/ui/Loader/Loader.d.ts +2 -1
  5. package/ui/Loader/Loader.js +5 -102
package/assets/Loader.scss CHANGED
@@ -1,37 +1,44 @@
1
1
  @import "variables";
2
2
 
3
+ @mixin bg ($color:var(--color-gray-800), $size: 2px) {
4
+ background:
5
+ radial-gradient(farthest-side,#ffa516 94%,#0000) top/$size $size no-repeat,
6
+ conic-gradient(#0000 30%, $color);
7
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - $size),#000 0);
8
+ }
9
+
3
10
  .loader{
4
- -webkit-animation: rotating 2s linear infinite;
5
- -moz-animation: rotating 2s linear infinite;
6
- -ms-animation: rotating 2s linear infinite;
7
- -o-animation: rotating 2s linear infinite;
8
- animation: rotating 2s linear infinite;
9
- }
10
- @-webkit-keyframes rotating /* Safari and Chrome */ {
11
- from {
12
- -webkit-transform: rotate(0deg);
13
- -o-transform: rotate(0deg);
14
- transform: rotate(0deg);
15
- }
16
- to {
17
- -webkit-transform: rotate(360deg);
18
- -o-transform: rotate(360deg);
19
- transform: rotate(360deg);
20
- }
21
- }
22
- @keyframes rotating {
23
- from {
24
- -ms-transform: rotate(0deg);
25
- -moz-transform: rotate(0deg);
26
- -webkit-transform: rotate(0deg);
27
- -o-transform: rotate(0deg);
28
- transform: rotate(0deg);
29
- }
30
- to {
31
- -ms-transform: rotate(360deg);
32
- -moz-transform: rotate(360deg);
33
- -webkit-transform: rotate(360deg);
34
- -o-transform: rotate(360deg);
35
- transform: rotate(360deg);
36
- }
11
+ width: 20px;
12
+ height: 20px;
13
+ aspect-ratio: 1;
14
+ border-radius: 50%;
15
+ @include bg();
16
+ animation: s3 1s infinite linear;
17
+ }
18
+ .loader_color_primary{
19
+ @include bg(var(--color-primary));
20
+ }
21
+ .loader_color_secondary{
22
+ @include bg(var(--color-secondary));
23
+ }
24
+ .loader_size_small{
25
+ width: 20px;
26
+ height: 20px;
27
+ }
28
+ .loader_size_medium{
29
+ width: 23px;
30
+ height: 23px;
31
+ }
32
+ .loader_size_large{
33
+ width: 25px;
34
+ height: 25px;
35
+ }
36
+ .loader_size_extraLarge{
37
+ width: 30px;
38
+ height: 30px;
39
+ background-position: top/6px 6px;
40
+ -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 6px),#000 0);
41
+ }
42
+ @keyframes s3{
43
+ 100%{transform: rotate(1turn)}
37
44
  }
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"armtek-uikit-react","version":"1.0.100","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
1
+ {"name":"armtek-uikit-react","version":"1.0.102","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
package/ui/Form/Select/Select.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
 
3
3
  import TextField from "../TextField/TextField";
4
- import { forwardRef, useState } from 'react';
4
+ import { forwardRef, useRef, useState } from 'react';
5
5
  import clsx from 'clsx';
6
6
  import ListItem from "../../List/ListItem";
7
7
  import useClickOutside from "../../../lib/hooks/useClickOutside";
@@ -46,12 +46,14 @@ function Select(props) {
46
46
  let [selected, setSelected] = useState(defaultValue || (multiple ? [] : ''));
47
47
  let [focused, setFocused] = useState(false);
48
48
  let [q, setQ] = useState('');
49
- const [anchorEl, setAnchorEl] = useState(null);
49
+ // const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null)
50
+ const anchorEl = useRef(null);
50
51
  const inlineOptRef = useClickOutside(handleClose);
51
52
  const handleOpen = e => {
52
53
  if (!inputProps.disabled) {
53
54
  setActive(true);
54
- if (e.target instanceof HTMLDivElement) setAnchorEl(e.currentTarget);
55
+ // if( e.target instanceof HTMLDivElement )
56
+ // setAnchorEl(e.currentTarget)
55
57
  }
56
58
  };
57
59
  const handleSelect = (e, option) => {
@@ -128,6 +130,7 @@ function Select(props) {
128
130
  children: [/*#__PURE__*/_jsx("div", {
129
131
  className: css.select__input_wrapper,
130
132
  onClick: handleOpen,
133
+ ref: anchorEl,
131
134
  children: /*#__PURE__*/_jsx(TextField, {
132
135
  ...inputProps,
133
136
  onChange: handleSearch,
@@ -147,9 +150,9 @@ function Select(props) {
147
150
  disabled: inputProps.disabled,
148
151
  onDelete: handleSelect
149
152
  })]
150
- }), realActive && anchorEl && (!inline ? /*#__PURE__*/_jsx(Popover, {
153
+ }), realActive && (!inline && anchorEl.current ? /*#__PURE__*/_jsx(Popover, {
151
154
  matchWidth: true,
152
- anchorEl: anchorEl,
155
+ anchorEl: anchorEl.current,
153
156
  open: realActive,
154
157
  onClose: handleClose,
155
158
  placement: 'bottom-start',
@@ -224,4 +227,19 @@ const SelectOptions = /*#__PURE__*/forwardRef((props, ref) => {
224
227
  })
225
228
  });
226
229
  });
230
+
231
+ // export const SelectTest = (props: SelectProps) => {
232
+ // return <Select inline={true} listStyle={'checkbox'} defaultValue={['1', '12312']} multiple={true} label={'TEST '} disabled={true} open={true} options={[{
233
+ // text: '1'
234
+ // },{
235
+ // text: 'aasdasdasdasd'
236
+ // },{
237
+ // text: '12312'
238
+ // },{
239
+ // text: 'gadadsasd'
240
+ // },{
241
+ // text: '123123123'
242
+ // },]} />
243
+ // }
244
+
227
245
  export default Select;
package/ui/Loader/Loader.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- import { SizeType } from '../../types/theme';
1
+ import { ColorType, SizeType } from '../../types/theme';
2
2
  import { HTMLAttributes } from 'react';
3
3
  export type LoaderProps = {
4
4
  size?: SizeType;
5
+ color?: ColorType;
5
6
  } & HTMLAttributes<HTMLDivElement>;
6
7
  declare const Loader: (props: LoaderProps) => import("react/jsx-runtime").JSX.Element;
7
8
  export default Loader;
package/ui/Loader/Loader.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import clsx from 'clsx';
2
2
  import css from "./Loader.module.scss";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
- import { jsxs as _jsxs } from "react/jsx-runtime";
5
4
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
5
  const CssClasses = ['loader'];
7
6
 
@@ -10,6 +9,7 @@ const CssClasses = ['loader'];
10
9
  const Loader = props => {
11
10
  let {
12
11
  size,
12
+ color = 'neutral',
13
13
  className,
14
14
  ...divProps
15
15
  } = props;
@@ -18,107 +18,10 @@ const Loader = props => {
18
18
  return /*#__PURE__*/_jsx(_Fragment, {
19
19
  children: /*#__PURE__*/_jsx("div", {
20
20
  ...divProps,
21
- className: clsx(css.loader, 'material_icon', className),
22
- children: /*#__PURE__*/_jsxs("svg", {
23
- xmlns: "http://www.w3.org/2000/svg",
24
- width: width,
25
- height: height,
26
- viewBox: `0 0 ${width} ${height}`,
27
- fill: "none",
28
- children: [/*#__PURE__*/_jsx("circle", {
29
- opacity: "0.3",
30
- cx: "12.0003",
31
- cy: "12",
32
- r: "8.47059",
33
- stroke: "#DFE2E6",
34
- strokeWidth: "1.41176"
35
- }), /*#__PURE__*/_jsx("g", {
36
- filter: "url(#filter0_f_1024_93554)",
37
- children: /*#__PURE__*/_jsx("path", {
38
- fillRule: "evenodd",
39
- clipRule: "evenodd",
40
- d: "M19.575 12.745C20.0016 8.47797 17.0747 4.67221 12.8076 4.24564L12.9481 2.84088C17.9909 3.34501 21.8325 7.87742 21.3283 12.9203C21.2815 13.3888 20.8734 13.7602 20.364 13.7093C19.9468 13.6676 19.5194 13.3009 19.575 12.745Z",
41
- fill: "url(#paint0_radial_1024_93554)"
42
- })
43
- }), /*#__PURE__*/_jsx("path", {
44
- fillRule: "evenodd",
45
- clipRule: "evenodd",
46
- d: "M12.0006 4.23529C7.71225 4.23529 4.23588 7.71167 4.23588 12H2.82411C2.82411 6.93198 6.93256 2.82353 12.0006 2.82353V4.23529Z",
47
- fill: "url(#paint1_radial_1024_93554)"
48
- }), /*#__PURE__*/_jsx("path", {
49
- fillRule: "evenodd",
50
- clipRule: "evenodd",
51
- d: "M19.5805 12.0194C19.5805 7.73103 16.2889 4.23529 12.0006 4.23529V2.82353C17.0686 2.82353 21.3426 6.95133 21.3426 12.0194C21.3426 12.4901 20.9734 12.9004 20.4616 12.9004C20.0422 12.9004 19.5805 12.578 19.5805 12.0194Z",
52
- fill: "url(#paint2_radial_1024_93554)"
53
- }), /*#__PURE__*/_jsxs("defs", {
54
- children: [/*#__PURE__*/_jsxs("filter", {
55
- id: "filter0_f_1024_93554",
56
- x: "9.9841",
57
- y: "0.0173481",
58
- width: "14.2122",
59
- height: "16.5202",
60
- filterUnits: "userSpaceOnUse",
61
- colorInterpolationFilters: "sRGB",
62
- children: [/*#__PURE__*/_jsx("feFlood", {
63
- floodOpacity: "0",
64
- result: "BackgroundImageFix"
65
- }), /*#__PURE__*/_jsx("feBlend", {
66
- mode: "normal",
67
- in: "SourceGraphic",
68
- in2: "BackgroundImageFix",
69
- result: "shape"
70
- }), /*#__PURE__*/_jsx("feGaussianBlur", {
71
- stdDeviation: "1.41176",
72
- result: "effect1_foregroundBlur_1024_93554"
73
- })]
74
- }), /*#__PURE__*/_jsxs("radialGradient", {
75
- id: "paint0_radial_1024_93554",
76
- cx: "0",
77
- cy: "0",
78
- r: "1",
79
- gradientUnits: "userSpaceOnUse",
80
- gradientTransform: "translate(20.3817 13.7111) rotate(-126.186) scale(12.6961 11.7694)",
81
- children: [/*#__PURE__*/_jsx("stop", {
82
- offset: "0.395833",
83
- stopColor: "#98A4B0"
84
- }), /*#__PURE__*/_jsx("stop", {
85
- offset: "1",
86
- stopColor: "#98A4B0",
87
- stopOpacity: "0"
88
- })]
89
- }), /*#__PURE__*/_jsxs("radialGradient", {
90
- id: "paint1_radial_1024_93554",
91
- cx: "0",
92
- cy: "0",
93
- r: "1",
94
- gradientUnits: "userSpaceOnUse",
95
- gradientTransform: "translate(20.4793 12.9004) rotate(-145.457) scale(17.1491 15.8974)",
96
- children: [/*#__PURE__*/_jsx("stop", {
97
- offset: "0.395833",
98
- stopColor: "#98A4B0"
99
- }), /*#__PURE__*/_jsx("stop", {
100
- offset: "1",
101
- stopColor: "#98A4B0",
102
- stopOpacity: "0"
103
- })]
104
- }), /*#__PURE__*/_jsxs("radialGradient", {
105
- id: "paint2_radial_1024_93554",
106
- cx: "0",
107
- cy: "0",
108
- r: "1",
109
- gradientUnits: "userSpaceOnUse",
110
- gradientTransform: "translate(20.4793 12.9004) rotate(-145.457) scale(17.1491 15.8974)",
111
- children: [/*#__PURE__*/_jsx("stop", {
112
- offset: "0.395833",
113
- stopColor: "#98A4B0"
114
- }), /*#__PURE__*/_jsx("stop", {
115
- offset: "1",
116
- stopColor: "#98A4B0",
117
- stopOpacity: "0"
118
- })]
119
- })]
120
- })]
121
- })
21
+ className: clsx(css.loader, {
22
+ [css['loader_size_' + size]]: size,
23
+ [css['loader_color_' + color]]: color
24
+ }, 'material_icon', className)
122
25
  })
123
26
  });
124
27
  };