react-native-ui-lib 7.39.0-snapshot.6479 → 7.39.0-snapshot.6483

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/icon/index.js +2 -2
  3. package/src/components/timeline/timeline.api.json +55 -104
  4. package/src/incubator/slider/Thumb.js +8 -1
  5. package/src/incubator/toast/toast.api.json +1 -1
  6. package/src/utils/imageUtils.d.ts +0 -1
  7. package/src/utils/imageUtils.js +0 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-ui-lib",
3
- "version": "7.39.0-snapshot.6479",
3
+ "version": "7.39.0-snapshot.6483",
4
4
  "main": "src/index.js",
5
5
  "types": "src/index.d.ts",
6
6
  "author": "Ethan Sharabi <ethan.shar@gmail.com>",
package/src/components/icon/index.js CHANGED
@@ -2,7 +2,7 @@ import isUndefined from 'lodash/isUndefined';
2
2
  import React, { useMemo, forwardRef } from 'react';
3
3
  import { Image, StyleSheet } from 'react-native';
4
4
  import { asBaseComponent, Constants } from "../../commons/new";
5
- import { getAsset, isSvg, isWebImageSource } from "../../utils/imageUtils";
5
+ import { getAsset, isSvg, isBase64ImageContent } from "../../utils/imageUtils";
6
6
  import Badge from "../badge";
7
7
  import SvgImage from "../svgImage";
8
8
 
@@ -56,7 +56,7 @@ const Icon = forwardRef((props, ref) => {
56
56
  tintColor
57
57
  }, style]} />;
58
58
  const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props} />;
59
- if (isWebImageSource(source)) {
59
+ if (typeof source === 'string' && isBase64ImageContent(source) && Constants.isWeb) {
60
60
  return renderImage();
61
61
  }
62
62
  return <>
package/src/components/timeline/timeline.api.json CHANGED
@@ -29,30 +29,18 @@
29
29
  }
30
30
  ],
31
31
  "snippet": [
32
- "<Timeline ",
33
- " topLine={{",
34
- " state: Timeline.states.ERROR",
35
- " }$1}",
36
- " bottomLine={{",
37
- " type: Timeline.lineTypes.DASHED,",
38
- " color: Colors.orange40",
39
- " }$2}",
40
- " point={{",
41
- " type: Timeline.pointTypes.OUTLINE,",
42
- " color: Colors.orange40,",
43
- " icon: Assets.icons.demo.camera,",
44
- " anchorRef: alignToTitle ? titleRef : undefined",
45
- " }$3}",
32
+ "<Timeline",
33
+ " topLine={{type: Timeline.lineTypes.DASHED}}",
34
+ " bottomLine={{state: Timeline.states.SUCCESS}}",
35
+ " point={{state: Timeline.states.SUCCESS}}",
46
36
  ">",
47
- " <View flex centerH paddingH-20>",
48
- " <Text text70 dark10 ref={titleRef}>",
49
- " {title}",
50
- " </Text>",
51
- " <Text dark40>",
52
- " {description}",
53
- " </Text>",
54
- " </View>",
55
- "</Timeline>"
37
+ " <View padding-20 bg-grey60 br30>",
38
+ " <Text text70BO>Title</Text>",
39
+ " <View marginT-5 padding-8 bg-white br30>",
40
+ " <Text>Description</Text>",
41
+ " </View>",
42
+ " </View>",
43
+ " </Timeline>"
56
44
  ],
