pixel-react 1.8.7 → 1.8.9

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 (178) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/1fb4472b34e4fe07.css +1 -0
  3. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  4. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  5. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  6. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  7. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  8. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  9. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  10. package/lib/components/AddButton/AddButton.d.ts +5 -0
  11. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  12. package/lib/components/AddButton/index.d.ts +1 -0
  13. package/lib/components/AddButton/types.d.ts +4 -0
  14. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  15. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  16. package/lib/components/AddVariables/index.d.ts +1 -0
  17. package/lib/components/AddVariables/types.d.ts +35 -0
  18. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  19. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  20. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  21. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  22. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  23. package/lib/components/Button/Button.stories.d.ts +13 -0
  24. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  25. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  26. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  27. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  28. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  29. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  30. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  31. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  32. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  33. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  34. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  35. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  36. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  37. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  38. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  39. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  40. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  41. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  42. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  43. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
  44. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  45. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  46. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  47. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  48. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  66. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  67. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  68. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  69. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  70. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  71. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  72. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  73. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  74. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  75. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  76. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  77. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  78. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  79. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  80. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  81. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  82. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  83. package/lib/components/ExcelFile/Types.d.ts +129 -0
  84. package/lib/components/ExcelFile/index.d.ts +1 -0
  85. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  86. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  87. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  88. package/lib/components/Form/Form.stories.d.ts +7 -0
  89. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  90. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  91. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  92. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  93. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  94. package/lib/components/Input/Input.stories.d.ts +9 -0
  95. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  96. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
  97. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  98. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  99. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  100. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  101. package/lib/components/MobileSkin/MobileSkin.d.ts +5 -0
  102. package/lib/components/MobileSkin/MobileSkinInterface.d.ts +13 -0
  103. package/lib/components/MobileSkin/index.d.ts +1 -0
  104. package/lib/components/MobileSkin/types.d.ts +32 -0
  105. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  106. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  107. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
  108. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  109. package/lib/components/NLPInput/type.d.ts +70 -0
  110. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  111. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  112. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  113. package/lib/components/Search/Search.d.ts +1 -1
  114. package/lib/components/Search/Search.stories.d.ts +6 -0
  115. package/lib/components/Search/types.d.ts +1 -0
  116. package/lib/components/Select/Select.stories.d.ts +14 -0
  117. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  118. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  119. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  120. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
  121. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
  122. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
  123. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
  124. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  125. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  126. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  127. package/lib/components/Table/Table.stories.d.ts +13 -0
  128. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  129. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  130. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  131. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  132. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  133. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  134. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  135. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  136. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  137. package/lib/index.d.ts +21 -2
  138. package/lib/index.esm.js +1519 -4596
  139. package/lib/index.esm.js.map +1 -1
  140. package/lib/index.js +1521 -4595
  141. package/lib/index.js.map +1 -1
  142. package/lib/tsconfig.tsbuildinfo +1 -1
  143. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  144. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  145. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  146. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  147. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  148. package/lib/utils/find/findAndInsert.d.ts +7 -0
  149. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  150. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  151. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  152. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  153. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  154. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  155. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  156. package/package.json +1 -1
  157. package/src/assets/icons/approval_pending.svg +8 -8
  158. package/src/assets/icons/configuration.svg +3 -3
  159. package/src/assets/icons/defects.svg +8 -8
  160. package/src/assets/icons/element.svg +4 -4
  161. package/src/assets/icons/project_element.svg +4 -4
  162. package/src/assets/icons/step_group.svg +10 -10
  163. package/src/assets/icons/variable.svg +3 -3
  164. package/src/assets/icons/web_service_icon.svg +3 -3
  165. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +7 -45
  166. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +5 -0
  167. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +76 -64
  168. package/src/components/Button/Button.scss +0 -1
  169. package/src/components/MobileSkin/MobileSkin.scss +67 -0
  170. package/src/components/MobileSkin/MobileSkin.stories.tsx +93 -0
  171. package/src/components/MobileSkin/MobileSkin.tsx +88 -0
  172. package/src/components/MobileSkin/MobileSkinInterface.ts +13 -0
  173. package/src/components/MobileSkin/index.ts +1 -0
  174. package/src/components/MobileSkin/types.ts +32 -0
  175. package/src/components/Search/Search.scss +8 -0
  176. package/src/components/Search/Search.tsx +17 -6
  177. package/src/components/Search/types.ts +1 -0
  178. package/src/index.ts +7 -0
