react-crud-mobile 1.0.68 → 1.0.70

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 (8) hide show
  1. package/dist/react-crud-mobile.cjs.development.js +78 -72
  2. package/dist/react-crud-mobile.cjs.development.js.map +1 -1
  3. package/dist/react-crud-mobile.cjs.production.min.js +1 -1
  4. package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
  5. package/dist/react-crud-mobile.esm.js +79 -73
  6. package/dist/react-crud-mobile.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/elements/UIElement.tsx +134 -122
package/src/elements/UIElement.tsx CHANGED
@@ -22,7 +22,15 @@ import Switch from './core/Switch';
22
22
  import Option from './core/Option';
23
23
  import Radio from './core/Radio';
24
24
  import Input from './core/Input';
25
- import { Image, Linking, StyleSheet, Text, View } from 'react-native';
25
+ import {
26
+ Image,
27
+ Linking,
28
+ StyleSheet,
29
+ Text,
30
+ Keyboard,
31
+ TouchableWithoutFeedback,
32
+ View,
33
+ } from 'react-native';
26
34
 
27
35
  export default function UIElement(props: ElementType) {
28
36
  let [scope] = useState(ScopeUtils.create(props));
@@ -257,136 +265,140 @@ export default function UIElement(props: ElementType) {
257
265
  return (
258
266
  <>
259
267
  <View ref={ref} style={getStyle()}>
260
- {isShowLabel() && (
261
- <Text style={getStyle('label')}>{scope.getLabel()}</Text>
262
- )}
263
- {isShowInner() && (
268
+ <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
264
269
  <>
265
- <View style={getStyle('inner')}>
266
- {scope.is('type', 'button') && (
267
- <Button
268
- {...defaultsUI}
269
- onClick={onClick}
270
- variant={scope.attr('variant', 'outlined')}
271
- >
272
- {original.icon && <CustomIcon />}
273
- {original.label && (
274
- <Text style={scope.getPart('label', 'button')}>
275
- {scope.getLabel()}
276
- </Text>
270
+ {isShowLabel() && (
271
+ <Text style={getStyle('label')}>{scope.getLabel()}</Text>
272
+ )}
273
+ {isShowInner() && (
274
+ <>
275
+ <View style={getStyle('inner')}>
276
+ {scope.is('type', 'button') && (
277
+ <Button
278
+ {...defaultsUI}
279
+ onClick={onClick}
280
+ variant={scope.attr('variant', 'outlined')}
281
+ >
282
+ {original.icon && <CustomIcon />}
283
+ {original.label && (
284
+ <Text style={scope.getPart('label', 'button')}>
285
+ {scope.getLabel()}
286
+ </Text>
287
+ )}
288
+ </Button>
289
+ )}
290
+ {scope.is('type', 'icon') && (
291
+ <Icon
292
+ {...defaultsUI}
293
+ onClick={onClick}
294
+ variant={scope.attr('variant', 'outlined')}
295
+ >
296
+ {scope.getDisplayValue()}
297
+ </Icon>
298
+ )}
299
+ {scope.is('type', 'link') && (
300
+ <Link
301
+ {...defaultsUI}
302
+ onClick={onClick}
303
+ variant={scope.attr('variant', 'outlined')}
304
+ >
305
+ {original.icon && <CustomIcon />}
306
+ {original.label && (
307
+ <Text style={scope.getPart('label', 'link')}>
308
+ {scope.getLabel()}
309
+ </Text>
310
+ )}
311
+ </Link>
312
+ )}
313
+ {scope.is(
314
+ 'type',
315
+ 'text',
316
+ 'number',
317
+ 'phone',
318
+ 'postalCode',
319
+ 'money',
320
+ 'password',
321
+ 'email'
322
+ ) && (
323
+ <Input
324
+ {...defaultsInput}
325
+ {...defaultsUI}
326
+ InputProps={{ ...original.inputProps }}
327
+ />
277
328
  )}
278
- </Button>
279
- )}
280
- {scope.is('type', 'icon') && (
281
- <Icon
282
- {...defaultsUI}
283
- onClick={onClick}
284
- variant={scope.attr('variant', 'outlined')}
285
- >
286
- {scope.getDisplayValue()}
287
- </Icon>
288
- )}
289
- {scope.is('type', 'link') && (
290
- <Link
291
- {...defaultsUI}
292
- onClick={onClick}
293
- variant={scope.attr('variant', 'outlined')}
294
- >
295
- {original.icon && <CustomIcon />}
296
- {original.label && (
297
- <Text style={scope.getPart('label', 'link')}>
298
- {scope.getLabel()}
299
- </Text>
329
+ {scope.is('type', 'complete', 'autocomplete') && (
330
+ <UIComplete
331
+ scope={scope}
332
+ defaultsInput={defaultsInput}
333
+ defaultsUI={defaultsUI}
334
+ />
300
335
  )}
301
- </Link>
302
- )}
303
- {scope.is(
304
- 'type',
305
- 'text',
306
- 'number',
307
- 'phone',
308
- 'postalCode',
309
- 'money',
310
- 'password',
311
- 'email'
312
- ) && (
313
- <Input
314
- {...defaultsInput}
315
- {...defaultsUI}
316
- InputProps={{ ...original.inputProps }}
317
- />
318
- )}
319
- {scope.is('type', 'complete', 'autocomplete') && (
320
- <UIComplete
321
- scope={scope}
322
- defaultsInput={defaultsInput}
323
- defaultsUI={defaultsUI}
324
- />
325
- )}
326
- {scope.is('type', 'checkbox', 'boolean', 'switch') && (
327
- <Switch
328
- checked={isChecked()}
329
- {...defaultsInput}
330
- onChange={onCheck}
331
- />
332
- )}
333
- {scope.is('type', 'select') && (
334
- <Select
335
- {...defaultsInput}
336
- {...defaultsUI}
337
- value={scope.getSelectedValue()}
338
- >
339
- <Option value={''}>Selecione</Option>
340
- {options.map((row: any, i: number) => (
341
- <Option key={'i' + i} value={row.value}>
342
- {row.label}
343
- </Option>
344
- ))}
345
- </Select>
346
- )}
347
- {scope.is('type', 'radio') && (
348
- <Radio {...defaultsInput} {...defaultsUI} row>
349
- {options.map((row: any, i: number) => (
350
- <Option
351
- key={'i' + i}
352
- control={<Radio {...defaultsUI} />}
353
- label={row.label}
354
- value={row.value}
336
+ {scope.is('type', 'checkbox', 'boolean', 'switch') && (
337
+ <Switch
338
+ checked={isChecked()}
339
+ {...defaultsInput}
340
+ onChange={onCheck}
355
341
  />
356
- ))}
357
- </Radio>
358
- )}
359
- {scope.is('type', 'custom') && <Custom />}
360
- {scope.is('type', 'column') && (
361
- <>
362
- {scope.is('format', 'img') && (
363
- <Image source={scope.getDisplayValue()} />
364
342
  )}
365
- {scope.is('format', 'icon') && (
366
- <Icon className={scope.getDisplayValue()} />
343
+ {scope.is('type', 'select') && (
344
+ <Select
345
+ {...defaultsInput}
346
+ {...defaultsUI}
347
+ value={scope.getSelectedValue()}
348
+ >
349
+ <Option value={''}>Selecione</Option>
350
+ {options.map((row: any, i: number) => (
351
+ <Option key={'i' + i} value={row.value}>
352
+ {row.label}
353
+ </Option>
354
+ ))}
355
+ </Select>
356
+ )}
357
+ {scope.is('type', 'radio') && (
358
+ <Radio {...defaultsInput} {...defaultsUI} row>
359
+ {options.map((row: any, i: number) => (
360
+ <Option
361
+ key={'i' + i}
362
+ control={<Radio {...defaultsUI} />}
363
+ label={row.label}
364
+ value={row.value}
365
+ />
366
+ ))}
367
+ </Radio>
368
+ )}
369
+ {scope.is('type', 'custom') && <Custom />}
370
+ {scope.is('type', 'column') && (
371
+ <>
372
+ {scope.is('format', 'img') && (
373
+ <Image source={scope.getDisplayValue()} />
374
+ )}
375
+ {scope.is('format', 'icon') && (
376
+ <Icon className={scope.getDisplayValue()} />
377
+ )}
378
+ {!scope.is('format', 'icon', 'img') && (
379
+ <Text>{scope.getDisplayValue()}</Text>
380
+ )}
381
+ </>
367
382
  )}
368
- {!scope.is('format', 'icon', 'img') && (
383
+ {scope.is('type', 'output') && (
369
384
  <Text>{scope.getDisplayValue()}</Text>
370
385
  )}
371
- </>
372
- )}
373
- {scope.is('type', 'output') && (
374
- <Text>{scope.getDisplayValue()}</Text>
375
- )}
376
- </View>
377
- {error && <View style={getStyle('error')}>{error}</View>}
386
+ </View>
387
+ {error && <View style={getStyle('error')}>{error}</View>}
388
+ </>
389
+ )}
390
+ <CurrentRouter />
391
+ {!scope.is(
392
+ 'type',
393
+ 'card',
394
+ 'tabs',
395
+ 'grid',
396
+ 'list',
397
+ 'define',
398
+ 'repeat'
399
+ ) && <UIChildren {...props} scope={scope} crud={crud} />}
378
400
  </>
379
- )}
380
- <CurrentRouter />
381
- {!scope.is(
382
- 'type',
383
- 'card',
384
- 'tabs',
385
- 'grid',
386
- 'list',
387
- 'define',
388
- 'repeat'
389
- ) && <UIChildren {...props} scope={scope} crud={crud} />}
401
+ </TouchableWithoutFeedback>
390
402
  </View>
391
403
  </>
392
404
  );