57
45
  "docs": {
58
46
  "hero": {
@@ -138,29 +126,7 @@
138
126
  "title": "Current",
139
127
  "content": [
140
128
  {
141
- "props": {
142
- "state": "current",
143
- "point": {
144
- "type": {
145
- "type": "bullet"
146
- }
147
- },
148
- "bottomLine": {
149
- "type": {
150
- "type": "solid"
151
- }
152
- }
153
- }
154
- },
155
- {
156
- "props": {
157
- "point": {
158
- "type": {
159
- "type": "bullet",
160
- "color": "#116DFF"
161
- }
162
- }
163
- }
129
+ "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} bottomLine={{state: Timeline.states.CURRENT}} point={{state: Timeline.states.CURRENT}}><View style={{height: 88}}/></Timeline>"
164
130
  }
165
131
  ],
166
132
  "description": "state: current"
@@ -169,19 +135,7 @@
169
135
  "title": "Next",
170
136
  "content": [
171
137
  {
172
- "props": {
173
- "state": "next",
174
- "point": {
175
- "type": {
176
- "type": "bullet"
177
- }
178
- },
179
- "bottomLine": {
180
- "type": {
181
- "type": "solid"
182
- }
183
- }
184
- }
138
+ "snippet": "<Timeline topLine={{state: Timeline.states.NEXT}} bottomLine={{state: Timeline.states.NEXT}} point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
185
139
  }
186
140
  ],
187
141
  "description": "state: next"
@@ -190,19 +144,7 @@
190
144
  "title": "Error",
191
145
  "content": [
192
146
  {
193
- "props": {
194
- "state": "error",
195
- "point": {
196
- "type": {
197
- "type": "bullet"
198
- }
199
- },
200
- "bottomLine": {
201
- "type": {
202
- "type": "solid"
203
- }
204
- }
205
- }
147
+ "snippet": "<Timeline topLine={{state: Timeline.states.ERROR}} bottomLine={{state: Timeline.states.ERROR}} point={{state: Timeline.states.ERROR}}><View style={{height: 88}}/></Timeline>"
206
148
  }
207
149
  ],
208
150
  "description": "state: error"
@@ -211,19 +153,7 @@
211
153
  "title": "Success",
212
154
  "content": [
213
155
  {
214
- "props": {
215
- "state": "success",
216
- "point": {
217
- "type": {
218
- "type": "bullet"
219
- }
220
- },
221
- "bottomLine": {
222
- "type": {
223
- "type": "solid"
224
- }
225
- }
226
- }
156
+ "snippet": "<Timeline topLine={{state: Timeline.states.SUCCESS}} bottomLine={{state: Timeline.states.SUCCESS}} point={{state: Timeline.states.SUCCESS}}><View style={{height: 88}}/></Timeline>"
227
157
  }
228
158
  ],
229
159
  "description": "state: success"
@@ -238,15 +168,30 @@
238
168
  "items": [
239
169
  {
240
170
  "title": "Bullet",
241
- "description": "type: bullet"
171
+ "description": "type: bullet",
172
+ "content": [
173
+ {
174
+ "snippet": "<Timeline point={{type: Timeline.pointTypes.BULLET}}><View style={{height: 88}}/></Timeline>"
175
+ }
176
+ ]
242
177
  },
243
178
  {
244
179
  "title": "Circle",
245
- "description": "type: circle"
180
+ "description": "type: circle",
181
+ "content": [
182
+ {
183
+ "snippet": "<Timeline point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
184
+ }
185
+ ]
246
186
  },
247
187
  {
248
188
  "title": "Outline",
249
- "description": "type: outline"
189
+ "description": "type: outline",
190
+ "content": [
191
+ {
192
+ "snippet": "<Timeline point={{type: Timeline.pointTypes.OUTLINE}}><View style={{height: 88}}/></Timeline>"
193
+ }
194
+ ]
250
195
  }
251
196
  ],
252
197
  "title": "Point",
@@ -260,14 +205,7 @@
260
205
  "title": "Text",
261
206
  "content": [
262
207
  {
263
- "props": {
264
- "state": "current",
265
- "bottomLine": {
266
- "type": {
267
- "type": "solid"
268
- }
269
- }
270
- }
208
+ "snippet": "<Timeline point={{label: '1'}}><View style={{height: 88}}/></Timeline>"
271
209
  }
272
210
  ],
273
211
  "description": "text: “1”"
@@ -276,20 +214,18 @@
276
214
  "title": "Icon",
277
215
  "content": [
278
216
  {
279
- "props": {
280
- "state": "current",
281
- "bottomLine": {
282
- "type": {
283
- "type": "dashed"
284
- }
285
- }
286
- }
217
+ "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.icons.checkSmall}}><View style={{height: 88}}/></Timeline>"
287
218
  }
288
219
  ],
289
220
  "description": "icon: Assets.icons.general.checkmarkSmall"
290
221
  },
291
222
  {
292
223
  "title": "Icon without background",
224
+ "content": [
225
+ {
226
+ "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.icons.search, removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
227
+ }
228
+ ],
293
229
  "description": "icon: Assets.icons.general.favorite, removeIconBackground: true"
294
230
  }
295
231
  ],