@@ -7,6 +7,7 @@ import classNames from 'classnames';
7
7
  import { AllProjectsDropdownProps, optionsType } from './types';
8
8
  import Tooltip from '../Tooltip';
9
9
  import useClickOutside from '../../hooks/useClickOutside';
10
+ import Search from '../Search';
10
11
 
11
12
  const AllProjectsDropdown = ({
12
13
  onClick = () => {},
@@ -21,8 +22,8 @@ const AllProjectsDropdown = ({
21
22
  }: AllProjectsDropdownProps) => {
22
23
  const [showOptions, setShowOptions] = useState(false);
23
24
  const [selectedOptions, setSelectedOptions] = useState(selectedOption);
24
- const [search, setSearch] = useState(true);
25
25
  const optionsRef = useRef<HTMLDivElement>(null);
26
+ const [optionsList, setOptionSList] = useState<optionsType[]>(options);
26
27
 
27
28
  const handleShowOption = () => {
28
29
  setShowOptions(!showOptions);
@@ -34,17 +35,22 @@ const AllProjectsDropdown = ({
34
35
  setSelectedOptions(option);
35
36
  closeOptions();
36
37
  onClick(option);
38
+ setSearchValue('');
39
+ setOptionSList(options);
37
40
  };
38
41
 
39
- const handleInput = () => {
40
- setSearch(false);
41
- };
42
-
43
- const handleSearchEnter = () => {
44
- setSearch(false);
45
- };
46
- const handleSearchLeave = () => {
47
- setSearch(true);
42
+ const [searchValue, setSearchValue] = useState('');
43
+ const handleSearch = (query: string) => {
44
+ setSearchValue(query);
45
+ if (query !== '') {
46
+ let filterData = options.filter((option) =>
47
+ option.label.toLowerCase().includes(query.toLowerCase())
48
+ );
49
+ setOptionSList(filterData);
50
+ } else {
51
+ setSearchValue('');
52
+ setOptionSList(options);
53
+ }
48
54
  };
49
55
  useClickOutside(optionsRef, closeOptions);
50
56
  return (
@@ -82,66 +88,72 @@ const AllProjectsDropdown = ({
82
88
  </div>
83
89
  {showOptions && (
84
90
  <div className={classNames('ff-projects-dropdown')} ref={optionsRef}>
85
- <div
86
- className={classNames('ff-projects-search')}
87
- onMouseEnter={() => handleSearchEnter()}
88
- onMouseLeave={() => handleSearchLeave()}
89
- >
90
- {search && <Icon name="search" height={8} width={8} />}
91
- <input
92
- type="text"
93
- placeholder={`${search ? 'Search Project' : ''}`}
94
- onClick={() => handleInput()}
95
- />
96
- </div>
97
- <div
98
- onClick={() =>
99
- handleSelectOption({
100
- label: 'All Projects',
101
- value: 'All Projects',
102
- iconName: 'all_projects',
103
- })
104
- }
105
- className={classNames('ff-all-projects-options', {
106
- ['ff-selected-option']: selectedOption.label === 'All Projects',
107
- })}
108
- >
109
- <div className={classNames('ff-projects-icons')}>
110
- <Icon name={'all_projects'} height={12} width={12} />
111
- </div>
112
- <Typography
113
- as={'div'}
114
- lineHeight={'30px'}
115
- children={'All Projects'}
116
- />
91
+ <Search
92
+ onSearch={handleSearch}
93
+ value={searchValue}
94
+ isExpand={true}
95
+ onClose={() => {}}
96
+ onExpand={() => {}}
97
+ showClose={false}
98
+ />
99
+ <div className={classNames('option-card')}>
100
+ {optionsList.map(
101
+ (option, index) =>
102
+ index === 0 && (
103
+ <div
104
+ key={index}
105
+ onClick={() => handleSelectOption(option)}
106
+ className={classNames('ff-projects-options', {
107
+ ['ff-selected-option']:
108
+ selectedOption.label === option.label,
109
+ })}
110
+ >
111
+ <div className={classNames('ff-projects-icons')}>
112
+ <Icon name={option.iconName} height={12} width={12} />
113
+ </div>
114
+ <Typography
115
+ key={index}
116
+ as={'div'}
117
+ lineHeight={'30px'}
118
+ className="ff-projects-label"
119
+ >
120
+ <Tooltip title={option.label}>{option.label}</Tooltip>
121
+ </Typography>
122
+ </div>
123
+ )
124
+ )}
117
125
  </div>
118
126
  <div
119
127
  className={classNames(
120
128
  'option-card',
121
- `${options.length > 4 ? 'scroll' : ''}`
129
+ `${optionsList.length > 4 ? 'scroll' : ''}`
122
130
  )}
123
131
  >
124
- {options.map((option, index) => (
125
- <div
126
- key={index}
127
- onClick={() => handleSelectOption(option)}
128
- className={classNames('ff-projects-options', {
129
- ['ff-selected-option']: selectedOption.label === option.label,
130
- })}
131
- >
132
- <div className={classNames('ff-projects-icons')}>
133
- <Icon name={option.iconName} height={12} width={12} />
134
- </div>
135
- <Typography
136
- key={index}
137
- as={'div'}
138
- lineHeight={'30px'}
139
- className="ff-projects-label"
140
- >
141
- <Tooltip title={option.label}>{option.label}</Tooltip>
142
- </Typography>
143
- </div>
144
- ))}
132
+ {optionsList.map(
133
+ (option, index) =>
134
+ index > 0 && (
135
+ <div
136
+ key={index}
137
+ onClick={() => handleSelectOption(option)}
138
+ className={classNames('ff-projects-options', {
139
+ ['ff-selected-option']:
140
+ selectedOption.label === option.label,
141
+ })}
142
+ >
143
+ <div className={classNames('ff-projects-icons')}>
144
+ <Icon name={option.iconName} height={12} width={12} />
145
+ </div>
146
+ <Typography
147
+ key={index}
148
+ as={'div'}
149
+ lineHeight={'30px'}
150
+ className="ff-projects-label"
151
+ >
152
+ <Tooltip title={option.label}>{option.label}</Tooltip>
153
+ </Typography>
154
+ </div>
155
+ )
156
+ )}
145
157
  </div>
146
158
  </div>
147
159
  )}
@@ -2,7 +2,6 @@
2
2
  @use '../../assets/styles/fonts';
3
3
 
4
4
  .ff-button {
5
- width: auto;
6
5
  background-color: var(--primary-button-text-color);
7
6
  border-radius: 4px;
8
7
  padding: 4px 8px;
@@ -0,0 +1,67 @@
1
+ @use '../../assets/styles/fonts';
2
+ @use '../../assets/styles/mixins' as *;
3
+
4
+ .ff-mobileskin-wrapper {
5
+ @include center-content;
6
+ flex-direction: column;
7
+
8
+ &.portrait {
9
+ gap: 30px;
10
+ }
11
+
12
+ &.landscape {
13
+ gap: 38px;
14
+ }
15
+ }
16
+
17
+ .ff-mobileskin-container {
18
+ @extend .ff-mobileskin-wrapper;
19
+ }
20
+
21
+ .ff-mobile-container {
22
+ border: 8px solid var(--text-color);
23
+ @include center-content;
24
+ position: relative;
25
+ overflow: hidden;
26
+
27
+ &::-webkit-scrollbar {
28
+ width: 0;
29
+ height: 0;
30
+ }
31
+
32
+ &::-webkit-scrollbar-thumb {
33
+ background-color: transparent;
34
+ }
35
+ }
36
+
37
+ .ff-mobile-image-container {
38
+ @include center-content;
39
+ overflow: hidden;
40
+ }
41
+
42
+ .ff-notch {
43
+ background-color: var(--text-color);
44
+ border-radius: 24px;
45
+ position: absolute;
46
+ }
47
+
48
+ .ff-nav-bar {
49
+ height: 32px;
50
+ padding: 8px;
51
+ display: flex;
52
+ justify-content: space-evenly;
53
+ align-items: center;
54
+ border: 1px solid var(--brand-color);
55
+ border-radius: 24px;
56
+ }
57
+
58
+ .ff-nav-bar-icon {
59
+ height: 16px;
60
+ padding: 8px;
61
+ border-right: 1px solid var(--brand-color);
62
+ @include center-content;
63
+
64
+ &.last-icon {
65
+ border-right: none;
66
+ }
67
+ }
@@ -0,0 +1,93 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import MobileSkin from './MobileSkin';
3
+
4
+ const meta: Meta<typeof MobileSkin> = {
5
+ title: 'Components/MobileSkin',
6
+ component: MobileSkin,
7
+ parameters: {
8
+ layout: 'padded',
9
+ },
10
+ tags: ['autodocs'],
11
+ };
12
+
13
+ const navBarIcons = [
14
+ {
15
+ title: 'Forward',
16
+ name: 'right_arrow_icon',
17
+ onClick: () => {},
18
+ height: 16,
19
+ width: 16,
20
+ },
21
+ {
22
+ title: 'Backward',
23
+ name: 'left_arrow_icon',
24
+ onClick: () => {},
25
+ height: 16,
26
+ width: 16,
27
+ },
28
+ {
29
+ title: 'Refresh',
30
+ name: 'refresh_icon',
31
+ onClick: () => {},
32
+ height: 16,
33
+ width: 16,
34
+ },
35
+ {
36
+ title: 'Capture',
37
+ name: 'minimize_script',
38
+ onClick: () => {},
39
+ height: 16,
40
+ width: 16,
41
+ },
42
+ {
43
+ title: 'Rotate',
44
+ name: 'replace_icon',
45
+ onClick: () => {},
46
+ height: 16,
47
+ width: 16,
48
+ },
49
+ ];
50
+ const randomImage: string =
51
+ 'https://plus.unsplash.com/premium_photo-1664303228186-a61e7dc91597?q=80&w=1384&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
52
+
53
+ type Story = StoryObj<typeof MobileSkin>;
54
+
55
+ const defaultArgs = {
56
+ navBarIcons: navBarIcons,
57
+ mobileWidth: 220,
58
+ mobileHeight: 448,
59
+ children: randomImage,
60
+ };
61
+
62
+ export const iosPortraitView: Story = {
63
+ args: {
64
+ ...defaultArgs,
65
+ orientation: 'portrait',
66
+ type: 'ios',
67
+ },
68
+ };
69
+
70
+ export const iosLandscapeView: Story = {
71
+ args: {
72
+ ...defaultArgs,
73
+ orientation: 'landscape',
74
+ type: 'ios',
75
+ },
76
+ };
77
+
78
+ export const androidPortraitView: Story = {
79
+ args: {
80
+ ...defaultArgs,
81
+ orientation: 'portrait',
82
+ type: 'android',
83
+ },
84
+ };
85
+
86
+ export const androidLandscapeView: Story = {
87
+ args: {
88
+ ...defaultArgs,
89
+ orientation: 'landscape',
90
+ type: 'android',
91
+ },
92
+ };
93
+ export default meta;
@@ -0,0 +1,88 @@
1
+ import React from 'react';
2
+ import './MobileSkin.scss';
3
+ import Icon from '../Icon';
4
+ import Tooltip from '../Tooltip';
5
+ import { MobileSkinProps } from './MobileSkinInterface';
6
+
7
+ const MobileSkin: React.FC<MobileSkinProps> = ({
8
+ children,
9
+ orientation = '',
10
+ type = '',
11
+ navBarIcons,
12
+ mobileHeight = 448,
13
+ mobileWidth = 220,
14
+ }) => {
15
+ const notchHeight = (mobileHeight / 448) * 20;
16
+ const notchWidth = (mobileWidth / 220) * 60;
17
+
18
+ const isPortrait = orientation === 'portrait';
19
+ const isIos = type === 'ios';
20
+ const containerHeight = isPortrait ? mobileHeight : mobileWidth;
21
+ const containerWidth = isPortrait ? mobileWidth : mobileHeight;
22
+
23
+ return (
24
+ <div
25
+ className={`ff-mobileskin-wrapper ${isPortrait ? 'portrait' : 'landscape'}`}
26
+ >
27
+ <div
28
+ className="ff-mobileskin-container"
29
+ style={{
30
+ height: containerHeight + 16,
31
+ width: containerWidth + 16,
32
+ }}
33
+ >
34
+ <div
35
+ className="ff-mobile-container"
36
+ style={{
37
+ width: containerWidth,
38
+ height: containerHeight,
39
+ borderRadius: isIos ? '30px' : '10px',
40
+ }}
41
+ >
42
+ <div className="ff-mobile-image-container">
43
+ {React.isValidElement(children) ? (
44
+ children
45
+ ) : (
46
+ <img
47
+ src={children as string}
48
+ alt="Mobile content"
49
+ style={{
50
+ width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
51
+ height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
52
+ }}
53
+ />
54
+ )}
55
+ </div>
56
+ </div>
57
+
58
+ {isIos && (
59
+ <div
60
+ className="ff-notch"
61
+ style={{
62
+ height: isPortrait ? notchHeight : notchWidth,
63
+ width: isPortrait ? notchWidth : notchHeight,
64
+ transform: isPortrait
65
+ ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.46}px)`
66
+ : `translate(${containerWidth * -0.46}px, ${containerHeight * -0.01}px)`,
67
+ }}
68
+ ></div>
69
+ )}
70
+ </div>
71
+ <div className="ff-nav-bar">
72
+ {navBarIcons.map((icon, index) => (
73
+ <div
74
+ key={index}
75
+ className={`ff-nav-bar-icon ${icon?.className || ''} ${
76
+ index === navBarIcons.length - 1 ? 'last-icon' : ''
77
+ }`}
78
+ onClick={icon.onClick}
79
+ >
80
+ <Tooltip title={icon?.title} children={<Icon {...icon} />} />
81
+ </div>
82
+ ))}
83
+ </div>
84
+ </div>
85
+ );
86
+ };
87
+
88
+ export default MobileSkin;
@@ -0,0 +1,13 @@
1
+ interface NavBarIcon {
2
+ name: string;
3
+ [key: string]: any;
4
+ }
5
+
6
+ export interface MobileSkinProps {
7
+ children: React.ReactNode | string;
8
+ orientation?: 'portrait' | 'landscape';
9
+ type: 'ios' | 'android';
10
+ navBarIcons: NavBarIcon[];
11
+ mobileHeight?: number;
12
+ mobileWidth?: number;
13
+ }
@@ -0,0 +1 @@
1
+ export { default } from './MobileSkin';
@@ -0,0 +1,32 @@
1
+ export interface iconDetails {
2
+ /**
3
+ * details of each icon
4
+ */
5
+ [key: string]: any;
6
+ }
7
+ export interface MobileSkinProps {
8
+ /**
9
+ * The content inside the mobile skin component
10
+ */
11
+ children: React.ReactNode | string;
12
+ /**
13
+ * Portrait or landScape View of the Mobile
14
+ */
15
+ orientation: string;
16
+ /**
17
+ * type either it will be ios or android
18
+ */
19
+ type: string;
20
+ /**
21
+ * height of the MobileSkin
22
+ */
23
+ mobileHeight?: number;
24
+ /**
25
+ * width of the MobileSkin
26
+ */
27
+ mobileWidth?: number;
28
+ /**
29
+ * takes the icons details like icon name , title, onClick event, height , width, etc
30
+ */
31
+ navbarIcons: Array<iconDetails>;
32
+ }
@@ -86,12 +86,20 @@
86
86
  cursor: pointer;
87
87
  width: 22px;
88
88
  padding-top: 1px;
89
+
90
+ &.showClose {
91
+ display: none
92
+ }
89
93
  }
90
94
 
91
95
  .ff-search-close-icon {
92
96
  margin: 4px;
93
97
  cursor: pointer;
94
98
 
99
+ &.showClose {
100
+ display: none
101
+ }
102
+
95
103
  .ff-icon-container {
96
104
  svg {
97
105
  path {
@@ -16,12 +16,13 @@ const Search = ({
16
16
  isExpand = false,
17
17
  onClose,
18
18
  onExpand,
19
+ showClose = true,
19
20
  }: SearchProps) => {
20
21
  const [searchValue, setSearchValue] = useState<string>(value);
21
22
  const inputRef = useRef<HTMLInputElement>(null);
22
23
 
23
24
  useEffect(() => {
24
- if (isExpand && inputRef.current) {
25
+ if (isExpand && inputRef.current && showClose) {
25
26
  inputRef.current.focus();
26
27
  }
27
28
  setSearchValue('');
@@ -45,7 +46,7 @@ const Search = ({
45
46
  if (label === 'Close') {
46
47
  onClose?.();
47
48
  }
48
- if (label === 'Clear' && isExpand && inputRef.current) {
49
+ if (label === 'Clear' && isExpand && inputRef.current && showClose) {
49
50
  inputRef.current.focus();
50
51
  }
51
52
  };
@@ -57,8 +58,12 @@ const Search = ({
57
58
  };
58
59
  const handleChange = (data: string) => {
59
60
  setSearchValue(data);
60
- if (data === '') {
61
- onSearch('');
61
+ if (showClose) {
62
+ if (data === '') {
63
+ onSearch('');
64
+ }
65
+ } else {
66
+ onSearch(data);
62
67
  }
63
68
  };
64
69
 
@@ -105,7 +110,9 @@ const Search = ({
105
110
  {isExpand && (
106
111
  <>
107
112
  <div
108
- className="ff-search-clear-button"
113
+ className={classNames('ff-search-clear-button', {
114
+ showClose: !showClose,
115
+ })}
109
116
  onClick={() => handleSearchClearAndClose('Clear')}
110
117
  >
111
118
  {searchValue !== '' && (
@@ -117,7 +124,11 @@ const Search = ({
117
124
  )}
118
125
  </div>
119
126
  <Tooltip title="Close">
120
- <div className="ff-search-close-icon">
127
+ <div
128
+ className={classNames('ff-search-close-icon', {
129
+ showClose: !showClose,
130
+ })}
131
+ >
121
132
  <Icon
122
133
  height={6}
123
134
  width={6}
@@ -16,4 +16,5 @@ export interface SearchProps {
16
16
  isExpand: boolean;
17
17
  onClose: () => void;
18
18
  onExpand: (isExpand: boolean) => void;
19
+ showClose?:boolean
19
20
  }
package/src/index.ts CHANGED
@@ -74,6 +74,7 @@ import ProgressBar from './components/ProgressBar';
74
74
  import ChooseFile from './components/ChooseFile/ChooseFile';
75
75
  import ScriptSwitchButton from './components/ScriptSwitchButton';
76
76
 
77
+ import MobileSkin from './components/MobileSkin';
77
78
  // Utils imports
78
79
  import { checkEmpty } from './utils/checkEmpty/checkEmpty';
79
80
  import {
@@ -97,6 +98,7 @@ import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
97
98
  import { capitalize } from './utils/capitalize/capitalize';
98
99
  import Comments from './components/Comment/Comments';
99
100
  import useFileDropzone from './hooks/useFileDropzone';
101
+ import useClickOutside from './hooks/useClickOutside';
100
102
  import PopUpModal from './components/PopUpModal/PopUpModal';
101
103
  import FormatString from './utils/FormatString/FormatString';
102
104
  import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
@@ -116,6 +118,7 @@ import {
116
118
  ALPHABET_ONLY_REGEX,
117
119
  NUMBERS_ONLY_REGEX,
118
120
  ALPHANUMERIC_REGEX,
121
+ ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
119
122
  DATE_REGEX,
120
123
  TIME_REGEX,
121
124
  FILE_EXTENSION_REGEX,
@@ -245,6 +248,7 @@ export {
245
248
  ProgressBar,
246
249
  ChooseFile,
247
250
  ScriptSwitchButton,
251
+ MobileSkin,
248
252
 
249
253
  // utils exports
250
254
  checkEmpty,
@@ -262,9 +266,11 @@ export {
262
266
  saveFileFromBlob,
263
267
  capitalize,
264
268
  useFileDropzone,
269
+ useClickOutside,
265
270
  FormatString,
266
271
  hasDuplicateFile,
267
272
  useKeyboardActions,
273
+
268
274
  EMAIL_REGEX,
269
275
  URL_REGEX,
270
276
  PHONE_REGEX,
@@ -277,6 +283,7 @@ export {
277
283
  ALPHABET_ONLY_REGEX,
278
284
  NUMBERS_ONLY_REGEX,
279
285
  ALPHANUMERIC_REGEX,
286
+ ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
280
287
  DATE_REGEX,
281
288
  TIME_REGEX,
282
289
  FILE_EXTENSION_REGEX,