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.
- package/.yarn/install-state.gz +0 -0
- package/lib/1fb4472b34e4fe07.css +1 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddVariables/AddVariables.d.ts +5 -0
- package/lib/components/AddVariables/index.d.ts +1 -0
- package/lib/components/AddVariables/types.d.ts +35 -0
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
- package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
- package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
- package/lib/components/Button/Button.stories.d.ts +13 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/ExcelFile/Types.d.ts +129 -0
- package/lib/components/ExcelFile/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/Form/Form.stories.d.ts +7 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/Icon/Icon.stories.d.ts +8 -0
- package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
- package/lib/components/MobileSkin/MobileSkin.d.ts +5 -0
- package/lib/components/MobileSkin/MobileSkinInterface.d.ts +13 -0
- package/lib/components/MobileSkin/index.d.ts +1 -0
- package/lib/components/MobileSkin/types.d.ts +32 -0
- package/lib/components/Modal/Modal.stories.d.ts +7 -0
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
- package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
- package/lib/components/NLPInput/type.d.ts +70 -0
- package/lib/components/Paper/Paper.stories.d.ts +11 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
- package/lib/components/Search/Search.d.ts +1 -1
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Search/types.d.ts +1 -0
- package/lib/components/Select/Select.stories.d.ts +14 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +3 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/Table/Table.stories.d.ts +13 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
- package/lib/index.d.ts +21 -2
- package/lib/index.esm.js +1519 -4596
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1521 -4595
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
- package/lib/utils/debounce/debounce.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/find/findAndInsert.d.ts +7 -0
- package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/lib/utils/throttle/throttle.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +7 -45
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +5 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +76 -64
- package/src/components/Button/Button.scss +0 -1
- package/src/components/MobileSkin/MobileSkin.scss +67 -0
- package/src/components/MobileSkin/MobileSkin.stories.tsx +93 -0
- package/src/components/MobileSkin/MobileSkin.tsx +88 -0
- package/src/components/MobileSkin/MobileSkinInterface.ts +13 -0
- package/src/components/MobileSkin/index.ts +1 -0
- package/src/components/MobileSkin/types.ts +32 -0
- package/src/components/Search/Search.scss +8 -0
- package/src/components/Search/Search.tsx +17 -6
- package/src/components/Search/types.ts +1 -0
- 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
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
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
|
-
<
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
{
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
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
|
-
`${
|
129
|
+
`${optionsList.length > 4 ? 'scroll' : ''}`
|
122
130
|
)}
|
123
131
|
>
|
124
|
-
{
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
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
|
)}
|
@@ -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 (
|
61
|
-
|
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=
|
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
|
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}
|
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,
|