@@ -301,10 +237,20 @@
301
237
  "items": [
302
238
  {
303
239
  "title": "Solid",
240
+ "content": [
241
+ {
242
+ "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
243
+ }
244
+ ],
304
245
  "description": "type: solid"
305
246
  },
306
247
  {
307
248
  "title": "Dashed",
249
+ "content": [
250
+ {
251
+ "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT, type: Timeline.lineTypes.DASHED}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
252
+ }
253
+ ],
308
254
  "description": "type: dashed"
309
255
  }
310
256
  ],
@@ -317,6 +263,11 @@
317
263
  "items": [
318
264
  {
319
265
  "title": "Entry",
266
+ "content": [
267
+ {
268
+ "snippet": "<Timeline topLine={{state: Timeline.states.NEXT, entry: true}} bottomLine={{state: Timeline.states.NEXT, entry: true}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
269
+ }
270
+ ],
320
271
  "description": "entry: true"
321
272
  }
322
273
  ],
package/src/incubator/slider/Thumb.js CHANGED
@@ -7,13 +7,20 @@ import View from "../../components/view";
7
7
  import { Constants } from "../../commons/new";
8
8
  const SHADOW_RADIUS = 4;
9
9
  const THUMB_SIZE = 24;
10
+ const THUMB_ACCESSIBLE_HITSLOP = Math.max(0, 48 - THUMB_SIZE) / 2;
11
+ const DEFAULT_THUMB_HIT_SLOP = {
12
+ top: THUMB_ACCESSIBLE_HITSLOP,
13
+ bottom: THUMB_ACCESSIBLE_HITSLOP,
14
+ left: THUMB_ACCESSIBLE_HITSLOP,
15
+ right: THUMB_ACCESSIBLE_HITSLOP
16
+ };
10
17
  const Thumb = props => {
11
18
  const {
12
19
  disabled,
13
20
  disableActiveStyling,
14
21
  activeStyle,
15
22
  defaultStyle,
16
- hitSlop,
23
+ hitSlop = DEFAULT_THUMB_HIT_SLOP,
17
24
  onSeekStart,
18
25
  onSeekEnd,
19
26
  start,
package/src/incubator/toast/toast.api.json CHANGED
@@ -104,7 +104,7 @@
104
104
  {
105
105
  "props": {
106
106
  "visible": true,
107
- "message": "\"Mika Or\" was saved to contacts."
107
+ "message": "Mika Or was saved to contacts."
108
108
  }
109
109
  }
110
110
  ]
package/src/utils/imageUtils.d.ts CHANGED
@@ -3,4 +3,3 @@ export declare function isSvgUri(source?: ImageSourceType): any;
3
3
  export declare function isSvg(source?: ImageSourceType): any;
4
4
  export declare function isBase64ImageContent(data: string): boolean;
5
5
  export declare function getAsset(assetName?: string, assetGroup?: string): any;
6
- export declare function isWebImageSource(source?: ImageSourceType): boolean;
package/src/utils/imageUtils.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import get from 'lodash/get';
2
2
  import Assets from "../assets";
3
- import Constants from "../commons/Constants";
4
3
  export function isSvgUri(source) {
5
4
  // @ts-expect-error
6
5
  return typeof source === 'object' && source?.uri?.endsWith?.('.svg');
@@ -21,10 +20,4 @@ function isSvgData(source) {
21
20
  const sourceString = source;
22
21
  return sourceString.includes('</svg>') || sourceString.includes('data:image/svg');
23
22
  }
24
- }
25
- export function isWebImageSource(source) {
26
- const isSourceString =
27
- //@ts-ignore
28
- typeof source === 'object' && typeof source?.default === 'string' && isBase64ImageContent(source.default) || typeof source === 'string' && isBase64ImageContent(source);
29
- return isSourceString && Constants.isWeb;
30
23
  }